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 :pray: 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
Pal

Pal

This is great news for Bruce & Sophie :slight_smile:

acangiano

acangiano

Fantastic news!

If you are a beginner and you’d like to try this out, follow these instructions:

  1. Generate a Phoenix project without the live dashboard (as it currently breaks dependencies):

    mix phx.new your_project --no-dashboard

  2. Edit mix.exs within your project and replace the line containing :phoenix_live_view with:

    {:phoenix_live_view, "~> 1.0.0-rc.0"},

  3. Run mix deps.get

  4. Go ahead and create your database, generate live views, migrate, etc.

Where Next?

Popular in Phoenix News Top

chrismccord
The final release of Phoenix 1.7 is out! Most of the new features have been outlined in the 1.7 RC thread, but it has been a few months s...
New
chrismccord
A minor vulnerability has been disclosed for applications redirecting to URLs provided by user input. Only applications passing user inpu...
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
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
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
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 ...
New
chrismccord
Phoenix 1.3.5, 1.4.18, 1.5.14, and 1.6.14 have been released to resolve a vulnerability in wildcard check_origin configurations. Previou...
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
You can read the announcement on the blog, but I’ll dup most of it here for discussion purposes: ––––––––––––––––––––––––––––––––––––––...
451 13182 109
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...
414 11568 167
New

Other popular topics Top

minhajuddin
I have seen a lot of code which picks the first element from a list using Enum.at(0) instead of List.first. Is there a reason why people ...
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
albydarned
Hello all! I am typing this post from my new MacBook Pro with the M1 chip. I’m loving it so far, and will probably use it as my daily dr...
New
vac
Hi, I'm quite new in Elixir and I'm trying to format a string to a PEM format. I have the certificate value like MIIDBTCCAe2...... and ...
New
mgjohns61585
Could someone help me? I'm making my first elixir program, number guessing game. I can't figure out how to convert the user's guess from ...
New
danschultzer
None of the current solutions worked well for me, so I went ahead and built a user management system from scratch. This project took far...
548 27727 240
New
aadeshere1
I have a another noob question about loop. Since elixir is immutable, while loop is not directly possible. total = 10 while total != 0 ...
New
johnnyicon
Hi all, I've just started learning Elixir and Phoenix Framework, so please pardon my n00bness at this stage. I'm trying to use Postg...
New
joeerl
Hello again - after a longish gap I’ve decided I really must dig into Elixir and see what’s been happening here - so I have a few questio...
New
magnetic
Hey :wave:t3: Elixir community, I’ve been learning Elixir, and working on some side projects. My editor of choice is VSCode, and althoug...
New

We're in Beta

About us Mission Statement