Polymer là một cổng vào tương lai tuyệt vời của Thành phần web. Chúng tôi muốn giúp bạn dễ dàng sử dụng và xây dựng các phần tử tuỳ chỉnh. Trong năm qua, nhóm đã nỗ lực phát triển một bộ polyfill cho các thông số kỹ thuật đang phát triển. Ngoài ra, chúng tôi đã tạo một thư viện cú pháp thuận tiện để giúp việc xây dựng các thành phần web trở nên dễ dàng hơn. Cuối cùng, chúng tôi đang tạo một bộ thành phần giao diện người dùng và tiện ích để bạn sử dụng lại trong ứng dụng của mình. Tại Hội nghị nhà phát triển Chrome năm 2013, tôi đã tìm hiểu sâu về các phần khác nhau của Polymer và triết lý đằng sau câu thần chú "Mọi thứ đều là một phần tử" của chúng tôi.
Trang trình bày: http://html5-demos.appspot.com/static/cds2013/index.html
"Mọi thứ đều là một phần tử" (từ <select> đến các phần tử tuỳ chỉnh)
Trang trình bày: http://html5-demos.appspot.com/static/cds2013/index.html#6
Việc xây dựng trang web vào những năm 1990 tuy còn nhiều hạn chế nhưng lại rất hiệu quả. Chúng tôi chỉ có một vài yếu tố để sử dụng. Điểm mạnh của nó là gì? Mọi thứ đều mang tính khai báo. Việc tạo trang, thêm các thành phần điều khiển biểu mẫu và tạo "ứng dụng" mà không cần viết nhiều JavaScript là vô cùng đơn giản.
Hãy xem xét phần tử <select> đơn giản. Có rất nhiều chức năng được tích hợp vào phần tử này, chỉ bằng cách khai báo:
- Có thể tuỳ chỉnh thông qua các thuộc tính HTML
- Hiển thị các phần tử con (ví dụ:
<option>) bằng giao diện người dùng mặc định, nhưng có thể định cấu hình thông qua các thuộc tính. - Hữu ích trong các bối cảnh khác như
<form> - Có API DOM: thuộc tính và phương thức
- Kích hoạt sự kiện khi có điều thú vị xảy ra
Thành phần web cung cấp các công cụ để quay lại thời kỳ hoàng kim này của quá trình phát triển web. Một nơi mà chúng ta có thể tạo các phần tử mới, gợi nhớ đến <select>, nhưng được thiết kế cho các trường hợp sử dụng của năm 2014. Ví dụ: nếu AJAX được phát minh ngày hôm nay, thì có thể nó sẽ là một thẻ HTML (ví dụ):
<polymer-ajax url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json"}'></polymer-ajax>
Hoặc các phần tử thích ứng liên kết dữ liệu với thuộc tính queryMatches:
<polymer-media-query query="max-width:640px" queryMatches="">
Đây chính xác là phương pháp chúng tôi đang áp dụng trong Polymer. Thay vì xây dựng các ứng dụng web nguyên khối dựa trên JavaScript, hãy tạo các phần tử có thể sử dụng lại. Theo thời gian, toàn bộ ứng dụng sẽ phát triển từ việc kết hợp các thành phần nhỏ hơn với nhau. Thậm chí, toàn bộ ứng dụng có thể là một phần tử:
<my-app></my-app>
Xây dựng thành phần web bằng công thức đặc biệt của Polymer
Trang trình bày: http://html5-demos.appspot.com/static/cds2013/index.html#37
Polymer có một số tiện ích để xây dựng các ứng dụng dựa trên thành phần web:
- Đăng ký phần tử khai báo:
<polymer-element> - Tính kế thừa khai báo:
<polymer-element extends="..."> - Liên kết dữ liệu hai chiều mang tính khai báo:
<input id="input" value=""> - Trình xử lý sự kiện khai báo:
<button on-click="" - Tài sản đã xuất bản:
xFoo.bar = 5<-><x-foo bar="5"> - Quan sát thuộc tính:
barChanged: function() {...} - PointerEvents/PointerGestures theo mặc định
Bài học rút ra là việc viết các phần tử Polymer đều là về việc khai báo. Bạn càng viết ít mã thì càng tốt ;)
Thành phần web: tương lai của phát triển web
Trang trình bày: http://html5-demos.appspot.com/static/cds2013/index.html#26
Tôi sẽ thật thiếu sót nếu không nhắc đến các tiêu chuẩn đằng sau Thành phần web. Suy cho cùng, Polymer dựa trên các API nền tảng đang phát triển này.
Chúng ta đang bước vào một thời kỳ rất thú vị trong lĩnh vực phát triển web. Không giống như các tính năng mới khác được thêm vào nền tảng web, các API tạo nên Thành phần web không hào nhoáng hoặc dành cho người dùng. Các công cụ này hoàn toàn nhằm mục đích nâng cao năng suất cho nhà phát triển. Mỗi API trong số 4 API chính đều hữu ích, nhưng khi kết hợp với nhau, chúng sẽ tạo ra những điều kỳ diệu!
- Shadow DOM – kiểu và đóng gói DOM
- Phần tử tuỳ chỉnh – xác định các phần tử HTML mới. Cung cấp cho họ một API có các thuộc tính và phương thức.
- HTML Imports là mô hình phân phối cho một gói CSS, JS và HTML.
- Mẫu – tạo mẫu DOM thích hợp để xác định các đoạn mã đánh dấu không hoạt động sẽ được đóng dấu sau
Nếu bạn muốn tìm hiểu thêm về các nguyên tắc cơ bản của API, hãy xem webcomponents.org.