#liveview

WebSockets vs. SSE should be about ordering and correctness

Bối cảnh: các nhà phát triển đang tranh luận về việc truyền HTML qua WebSockets hoặc qua Server-Sent Events (SSE) kết hợp với Fetch API. Nguyên nhân kỹ thuật: cả hai cơ chế đều có thể gửi dữ liệu theo luồng, nhưng chúng không cung cấp cùng một mức độ bảo chứng về thứ tự sự kiện khi kết nối bị gián đoạn hoặc khi có nhiều kênh song song. Hệ quả: nếu không xử lý đúng thứ tự, giao diện có thể hiển thị các mảnh HTML ngoài trật tự, dẫn đến lỗi hiển thị, trạng thái không nhất quán và khó debug. Điều đáng học: khi chọn phương thức truyền, cần ưu tiên các giải pháp có khả năng bảo chứng thứ tự (ví dụ: sử dụng SSE với các id tăng dần hoặc WebSockets kèm cơ chế đánh số thứ tự và xử lý lại khi mất kết nối). Ngoài ra, thiết kế idempotent và có khả năng tái попытка giúp giảm thiểu tác động của sự kiện bị bỏ lỡ hoặc trùng lặp, làm cho ứng dụng ổn định hơn.

Bài viết này giúp lập trình viên hiểu được lựa chọn giữa WebSockets và SSE nên dựa trên yêu cầu về thứ tự và độ chính xác của dữ liệu, không chỉ dựa trên phương thức kỹ thuật.

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.

Ditch Your API with Lustre Server Components and the Store Pattern

The Erlang, Elixir and Gleam conference in Europe - 2 days of talks,discussions and networking for the BEAM community.

From Pure Code to Physical Controls: Designing Hardware in Elixir

The Erlang, Elixir and Gleam conference in Europe - 2 days of talks,discussions and networking for the BEAM community.

Lucas Sifoni

The Erlang, Elixir and Gleam conference in Europe - 2 days of talks,discussions and networking for the BEAM community.

Hooked on Performance: Taming LiveView's JavaScript Hooks at Scale

The Erlang, Elixir and Gleam conference in Europe - 2 days of talks,discussions and networking for the BEAM community.

What if you could build production-ready RAG entirely in Elixir? George Guimarães, ElixirConfEU

Bài trình bày tại ElixirConfEU 2026 khám phá khả năng xây dựng hệ thống RAG (Retrieval-Augmented Generation) production-ready hoàn toàn bằng ngôn ngữ Elixir. Người thuyết trình George Guimarães sẽ hướng dẫn cách tích hợp vector embeddings database như Weaviate và embedding providers như OpenAI API vào hệ thống Elixir, tận dụng ưu điểm xử lý song song của ngôn ngữ này. Hệ quả cho thấy Elixir hoàn toàn có thể đáp ứng yêu cầu kỹ thuật của hệ thống RAG phức tạp mà không cần phụ thuộc vào các công nghệ truyền thống. Điều đáng học hỏi là kiến trúc microservice được đề xuất, cho phép mở rộng linh hoạt và xử lý truy vấn hiệu quả nhờ vào actor model của Elixir.

Bài viết này cho thấy cách xây dựng hệ thống RAG sản xuất hoàn toàn bằng Elixir, ngôn ngữ đang nổi lên với khả năng xử lý đồng thời vượt trội.

Charts with Plotto

Plotto là thư viện charting 100% bằng Elixir không sử dụng NIF hay phụ thuộc bên ngoài. Bài viết hướng dẫn tích hợp Plotto vào Phoenix LiveView để tạo biểu đồ SVG tương tác. Thư viện này sử dụng Elixir thuần túy không cần liên hệ với bên ngoài (no external dependencies). Bạn sẽ học cách tạo biểu đồ động trong dashboard LiveView. Nếu bạn làm việc với Elixir và Phoenix, Plotto là lựa chọn đáng cân nhắc cho visualization.

Plotto giúp lập trình viên thêm biểu đồ SVG tương tác vào dashboard Phoenix LiveView mà không cần phụ thuộc bên ngoài.

Release 0.15.0 · woylie/doggo

