Cách setup Google Polymer
polymer
1
front-end
3
White

Võ Hoài Nam viết ngày 17/02/2016

Giới thiệu Google Polymer

Cái tên Polymer dường như còn mới với chúng ta, hôm nay, mình xin làm một bài hướng dẫn sơ về nó. Số là hồi đó có làm qua nó nhưng lúc còn version 0.5. Đùng một cái, nó cập nhật lên 1.0. Trong khi project chưa có xong. Vài bữa trước có làm lại, thấy cách cấu hình như nó đã thay đổi nên viết vậy thôi.

Polymer

Giới thiệu Polymer

Polymer là một thư viện được thiết kế theo phong cách Web Components, được phát triển bởi Google. Chủ yếu, thư viện này dùng để thể hiện ngôn ngữ thiết kế Material Design của Google.

Material Design

Đôi khi, Polymer làm mình cũng hơi bối rối. Về cơ bản, AngularJS đã có khái niệm Directive để tạo Web Components và đã ra một phiên bản Angular thiên về Material Design. Nhưng vẫn duy trì song song 2 thư viện này? Nếu có thời gian mình sẽ tìm hiểu, hoặc nếu ai đã tìm hiểu thì cho mình biết nhé.

Hướng dẫn cài đặt

Sử dụng Bower

Đầu tiên, ta gõ lệnh bower init như hình.

bower init

Sau đó, ta cài Polymer và WebComponentsJS.

Installation

Kết quả, ta chỉnh sửa chút xíu sẽ được file bower.json như hình.

bower.json

Tải file Zip

Cách này thì phía Polymer không khuyến khích. Nên cài bằng Bower nếu có thể được. Bạn vào đây để tải về. Link: https://www.polymer-project.org/1.0/docs/start/getting-the-code.html#using-zip

Sau khi tải về và giải nén, bạn copy thư mục bower_components vào nơi bạn cần tạo project.

Archive

Chém gió vài đường

Bây giờ, ta tạo một file mới tên là name-card.html cùng thư mục project của chúng ta.

Structure

Tiếp theo ta sẽ code lần lượt như sau.

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Testing Polymer</title>
    <link rel="import" href="name-card.html">
</head>
<body>
    <name-card name="Nam Hoai Vo" description="Front-End Developer"></name-card>
</body>
</html>
<!-- name-card.html -->
<link rel="import" href="bower_components/polymer/polymer.html">

<dom-module id="name-card">
    <template>
        <div class="name-card">
            <p class="name">{{name}}</p>
            <p class="description">{{description}}</p>
        </div>

        <style>
            .name-card {
                padding: 16px;
                border: 1px solid #616161;
            }
            .name-card > .name {
                font-size: 16px;
                font-weight: 600;
                color: #212121;
            }
            .name-card > .description {
                font-size: 12px;
                font-weight: 400;
                color: #616161;
            }
        </style>
    </template>

    <script>
        Polymer({
            is: "name-card",
            properties: {
                name: {
                    type: String,
                    value: 'Anonymous'
                },
                description: {
                    type: String,
                    value: 'No comment'
                }
            }
        });
    </script>
</dom-module>

Như vậy, ta đã xong bài "Hello World" của Polymer rồi. Nhưng đó chỉ là sử dụng các components cho bạn tự định nghĩa. Còn sử dụng component của Polymer thì làm sao? Sử dụng của nó thì hơi phức tạp tí. Đó là bạn cần dùng đứa nào thì tải component của đứa đó về. Chẳng hạn mình làm demo của paper-card. Đầu tiên, bạn phải tải component cần thiết về.

bower install --save PolymerElements/paper-card
bower install --save PolymerElements/paper-button
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Testing Polymer</title>
    <link rel="import" href="bower_components/paper-card/paper-card.html">
    <link rel="import" href="bower_components/paper-button/paper-button.html">
</head>
<body>
    <paper-card heading="Emmental" image="http://placehold.it/350x150/FFC107/000000">
        <div class="card-content">
        Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one of the cheeses of Switzerland, and is sometimes known as Swiss cheese.
        </div>
        <div class="card-actions">
            <paper-button>Share</paper-button>
            <paper-button>Explore!</paper-button>
        </div>
    </paper-card>
</body>
</html>

Gác bút

Phần chuẩn bị cho project có sử dụng Polymer đến đây xin tạm dừng. Ở phần sau, mình sẽ chỉ cho các bạn một điểm đáng lưu ý của Polymer.

Mọi người có thể vào blog của mình để coi luôn ví dụ.
http://vhnam.github.io/blog/gioi-thieu-google-polymer/

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Võ Hoài Nam

5 bài viết.
38 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
34 7
"Quy tắc ngón tay cái" mà mình đề cập trong bài viết này chính là thói quen sử dụng ngón tay cái trên mobile. Viết rõ ràng như vậy để tránh mấy bài...
Võ Hoài Nam viết hơn 2 năm trước
34 7
White
10 2
Trong một bài test của mình, có một câu là hãy thực hiện (Link) giống của (Link). Cách sử dụng là khi bạn nhập một ký tự thì sẽ gởi một request lên...
Võ Hoài Nam viết hơn 2 năm trước
10 2
White
10 5
Sẵn dịp đọc cuốn (Link) nên mình lược dịch và thêm thắt một số chỗ để có thêm tài liệu tham khảo bằng tiếng Việt. Mình sẽ chia cuốn sách ra làm nhi...
Võ Hoài Nam viết 2 năm trước
10 5
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
5 bài viết.
38 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!