chrismccord

chrismccord

Creator of Phoenix

Phoenix LiveView 1.0.0-rc.0 is out!

LiveView 1.0.0-rc.0 is out!

This 1.0 milestone comes almost six years after the first LiveView commit. I published a Phoenix blog highlighting our developments along the way, a few fun demos, and what we’re up to next.

Existing applications on 0.20.x should have a quick upgrade. We have one backwards compatible change that you can add back via a phx-feedback-for shim. Full changelog with shim notes:

Changelog

Backwards incompatible changes for 1.0

LiveView 1.0 removes the client-based phx-feedback-for annotation for showing and hiding input feedback, such as validation errors. This has been replaced by Phoenix.Component.used_input?/2, which handles showing and hiding feedback using standard server rendering.

A backwards-compatible shim can be used to maintain phx-feedback-for in your existing applications:

  1. Save the phx_feedback_dom.js shim to your local assets/js/phx_feedback_dom.js.
  2. Import it into your assets/js/app.js.
  3. Add a new dom option to your LiveSocket constructor, or wrap the existing value:
import {Socket} from "phoenix";
import {LiveSocket} from "phoenix_live_view"
import phxFeedbackDom from "./phx_feedback_dom"

let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
let liveSocket = new LiveSocket("/live", Socket, {
  params: {_csrf_token: csrfToken},
  dom: phxFeedbackDom({})
})

1.0.0-rc.0 :rocket: (2024-05-08)

Backwards incompatible changes

  • Remove phx-feedback-for in favor of Phoenix.Component.used_input?. See the changelog for a backwards compatible phx-feedback-for shim to add to existing applications.

Removal of previously deprecated functionality

  • live_component/2 and live_component/3 helpers (not the function component) have been removed

Bug fixes

  • Fix attributes of existing stream items not being updated on reset
  • Fix nested LiveView within streams becoming empty when reset
  • Fix phx-mounted firing twice, first on dead render, then on live render, leading to errors when a LiveComponent has not yet mounted
  • Fix JS.toggle_class error when used with a transition

Enhancements

  • Warn on mismatched client and server versions

Happy hacking!
–Chris

Most Liked

DevotionGeo

DevotionGeo

That’s fantastic news! Huge congratulations and thanks :folded_hands: to Chris McCord (@chrismccord) and the team for reaching this milestone.

This is a major achievement for the Elixir community!

It would be great to hear from course creators and book authors about when their Phoenix LiveView content will be updated for version 1.0.0. This will ensure new developers jumping into LiveView.

Here’s a quick rundown of some key content creators:

Hopefully, they can chime in and share their update timelines!


Feel free to edit, add more learning material, and mention their authors.

chrismccord

chrismccord

Creator of Phoenix

no, not something we’ll ever ship :slight_smile:

The whole promise of LiveView is you can add “realtime” the moment you need it, without suddenly rewriting everything and brining all this complexity. If you want good interactions with the backend, LiveView is the best choice from latency and overhead perspectives. With The LiveWire approach, you’ll have more load on the server because you’re hitting the database more frequently, doing TLS more frequently, etc. Payloads will be much larger. The only argument is memory footprint, of which the 1.0 blog outlines how a 1GB server has a theoretical max of 25k concurrent users, so even with real app workflows, many thousands of concurrent LiveView users would be no problem on small servers. As LostKonbrakai said, we have longpoll as well, with auto longpoll fallback if websockets fail, so websockets themselves also should not be a concern.

Nicodemus

Nicodemus

Awesome news! I’ve been wondering, is :phoenix_live_view going to be merged into the :phoenix hex package? It seems like this has been the plan since :phoenix_live_view contains Phoenix.Component. I know for newbies it’s very confusing why they have to go to :phoenix_live_view on hexdocs to find the documentation for function components that they’re using in layouts and non-live views. Maybe a Phoenix 2.0 release that bundles it all together? Or at least moves Phoenix.Component into :phoenix?

13
Post #9

Where Next?

Popular in Phoenix News Top

steffend
LiveView 1.2.0 is out now! Colocated CSS The biggest new feature is support for Colocated CSS, which is built on the work we did in 1.1 ...
New
chrismccord
As promised, the first release candidate of Phoenix 1.3.0 is out! This release focuses on code generators with improved project structure...
New
chrismccord
Phoenix 1.4.0 released Phoenix 1.4 is out! This release ships with exciting new features, most notably with HTTP2 support, improved deve...
688 30877 112
New
chrismccord
You can read the announcement on the blog, but I’ll dup most of it here for discussion purposes: ––––––––––––––––––––––––––––––––––––––...
451 13951 109
New
chrismccord
This release brings a number of exciting features, including integration with the new Phoenix LiveDashboard and Phoenix LiveView. There h...
New
chrismccord
Check the announcement blog for details! Blog duped here for convenience: Phoenix 1.8.0-rc released! The first release candidate of P...
418 13345 167
New
josevalim
We were notified by Panagiotis Nezis that certain payloads could take a long time to process when converted to integers. New Erlang/OTP v...
New
chrismccord
Hey folks, Phoenix 1.3.0 is out! The final release please brings tweaks to web directory and alias conventions that were estabished in t...
New
chrismccord
LiveView 1.0.0-rc.0 is out! This 1.0 milestone comes almost six years after the first LiveView commit. I published a Phoenix blog highli...
New
chrismccord
I’m pleased to announce the first release candidate of Phoenix 1.6.0 has landed on the heels of a fresh LiveView 0.16 release! This relea...
New

Other popular topics Top

9mm
I am constructing a JSON object (map) and I need to conditionally set a field. I’m trying to write proper elixir-way code… and I’m at a l...
New
senggen
Erlang/OTP 25 [erts-13.2.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] 15:22:35.803 [error] gen_event {lager_file_backend...
New
jononomo
I am trying to figure out how Mix knows whether the environment is test, dev, or prod – where is this set? Thanks.
New
msaraiva
Surface is an experimental library built on top of Phoenix LiveView and its new LiveComponent API that aims to provide a more declarative...
564 43622 214
New
chrismccord
This release brings a number of exciting features, including integration with the new Phoenix LiveDashboard and Phoenix LiveView. There h...
New
Qqwy
Original source of discussion: This topic on the Pragmatic Programmers’ Functional Web Development with Elixir, OTP, and Phoenix forum. ...
New
alice
Hey, Just curious what are the main benefits of Elixir compared to Clojure? When is Elixir more useful than Clojure and vice versa? Th...
New
vonH
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
New
bsollish-terakeet
Credo is smart enough to check for (something like) this: assert length(the_list) == 0 with this response: Checking if an enum is empt...
New
rms.mrcs
Hi, I need to transform a list of numbers into a map where the keys are the indexes and the values are the original values of the list. ...
New

Latest on Elixir Forum

Elixir Forum

We're in Beta

About us Mission Statement