Flitter là thư viện SVG được thiết kế để giúp việc triển khai trực quan hóa dữ liệu trong phát triển web trở nên dễ dàng và nhanh chóng hơn, cung cấp khả năng viết mã khai báo và tính năng tính toán bố cục nâng cao.
Phiên bản 1.0.0 đã được cập nhật với nhiều tính năng mới, bao gồm hỗ trợ SSR được tăng cường, cải thiện chức năng phát hiện cử chỉ, thêm tiện ích ZIndex và cải thiện hiệu năng, giúp Flitter trở nên mạnh mẽ và dễ sử dụng hơn.
Bạn có thể dễ dàng sử dụng và tham gia phát triển Flitter thông qua cộng đồng React, GitHub và Discord. Chúng tôi sẽ tiếp tục cải thiện SSR và bổ sung thêm nhiều tính năng trực quan hóa dữ liệu khác để đóng góp cho hệ sinh thái phát triển web.
Giới thiệu thư viện Flitter
Bối cảnh ra đời của Flitter
Trong môi trường phát triển web hiện đại, trực quan hóa dữ liệu đã trở thành một yếu tố cần thiết. Việc chuyển đổi các tập dữ liệu phức tạp thành dạng dễ hiểu là một thử thách không ngừng đối với các nhà phát triển. Flitter ra đời để giải quyết thử thách này. Mặc dù đã có nhiều thư viện trực quan hóa dữ liệu khác nhau, nhưng các nhà phát triển thường cảm thấy khó khăn trong việc tìm thấy các tính năng đáp ứng đầy đủ yêu cầu của họ trong số các tùy chọn được cung cấp. Thậm chí việc triển khai các biểu đồ hoặc sơ đồ đơn giản cũng đòi hỏi rất nhiều công sức và thời gian học tập.
Vấn đề mà Flitter giải quyết
Mục tiêu chính của Flitter là giúp các nhà phát triển triển khai trực quan hóa dữ liệu như biểu đồ, sơ đồ một cách dễ dàng và nhanh chóng. Để làm được điều này, Flitter cung cấp hai tính năng chính.
1. Viết mã khai báo bằng cách sử dụng Widget: Flitter áp dụng mô hình lập trình khai báo, cho phép các nhà phát triển thể hiện các yếu tố trực quan mong muốn một cách đơn giản và trực quan. Cách tiếp cận này áp dụng mô hình đã được chấp nhận rộng rãi trong các framework web hiện đại như React vào trực quan hóa dữ liệu. 2. Tính toán bố cục nâng cao: Trong trực quan hóa dữ liệu, việc tính toán bố cục và vị trí chính xác là yếu tố quan trọng. Flitter tự động hóa các phép tính bố cục phức tạp như suy luận chiều rộng văn bản, giúp các nhà phát triển tập trung vào việc phát triển các logic quan trọng hơn.
Khi nào cần sử dụng Flitter
Flitter đặc biệt lý tưởng cho các dự án có yêu cầu trực quan hóa dữ liệu phức tạp hoặc các trường hợp cần triển khai nhanh chóng các biểu đồ hoặc sơ đồ đơn giản. Ngoài ra, nó cung cấp cú pháp và cấu trúc rất quen thuộc đối với các nhà phát triển có kinh nghiệm với Flutter, giúp tối đa hóa hiệu quả giữa các nền tảng web và di động.
Các bản cập nhật và cải tiến chính
Các tính năng mới
Nâng cao hỗ trợ SSRPhiên bản 1.0.0 đã tăng cường đáng kể hỗ trợ SSR (phát trực tuyến từ phía máy chủ). Trong các phiên bản trước, đôi khi nó phụ thuộc vào các phụ thuộc cụ thể của Node.js, nhưng giờ đây tất cả các phụ thuộc đó đã được loại bỏ, cho phép nó hoạt động ổn định trong nhiều môi trường khác nhau như Vercel hoặc Cloudflare. Nhờ đó, các nhà phát triển có thể tích hợp Flitter vào dự án của mình dễ dàng hơn mà không bị ràng buộc bởi framework.
Nâng cao chức năng GuestureDetectorFlitter giờ đây cung cấp hiệu ứng lan truyền sự kiện tương ứng với cây Widget. Điều này cho phép kiểm soát tương tác người dùng một cách chi tiết hơn và mang lại cho các nhà phát triển sự linh hoạt hơn trong việc triển khai các tương tác phức tạp.
Thêm Widget ZIndexTrước đây, SVG không hỗ trợ trực tiếp thuộc tính z-index. Flitter 1.0.0 vượt qua hạn chế này thông qua Widget ZIndex, cho phép các nhà phát triển kiểm soát rõ ràng thứ tự chồng chéo của các phần tử.
Cải thiện hiệu năng
Flitter đã cải thiện đáng kể tốc độ hiển thị lần đầu và hiệu năng tương tác của sơ đồ. Ví dụ, tốc độ hiển thị các sơ đồ phức tạp đã được rút ngắn từ 140ms xuống còn 30ms, nhấn mạnh vào việc tối ưu hóa hiệu năng.
Khi các thay đổi trạng thái xảy ra trong cùng một Call Stack, chúng được xử lý theo từng lô, giúp giảm số lần hiển thị lại.
Sửa lỗi chính
Đã sửa lỗi không hiển thị lại khi gọi setState bên trong trình xử lý sự kiện được đăng ký bằng addPostFrameCallback().
Đã sửa lỗi chiều cao được đặt khác với chiều cao của phần tử cha khi đặt chiều cao thành 100% trong việc triển khai phản hồi của trình duyệt.
Ví dụ sử dụng và tài liệu
React
Để sử dụng trong React, vui lòng cài đặt hai gói sau.
Nhập Widget từ flitter-react để dễ dàng sử dụng flitter trong môi trường React.
Các tài liệu chi tiết và ví dụ sử dụng để bắt đầu với Flitter có thể được tìm thấy trên trang web tài liệu chính thức. Tại đây, bạn sẽ tìm thấy nhiều thông tin khác nhau, từ cách sử dụng cơ bản đến các tính năng nâng cao của Flitter.
Cộng đồng và cách đóng góp
Cộng đồng Flitter tương tác tích cực thông qua GitHub và Discord. Các nhà phát triển có thể đề xuất tính năng hoặc báo cáo lỗi trực tiếp trên GitHub, và kênh Discord cho phép chia sẻ ý tưởng và kinh nghiệm liên quan đến Flitter. Tất cả những đóng góp đều đóng vai trò quan trọng trong sự phát triển của dự án Flitter.
Kế hoạch và tầm nhìn trong tương lai
Về ngắn hạn, Flitter sẽ tập trung vào việc sửa lỗi và cải thiện hiệu năng, và về lâu dài, mục tiêu là phát triển các tính năng bổ sung để mang lại trải nghiệm SSR tốt hơn và nâng cao khả năng trực quan hóa dữ liệu. Tầm nhìn cuối cùng của Flitter là cung cấp một giải pháp tích hợp và có thể mở rộng cho trực quan hóa dữ liệu, từ đó cách mạng hóa khả năng tiếp cận trực quan hóa dữ liệu trong hệ sinh thái phát triển web.