Headless UI components for Phoenix. Contribute to woylie/doggo development by creating an account on GitHub.

GitHub - woylie/ex_icon: Generic icon library for Phoenix LiveView

Generic icon library for Phoenix LiveView. Contribute to woylie/ex_icon development by creating an account on GitHub.

I built an anonymous chat site — here’s the full 2-year journey

I built an anonymous chat site — here’s the full 2-year journey I run Chatsj.com — a free, registration-free, anonymous text chat room. No accounts. No emails. No …

Elixir Programming Language Forum

Plotto is a 100% Elixir charting library with no NIFs or external dependencies. In this episode, we’ll use it to add interactive SVG charts to a Phoenix LiveView dashboard.

real-time usage metering and plan entitlements for Phoenix

Khi phát triển SaaS trên framework Phoenix, nhóm thường phải tự triển khai hệ thống đo lường sử dụng thực thời, áp dụng giới hạn gói và tính phí vượt mức. Nguyên nhân kỹ thuật là vì trong ecosystem Elixir chưa có thư viện tương đương Laravel Cashier để quản lý metering và entitlements, mỗi dự án đều phải viết ba thành phần thủ công: counting usage, enforcing limits, billing overage. Hệ quả là việc lặp code, tăng nguy cơ lỗi và tốn thời gian bảo trì mỗi khi thay đổi mô hình giá hoặc mở rộng dịch vụ. Điều đáng học là nhóm nên cân nhắc đóng gói những thành phần này thành một package nội bộ hoặc tìm kiếm/có đóng góp vào dự án mã nguồn mở Elixir cung cấp khả năng metering và plan entitlements thực thời. Đầu tư sớm vào một giải pháp chuẩn đo lường sử dụng sẽ giúp giảm chi phí phát triển và nâng cấp hệ thống gói hàng hóa trong dài hạn.

Bài viết này giúp bạn tiết kiệm thời gian phát triển bằng cách cung cấp giải pháp sẵn có cho việc đo lường sử dụng và quản lý giới hạn kế hoạch trong Phoenix thay vì tự xây dựng lại mỗi lần.

GitHub - texttile-blog/texttile: The Multiplayer Blog Engine

Texttile là một engine blog được thiết kế để cho phép nhiều người viết và chỉnh sửa bài viết cùng lúc trên cùng một trang web. Nó sử dụng cơ chế đồng bộ thời gian thực để truyền tải thay đổi giữa các khách hàng mà không cần tải lại trang. Khi nhiều người dùng cùng thay đổi nội dung, hệ thống phải giải quyết xung đột và duy trì tính nhất quán của dữ liệu. Điều này làm giảm thời gian chờ đợi và tăng hiệu suất làm việc nhóm trong việc xuất bản nội dung. Dự án cho thấy việc xây dựng ứng dụng đa người dùng cần đầu tư vào giải pháp đồng bộ dữ liệu và xử lý lỗi mạng một cách cẩn thận.

Công cụ này mở ra cơ hội hợp tác viết blog nhiều người thực thời với nền tảng mã nguồn mở.

Phoenix and Elixir video courses

Phoenix and Elixir video courses

Texttile, a multiplayer blog engine for people who write together – Klaus Breyer

Hai vợ chồng đã viết blog về mọi chuyến đi trong 10 năm, chia sẻ việc viết nhưng vẫn phải xử lý hình ảnh và video từ điện thoại của nhau. Mỗi ngày một bên gửi tệp tin qua điện thoại cho bên kia, người nhận phải tải lên và sắp xếp lại theo thứ tự trong bài viết. Quy trình này tốn thời gian và dễ gây lỗi thứ tự hoặc bỏ qua tệp tin. Vì không có hệ thống nào cho phép nhiều người cùng chỉnh sửa và quản lý media trong cùng một bài blog, họ phải thực hiện công việc thủ công lặp đi lặp lại. Trải nghiệm này cho thấy cần một nền tảng blog đa người dùng như Texttile, capable of tự động đồng bộ và sắp xếp hình ảnh, video giữa các tác giả.

Texttile giúp giải quyết vấn đề quản lý hình ảnh và video khi nhiều người cùng viết blog.

One Pipe, One User Story: The Case for phoenix_test

