Google Polymer - Cách nó sẽ thay đổi cách xây dựng ứng dụng web

và các yếu tố xây dựng các điều khiển trình phát UI trong bí mật.

Ngày nay, với các Thành phần Web, chúng ta cũng có thể đặt tên cho các thành phần của chính mình. Chúng ta có thể xây dựng một yếu tố như, để nhúng nguồn cấp dữ liệu Twitter hoặc (có thể) để nhúng một biểu đồ.

Hơn nữa, các yếu tố tùy chỉnh này cũng có thể có một vài thuộc tính tùy chỉnh được chấp nhận. Liên quan đến phần tử, bạn đặt một thuộc tính được gọi là tên người dùng sẽ được sử dụng để chỉ định tên người dùng Twitter.

Các yếu tố tùy chỉnh trong polymer

Polyme đi kèm với một loạt các yếu tố chiếm (gần như) mọi ứng dụng web cần. Google chia các yếu tố này thành các nhóm: Yếu tố sắt, Yếu tố giấy, Thành phần web của Google, Yếu tố vàng, Yếu tố neon, Yếu tố bạch kim và Phân tử.

1. Yếu tố sắt

Yếu tố sắt là một tập hợp các yếu tố cơ bản. Những yếu tố cơ bản này là những gì chúng ta thường sử dụng để xây dựng một trang web chẳng hạn như một đầu vào, hình thức và hình ảnh. Sự khác biệt là Polyme bổ sung thêm một số sức mạnh cho các yếu tố này.

Tất cả các yếu tố trong nhóm này là bàn là- tiền tố, ví dụ , được sử dụng để hiển thị một hình ảnh. Các phần tử đã được trang bị một số thuộc tính bổ sung mà chúng ta không thể áp dụng thường xuyên thành phần. Chúng ta có thể, ví dụ, thêm tải trước, phai màu, và giữ chỗ thuộc tính:

Ví dụ trên trước tiên sẽ hiển thị trình giữ chỗ hình ảnh và sau đó mờ dần thành hình ảnh thực tế trong src vì nó được nạp đầy đủ, thực hiện hiệu ứng tải hình ảnh mượt mà.

2. Yếu tố giấy

Các Yếu tố giấy là một nhóm các yếu tố Thiết kế Vật liệu. Thiết kế Vật liệu là ngôn ngữ thiết kế của Google để giúp giao diện người dùng và trải nghiệm trên các nền tảng của Google cả ứng dụng Web và Android trở nên nhất quán hơn. Một số yếu tố duy nhất cho Thiết kế Vật liệu là Nút hành động giấy và nổi (FAB).

Giấy

Giấy là phép ẩn dụ của Google cho phương tiện làm cơ sở cho nội dung. Để thêm một tờ giấy bằng Polyme, chúng tôi sử dụng thành phần. Phần tử này có 2 thuộc tính:

• độ cao để nâng Giấy, do đó thêm một bóng để củng cố độ cao
• hoạt hình sẽ áp dụng hình ảnh động khi thay đổi độ cao Giấy.

Nút hành động nổi (FAB)

Nút hành động nổi (FAB) là một nút tròn có biểu tượng, nổi trên màn hình, thường có màu nổi bật. Google gợi ý rằng nút này mang chức năng thường xuyên truy cập. Đây là một ví dụ:

Đoạn mã sau đây thêm Tài liệu giấy có hình ảnh và FAB.

Chúng tôi sẽ có kết quả như sau:

Chúng tôi có một bức ảnh với một “tim” nút nổi trên đầu nó. Nhấp vào nó để Thích ảnh, quảng cáo nút tạo ra hiệu ứng gợn để xác nhận nhấp chuột.

• Xem bản thử nghiệm trên giấy

3. Thành phần web của Google

Các Thành phần Web của Google là các yếu tố đặc biệt phù hợp với các dịch vụ và API của Google như Google Maps, Youtube, cũng như Google Feed, để kể tên một số. Các yếu tố trong nhóm này thực hiện tương tác với các dịch vụ của Google chỉ cách đó vài dòng.

Sau đây là một ví dụ để hiển thị Google Map bằng cách sử dụng thành phần.

  Đây là Googleplex  

Như bạn có thể ở trên, yếu tố lấy vĩ độ và kinh độ để chỉ định vị trí trên bản đồ. Chúng ta cũng có thể làm tổ để hiển thị điểm đánh dấu trên bản đồ của vị trí đó cùng với văn bản sẽ xuất hiện khi nhấp vào điểm đánh dấu.

• Xem Bản đồ thử

Bạn muốn hiển thị một video Youtube? bạn có thể dùng thành phần.

Tương tự, chúng tôi tùy chỉnh đầu ra thông qua các thuộc tính.

• Xem bản demo Youtube

4. Yếu tố vàng

Các yếu tố vàng là các yếu tố được thiết kế dành riêng cho các ứng dụng thương mại điện tử. Tại đây bạn sẽ tìm thấy yếu tố để hiển thị thẻ tín dụng, email, điện thoại và đầu vào ZIP mà tất cả đã được trang bị xác nhận định dạng để đảm bảo nhập dữ liệu chính xác và bảo mật. Dưới đây là một ví dụ để thêm đầu vào thẻ tín dụng Visa.

