#liveview

Exploring LiveView 1.2

With LiveView 1.2 you can move a surprising amount of client-side code back into Elixir. I refactored a trivia game to show how: server-composed JS commands, colocated CSS, and colocated hooks. Screencast + full walkthr…

Watch: Exploring LiveView 1.2's server-composed JS commands, colocated CSS, and colocated hooks

Bản cập nhật Phoenix LiveView 1.2 bổ sung các tính năng server-composed JS commands, CSS và hooks đặt cùng vị trí. Bài viết hướng dẫn tái cấu trúc một trò chơi trivia bằng cách di chuyển logic phản hồi UI từ JavaScript hook sang lệnh Elixir, trích xuất CSS vào cùng component, và tích hợp hook JavaScript trực tiếp vào template LiveView.

Lập trình viên nên đọc để khám phá cách tối ưu hóa giao diện và logic ứng dụng bằng cách chia nhỏ mã JavaScript, CSS và hook lại gần với LiveView, giảm bớt sự phân tán và tăng hiệu suất với kiến trúc đơn nhất.

Stop mounting your LiveView twice

Phoenix LiveView mounts twice on first page load — once for the static HTTP dead render and again when the WebSocket connects. The common fix of guarding data loads with connected?/1 avoids double queries but breaks SEO, link previews, and no-JS fallback by leaving the dead render empty. This post explains why the double mount exists, what connected?/1 actually costs, and introduces an experimental fork that parks the dead-render socket in a short-lived GenServer and redeems it on WebSocket connect — skipping the second mount entirely. The fork adds an on_connect/1 callback for connection-only side effects (subscriptions, timers, presence) and provides migration patterns for data loads, connect params, and real-time data. The upstream Phoenix team is working on a more complete 'adoptable LiveViews' solution (issue #3551), but this fork serves as an interim stopgap.