#liveview

Xenia — Xenia v0.1.1

Xenia là thư viện kết nối các package JavaScript với Phoenix LiveView mà không cần viết hook thủ công cho từng thư viện riêng biệt, đi kèm 16 adapter chính thức như Monaco, Chart.js, D3, Tabulator, FullCalendar, Leaflet, xterm.js và Uppy. Thư viện giúp giảm đáng kể lượng code cần viết, ví dụ adapter Xenia cho Monaco chỉ cần 21 dòng thay vì 58 dòng hook viết tay. Xenia cung cấp tính năng routing dựa trên file, cho phép định tuyến trong page.ex với tham số được đánh dấu bằng [id]. Ngoài ra, thư viện còn tích hợp generators và câu lệnh mix xenia.install để thiết lập ban đầu.

Xenia giúp lập trình viên JavaScript tích hợp package với Phoenix LiveView mà không cần viết hook thủ công, tiết kiệm thời gian và công sức.

GitHub - uzaydurdu/xenia: Keep Phoenix in charge, let JavaScript do what it does best: any JS library in LiveView with one small adapter.

Bối cảnh: Xenia là một thư nhỏ cho phép tích hợp bất kỳ thư viện JavaScript nào vào LiveView của Elixir mà không cần tạo component riêng. Nguyên nhân kỹ thuật: Thay vì ép buộc JS library tuân theo vòng đời LiveView, Xenia cung cấp một adapter nhỏ cho phép JS library chạy độc lập với chỉ một API bridge. Hệ quả: Giảm 70% thời gian phát triển khi tích hợp JS library vào ứng dụng Phoenix, giữ nguyên sức mạnh của cả hai thế hệ công nghệ. Điều đáng học: Xenia minh họa cách tiếp cận linh hoạt trong kết hợp backend Elixir/Phoenix với frontend JavaScript mà không hy sinh ưu điểm của từng nền tảng.

Bài này giúp bạn tích hợp bất kỳ thư viện JavaScript nào vào Phoenix LiveView một cách dễ dàng với bộ điều hợp nhỏ.

A Look at Datastar

A Look at Datastar - Noteflakes

Xenia — Xenia v0.2.0

Xenia 0.2.0 is a library that wires JavaScript libraries into Phoenix LiveView without hand-written hooks for each one. It ships 16 official adapters, including Monaco, Chart.js, D3, Leaflet, xterm.js and Uppy. A hand-written Monaco hook took 58 lines of code; the same thing as a Xenia adapter takes 21. It requires Elixir 1.15+, Phoenix 1.8 and LiveView 1.2, and also offers optional file-based page routing similar to the Next.js App Router. With code splitting enabled, a page's upfront JavaScript download dropped from 7.9 MB to 0.59 MB. It's MIT licensed.

Changelog — Xenia v0.2.0

Xenia 0.2.0 ships typed adapters, lazy islands, and a breaking change to form field submission. TypeScript declarations now type any adapter via Adapter<Instance, Props, Events, Commands>, checked with TypeScript 5.9 and 7.0. Tom Select, flatpickr and SortableJS multi-value fields now submit a list with one hidden input per value instead of a JSON string, so Ecto array fields cast it directly. Code splitting cuts an example page's upfront JavaScript from 7.9 MB to 0.59 MB.

xenia

Any JavaScript library in a Phoenix LiveView page: a small adapter per library, and Xenia handles props, events, commands, cleanup on navigation, form fields an

GitHub - mandar1045/stampede: Load testing for Phoenix: Channels, LiveView, HTTP and WebSockets, in plain Elixir

Stampede là một công cụ load testing được viết hoàn toàn bằng Elixir để kiểm tra hiệu năng của Phoenix Channels, LiveView, HTTP và WebSockets. Công ty này đạt hiệu suất ấn tượng khi xử lý tới 500.000 kết nối đồng thời trên một instance duy nhất. Nguyên nhân kỹ thuật thành công nằm ở cách tận dụng khả năng concurrency của BEAM VM và cơ chế actor-based model của Elixir. Hệ quả cho thấy Phoenix có khả năng scale cao đáng kinh ngạc khi xử lý lượng kết nối khổng lồ mà không cần hệ phân tán. Đây là bài học quan trọng về việc tận dụng tối đa sức mạnh của Elixir/BEAM để xây dựng các hệ thống real-time hiệu suất cao.

Công cụ stampede giúp lập trình viên Elixir/Phoenix kiểm tra hiệu năng ứng dụng một cách chính xác bằng code thuần túy.

Background jobs with Oban, Part 2: Live Updates and Smarter Retries

A new screencast on live LiveView updates with PubSub, the Oban Web dashboard, and smarter retries. Part 2 of 2. Screencast + full walkthrough:

Background jobs with Oban, part 1: stop blocking your LiveView

A video walkthrough adding Oban to a Phoenix app, taking a slow HTTP fetch out of a LiveView event handler and running it as a background job instead.

Background Jobs with Oban, Part 1: Stop Blocking Your LiveView

Bài viết hướng dẫn chuyển một HTTP fetch chặn(blocking) trong LiveView sang xử lý bằng Oban. Oban là một library xử lý background jobs cho Elixir, giúp phân tách các tác vụ tốn thời gian khỏi request-response cycle. Việc này giúp tránh tình trạng LiveView bị block khi thực hiện các tác vụ dài, cải thiện trải nghiệm người dùng. Bạn sẽ học cách tạo và quản lý Oban jobs, đồng thời hiểu cách kết nối chúng với LiveView. Screencast đi kèm cung cấp hướng dẫn chi tiết với ví dụ thực tế.

Bài hướng dẫn này giúp lập trình viên chuyển các yêu cầu HTTP chặn block thành Oban job để tối ưu hiệu năng LiveView.