5. Các yếu tố khác

Các yếu tố còn lại bao gồm các yếu tố neon cho hoạt hình và hiệu ứng đặc biệt, yếu tố bạch kim cho thông báo ngoại tuyến và thông báo đẩy và cuối cùng là Phân tử, trình bao bọc cho thư viện của bên thứ ba.

Lưu ý của biên tập viên: Tại thời điểm viết bài này, các yếu tố neon, bạch kim và phân tử vẫn chưa có sẵn.

Tích hợp polymer

Bạn muốn sử dụng polymer trong phát triển web của bạn? Đây là cách cài đặt và tích hợp nó vào các trang web của bạn. Vì hầu hết các nguyên tố Polime phụ thuộc lẫn nhau, cách tốt nhất để cài đặt Polyme là thông qua Bower.

Bower là một trình quản lý phụ thuộc dự án giúp cài đặt các tập lệnh hoặc kiểu cần thiết để chạy dự án dễ dàng hơn. Kiểm tra bài viết trước của chúng tôi về cách cài đặt, cập nhật và xóa thư viện web dễ dàng với Bower.

Để tích hợp Polyme, khởi chạy Terminal sau đó điều hướng đến thư mục dự án của bạn, giả sử bạn đã tạo. Sau đó chạy bower init lệnh để khởi tạo tệp bower.json vào dự án của bạn sẽ được sử dụng để ghi lại các phụ thuộc của dự án. Mở bower.json và thêm các dòng sau.

 "phụ thuộc": "polymer": "Polyme / polymer # ^ 1.0.0", "google-web-thành phần": "GoogleWebComponents / google-web-thành phần # ^ 1.0.0", "yếu tố sắt": " PolymerElements / iron-Element # ^ 1.0.0 "," paper-Element ":" PolymerElements / paper-Element # ^ 1.0.0 "," gold-Element ":" PolymerElements / gold-Element # ^ 1.0.0 " 

Thiết lập này giả định rằng chúng tôi sẽ sử dụng tất cả các yếu tố từ mỗi nhóm. Bạn có thể xóa những gì bạn không cần khỏi danh sách phụ thuộc. Khi các phụ thuộc được đặt, chạy cài đặt bower lệnh để cài đặt các phụ thuộc trong danh sách.

Quá trình này có thể mất một chút thời gian vì nó liên quan đến việc lấy một lượng lớn tệp từ kho lưu trữ. Sau khi hoàn thành, bạn sẽ tìm thấy chúng được lưu trong bower_components thư mục.

Mở tệp HTML bạn muốn sử dụng các thành phần Polyme. Trong phần đầu tài liệu, liên kết WebComponents.js đó là polyfill cho các trình duyệt chưa hỗ trợ WebComponents và nhập các tập tin thành phần sử dụng nhập HTML.

Đây là một ví dụ:

Thiết lập này sẽ cho phép chúng tôi sử dụng , , yếu tố.

Trưng bày

Dưới đây là một số ứng dụng web đã sử dụng Google Polymer.

Google

Google đã sử dụng Google Polymer trong trang web Google IO 2015; Google Fi, dịch vụ không dây của Google dành cho các nhà mạng và nhà cung cấp hợp tác; và Google Music.

Yếu tố tùy chỉnh

CustomElements là một trung tâm nơi bạn có thể tìm thấy các thành phần tùy chỉnh được xây dựng với các Thành phần Web. Nó sử dụng phần tử Paper để chứa và xây dựng danh sách. Nó cũng cung cấp một tuyến đường thuận tiện để cài đặt các yếu tố này thông qua Bower và NPM.

Trình chỉnh sửa Chrome Dev

Một ứng dụng Chrome để chỉnh sửa mã hoạt động tốt đáng ngạc nhiên. Ứng dụng này sử dụng nút FAB, menu Paper và các thành phần hộp thoại Paper trong giao diện người dùng.

Nhà thiết kế polymer

Công cụ xây dựng ứng dụng web với các thành phần Polyme bằng giao diện kéo và thả.

Dự báo hàng ngày

Một báo cáo và dự báo giao dịch chứng khoán được xây dựng hoàn toàn với các yếu tố Polyme.

Thư polymer

Một ứng dụng email cho Gmail. Nó trông đẹp và trôi chảy, mặc dù đáng buồn thay, nó không hoạt động đầy đủ.

Suy nghĩ cuối cùng

Polyme có phạm vi rất lớn và có thể bạn sẽ mất một thời gian để làm quen với tất cả các yếu tố tùy chỉnh cũng như API của nó. Tuy nhiên, Thành phần Web và Polyme chắc chắn sẽ ảnh hưởng đến cách chúng tôi xây dựng các ứng dụng web. Đi trước đám đông bằng cách đọc thêm về Thành phần web - các tài liệu tham khảo được tìm thấy bên dưới.

• Xem bản demo
• Tải xuống nguồn

Tài liệu tham khảo hữu ích

• Trạng thái của các thành phần web
• Giới thiệu chi tiết về các yếu tố tùy chỉnh
• Blog chính thức của Google Polymer