Why phoenix_test makes Phoenix feature tests read better and fail more usefully.

Conditionally rendering a HEEX template slot

Khi làm việc với HEEX trong Phoenix LiveView, developers thường dựa vào biểu thức {nil} để không render gì khi giá trị không tồn tại. Tuy nhiên, HEEX chuyển nil thành một chuỗi khoảng trắng thay vì chuỗi rỗng, nên thẻ vẫn xuất hiện dưới dạng một dấu space. Điều này làm mất hiệu quả của selector CSS :empty, vì phần tử không còn thực sự rỗng và không thể dùng để hiển thị nội dung placeholder theo cách điều kiện. Kết quả là không thể chỉ dùng :empty để thay đổi giao diện khi slot rỗng, buộc phải viết logic điều kiện phức tạp hơn trong template. Bài học là thay vìหวัง nil sẽ tạo ra khoảng trắng rỗng, nên sử dụng các khối if/else hoặc gán giá trị placeholder rõ ràng để kiểm soát việc render và duy trì khả năng dùng :empty khi cần thiết.

Bài viết giải pháp xử lý điều kiện render slot trong HEEX template thay vì dùng {nil} gây rắc rối.

The Agent Needs Identity. The Model Does Not.

An Elixir engineering case study about keeping customer identity inside a Phoenix application while Jido, OpenAI, and trusted tools operate on stable Obscura pseudonyms.

Seeking feedback on my first Phoenix project - a real-time, multiplayer online version of the Scattergories game

A developer built Stop My Hand, a Scattergories-style real-time multiplayer web game using Phoenix and LiveView as a learning project after studying Elixir from books. The app includes accounts, friendships, notifications, game invites, lobbies, and multi-round matches. It's an MVP with known gaps (no mid-match reconnection, a naive WebRTC implementation, bare-bones UI). The author is seeking feedback specifically on Elixir code quality: the GenServer-based MatchDriver, LiveView/JS interop, Ecto queries, use of contexts, testing coverage, and project organization.

No boring transitions in your LiveView app

Người dùng đã bị View Transitions API thu hút và quyết định thử nghiệm trong LiveView. API này cho phép tạo hiệu ứng chuyển động mượt mà giữa các trạng thái view mà không cần JavaScript. Khi áp dụng vào LiveView, nó giải quyết vấn đề giao diện bị giật lag khi các trạng thái thay đổi. Kỹ thuật này sử dụng CSS animation và JavaScript event listener để đồng bộ hóa chuyển động trên cả client và server. Lập trình viên nên xem xét áp dụng View Transitions API để cải thiện trải nghiệm người dùng trong các ứng dụng LiveView của mình.

Bài viết này giúp lập trình viên LiveView thêm chuyển động mượt mà vào ứng dụng mà không làm giảm hiệu suất.

Phoenix LiveView beyond SaaS: Robotics fleet management

Curiosum đã ứng dụng Phoenix LiveView và Elixir để phát triển Thoro.ai Control Tower, hệ thống giám sát và quản lý theo thời gian thực cho các đội robot tự hành, vượt khỏi phạm vi SaaS truyền thống.

Một lập trình viên muốn khám phá cách ứng dụng LiveView của Elixir không chỉ nâng cao hiệu suất cho các ứng dụng SaaS mà còn giải quyết thách thức thực tế như quản lý đội tàu robot tự động với tính năng theo dõi thời gian thực và điều khiển từ xa, giúp hiểu rõ tiềm năng của công nghệ này trong các dự án quy mô lớn.

ElixirConf US - Learning Resources / Talks - Elixir Programming Language Forum

Bài nói "How LiveDebugger makes your life easier" của Krzysztof Nalepa tại ElixirConf US 2025 giới thiệu về LiveDebugger, công cụ hỗ trợ gỡ lỗi trực tiếp giúp đơn giản hóa quá trình phát triển trong ngôn ngữ Elixir.

Nếu bạn đang làm việc với Elixir và muốn tối ưu thời gian debug, khám phá LiveDebugger—công cụ mới mẻ trong bài giảng này—để tự động hóa và streamline quá trình phát triển mà không cần phải viết thêm code thủ công.