Thành phần web tại I/O 2019
Tại Google I/O 2019, Kevin Schaaf làm việc tại Dự án Polymer và Caridy Patiño của Salesforce đã nói về trạng thái của các thành phần web.
Các thành phần web phổ biến như thế nào?
Nếu hiện nay, bạn đã sử dụng web, thì có thể bạn đã sử dụng các thành phần web. Theo số liệu của chúng tôi, khoảng 5% đến 8% tổng số lượt tải trang hiện nay có 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 nền tảng web mới thành công nhất được ra mắt 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à có thể 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 sử 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à các thành phần web. 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 các 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 của trình duyệt. Thành phần web cung cấp:
- Phương pháp phổ biến để tạo một thành phần (sử dụng API DOM tiêu chuẩn).
- Một phương thức phổ biến để nhận và gửi dữ liệu (sử dụng thuộc tính/sự kiện).
Ngoài giao diện chuẩn đó, các tiêu chuẩn không nói lên bất cứ điều gì về cách một thành phần thực sự được triển khai:
- Công cụ kết xuất mà công cụ này sử dụng để tạo DOM.
- Cách Bard tự cập nhật dựa trên các thay đổi về thuộc tính hoặc thuộc tính.
Nói cách khác, các thành phần web cho trình duyệt biết thời điểm và ở đâu để tạo một thành phần, chứ không phải 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 để xây dựng thành phần web hoặc họ có thể sử dụng các mẫu khai báo như bạn có thể tìm thấy trong Angular hoặc Vue. Với tư cách là tác giả, bạn có toàn quyền tự do lựa chọn công nghệ mà mình sử dụng bên trong thành phần này mà vẫn duy trì khả năng tương tác.
Thành phần web có lợi ích 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 chuẩn nên bạn có thể sử dụng các thành phần web ở bất kỳ đâu mà bạn cần phần tử tích hợp sẵn, chẳng hạn như <input> hoặc <video>.
Vì chúng có thể được biểu thị dưới dạng HTML thực, nên chúng có thể được hiển thị 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 tiêu thụ rộng rãi hơn, trong nhiều ứng dụng đa dạng hơn mà không khiến người dùng bị bó buộc với bất kỳ khung nào.
Ngoài ra, 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 các thư viện khác nhau có thể kết hợp với nhau trên cùng một trang. Thực tế này giúp các ứng dụng của bạn sẵn sàng cho tương lai khi bạn cập nhật nhóm công nghệ. Thay vì có một thay đổi lớn giữa khung này với khung khác (tức là thay thế tất cả các thành phần), bạn có thể cập nhật lần lượt từng thành phần.
Ai đang sử dụng các thành phần web?
Vì tất cả các lý do này, Thành phần web thực sự tìm thấy thành công lớn trong nhiều trường hợp sử dụng khác nhau. Có ba 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 cho doanh nghiệp.
Trang web nội dung
Các thành phần web là công nghệ hoàn hảo để tăng cường dần nội dung, vì các thành phần này 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ụ tuyệt vời về tốc độ và dễ dàng của 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ối nội dung.
Hệ thống thiết kế
Ngày càng nhiều công ty thống nhất cách 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 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 cạnh tranh với nhiều nhóm xây dựng phiên bản riêng của các thành phần hệ thống thiết kế ngoài React, Angular và tất cả các khung khác, thay vì có một tập hợp thành phần chuẩn duy nhất.
Các thành phần web chính là giải pháp — thực sự viết một lần, chạy ở mọi nơi hệ thống thành phần 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 họ trong các thành phần web.
Doanh nghiệp: Các thành phần web tại Salesforce
Các thành phần web cũng đang đạt được một bước tiến đáng kể trong các doanh nghiệp, với vai trò là một công nghệ an toàn và hướng tới tương lai cần được chuẩn hoá. Caridy Patiño, kiến trúc sư cho 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 — nhiều ứng dụng trong số đó bắt nguồn từ các lượt thu mua. Mỗi phương pháp có thể chạy trên ngăn xếp công nghệ riêng. Vì được tạo trên các ngăn xếp khác nhau, nên khó có thể cung cấp cho chúng cùng một giao diện. Ngoài ra, Salesforce cho phép khách hàng xây dựng các ứng dụng tuỳ chỉnh của riêng mình 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 nên sử dụng các thành phần đó.
Salesforce đã xác định một nhóm nhu cầu của khách hàng trên nền tảng của họ:
- Các giải pháp chuẩn, thay vì các giải pháp độc quyền — để dễ dàng tìm thấy các nhà phát triển có kinh nghiệm và tăng tốc độ phát triển các nhà phát triển mới nhanh hơn.
- Đây là 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 sẽ hoạt động theo cách tương tự.
Họ cũng đã xác định một số điều khách hàng không muốn:
- Thay đổi có thể gây lỗi cho các thành phần và ứng dụng. Nói cách khác, khả năng tương thích ngược là điều bắt buộc.
- 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 ra mắt.
Bắt đầu sử dụng các thành phần web
Có rất nhiều cách tuyệt vời để bắt đầu với các thành phần web.
Nếu bạn đang xây dựng một ứng dụng web, hãy cân nhắc sử dụng một số thành phần web có sẵn. Dưới đây chỉ là một vài ví dụ:
- Google cung cấp hệ thống Material Design riêng làm thành phần web: Thành phần web Material.
- Phần tử Wired là một bộ thành phần web thú vị có giao diện vẽ tay sơ sài.
- Có nhiều Thành phần web chuyên dụng 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 hay thư viện duy nhất mà bạn muốn sử dụng được trong mọi môi trường, hãy cân nhắc việc ghi nhận các thành phần bằng cách sử dụ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 sẵn, nhưng chúng lại ở cấp độ khá thấp, vì vậy, bạn nên cung cấp một số thư viện để giúp quá trình này dễ dàng hơn.
Để bắt đầu xây dựng các thành phần của riêng mình, bạn có thể tìm hiểu LitElement, một lớp cơ sở thành phần web do Google phát triển. 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 ưu tiên các thành phần web. Lớp này có một số tính năng khung phổ biến, chẳng hạn như JSX và TypeScript
- Phần tử Angular cung cấp 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 cách thức để đó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 các thông tin hữu ích về cách bắt đầu sử dụng, 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 phần giải thích 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ế các 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 biên tập viên: Biểu đồ mức sử dụng phần tử tuỳ chỉnh đã được cập nhật để hiển thị đầy đủ 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 đã bao gồm một biểu đồ chi tiết trong 6 tháng, không bao gồm những 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 V0 và V1 này được hiển thị không xếp chồng với tổng dòng để loại bỏ sự không rõ ràng. Sự tăng vọt đột ngột vào cuối năm 2017 là do một thay đổi trong hệ thống thu thập dữ liệu của 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à dẫn đến việc đo lường chính xác hơn trong tương lai.