Polymer là một cánh cổng dẫn đến tương lai tuyệt vời của các 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 phần tử tuỳ chỉnh. Trong năm qua, nhóm đã nỗ lực tạo ra một bộ polyfill nhằm đáp ứng các thông số kỹ thuật ngày càng phát triển. Ngoài ra, chúng tôi đã tạo một thư viện dễ hiểu để giúp bạn xây dựng các thành phần web dễ dàng hơn. Cuối cùng, chúng ta sẽ tạo ra một tập hợp 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. Tại Hội nghị Chrome cho nhà phát triển năm 2013, tôi đã đi sâu vào những mảng khác của Polymer và triết lý đằng sau câu thần chú "Mọi thứ là một yếu 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 trong những năm 1990 tuy giới hạn, nhưng hiệu quả. Chúng tôi chỉ có một vài yếu tố trong ý tưởng sử dụng của mình. Phần quan trọng là gì?...mọi thứ đều mang tính khai báo. Việc tạo một trang, thêm các tuỳ chọn điều khiển biểu mẫu và tạo một "ứng dụng" mà không cần phải viết các đoạn mã JavaScript vô cùng đơn giản.
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 trong phần tử này, chỉ đơn giản 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ị thành phần 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ó một API DOM: thuộc tính và phương thức
- Kích hoạt sự kiện khi những điều thú vị xảy ra
Thành phần web cung cấp các công cụ để trở lại thời kỳ hoàng kim này của lĩnh vực 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ớ <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ể 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 một thuộc tính queryMatches:
<polymer-media-query query="max-width:640px" queryMatches="">
Đâ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 thành phần có thể tái sử dụng. Theo thời gian, toàn bộ ứng dụng sẽ phát triển bằng cách kết hợp các phần tử nhỏ hơn với nhau. Toàn bộ ứng dụng có thể là một yếu tố:
<my-app></my-app>
Xây dựng 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ố lợi í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=""> - Trình xử lý sự kiện khai báo:
<button on-click="" - Cơ sở lưu trú đã 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
Theo đạo đức của câu chuyện, việc viết các thành phần polymer hoàn toàn xoay quanh việc khai báo. Bạn viết càng í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ẽ từ bỏ nếu không nhắc đến các tiêu chuẩn đằng sau Thành phần web. Suy cho cùng thì Polymer cũng dựa trên các API cơ bản đang phát triển này.
Chúng tôi đang ở trên đỉnh của thời kỳ rất thú vị trong quá trình phát triển web. Không giống như những tính năng mới khác được thêm vào nền tảng web, API tạo nên Thành phần web không được sáng tạo và không dành cho người dùng. Các chỉ số này đơn thuần phục vụ năng suất của 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, những điều kỳ diệu sẽ xảy ra!
- DOM bóng – đóng gói kiểu và DOM
- Phần tử tùy chỉnh – xác định phần tử HTML mới. Cung cấp cho họ một API kèm theo các thuộc tính và phương thức.
- Nhập HTML là mô hình phân phối cho gói CSS, JS và HTML.
- Mẫu – việc tạo mẫu DOM thích hợp để xác định các phần đánh dấu không cần thiết sẽ được đánh dấu sau này
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 truy cập vào trang webThành phần.org.