Polymer là một cánh 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 người dùng dễ dàng sử dụng và xây dựng các phần tử tuỳ chỉnh. Năm vừa qua, nhóm chúng tôi đã nỗ lực phát triển một bộ polyfill đáp ứng các thông số kỹ thuật không ngừng phát triển. Trên hết, chúng tôi đã tạo một thư viện tạo đường thuận tiện để giúp việc tạo các thành phần web dễ dàng hơn. Cuối cùng, chúng ta đang tạo một bộ giao diện người dùng và các thành phần tiện ích để sử dụng lại trong ứng dụng của bạn. Tại Hội nghị dành cho nhà phát triển Chrome năm 2013, tôi đã tập trung vào các phần khác nhau của Polymer và triết lý đằng sau "Mọi thứ đều là một phần tử" của chúng tôi thần chú.
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 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 thập niên 90 tuy hạn chế nhưng vô cùng hiệu quả. Chúng tôi chỉ có thể sử dụng một vài yếu tố. Thế mạnh nhất là?...mọi thứ đều mang tính khai báo. Việc tạo trang, thêm điều khiển biểu mẫu và tạo "ứng dụng" cực kỳ đơn giản mà không cần viết đoạn mã JavaScript.
Hãy sử dụng phần tử <select> khiêm tốn. Có rất nhiều chức năng được tích hợp vào phần tử, chỉ cần khai báo như sau:
- Có thể tuỳ chỉnh thông qua các thuộc tính HTML
- Hiển thị phần tử con (ví dụ:
<option>) với 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 điều thú vị diễn 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 thời hoàng kim này. Một nơi 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 ngày nay AJAX được phát minh, thì có thể đó là thẻ HTML (ví dụ):
<polymer-ajax url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json"}'></polymer-ajax>
Hoặc phần tử thích ứng có liên kết dữ liệu với thuộc tính queryMatches:
<polymer-media-query query="max-width:640px" queryMatches="{{isPhone}}"></…Đây chính xác là phương pháp mà chúng tôi đang áp dụng trong Polymer. Thay vì xây dựng các ứng dụng web dựa trên JavaScript nguyên khối, hãy tạo các phần tử có thể tái sử dụng. 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 lại với nhau. Toàn bộ ứng dụng có thể là một phần tử:
<my-app></my-app>
Xây dựng các thành phần web bằng nước sốt đặ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ố 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> - 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="{{foo}}"> - Trình xử lý sự kiện khai báo:
<button on-click="{{handleClick}}"> - Tài sản đã xuất bản:
xFoo.bar = 5<-><x-foo bar="5"> - Trình quan sát thuộc tính:
barChanged: function() {...} - Con trỏ sự kiện / Cử chỉ con trỏ theo mặc định
Đạo đức của câu chuyện là viết các nguyên tố Polymer đều nhằm mục đích khai báo. Bạn phải viết càng ít mã càng tốt ;)
Thành phần web: tương lai của việc phát triển web
Trang trình bày: http://html5-demos.appspot.com/static/cds2013/index.html#26
Nếu không hé lộ về các tiêu chuẩn đằng sau Thành phần web thì tôi sẽ bỏ sót. Suy cho cùng, Polymer dựa trên các API cơ bản phát triển này.
Chúng ta đang ở đỉnh cao của 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 nổi bật hay giao diện người dùng. Các ứng dụng này chỉ phục vụ cho năng suất của nhà phát triển. Mỗi API chính đều hữu ích nhưng kết hợp với nhau sẽ mang lại những điều kỳ diệu!
- Shadow DOM – đó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 chúng một API có các thuộc tính và phương thức.
- Tính năng nhập HTML là mô hình phân phối cho gói CSS, JS và HTML.
- Mẫu – tạo mẫu DOM thích hợp để xác định các phần đánh dấu trơ sẽ được đóng dấu sau này
Nếu bạn muốn tìm hiểu thêm về những nguyên tắc cơ bản của các API, hãy truy cập vào ebidel.github.com/webcomponents.