Trước khi giới thiệu về Lit-HTML (Lit) mình tìm hiểu xíu về Web components cái đã.

Từ khi khái niệm Web components được giới thiệu bởi Alex Russel vào năm 2011 trong một hội thảo về front-end. Google đã tích cực phát triển công nghệ này với dự án mã nguồn mở Polymer (https://lit-html.polymer-project.org), và Lit-html (Lit.dev) đã mang lại một đột phá trong việc phát triển Web đặt biệt là về Front-end.

Web components là gì?

Web components là một tập các quy chuẩn công nghệ dùng cho việc xây dựng các thành phần web được đóng gói (tách biệt với phần code còn lại của ứng dụng như View / Back For Front của server side reder) và có thể tái sử dụng cho client side (nôm na là nén thành cục javaScript for browser và tự render linh hoạt) thường sẽ áp dụng SPA.

Về cơ bản web components sử dụng 3 công nghệ cốt lõi:

• Custom Elements: là tập hợp các API của Javascript để cho phép tạo ra các thành phần web tuỳ chỉnh.
• Shadow DOM: là tập hợp các API của Javascript để gắn một cây DOM “shadow” (như shadow object trong javaScript) vào một thành phần của DOM, cây DOM này được quản lý riêng biệt và render riêng với cây DOM chính, do vậy nó có thể được đóng gói lại để sử dụng cho các ứng dụng khác nhau.
• HTML templates: Dùng để tạo ra các template từ đó được render ra trang web. Khái niệm này được một số framework như Angular (Google) hay React (Facebook) phát triển.

Vậy là Lit đã được tạo ra để tích hợp các công nghệ Web component đúng không? Ummmm

Lit (Lit html) là gì?

Trích dẫn từ nhà phát triển từ câu đầu tiên https://lit.dev/docs/

Repo: https://github.com/lit/lit

Lit is a simple library for building fast, lightweight web components.

At Lit’s core is a boilerplate-killing component base class that provides reactive state, scoped styles, and a declarative template system that’s tiny, fast and expressive.

Như mình hiểu thì Lit là một thư viện cho việc xây dựng nhanh gọn web components tiêu chuẩn của google đề xuất và phát triển.

Với thư viện gọn nhẹ thì bạn sẽ dễ dàng tích hợp cho các framework hiện tại của bạn mà không phải tốn quá nhiều effort cho việc chuyển đổi công nghệ qua Vue, ReactJS mà vẫn có các tính năng linh hoạt cao như Vue hoặc ReactJS.

Điều khác biệt mà Lit mang lại so với Vue, ReactJS là gì??? Sau thời gian trải nghiệm các dự án sử dụng Vue, React và Lit thì thấy ở Lit nổi bật là giảm thiểu tình trạng lock-in, tối đa được tính linh hoạt và khả năng maintain tốt hơn với việc sử dụng mô hình browser’s native. Với site render lượng lớn component kết hợp server site render của React sẽ thấy khác biệt rõ rệt sau khi chuyển qua Lit… oh my goodness, oh my goodness gọi ajax rồi render page nhanh quá dậy.

Khi bạn phát triển ứng dụng bằng Lit, bạn có thể dễ dàng tích hợp các web components libraries khác. Bạn thậm chí có thể update version mới của Lit hoặc chuyển sang thư viện khác lúc phát triển mà không ảnh hưởng nhiều tới quá trình phát triển product. Còn dùng Vue hay React thì migration version thôi cũng phát ngán rồi, còn các tính năng và lifecycle mới phải học nửa…

Tuy nhiên đó chỉ là quan điểm cá nhân mình trên dự án có business phức tạp thôi còn tuỳ mức độ và business của dự án nửa mới phán đoán Lit có phù hợp hay không 😀

Giới thiệu tới đây thôi còn muốn đào sâu hơn thì mình sẽ có bài viết khác về migration hệ thống dùng Lit.

React

Lit-HTML