Thành phần web tại I/O 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 như thế nào?
Nếu đã sử dụng web hôm nay, có thể bạn đã sử dụng các thành phần web. Theo số liệu thống kê của chúng tôi, khoảng từ 5% đến 8% số lượt tải trang hiện nay 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 trên 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 các trang web mà bạn có thể 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à xuất bản được tạo bằng AMP – các thành phần AMP cũng là thành phần web. Ngoài ra, nhiều doanh nghiệp cũng đang sử 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ì? Thông số kỹ thuật của 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 sẵn của trình duyệt. Thành phần web cung cấp:
- Một phương thức phổ biến để tạo thành phần (sử dụng API DOM 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 chuẩn đó, các tiêu chuẩn không nói gì về cách một thành phần thực sự được triển khai:
- Công cụ kết xuất nào được dùng để tạo DOM.
- Cách tự cập nhật dựa trên các thay đổi đối với thuộc tính hoặc thuộc tính của thành phần.
Nói cách khác, các thành phần web cho trình duyệt biết khi nào và nơi nào để tạo một thành phần, nhưng không cho biết cách thức.
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 thành phần web hoặc 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 có toàn quyền chọn công nghệ mà bạn sử dụng bên 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. Nhờ giao diện 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 phần tử tích hợp như <input> hoặc <video>.
Vì có thể được 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ằng 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 hơn mà không buộc người dùng phải sử dụng một khung nào.
Và 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. Điều này giúp ứng dụng của bạn sẵn sàng cho 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 thành phần web?
Vì tất cả những lý do này, Thành phần web đang thực sự gặt hái được thành công lớn trong nhiều trường hợp sử dụng. 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 để nâng cao nội dung một cách liên tục, vì các thành phần này có thể được xuất dưới dạng HTML chuẩn bằng vô số hệ thống CMS.
AMP là một ví dụ tuyệt vời về cách Thành phần web nhanh chóng và dễ dàng được đưa vào cơ sở hạ tầng của ngành xuất bản để phân phát nội dung.
Hệ thống thiết kế
Ngày càng có nhiều công ty thống 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 tập hợp các 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. Thành phần web cũng rất phù hợp ở đây.
Thông thường, nhà thiết kế phải đối mặt với nhiều nhóm xây dựng phiên bản thành phần hệ thống thiết kế của riêng họ 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.
Thành phần web là câu trả lời – một hệ thống thành phần thực sự viết một lần, chạy ở mọi nơ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 trong các thành phần web.
Doanh nghiệp: Thành phần web tại Salesforce
Thành phần web cũng đang phát triển mạnh mẽ trong các doanh nghiệp với tư cách là một công nghệ an toàn, không lỗi thời để 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 đến từ các thương vụ mua lại. Mỗi ứng dụng có thể chạy trên ngăn xếp công nghệ riêng. Vì các ứng dụng này được xây dựng trên các ngăn xếp khác nhau, nên khó có thể mang lại giao diện giống nhau cho tất cả các ứng dụng. Ngoài ra, Salesforce cho phép khách hàng tạo ứng dụng tuỳ chỉnh của riêng mình bằng nền tảng Salesforce. Vì vậy, các thành phần này cũng phải có thể sử dụng được cho các nhà phát triển bên ngoài.
Salesforce đã xác định một bộ nhu cầu của khách hàng đối với nền tảng của họ:
- Giải pháp chuẩn thay vì 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 tăng cường số lượng nhà phát triển mới.
- Mô hình thành phần phổ biến – vì vậy, việc tuỳ chỉnh bất kỳ ứng dụng Salesforce nào cũng 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 trên các thành phần và ứng dụng của chúng. 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 khu vườn có tường bao quanh.
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ả các nhu cầu này và kết quả là Thành phần web Lightning mới.
Bắt đầu sử dụng 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ố trong số nhiều thành phần web có sẵn. Dưới đây chỉ là một vài ví dụ:
- Google bán hệ thống Material Design của riêng mình dưới dạng thành phần web: Thành phần web Material.
- Wired Elements (Thành phần có dây) là một bộ thành phần web thú vị có giao diện phác thảo, vẽ tay.
- Có các Thành phần web chuyên biệt 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 bán một thành phần hoặc thư viện mà bạn muốn có thể sử dụng trong bất kỳ môi trường nào, hãy cân nhắc việc tạo thành phần bằng các 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 các API này khá cấp thấp, vì vậy, có một số thư viện có sẵn để giúp quá trình này 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 thành phần web ưu tiên. Bao gồm một số tính năng khung phổ biến, như JSX và TypeScript
- Các phần tử Angular cung cấp một cách để gói 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 của 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 cung cấp 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. \
Hình ảnh chính của Jason Tuinstra trên Unsplash.
Lưu ý của người biên tập: Biểu đồ mức sử dụng phần tử tuỳ chỉnh đã được cập nhật để hiển thị toàn bộ dữ liệu sử dụng hằng tháng, như được báo cáo trên chromestatus.com. Phiên bản trước của bài đăng này có một biểu đồ ở mức độ chi tiết 6 tháng, không có các tháng gần đây nhất. Chuỗi V0 và V1 trong biểu đồ ban đầu được xếp chồng; giờ đây, các chuỗi này được hiển thị không xếp chồng với một dòng tổng để loại bỏ sự mơ hồ. Sự tăng đột biến vào cuối năm 2017 là do một thay đổi trong hệ thống thu thập dữ liệu cho chromestatus.com. Thay đổi này đã ảnh hưởng đến số liệu thống kê cho tất cả các tính năng của nền tảng web và giúp đo lường chính xác hơn trong tương lai.