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 đã 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 đã sử dụng web hôm nay, thì có thể bạn đã sử dụng các thành phần web. Theo thống kê của chúng tôi, hiện có khoảng 5% đến 8% số lượt tải trang sử dụng một hoặc nhiều thành phần web. Điều này 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 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 những 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 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ì? Thông số kỹ thuật của thành phần web cung cấp một tập hợp API cấp thấp cho phép bạn mở rộng tập hợp 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 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 triển khai thực tế 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 tự cập nhật dựa trên các thay đổi đối với 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à ở đâ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 để xây dựng 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ể tìm 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 phù hợp với những trường hợp nào?
Sự khác biệt chính giữa 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 dùng một phần tử tích hợp sẵn 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. Nhờ đó, 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 cần ràng buộc người dùng vào bất kỳ 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 các thư viện khác nhau 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 luôn hoạt động tốt trong tương lai khi bạn cập nhật bộ phần mềm cơ sở. Thay vì thực hiện một bước thay đổi lớn giữa khung này và khung khác, 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 thực sự đang 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 để cải tiến tăng dần nội dung, vì chúng đã 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ụ điển hình về tốc độ và sự dễ dàng của Thành phần web trong 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 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 trong trường hợp này.
Thông thường, các nhà thiết kế phải đối mặt với việc 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ế 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 mà 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
Các thành phần web cũng đang có bước tiến đáng kể trong các doanh nghiệp, trở thành một công nghệ an toàn, phù hợp với tương lai để 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, trong đó có nhiều ứng dụng có được từ các thương vụ 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 các ứng dụng này cùng một giao diện. Ngoài ra, Salesforce còn cho phép khách hàng xây dựng ứ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 thành phần cũng có thể được các nhà phát triển bên ngoài sử dụng.
Salesforce đã xác định một số nhu cầu của khách hàng sử dụng nền tảng của họ:
- Các giải pháp tiêu chuẩn thay vì độc quyền – giúp bạn dễ dàng tìm được nhà phát triển có kinh nghiệm và nhanh chóng đào tạo nhà phát triển mới.
- Mô hình thành phần chung – vì vậy, việc tuỳ chỉnh bất kỳ ứng dụng Salesforce nào cũng hoạt động theo cùng một cách.
Họ cũng xác định được một số điều mà 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 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 nền tảng 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à Lightning Web Components 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 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 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 thiết kế Material Design của riêng mình dưới dạng các thành phần web: Thành phần web Material.
- Wired Elements là một tập hợp các thành phần web thú vị có giao diện 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ể đưa 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 hoặc đang bán một thành phần hoặc thư viện mà bạn muốn sử dụng được trong mọi môi trường, 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 sẵn, nhưng chúng khá cơ bản, vì vậy, có một số thư viện giúp quá trình này trở nên 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ể 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 xem xét:
- Stencil là một khung ưu tiên thành phần web. Nó bao gồm một số tính năng khung phổ biến, như JSX và TypeScript
- Angular Elements 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 để 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à công cụ cho nhà 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.