Hologram , một framework web full-stack cho phép các nhà phát triển xây dựng ứng dụng web tương tác hoàn toàn bằng Elixir , đã phát hành phiên bản 0.5.0 với những cải tiến hiệu suất đáng kể. Framework này chuyển đổi mã Elixir thành JavaScript , cho phép thực thi phía client mà không yêu cầu các nhà phát triển phải viết JavaScript trực tiếp.
Bản phát hành này đại diện cho một cột mốc quan trọng với hơn 950 commit kể từ phiên bản trước, tập trung mạnh vào tối ưu hóa hiệu suất và cải thiện trải nghiệm nhà phát triển.
Những Cải Tiến Hiệu Suất Khổng Lồ Biến Đổi Trải Nghiệm Người Dùng
Cải tiến nổi bật nhất trong bản phát hành này là việc viết lại hoàn toàn implementation bitstring, mang lại cải thiện tốc độ render khoảng 50 lần. Sự tăng tốc hiệu suất này đã biến đổi trải nghiệm người dùng từ những tương tác chậm chạp thành giao diện mượt mà, phản hồi nhanh chạy ở 60+ khung hình mỗi giây.
Các thành viên cộng đồng đã nhận thấy sự khác biệt đáng kể ngay lập tức. Website chính của framework, đóng vai trò như một minh chứng thực tế, giờ đây cung cấp điều hướng trang gần như tức thì và tương tác menu phản hồi nhanh, thay vì mất hơn một giây để hoàn thành như trước đây.
Những cải tiến hiệu suất mở rộng ra ngoài việc render, với thời gian thực thi giảm từ millisecond xuống microsecond cho nhiều thao tác cốt lõi phía client. Điều này làm cho Hologram đủ nhanh để xử lý các tương tác thời gian thực đòi hỏi cao như theo dõi chuyển động chuột cho ứng dụng vẽ, như được minh họa trong SVG Drawing Demo mới.
Cải thiện hiệu suất
- Tốc độ rendering cải thiện khoảng 50 lần nhờ việc viết lại bitstring
- Thời gian thực thi giảm từ mili giây xuống micro giây
- Khả năng rendering trang với tốc độ 60+ FPS
- Thời gian build tăng dần nhanh hơn từ 2 đến 10 lần
Trải Nghiệm Phát Triển Nhận Được Những Nâng Cấp Lớn
Phiên bản 0.5.0 giới thiệu quản lý session và cookie toàn diện, đưa Hologram gần hơn với tính năng ngang bằng các framework web truyền thống. Các nhà phát triển giờ đây có thể sử dụng các hàm quen thuộc như put_session/3, get_session/2, và các hàm quản lý cookie với hỗ trợ đầy đủ cho các tùy chọn cookie tiêu chuẩn.
Bản phát hành cũng bổ sung chức năng live reload với file watching thông minh và error overlay đẹp mắt cho các vấn đề compilation. Khi kết hợp với incremental compilation mang lại thời gian build nhanh hơn 2 đến 10 lần, trải nghiệm phát triển trở nên đáng kể dễ chịu và hiệu quả hơn.
Hỗ trợ event mới bao gồm pointer events và mouse move events với theo dõi tọa độ toàn diện, cho phép các tương tác người dùng phức tạp hơn mà trước đây khó thực hiện một cách mượt mà.
Tính năng mới trong v0.5.0
- Hệ thống quản lý phiên hoàn chỉnh với
put_session/3,get_session/2,get_session/3,delete_session/2 - Hỗ trợ cookie đầy đủ với
put_cookie/3,put_cookie/4,get_cookie/2,get_cookie/3,delete_cookie/2 - Các sự kiện mới:
pointer_move,pointer_cancel,pointer_down,pointer_up,mouse_move,select - Tải lại trực tiếp với theo dõi tệp và lớp phủ lỗi
- Triển khai CRDT ( Last Writer Wins Map ) cho trạng thái phân tán
Kiến Trúc Chuyển Hướng Sang Giao Tiếp Dựa Trên HTTP
Một thay đổi kiến trúc đáng kể liên quan đến việc di chuyển từ WebSocket sang giao tiếp dựa trên HTTP cho các thao tác cần truy cập dữ liệu cookie và session. Thay đổi này bao gồm hệ thống HTTP ping mới duy trì sức khỏe kết nối trong khi cung cấp độ trễ gần như tương tự kết nối WebSocket .
Framework hiện sử dụng implementation WebSocket tùy chỉnh thay vì phụ thuộc vào Phoenix Channels , mang lại cho các nhà phát triển nhiều quyền kiểm soát hơn đối với quản lý kết nối và giảm phụ thuộc bên ngoài.
Thay đổi Kiến trúc
- Di chuyển từ WebSocket sang HTTP cho các hoạt động cookie/session
- Hệ thống ping HTTP với khoảng thời gian 30 giây
- Triển khai WebSocket tùy chỉnh (loại bỏ phụ thuộc Phoenix Channels )
- Định dạng serialization phiên bản 2 với khả năng tương thích ngược
Sự Chấp Nhận Của Cộng Đồng Và Mối Quan Ngại Về Hiệu Suất
Mặc dù những cải tiến hiệu suất đã gây ấn tượng với những người sử dụng sớm, một số thành viên cộng đồng đã nêu lên mối quan ngại về kích thước bundle và thời gian tải trang ban đầu. Kiểm tra Google PageSpeed Insights tiết lộ runtime bundle 104 KiB với điểm Largest Contentful Paint 1.5 giây, mà một số người cho là quá mức đối với các website tài liệu.
Tuy nhiên, người tạo ra framework thừa nhận những mối quan ngại này và nhấn mạnh rằng tối ưu hóa bundle chưa phải là ưu tiên. Các phiên bản tương lai được kỳ vọng sẽ giảm đáng kể kích thước bundle thông qua các kỹ thuật tối ưu hóa phù hợp.
Phân tích Kích thước Bundle
- Bundle runtime hiện tại: 104 KiB kích thước truyền tải
- Google PageSpeed Insights LCP: 1.5 giây
- Tối ưu hóa bundle chưa được triển khai
- Dự kiến giảm kích thước đáng kể trong các phiên bản tương lai
Định Vị So Với Phoenix LiveView
Hologram định vị mình như một lựa chọn thay thế cho Phoenix LiveView đối với các kịch bản yêu cầu tương tác phía client tức thì. Trong khi LiveView render các cập nhật UI trên server và gửi chúng đến client, Hologram chuyển đổi mã UI Elixir thành JavaScript chạy hoàn toàn trong trình duyệt.
Cách tiếp cận này loại bỏ các round-trip server cho tương tác UI, làm cho nó lý tưởng cho các ứng dụng yêu cầu khả năng offline, giảm tải server, hoặc giao diện người dùng thực sự phản hồi nhanh. Các framework có thể cùng tồn tại trong cùng một ứng dụng Phoenix , cho phép các nhà phát triển chọn cách tiếp cận tốt nhất cho các tính năng khác nhau.
Bản phát hành này chứng minh cam kết của Hologram trong việc đưa mô hình lập trình mạnh mẽ của Elixir đến phát triển phía client trong khi duy trì các lợi thế triển khai tức thì và khả năng truy cập phổ quát của các ứng dụng web. Với hỗ trợ CRDT cơ bản được bao gồm cho các tính năng phân tán trong tương lai, phiên bản 0.5.0 thiết lập một nền tảng vững chắc cho sự phát triển liên tục của framework.
Tham khảo: Hologram v0.5.0 Released!