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

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
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 30840 112
New
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
You can read the announcement on the blog, but I’ll dup most of it here for discussion purposes: ––––––––––––––––––––––––––––––––––––––...
451 13917 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
Announcement post dup’d here for convenience: Phoenix 1.7.2 is out! This minor release includes a couple features worth talking about. ...
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

Other popular topics Top

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
Harrisonl
We have an ECS cluster with 4 services, where each task joins a single cluster, via discovery ECS discovery service. Currently when I de...
New
sen
Hi All, I set a environment variables in dev.exs , like below code. when i start server, how can i set the ${enable} value? thanks. d...
New
JakeBecker
TL;DR: I’ve just released an implementation of Microsoft’s IDE-independent Language Server Protocol for Elixir. It adds language support ...
1144 53578 245
New
AstonJ
Posting this to see if we can make things easier for people to get into Neovim. If you use Neovim and have a favourite distro please let ...
New
josevalim
Hi everyone, One of the features added to Elixir early on to help integration with Erlang code was the idea of overridable function defi...
New
dokuzbir
I want to highlight html closing tags when i click a html tag. That works in .html files but doesnt work for html.eex templates. How can...
New
jerry
Good day to you all. I have been struggling to get a query involving like and ilike to work. Can anyone assist me on this, please? pro...
New
AngeloChecked
What learn first? Rust or Elixir Hi Elixir community! I’m here because i want learn a new language. I’m a junior developer and mainly i ...
New
nobody
Hi! In PHP: $SERVER['SERVERADDR'] - in Elixir? Searched the docs for ip address and the web, no good results. Thanks!
New

We're in Beta

About us Mission Statement