Thành phần web sẽ thay đổi mọi thứ mà bạn nghĩ về việc xây dựng ứng dụng cho web. Lần đầu tiên, web sẽ có các API cấp thấp, cho phép chúng ta không chỉ tạo thẻ HTML của riêng mình mà còn đóng gói logic và CSS. Không còn phải chia sẻ thông tin về biểu định kiểu chung hay mã nguyên mẫu nữa! Đó là một thế giới mới dũng cảm, nơi mọi thứ đều là yếu tố.
Trong buổi nói chuyện tại DotJS, tôi đã trình bày về những gì mà Thành phần web cung cấp và cách xây dựng chúng bằng công cụ hiện đại. Tôi sẽ giới thiệu với bạn Yeoman, quy trình công việc gồm các công cụ giúp đơn giản hoá việc tạo ứng dụng web bằng Polymer, một thư viện gồm các polyfill và đường để phát triển ứng dụng bằng Thành phần web trong các trình duyệt hiện đại hiện nay.
Tạo phần tử tuỳ chỉnh và phần tử cài đặt do người khác tạo
Trong buổi trò chuyện này, bạn sẽ tìm hiểu:
- Giới thiệu về bốn thông số kỹ thuật bao gồm các Thành phần web: Phần tử tuỳ chỉnh, Mẫu, DOM tối và Nhập HTML.
- Cách xác định phần tử tùy chỉnh của riêng bạn và phần tử cài đặt do người khác tạo bằng cách sử dụng Bower
- Dành ít thời gian hơn cho việc viết JavaScript và có thêm thời gian cho việc xây dựng các trang
- Dùng công cụ giao diện người dùng hiện đại (Yeoman) để sắp xếp một ứng dụng bằng Polymer kết hợp với generator-polymer
- Cách siêu Polymer thay đổi việc tạo ra các thành phần web.
Ví dụ: để cài đặt các polyfills Web Components của Polymer và chính thư viện, bạn có thể chạy một lớp lót sau:
bower install --save Polymer/platform Polymer/polymer
Thao tác này sẽ thêm thư mục bower_components và thêm các gói ở trên. --save thêm các trường này vào tệp Supplyer.json của ứng dụng.
Sau này, nếu muốn cài đặt phần tử đàn phong cầm của Polymer, bạn có thể chạy các bước sau:
bower install --save Polymer/polymer-ui-accordion
rồi nhập vào ứng dụng của bạn:
<link rel="import" href="bower_components/polymer-ui-accordion/polymer-ui-accordion.html">
Để tiết kiệm thời gian, hãy chuẩn bị sẵn sàng cho một ứng dụng Polymer mới với tất cả các phần phụ thuộc cần thiết, mã nguyên mẫu và công cụ để tối ưu hoá ứng dụng nhờ Yeoman bằng một lớp lót sau đây:
yo polymer
Hướng dẫn từng bước về phần thưởng
Tôi cũng đã ghi lại hướng dẫn từng bước tặng thêm 30 phút về ứng dụng Polymer Jukebox mà tôi sẽ giới thiệu trong buổi trò chuyện.
Nội dung có trong video tặng thêm:
- Ý nghĩa của câu thần chú "mọi thứ là một yếu tố"
- Cách sử dụng Bower để lắp đặt polymer và các thành phần trên nền tảng Polymer
- Chuẩn bị cho ứng dụng Jukebox của chúng ta bằng trình tạo Yeoman và các trình tạo phụ
- Tìm hiểu các tính năng nền tảng được giới thiệu qua bản mẫu
- Cách tôi chuyển chức năng của một ứng dụng Angular sang Polymer.
Chúng tôi cũng sử dụng các trình tạo phụ Yeoman để tạo các phần tử Polymer mới, chẳng hạn như tạo bản mẫu cho phần tử foo do chúng tôi chạy:
yo polymer:element foo
Thao tác này sẽ nhắc chúng ta xem có muốn phần tử này được nhập tự động hay không, có cần hàm khởi tạo hay không và một số lựa chọn ưu tiên khác.
Các nguồn mới nhất cho ứng dụng xuất hiện trong cả hai cuộc thảo luận hiện đã có trên GitHub. Tôi đã tái cấu trúc nó kỹ lưỡng hơn một chút để nó có tổ chức hơn và dễ đọc hơn một chút.
Xem trước ứng dụng:
Tài liệu đọc thêm
Tóm lại, Polymer là một thư viện JavaScript hỗ trợ các Thành phần web hiện có trong các trình duyệt web hiện đại vì chúng ta đang chờ các thành phần này được triển khai một cách tự nhiên. Các công cụ hiện đại có thể giúp cải thiện quy trình công việc khi sử dụng các công cụ này. Bạn có thể sẽ thích dùng thử Yeoman và Bower khi phát triển thẻ của riêng mình.
Bạn nên tham khảo một số bài viết khác về chủ đề này:
- Xây dựng ứng dụng web bằng Yeoman và Polymer
- Liên kết các thành phần web bằng Vulcanize
- Hội nghị Nhà phát triển Chrome: Các thành phần khai báo, đóng gói, có thể tái sử dụng của polyme
- Bối cảnh của công nghệ tự động hoá trong quá trình phát triển
- Thành phần web: tương lai của hoạt động phát triển web
- Xây dựng ứng dụng bằng quy trình làm việc của Yeoman