Congrats on 1.0 and really appreciate all the work involved. One thing that I'd love to see is more demos around optimistic UI's. It's a lot of work, but Ryan Florence from Remix did a whole playlist [1] around recreating Trello in Remix.

One video or demo in particular that had some functionality I'd love to see in LiveView (or demo on how to do it) is Optimistic UI and Optimistic Add and Drag and Drop (the last three videos in the playlist).

1. https://www.youtube.com/playlist?list=PLXoynULbYuED9b2k5LS44...

I need to polish the code, but here's more advanced optimistic UI example added to an existing demo app (TodoTrek). It uses recent LiveView features that allows any client code to hook into the full optimistic UI/server sync primitives that are built into LV:

https://x.com/chris_mccord/status/1864160634394325038

Very cool! Are those recent features documented anywhere? I can't find anything in the latest docs about hooking into LV's server sync primitives.

Is this out in v1.0.0 or is it an upcoming feature?

Congrats! Been running a startup off only liveview for about a year as a solo dev and it's been wonderful. Appreciate the work you all do.

Selfish demo idea: Bi-directional cursor based infinite pagination with largish datasets with state managed in the url and streaming updates that change the order of the results. Like some kind of soft realtime leaderboard.

With long render times (morphdom bench on large sets isn't great as far as I can tell) it's hard to escape the jank. Particularly on slow connections.

How much state is it safe to store in the URL these days?

Still not much, realistically 4096 bytes or less.

Browsers aren’t as much the issue as they’ve been in the past, but I’ve hit snags with proxies, old servers, etc.

How does pagination in urls work nowadays? You'd need ~3 bytes to index a reasonable number of pages naively, no?

But curious what current art is re: performance optimizations between frontend and backend. Or is it simply page indices?

If you do limit/offset on database side, page number is enough. Though this doesn't work well for bigger page numbers. There's other ways to do pagination, e.g. with "cursors", where cursor is simply id of last record on previous page. SQL query is very efficient, but jumping to page X is impossible. In this scenario storing cursors for past pages is needed

There are libraries for Ecto that help with this.

https://github.com/duffelhq/paginator

Careful that this library last I used it (2020 or so) used a particularly insecure encoding of the cursor that basically allows remote execution. Not sure if they ever addressed it.

Here's the fork I created at the time to work around some of these issues: https://github.com/1player/paginator

Thanks for pointing that out.

Thanks to thread for the informative responses! (And the useful README on your fork/the upstream)

I try to assume someone's thought of better than the best I could, or at least learned the hard way what edge cases need to be handled.

This looks like it was fixed

* https://github.com/duffelhq/paginator/blob/main/lib/paginato...

* https://github.com/duffelhq/paginator/blob/main/test/paginat...

Will keep this in mind! My ElixirConfEU keynote just used limit/offset pagination, but shows how easy it is to do bidirectional infinite pagination. Streams allows you to keep a virtualized infinite list in the DOM without keeping the giant collection around on either client or server, example:

https://www.youtube.com/watch?v=FADQAnq0RpA&t=2322s

This demo doesn't update the URL to keep state (but push_patch would make that trivial). I'll think about more complex examples for cursor pagination, but the solution to massive collections (thousands of entries) is going to be stream + limit

Thanks! That is the approach I took, though I believe reordering rows requires a reset.

So in that demo, I'm curious how smooth the scroll would be when adding latency via the debug tools in the browser console. Even with some padding and fiddling with limi ts I've had trouble getting it to be an enjoyable experience. Just bouncy if that makes sense. More frustrating on mobile than desktop. With localhost latency it's great.

I'm thinking it may just need a hook to preload rows or something of that nature to provide space for the render. Though my CSS could very well be wrong.

flop_phoenix is great. If it lacks anything maybe it'd be great to just enhance it instead of building anything new. The author also has cursor based functionality

I highly recommend checking out [Flop](https://hexdocs.pm/flop/readme.html) and its Phoenix.Component [Flop Phoenix](https://hexdocs.pm/flop_phoenix/readme.html).

Its extremely easy to customize and build a reusable paginated table component

Second that

The flop is a good idea. Love the flop

Congratulations Chris! I started using LiveView shortly after the beta was released. A few of my coworkers were really excited to try it out, so I was tasked with recreating our company's login page with LiveView. Needless to say, there were… ahem… growing pains—but it was super fun to encounter a problem and then just have it go away the following week because of some new update to LiveView.

I don't do much (any?) web development these days, but LiveView gave me—a backend dev—the confidence to spin up my own web apps with classy UIs. Thank you so much for all your work!

I’ve been looking forward to this for a long time!

Congrats to you and everyone else who made it happen!

(Is it possible to add RSS to the blog? The articles are great but there is no good way to stay up to date.)

Done! https://phoenixframework.org/feed

You can thank Steffen from the Phoenix team :)

"Phoenix" is misspelled in the title of the Atom feed. Sorry for reporting this here, I looked for a repository to open a fix PR but couldn't find one, the previous Phoenix site repo is archived.

I build 3 client projects in 3 months with Phoenix and Live View (and Ash!). Thank you so much!

Thank you for everything!! I've shipped quite a few successful apps to clients on Phoenix ever since the beginning, and am about to launch a startup on it. It's truly changed my career more than maybe any other library.

Maybe this isn't the best place for feedback, but I was inspired to give this a go. Sadly it didn't work out. First error was:

  sh: line 1: Application: command not found

By visiting https://new.phoenixframework.org/test-elixir-app, I could see the proper output:

  Application name must start with a letter and have only lowercase letters, numbers and underscore

So I changed to test_elixir_app, and got this output:

  downloading https://github.com/elixir-lang/elixir/releases/download/v1.17.3/elixir-otp-27.zip
  fedora is not supported

This was a spur of the moment thing, so maybe I'll try from an Ubuntu machine or something another time, but the friction was unfortunate. Grats on the launch though, the demo gif of using the project installer looked great.

I will see if we can do something about fedora, but we now convert hyphens to underscores because I'm sure that will trip more folks up – thanks!

For fedora, Elixir has instructions on their site:

    sudo dnf install elixir erlang

https://elixir-lang.org/install.html

I'd love to make it work for elixir install if we can though :)

I generally recommend using ASDF to install Erlang/Elixir, it has support for Fedora.

https://asdf-vm.com/guide/getting-started.html https://github.com/asdf-vm/asdf-erlang https://github.com/asdf-vm/asdf-elixir

Slightly more ceremony than curl | sh, but a good tool to have.

What does "support for Fedora" means in this context ?

It supports most OSes rather nicely, check the docs for a long list of config options. It creates a local package store and configures your user's path for it, each tool is managed with a custom plugin that IME works flawlessly and versions are handled better than anything else I've ever used. It's the only way I'll install Golang or NodeJS lately, and I had good luck with it for Java too.

I prefer sdkman.io for the JVM, has most of the things for stuff that runs on it in one place, including Clojure tooling and Quarkus and whatnot.

Ah cool, maybe I'll check it out someday. JVM isn't a huge part of my daily work though so I'm pretty happy having it managed the same way as everything else for now. I like the intuitive simplicity of a .tool-versions file in a repo that supports a huge variety of tools.

Dependencies are in dnf, should just work with the common shells.

Mise also has support

https://mise.jdx.dev/

mise should get precompiled erlang on macos today too

I think Mise is better than ASDF - they have a whole document on why their approach is better than the shims used by ASDF. Both seem fine though.

How does it handle the wx stuff and whatnot that's required for Observer?

Seems to have more project management and make-like capabilities, I can see why someone might find that attractive but it's not for me.

Congratulations!! The much awaited is finally here.

With Liveview the network gap between the client and the server dissolves. It's just magical.

Thank you Cris, Jose and the whole team for making the lives of developers easier.

Thank you Chris. Though it is clear that the similarity between Elixir and Ruby is only superficial, I cannot refrain from seeing your and José's work as a reflection and evolution of the work started with Ruby and Rails. Which includes the friendly community, the pragmatism to build solid software for people that need to ship, and the excellent stewardship of the Elixir and Phoenix projects.

I'm a full time Elixir developer since 2016 and it's still my favourite programming environment. I've recently had a client notice how smooth the dashboard I threw together in an hour feels, and he doesn't know that I have not written a single line of Javascript to build it.

Thank you!

Congrats to you and the rest of the team on the big milestone accomplishment. A very cool demo would be a retake on your “road to 2 million web socket connections” but now leveraging LiveView.

URL: https://www.phoenixframework.org/blog/the-road-to-2-million-...

Hi Chris

Many thanks for all the years of dedication to Phoenix and value you've given to developers around the world.

OT: any thought about updating the 9-year old perf benchmark blog post? And is bandit now recommended over cowboy?

https://www.phoenixframework.org/blog/the-road-to-2-million-...

totally this! maybe a 10 anniversary thing next year..

Bandit is now the default in Phoenix.

Congrats on the release Chris!

What JS solution/approach would you recommend to use with LiveView for pure client-side stuff?

I'm not Chris but people have reported success and very low friction when using HTMX.

HTMX is not really for pure client-side interactions. Usually people combine it with something like Alpine.

I use StimulusJS

Thank you and the team for your hard work, and congratulations on the release!

Suggestions for Demos:

1.Charting Libraries Integration

There’s currently a lack of demos showcasing LiveView integrated with powerful charting libraries like Apache ECharts, Plot, Chart.js, etc. A demo of a LiveView-powered dashboard using one of these libraries, connected to a database like SQLite (for simplicity) or DuckDB (for speed and demonstrating integrations beyond Ecto-native DBs), would be fantastic.

Emphasizes interactivity: For example, demonstrate how a server-based LiveView can handle actions such as mouse hover on a chart to update tooltips/labels, click-and-zoom interactions, or connected charts with brush functionality.

2.UI Component Libraries

A demo showcasing robust integration with UI component libraries would also be valuable. Features like tables with pagination, sorting, filtering, and autocomplete/typeahead functionality within modals could be a strong focus.

I’d suggest leveraging lightweight libraries like Flowbite or Preline, as they integrate seamlessly with Phoenix and rely on almost pure HTML and Tailwind for styling.

For additional inspiration on speedy charting libraries, this resource might be useful:

https://github.com/leeoniya/uPlot

I wonder if it would be possible to make a Phoenix LiveView "Live" that runs in the browser for testing similar to Wordpress Playground: https://wordpress.org/playground/