Yo Polymer – Tìm hiểu về công cụ thành phần web

Thành phần web sẽ thay đổi mọi thứ bạn nghĩ mình biết về việc xây 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 tệp kiểu toàn cục hoặc mã nguyên mẫu! Đây là một thế giới mới mẻ, nơi mọi thứ đều là một phần tử.

Trong bài nói chuyện tại DotJS, tôi sẽ trình bày những gì Thành phần web cung cấp và cách tạo các thành phần đó bằng công cụ hiện đại. Tôi sẽ giới thiệu cho bạn Yeoman, một quy trình làm 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 polyfill và sugar để phát triển ứng dụng bằng Thành phần web trong các trình duyệt hiện đại ngày nay.

Tạo thành phần tuỳ chỉnh và cài đặt thành phần 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ề 4 thông số kỹ thuật khác nhau tạo nên Thành phần web: Phần tử tuỳ chỉnh, Mẫu, Shadow DOMtệp nhập HTML.
  • Cách xác định các phần tử tuỳ chỉnh của riêng bạn và cài đặt các phần tử do người khác tạo bằng Bower
  • Dành ít thời gian hơn cho việc viết JavaScript và nhiều thời gian hơn cho việc tạo trang
  • Sử dụng công cụ hiện đại cho giao diện người dùng (Yeoman) để tạo một ứng dụng bằng Polymer với generator-polymer
  • Cách Polymer super thay đổi việc tạo thành phần web.

Ví dụ: để cài đặt các polyfill Thành phần web của Polymer và chính thư viện này, bạn có thể chạy dòng lệnh 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 sẽ thêm các tệp này vào tệp bower.json của ứng dụng.

Sau đó, nếu muốn cài đặt phần tử accordion của Polymer, bạn có thể chạy:

bower install --save Polymer/polymer-ui-accordion

rồi nhập tệp đó vào ứng dụng:

<link rel="import" href="bower_components/polymer-ui-accordion/polymer-ui-accordion.html">

Để tiết kiệm thời gian, bạn có thể tạo 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 bằng Yeoman với một dòng mã khác:

yo polymer

Hướng dẫn từng bước về phần thưởng

Tôi cũng đã ghi lại một hướng dẫn bổ sung dài 30 phút về ứng dụng Polymer Jukebox mà tôi giới thiệu trong buổi trò chuyện.

Nội dung trong video bổ sung:

  • Ý nghĩa của câu thần chú "mọi thứ đều là một phần tử"
  • Cách sử dụng Bower để cài đặt các phần tử và polyfill của Nền tảng Polymer
  • Xây dựng ứng dụng Jukebox bằng trình tạo Yeoman và trình tạo phụ
  • Tìm hiểu các tính năng của nền tảng được tạo sẵn thông qua mẫu
  • Cách tôi chuyển đổi một ứng dụng Angular sang Polymer về mặt chức năng.

Chúng ta cũng sử dụng trình tạo phụ Yeoman để tạo khung cho các phần tử Polymer mới. Ví dụ: để tạo mã nguyên mẫu cho phần tử foo, chúng ta chạy:

yo polymer:element foo

sẽ nhắc chúng ta về việc có muốn phần tử được nhập tự động hay không, có bắt buộc phải có hàm khởi tạo hay không và một số tuỳ 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 buổi nói chuyện hiện đã có trên GitHub. Tôi đã tái cấu trúc thêm một chút để mã này được sắp xếp hợp lý và dễ đọc hơn.

Bản xem trước ứng dụng:

Bản xem trước ứng dụng Yo Polymer

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 trong khi chúng ta chờ các thành phần này được triển khai gốc. Các công cụ hiện đại có thể giúp cải thiện quy trình làm việc của bạn khi sử dụng chúng. Bạn cũng có thể thử Yeoman và Bower khi phát triển thẻ của riêng mình.

Sau đây là một số bài viết khác đáng xem về chủ đề này: