Web components

Web components là một khái niệm tương đối mới, nó chỉ mới đượ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, và hứa hẹn mang lại một đột phá trong việc phát triển Web.

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 trang web được đóng gói (tách biệt với phần code còn lại của ứng dụng) và có thể tái sử dụng.

Tại sao cần có web component?

Công nghệ web đã và đang phát triển mạnh mẽ, độ phức tạp do vậy ngày càng tăng cao. Điều này đem lại không ít đau đầu cho các nhà phát triển web, khi số lượng thành phần trong một trang web ngày càng phình to và yêu cầu thì ngày một cao. Chẳng hạn, dưới đây là một đoạn mã code HTML điển hình:

Có thể thấy là mã code HTML như thế này rất phức tạp và gây khó khăn trong việc mở rộng cũng như bảo trì. Tiếp theo hãy xem đoạn code sau khi được Google viết lại:

Có thể dễ dàng nhận ra là đoạn code này đơn giản hơn rất nhiều đoạn code ở trên. Đó là vì chúng ta đã define ra các Custom Elements (các thẻ HTML mở rộng tự định nghĩa, chẳng hạn thẻ <google-mail>), đây chính là các web components đã được định nghĩa trước.

Dưới đây là một ví dụ về web component

Sau khi đã được định nghĩa, chúng ta có thể sử dụng dễ dàng trong file HTML với thẻ <my-todos></my-todos>

Tại sao nó làm được thế?

Về cơ bản web components sử dụng 3 công nghệ

• 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, chẳng hạn như thẻ <my-todos> ở ví dụ trên.
• Shadow DOM: là tập hợp các API của Javascript để gắn một cây DOM “shadow” 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 tương đối giống với một số framework khác như angular hay react.js

Làm thế nào để tạo ra được web components

Giả dụ bạn muốn tạo một drawer panel để vẽ với thẻ tuỳ chỉnh là

Mà sau đó bạn có thể sử dụng như sau

Bạn có thể sử dụng custom element này giống hệt như một thẻ HTML nào khác, tức là bạn có thể khai báo, tạo thẻ động bằng JavaScript, hay add cho nó các event listener, vân vân…

Để dễ dàng hơn cho việc xây dựng web component, có một số thư viện đã được phát triển khá rầm rộ trong thời gian qua, nổi bật là Lit Element và Stencil.

Ví dụ về web components với Lit Element

Sử dụng Stencil

Tóm lại:

• Web components là các thành phần UI của 1 trang web được đóng gói lại để sử dụng cho nhiều project khác nhau, bất kể framework gì.
• Để đạt được khả năng đóng gói kể trên thì Web components sử dụng 3 công nghệ là Custom Elements, Shadow DOM, và HTML Templates.
• Có nhiều công cụ để xây dựng nên Web components như Lit Element, Angular Element, Stencil…

 

References

webcomponents.org/introduction
codeburst.io/6-reasons-you-should-use-native-web-components-b45e18e069c2
developer.mozilla.org/en-US/docs/Web/Web_Components

—– The End —-

<thank-you></thank-you>