Các thành phần web tại I/O 2019
Ngày xuất bản: 18 tháng 6 năm 2019
Tại Google I/O 2019, Kevin Schaaf của Dự án Polymer và Caridy Patiño của Salesforce đã thảo luận về trạng thái của các thành phần web.
Thành phần web phổ biến đến mức nào?
Nếu đã sử dụng web hôm nay, có lẽ bạn đã dùng các thành phần web. Theo số liệu của chúng tôi, hiện nay có khoảng từ 5% đến 8% tổng số lượt tải trang sử dụng một hoặc nhiều thành phần web. Điều đó khiến thành phần web trở thành một trong những tính năng mới thành công nhất của nền tảng web được phát hành trong 5 năm qua.
Bạn có thể tìm thấy các thành phần web trên những trang web mà có lẽ bạn sử dụng hằng ngày, chẳng hạn như YouTube và GitHub. Các thành phần này cũng được dùng trên nhiều trang web tin tức và trang web xuất bản được xây dựng bằng AMP. Các thành phần AMP cũng là thành phần web. Nhiều doanh nghiệp cũng đang áp dụng các thành phần web.
Thành phần web là gì?
Vậy thành phần web là gì? Quy cách thành phần web cung cấp một bộ API cấp thấp cho phép bạn mở rộng bộ thẻ HTML tích hợp của trình duyệt. Các thành phần web cung cấp:
- Một phương thức phổ biến để tạo thành phần (bằng cách sử dụng các API DOM tiêu chuẩn).
- Một cách phổ biến để nhận và gửi dữ liệu (sử dụng các thuộc tính/sự kiện).
Ngoài giao diện tiêu chuẩn đó, các tiêu chuẩn không đề cập đến cách triển khai thực tế của một thành phần:
- Công cụ kết xuất mà trình duyệt sử dụng để tạo DOM.
- Cách thành phần này tự cập nhật dựa trên các thay đổi về thuộc tính hoặc đặc điểm của thành phần.
Nói cách khác, thành phần web cho trình duyệt biết khi nào và ở đâu để tạo một thành phần, nhưng không cho biết cách tạo thành phần đó.
Tác giả có thể chọn các mẫu kết xuất chức năng giống như React để tạo các thành phần web của họ, hoặc họ có thể sử dụng các mẫu khai báo như bạn có thể thấy trong Angular hoặc Vue. Là tác giả, bạn hoàn toàn có thể tự do lựa chọn công nghệ mà bạn sử dụng trong thành phần, trong khi vẫn duy trì khả năng tương tác.
Thành phần web có tác dụng gì?
Điểm khác biệt chính giữa các thành phần web và hệ thống thành phần độc quyền là khả năng tương tác. Do có giao diện tiêu chuẩn, bạn có thể sử dụng các thành phần web ở bất cứ nơi nào bạn sử dụng một phần tử tích hợp như <input> hoặc <video>.
Vì có thể biểu thị dưới dạng HTML thực, nên các thành phần này có thể được kết xuất bởi tất cả các khung phổ biến. Vì vậy, các thành phần của bạn có thể được sử dụng rộng rãi hơn trong nhiều ứng dụng đa dạng hơn mà không cần người dùng phải sử dụng một khung duy nhất.
Vì giao diện thành phần là tiêu chuẩn, nên các thành phần web được triển khai bằng nhiều thư viện có thể được kết hợp trên cùng một trang. Việc này giúp ứng dụng của bạn hoạt động ổn định trong tương lai khi bạn cập nhật ngăn xếp công nghệ. Thay vì thay đổi lớn giữa các khung, trong đó bạn thay thế tất cả các thành phần, bạn có thể cập nhật từng thành phần một.
Ai đang sử dụng các thành phần web?
Vì tất cả những lý do này, Web Components thực sự đang rất thành công trong nhiều trường hợp sử dụng khác nhau. Có 3 trường hợp sử dụng đặc biệt phổ biến: trang web nội dung, hệ thống thiết kế và ứng dụng doanh nghiệp.
Trang web nội dung
Thành phần web là công nghệ hoàn hảo để cải tiến nội dung một cách tăng dần, vì chúng có thể được xuất dưới dạng HTML chuẩn bởi vô số hệ thống CMS.
AMP là một ví dụ điển hình về việc các Thành phần web được đưa vào cơ sở hạ tầng của ngành xuất bản để phân phát nội dung một cách nhanh chóng và dễ dàng.
Hệ thống thiết kế
Ngày càng có nhiều công ty đang hợp nhất cách họ thể hiện bản thân bằng cách sử dụng một hệ thống thiết kế – một bộ thành phần và nguyên tắc xác định giao diện chung cho các trang web và ứng dụng của một tổ chức. Các thành phần web cũng rất phù hợp ở đây.
Thông thường, các nhà thiết kế phải đối mặt với nhiều nhóm xây dựng các phiên bản thành phần hệ thống thiết kế riêng dựa trên React, Angular và tất cả các khung khác, thay vì có một bộ thành phần chuẩn duy nhất.
Các thành phần web là giải pháp – một hệ thống thành phần thực sự có thể viết một lần và chạy ở mọi nơi, đồng thời vẫn cho phép các nhóm ứng dụng tự do sử dụng khung mà họ chọn
Các công ty như ING, EA và Google đang triển khai ngôn ngữ thiết kế của công ty mình trong các thành phần web.
Doanh nghiệp: Thành phần web tại Salesforce
Các thành phần web cũng đang có những bước tiến đáng kể trong các doanh nghiệp với tư cách là một công nghệ an toàn, khó lỗi thời để tiêu chuẩn hoá. Caridy Patiño, kiến trúc sư của nền tảng giao diện người dùng của Salesforce, giải thích lý do họ xây dựng nền tảng giao diện người dùng bằng các thành phần web.
Salesforce là một tập hợp các ứng dụng, trong đó có nhiều ứng dụng được mua lại. Mỗi thành phần này có thể chạy trên ngăn xếp công nghệ riêng. Vì được xây dựng trên các ngăn xếp khác nhau, nên rất khó để mang lại cho chúng giao diện và cảm giác giống nhau. Ngoài ra, Salesforce cho phép khách hàng tạo các ứng dụng tuỳ chỉnh của riêng họ bằng nền tảng Salesforce. Vì vậy, lý tưởng nhất là các nhà phát triển bên ngoài cũng có thể sử dụng các thành phần này.
Salesforce xác định một số nhu cầu của khách hàng trên nền tảng của họ:
- Các giải pháp tiêu chuẩn thay vì các giải pháp độc quyền – nhờ đó, bạn có thể dễ dàng tìm thấy các nhà phát triển giàu kinh nghiệm và nhanh chóng đào tạo các nhà phát triển mới.
- Một mô hình thành phần phổ biến – vì vậy, việc tuỳ chỉnh mọi ứng dụng Salesforce đều hoạt động theo cách tương tự.
Họ cũng xác định được một số điều mà khách hàng không muốn:
- Các thay đổi có thể gây ra lỗi cho các thành phần và ứng dụng của họ. Nói cách khác, khả năng tương thích ngược là điều bắt buộc.
- Bị mắc kẹt với công nghệ cũ và không thể phát triển.
- Bị mắc kẹt trong một hệ sinh thái khép kín.
Việc sử dụng các thành phần web làm cơ sở cho nền tảng giao diện người dùng mới đã đáp ứng tất cả những nhu cầu này và kết quả là Lightning Web Components mới.
Làm quen với thành phần web
Có rất nhiều cách hay để bắt đầu sử dụng thành phần web.
Nếu bạn đang tạo một ứng dụng web, hãy cân nhắc sử dụng một số thành phần web tiêu chuẩn có sẵn. Dưới đây chỉ là một vài ví dụ:
- Google cung cấp hệ thống Material Design của riêng mình dưới dạng các thành phần web: Material Web Components.
- Wired Elements là một bộ thành phần web thú vị có vẻ ngoài phác thảo, vẽ tay.
- Có những Thành phần web chuyên dụng tuyệt vời như
<model-viewer>mà bạn có thể thả vào bất kỳ ứng dụng nào để thêm nội dung 3D.
Nếu bạn đang phát triển một hệ thống thiết kế cho công ty của mình hoặc bạn đang cung cấp một thành phần hoặc thư viện duy nhất mà bạn muốn có thể sử dụng trong mọi môi trường, hãy cân nhắc việc tạo các thành phần bằng thành phần web. Bạn có thể sử dụng các API thành phần web tích hợp, nhưng chúng có cấp độ khá thấp, vì vậy, có một số thư viện có sẵn để giúp quá trình này trở nên dễ dàng hơn.
Để bắt đầu tạo các thành phần của riêng mình, bạn có thể xem LitElement, một lớp cơ sở thành phần web do Google phát triển, có trải nghiệm kết xuất chức năng tuyệt vời tương tự như React.
Các công cụ và thư viện khác cần cân nhắc:
- Stencil là một khung hình đầu tiên của thành phần web. Nó bao gồm một số tính năng phổ biến của khung, chẳng hạn như JSX và TypeScript
- Angular Elements cung cấp một cách để bao bọc các thành phần Angular dưới dạng thành phần web.
- Trình bao bọc thành phần web Vue.js cung cấp một cách để đóng gói các thành phần Vue dưới dạng thành phần web.
Tài nguyên khác:
- open-wc.org có thông tin hữu ích về cách bắt đầu, cũng như các mẹo và cấu hình mặc định cho công cụ xây dựng và phát triển.
- Kiến thức cơ bản về web cung cấp thông tin cơ bản về các API thành phần web cơ bản và các phương pháp hay nhất để thiết kế thành phần web.
- MDN cung cấp tài liệu tham khảo cho các API thành phần web, cùng với một số hướng dẫn.