Polymer là gì?

Polymer là một components library do Google phát triển để hỗ trợ các nhà phát triển tạo ra các ứng dụng web với các web components có thể tái sử dụng và tích hợp nhiều công nghệ mới. Polymer cung cấp cơ bản nhiều thư viện với các componens như menu, toolbar, map,…

Xem thêm:

Ở bài viết này chỉ nhằm hướng dẫn người mới cách tiếp cận nhanh với Polymer, chứ không nhằm đánh giá hoặc phân tích sâu về nó, nếu bạn muốn hiểu rõ hơn về thư viện này, vui lòng nghiên cứu thêm tại Polymer Project.

Chuẩn bị

  • Bạn cần phải biết cơ bản về HTML, CSS và JavaScript.
  • Cài đặt sẵn NODEJS và Bower – Hoặc có thể dùng Chrome Dev Editor, cách dùng Chrome Dev thì bạn có thể xem thêm trên Google.
  • Cài đặt sẵn git để có thể cài đặt các thành phần – Xem tại Git SCM

Cài đặt Polymer

– Cài đặt Bower (có thể tham khảo thêm tại Bower Website):

Mở cmd hoặc terminal, Di chuyển đến thư mục làm việc, gõ lệnh sau:

Ở lệnh init, khi được hỏi, bạn cứ Enter để chọn mặc định. Kết quả giống như màn hình sau, bạn Enter.
install and init bower

 

Tiếp theo bạn tải về gói Polymer 1.0 bằng cách gõ:

Sau khi chạy xong, bạn gõ tiếp lệnh update để bower cập nhật các gói cần thiết.

** Nếu trong quá trình cài có lỗi, thì bạn kiểm tra lại git, hoặc đường truyền mạng của bạn, hoặc proxy nếu có.

Viết hello-world component đầu tiên với Polymer

Ở phần này chúng ta sẽ viết một component đơn giản có tên hello-world. Sau khi cài đặt xong, cấu trúc thư mục làm việc của chúng ta sẽ có như sau:

Bây giờ chúng ta sẽ tạo 1 tệp tin index.html ở thư mục gốc của project, với cấu trúc đơn giản như sau:

Như bạn thấy ở trên, chúng ta đã tạo một cấu trúc HTML đơn giản, và có sử dụng cặp tag “<hello-world>”, cặp tag này không có trong HTML, và chúng ta sẽ định nghĩa nó.

Trong thư mục “bower_components” tạo mới một thư mục, ở đây tôi đặt tên là “my-components”, sau đó tôi tạo thêm một file có tên “hello-world.html”, và thêm vào đó nội dung như sau:

  • Các thẻ <dom-module> là một định nghĩa của phần tử. Nó định nghĩa cấu trúc của phần tử DOM nội bộ, hay DOM local của phần tử. Trong trường hợp này, bạn đang tạo ra một tag gọi là hello-world.
  • Các thẻ <template> định nghĩa cấu trúc DOM local của phần tử. Đây là nơi bạn sẽ thêm cấu trúc cho các phần tử tùy chỉnh.
  • Thẻ <style> bên trong <template> cho phép bạn định dạng cho các phần trong DOM local, vì vậy sẽ không ảnh hưởng đến phần còn lại của các phần tử của component khác.

Tiếp theo, ta sẽ thêm vào đoạn script bên trong cặp thẻ <script> của file hello-world.html, nội dung như sau:

  • Phương thức Polymer sẽ đăng ký vào trình duyệt, và các argument bên trong nó như là prototype cho thẻ <hello-world>

Khi khai báo xong, bạn lưu lại, và mở file hello-world.html bằng trình duyệt xem thế nào nhé.

Mở thử chưa, kết quả là không có gì hiện lên cả, hãy làm theo tôi tiếp theo, bạn mở lại file index.html ngoài thư mục gốc của project, thêm vào đoạn sau, trước thẻ </head>

Sau đó bạn mở file index.html bằng trình duyệt xem thử nhé, kết quả cũng không được, bạn cần bật server. Ở đây tôi sẽ dùng polyserve để demo, cách cài đặt và sử dụng như sau:

Khi được hỏi, bạn allow để cho phép polyserve vào firewall của Window.

polyserve firewall

 

Kết quả khi start server thành công.

polyserve

Theo thông báo trên màn hình thì bạn mở trình duyệt web và gõ địa chỉ:

để kiểm tra nhé, Và đây là kết quả.

demo-polymer

  • Bạn có thể thấy rằng, bên trong thẻ <hello-world> thì trên trình duyệt tự động lấy nội dung trong <template> của file hello-world.html vào.

Lời kết

Ở bài viết này chỉ mới giới thiệu cách cơ bản để tạo một component, và còn rất nhiều thứ nữa như truyền properties, databinding, Iterating, Behaviors,.. mình sẽ nói trong các bài viết tới. Hoặc các bạn có thể tham khảo các nguồn bên dưới mà mình đang theo dõi.

Nguồn tham khảo:

Polymer JS – Viết chương trình HelloWorld với Polymer
5 (100%) 4 votes

6 BÌNH LUẬN

    • Chào bạn, tôi đang tìm hiểu Polymer, cũng chưa đủ kinh nghiệm để đánh giá, tuy nhiên theo tôi biết thì không so sánh Polymer vs NodeJS được,
      Polymer là một web UI frameworks, nó vẫn cần NodeJS để xử lý phía Server.

  1. Hi anh,
    Bọn em đang làm 1 ứng dụng phần View chỉ được render ở phía Client không biết PolymerJS có thể đáp ứng được như cầu này không?
    Em thấy trên demo để chạy được app thì cần có server (polyserve) để chạy vậy có cách nào không cần serve mà vẫn có thể chạy không? Kiểu giống như AngularJS vậy?
    Cảm ơn anh!

    • Xin chào,
      Rất vui vì sự quan tâm của bạn đến bài viết, lâu rồi bận việc khác nên không thể tiếp tục sâu hơn bộ này.
      Tương tự như angular thì polymer cũng chạy được. Tuy nhiên các lệnh đặc biệt là “import” sẽ không chạy được nếu không có webserver. Nên tối ưu nhất vẫn nên có server bạn nha.
      Không biết ứng dụng bạn cần làm ra sao, mình có hướng giải pháp hợp lý hơn. Hiện tại cách đơn giản nhất là cài python http server, chỉ cần start server là chạy thôi. Hoặc nếu máy có nodejs, thì cài gói http-server và gõ lệnh rất nhanh chóng.

      • Cụ thể ứng dụng là khi người dùng load page đầu tiên thì server sẽ trả hết tất cả tất cả các file tĩnh (html/css/js/images).
        Sau khi load xong, mỗi lần tương tác lấy dữ liệu thì chỉ cần gọi API từ server. Chuyển trang (routing) thì ở dưới client luôn. Giải pháp này đề ra để giải quyết việc tránh việc tốn tài nguyên phía Server.
        Như anh nói phải cần một server để tối ưu, vậy thì có nghĩa mỗi lần tương tác giống như chuyển trang thì cần phía server render hay sao?

BÌNH LUẬN

Nhập mã kiểm tra * Time limit is exhausted. Please reload the CAPTCHA.