Polymer là một cổng dẫn đến 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à tạo các thành phần tuỳ chỉnh. Trong năm qua, nhóm đã nỗ lực làm việc trê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 tiện lợi để giúp việc xây dựng thành phần web trở nên dễ dàng hơn. Cuối cùng, chúng ta sẽ tạo một bộ thành phần giao diện người dùng và tiện ích để sử dụng lại trong ứng dụng. Tại Hội nghị nhà phát triển Chrome 2013, tôi đã tìm hiểu 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ử".
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 tạo trang web trong những năm 1990 có nhiều hạn chế nhưng cũng rất mạnh mẽ. Chúng ta chỉ có một vài phần tử. Điểm mạnh của nó là gì?...mọi thứ đều mang tính khai báo. Bạn có thể tạo một trang, thêm các thành phần điều khiển biểu mẫu và tạo một "ứng dụng" một cách đơn giản mà không cần viết nhiều mã JavaScript.
Hãy lấy phần tử <select> khiêm tốn. Có rất nhiều chức năng được tích hợp sẵn vào phần tử này, bạn chỉ cần khai báo phần tử đó:
- Có thể tuỳ chỉnh thông qua các thuộc tính HTML
- Hiển thị các thành phần 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 ngữ 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ỳ phát triển web rực rỡ này. Một trong số đó là 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 vào ngày hôm nay, thì có thể đó 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 phần tử 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>
Tạo thành phần web bằng công cụ đặc biệt của Polymer
Trang trình bày: http://html5-demos.appspot.com/static/cds2013/index.html#37
Polymer chứa một số tính năng tiện lợi để 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> - Kế thừa khai báo:
<polymer-element extends="..."> - Liên kết dữ liệu hai chiều khai báo:
<input id="input" value=""> - Trình xử lý sự kiện khai báo:
<button on-click="" - Các thuộc tính đã 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
Ý nghĩa của câu chuyện này là việc viết các phần tử Polymer đều phải mang tính khai báo. Bạn càng ít phải viết mã càng tốt ;)
Thành phần web: tương lai của hoạt động phát triển web
Trang trình bày: http://html5-demos.appspot.com/static/cds2013/index.html#26
Tôi sẽ bỏ lỡ nếu không giới thiệu các tiêu chuẩn đằng sau Thành phần web. Xét cho cùng, Polymer dựa trên các API cơ bản đang phát triển này.
Chúng ta đang ở thời điểm rất thú vị trong quá trình 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 phải là những API bắt mắt hoặc dành cho người dùng. Các tính năng này chỉ dành cho năng suất của nhà phát triển. Mỗi API chính đều hữu ích riêng, nhưng khi kết hợp với nhau, những điều kỳ diệu sẽ xảy ra!
- Shadow DOM – đóng gói kiểu và DOM
- Thành phần tuỳ chỉnh – xác định các phần tử HTML mới. Cung cấp cho chúng một API có các thuộc tính và phương thức.
- HTML Imports (Tệp nhập HTML) 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 loại bỏ 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.