Xây dựng ứng dụng web bằng các công cụ hiện đại
Giới thiệu
Allo’ Allo’. Bất cứ ai viết ứng dụng web đều biết tầm quan trọng của việc duy trì năng suất. Bạn sẽ gặp khó khăn khi phải lo lắng về những nhiệm vụ tẻ nhạt như tìm mã nguyên mẫu phù hợp, thiết lập quy trình phát triển và kiểm thử, cũng như rút gọn và nén tất cả các nguồn.
May mắn thay, các công cụ hiện đại cho phần giao diện người dùng có thể giúp tự động hoá phần lớn quy trình này, giúp bạn tập trung vào việc viết một ứng dụng chất lượng cao. Bài viết này sẽ hướng dẫn bạn cách sử dụng Yeoman, một quy trình công cụ cho ứng dụng web để đơn giản hoá việc tạo ứng dụng bằng Polymer, một thư viện polyfill và sugar để phát triển ứng dụng bằng Thành phần web.
Giới thiệu về Yo, Grunt và Bower
Yeoman là một người đàn ông đội mũ có ba công cụ giúp cải thiện năng suất của bạn:
- yo là một công cụ tạo khung cung cấp một hệ sinh thái các khung tạo khung dành riêng cho khung, được gọi là trình tạo có thể dùng để thực hiện một số nhiệm vụ tẻ nhạt mà tôi đã đề cập trước đó.
- grunt được dùng để tạo, xem trước và kiểm thử dự án của bạn, nhờ sự trợ giúp của các tác vụ do nhóm Yeoman và grunt-contrib tuyển chọn.
- bower được dùng để quản lý phần phụ thuộc, nhờ đó, bạn không còn phải tải xuống và quản lý tập lệnh theo cách thủ công nữa.
Chỉ với một hoặc hai lệnh, Yeoman có thể viết mã nguyên mẫu cho ứng dụng (hoặc các phần riêng lẻ như Mô hình), biên dịch Sass, rút gọn và nối CSS, JS, HTML và hình ảnh, đồng thời khởi động một máy chủ web đơn giản trong thư mục hiện tại của bạn. Công cụ này cũng có thể chạy kiểm thử đơn vị và làm nhiều việc khác.
Bạn có thể cài đặt trình tạo từ Node Packaged Modules (npm) và hiện có hơn 220 trình tạo, trong đó có nhiều trình tạo do cộng đồng nguồn mở viết. Các trình tạo phổ biến bao gồm generator-angular, generator-backbone và generator-ember.
Sau khi cài đặt phiên bản mới nhất của Node.js, hãy chuyển đến thiết bị đầu cuối gần nhất và chạy:
$ npm install -g yo
Vậy là xong! Giờ đây, bạn đã có Yo, Grunt và Bower và có thể chạy các công cụ này ngay từ dòng lệnh. Sau đây là kết quả chạy yo:
Trình tạo Polymer
Như tôi đã đề cập trước đó, Polymer là một thư viện polyfill và sugar cho phép sử dụng Thành phần web trong các trình duyệt hiện đại. Dự án này cho phép nhà phát triển xây dựng ứng dụng bằng nền tảng của tương lai và thông báo cho W3C về những nơi có thể cải thiện thêm thông số kỹ thuật trong chuyến bay.
generator-polymer là một trình tạo mới giúp bạn tạo ứng dụng Polymer bằng Yeoman, cho phép bạn dễ dàng tạo và tuỳ chỉnh các phần tử Polymer (tuỳ chỉnh) thông qua dòng lệnh, đồng thời nhập các phần tử đó bằng tính năng Nhập HTML. Điều này giúp bạn tiết kiệm thời gian bằng cách viết mã nguyên mẫu cho bạn.
Tiếp theo, hãy cài đặt trình tạo của Polymer bằng cách chạy:
$ npm install generator-polymer -g
Vậy là xong. Giờ đây, ứng dụng của bạn đã có sức mạnh siêu phàm của Thành phần web!
Trình tạo mới cài đặt của chúng tôi có một số bit cụ thể mà bạn sẽ có quyền truy cập:
polymer:elementđược dùng để tạo khung cho các phần tử Polymer riêng lẻ mới. Ví dụ:yo polymer:element carouselpolymer:appdùng để tạo khung cho index.html ban đầu, một Gruntfile.js chứa cấu hình tại thời điểm tạo bản dựng cho dự án cũng như các tác vụ Grunt và cấu trúc thư mục được đề xuất cho dự án. Bạn cũng có thể sử dụng Sass Bootstrap cho các kiểu của dự án.
Hãy cùng tạo một ứng dụng Polymer
Chúng ta sẽ xây dựng một blog đơn giản bằng cách sử dụng một số phần tử Polymer tuỳ chỉnh và trình tạo mới.
Để bắt đầu, hãy chuyển đến dòng lệnh, tạo một thư mục mới và cd vào thư mục đó bằng mkdir my-new-project && cd $_. Giờ đây, bạn có thể bắt đầu ứng dụng Polymer bằng cách chạy:
$ yo polymer
Thao tác này sẽ tải phiên bản Polymer mới nhất từ Bower và tạo một index.html, cấu trúc thư mục và các tác vụ Grunt cho quy trình làm việc của bạn. Bạn có thể uống cà phê trong khi chờ ứng dụng hoàn tất việc chuẩn bị.
Tiếp theo, chúng ta có thể chạy grunt server để xem trước giao diện của ứng dụng:
Máy chủ hỗ trợ LiveReload, nghĩa là bạn có thể khởi động trình soạn thảo văn bản, chỉnh sửa một phần tử tuỳ chỉnh và trình duyệt sẽ tải lại khi lưu. Điều này giúp bạn có được chế độ xem theo thời gian thực về trạng thái hiện tại của ứng dụng.
Tiếp theo, hãy tạo một phần tử Polymer mới để đại diện cho một bài đăng trên Blog.
$ yo polymer:element post
Yeoman sẽ hỏi chúng ta một vài câu hỏi, chẳng hạn như chúng ta có muốn thêm một hàm khởi tạo hay sử dụng tính năng Nhập HTML để thêm phần tử bài đăng vào index.html hay không. Bây giờ, hãy chọn Không cho hai lựa chọn đầu tiên và để trống lựa chọn thứ ba.
$ yo polymer:element post
[?] Would you like to include constructor=''? No
[?] Import to your index.html using HTML imports? No
[?] Import other elements into this one? (e.g 'another_element.html' or leave blank)
create app/elements/post.html
Thao tác này sẽ tạo một phần tử Polymer mới trong thư mục /elements có tên là post.html:
<polymer-element name="post-element" attributes="">
<template>
<style>
@host { :scope {display: block;} }
</style>
<span>I'm <b>post-element</b>. This is my Shadow DOM.</span>
</template>
<script>
Polymer('post-element', {
//applyAuthorStyles: true,
//resetStyleInheritance: true,
created: function() { },
enteredView: function() { },
leftView: function() { },
attributeChanged: function(attrName, oldVal, newVal) { }
});
</script>
</polymer-element>
Thư mục này bao gồm:
- Mã nguyên mẫu cho phần tử tuỳ chỉnh, cho phép bạn sử dụng loại phần tử DOM tuỳ chỉnh trong trang (ví dụ:
<post-element>) - Thẻ mẫu để tạo mẫu phía máy khách "gốc" và kiểu theo phạm vi mẫu để đóng gói các kiểu của phần tử
- Mẫu đăng ký phần tử và sự kiện trong vòng đời.
Làm việc với nguồn dữ liệu thực
Blog của chúng ta cần có một nơi để viết và đọc các bài đăng mới. Để minh hoạ cách làm việc với một dịch vụ dữ liệu thực tế, chúng ta sẽ sử dụng Google Apps Spreadsheets API. Điều này cho phép chúng ta dễ dàng đọc nội dung của bất kỳ bảng tính nào được tạo bằng Google Tài liệu.
Hãy cùng thiết lập:
Trong trình duyệt (nên dùng Chrome cho các bước này), hãy mở bảng tính này trên Google Tài liệu. Tệp này chứa dữ liệu bài đăng mẫu trong các trường sau:
- Mã nhận dạng
- Tiêu đề
- Tác giả
- Nội dung
- Ngày
- Từ khóa
- Email (của tác giả)
- Phần mở rộng cho URL (dành cho URL phần mở rộng của bài đăng)
Chuyển đến trình đơn Tệp rồi chọn Tạo bản sao để tạo bản sao bảng tính của riêng bạn. Bạn có thể chỉnh sửa nội dung bất cứ lúc nào, thêm hoặc xoá bài đăng.
Quay lại trình đơn File (Tệp) rồi chọn Publish to the web (Xuất bản lên web).
Nhấp vào bắt đầu xuất bản
Trong phần Nhận đường liên kết đến dữ liệu đã xuất bản, hãy sao chép phần khoá của URL được cung cấp trong hộp văn bản cuối cùng. URL sẽ có dạng như sau: https://docs.google.com/spreadsheet/ccc?key=0AhcraNy3sgspdDhuQ2pvN21JVW9NeVA0M1h4eGo3RGc#gid=0
Dán khoá vào URL sau tại vị trí your-key-goes-here: https://spreadsheets.google.com/feeds/list/your-key-goes-here/od6/public/values?alt=json-in-script&callback=. Ví dụ về cách sử dụng khoá ở trên có thể là https://spreadsheets.google.com/feeds/list/0AhcraNy3sgspdDhuQ2pvN21JVW9NeVA0M1h4eGo3RGc/od6/public/values?alt=json-in-script.
Bạn có thể dán URL vào trình duyệt và truy cập vào URL đó để xem phiên bản JSON của nội dung blog. Ghi lại URL rồi dành chút thời gian xem lại định dạng của dữ liệu này vì bạn sẽ cần lặp lại dữ liệu này để hiển thị trên màn hình sau.
Đầu ra JSON trong trình duyệt có thể trông hơi khó hiểu, nhưng bạn đừng lo! Chúng tôi chỉ quan tâm đến dữ liệu về bài đăng của bạn.
API Google Trang tính sẽ xuất ra từng trường trong bảng tính blog của bạn với tiền tố đặc biệt post.gsx$. Ví dụ: post.gsx$title.$t, post.gsx$author.$t, post.gsx$content.$t, v.v. Khi lặp lại từng "hàng" trong kết quả JSON, chúng ta sẽ tham chiếu các trường này để lấy lại các giá trị có liên quan cho từng bài đăng.
Giờ đây, bạn có thể chỉnh sửa phần tử bài đăng mới được tạo để liên kết các phần mã đánh dấu với dữ liệu trong bảng tính. Để làm như vậy, chúng ta sẽ giới thiệu một thuộc tính post. Thuộc tính này sẽ đọc tiêu đề bài đăng, tác giả, nội dung và các trường khác mà chúng ta đã tạo trước đó. Thuộc tính selected (mà chúng ta sẽ điền vào sau) được dùng để chỉ hiển thị một bài đăng nếu người dùng chuyển đến đúng slug của bài đăng đó.
<polymer-element name="post-element" attributes="post selected">
<template>
<style>
@host { :scope {display: block;} }
</style>
<div class="col-lg-4">
<template if="[[post.gsx$slug.$t === selected]]">
<h2>
<a href="#[[post.gsx$slug.$t]]">
[[post.gsx$title.$t ]]
</a>
</h2>
<p>By [[post.gsx$author.$t]]</p>
<p>[[post.gsx$content.$t]]</p>
<p>Published on: [[post.gsx$date.$t]]</p>
<small>Keywords: [[post.gsx$keywords.$t]]</small>
</template>
</div>
</template>
<script>
Polymer('post-element', {
created: function() { },
enteredView: function() { },
leftView: function() { },
attributeChanged: function(attrName, oldVal, newVal) { }
});
</script>
</polymer-element>
Tiếp theo, hãy tạo một phần tử blog chứa cả một tập hợp các bài đăng và bố cục cho blog của bạn bằng cách chạy yo polymer:element blog.
$ yo polymer:element blog
[?] Would you like to include constructor=''? No
[?] Import to your index.html using HTML imports? Yes
[?] Import other elements into this one? (e.g 'another_element.html' or leave blank) post.html
create app/elements/blog.html
Lần này, chúng ta sẽ nhập blog vào index.html bằng cách sử dụng tính năng nhập HTML vì chúng ta muốn blog xuất hiện trong trang. Cụ thể, đối với lời nhắc thứ ba, chúng ta chỉ định post.html làm phần tử mà chúng ta muốn đưa vào.
Giống như trước, một tệp phần tử mới sẽ được tạo (blog.html) và thêm vào /elements, lần này nhập post.html và đưa <post-element> vào thẻ mẫu:
<link rel="import" href="post.html">
<polymer-element name="blog-element" attributes="">
<template>
<style>
@host { :scope {display: block;} }
</style>
<span>I'm <b>blog-element</b>. This is my Shadow DOM.</span>
<post-element></post-element>
</template>
<script>
Polymer('blog-element', {
//applyAuthorStyles: true,
//resetStyleInheritance: true,
created: function() { },
enteredView: function() { },
leftView: function() { },
attributeChanged: function(attrName, oldVal, newVal) { }
});
</script>
</polymer-element>
Vì chúng ta đã yêu cầu nhập phần tử blog bằng tính năng nhập HTML (một cách để đưa và sử dụng lại tài liệu HTML trong các tài liệu HTML khác) vào chỉ mục, nên chúng ta cũng có thể xác minh rằng phần tử đó đã được thêm chính xác vào tài liệu <head>:
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="styles/main.css">
<!-- build:js scripts/vendor/modernizr.js -->
<script src="bower_components/modernizr/modernizr.js"></script>
<!-- endbuild -->
<!-- Place your HTML imports here -->
<link rel="import" href="elements/blog.html">
</head>
<body>
<div class="container">
<div class="hero-unit" style="width:90%">
<blog-element></blog-element>
</div>
</div>
<script>
document.addEventListener('WebComponentsReady', function() {
// Perform some behaviour
});
</script>
<!-- build:js scripts/vendor.js -->
<script src="bower_components/polymer/polymer.min.js"></script>
<!-- endbuild -->
</body>
</html>
Tuyệt vời.
Thêm phần phụ thuộc bằng Bower
Tiếp theo, hãy chỉnh sửa phần tử của chúng ta để sử dụng phần tử tiện ích Polymer JSONP để đọc trong posts.json. Bạn có thể lấy trình chuyển đổi bằng cách sao chép kho lưu trữ qua git hoặc cài đặt polymer-elements thông qua Bower bằng cách chạy bower install polymer-elements.
Sau khi có tiện ích, bạn cần thêm tiện ích đó dưới dạng một tệp nhập trong phần tử blog.html bằng:
<link rel="import" href="../bower_components/polymer-jsonp/polymer-jsonp.html">
Tiếp theo, hãy thêm thẻ cho thẻ này và cung cấp url vào bảng tính bài đăng trên blog của chúng ta từ trước đó, thêm &callback= vào cuối:
<polymer-jsonp auto url="https://spreadsheets.google.com/feeds/list/your-key-value/od6/public/values?alt=json-in-script&callback=" response="[[posts]]"></polymer-jsonp>
Với việc này, chúng ta hiện có thể thêm các mẫu để lặp lại trên bảng tính sau khi đọc bảng tính. Lệnh đầu tiên sẽ xuất ra một mục lục, với tiêu đề được liên kết cho một bài đăng trỏ đến slug của bài đăng đó.
<!-- Table of contents -->
<ul>
<template repeat="[[post in posts.feed.entry]]">
<li><a href="#[[post.gsx$slug.$t]]">[[post.gsx$title.$t]]</a></li>
</template>
</ul>
Lớp thứ hai hiển thị một thực thể của post-element cho mỗi mục nhập được tìm thấy, truyền nội dung bài đăng đến thực thể đó cho phù hợp. Lưu ý rằng chúng ta đang truyền qua một thuộc tính post đại diện cho nội dung bài đăng cho một hàng bảng tính và một thuộc tính selected mà chúng ta sẽ điền bằng một tuyến.
<!-- Post content -->
<template repeat="[[post in posts.feed.entry]]">
<post-element post="[[post]]" selected="[[route]]"></post-element>
</template>
Thuộc tính repeat mà bạn thấy được sử dụng trong mẫu của chúng tôi sẽ tạo và duy trì một thực thể có [[ liên kết ]] cho mọi phần tử trong tập hợp mảng của bài đăng, khi được cung cấp.
Bây giờ, để điền sẵn [[route]] hiện tại, chúng ta sẽ gian lận và sử dụng một thư viện có tên là Flatiron director. Thư viện này liên kết với [[route]] mỗi khi hàm băm URL thay đổi.
Rất may, chúng ta có thể lấy phần tử Polymer (thuộc gói more-elements) cho phần tử này. Sau khi sao chép vào thư mục /elements, chúng ta có thể tham chiếu thư mục đó bằng <flatiron-director route="[[route]]" autoHash></flatiron-director>, chỉ định route làm thuộc tính mà chúng ta muốn liên kết và yêu cầu thư mục đó tự động đọc giá trị của mọi thay đổi về hàm băm (autoHash).
Khi kết hợp tất cả, chúng ta sẽ có:
<link rel="import" href="post.html">
<link rel="import" href="polymer-jsonp/polymer-jsonp.html">
<link rel="import" href="flatiron-director/flatiron-director.html">
<polymer-element name="blog-element" attributes="">
<template>
<style>
@host { :scope {display: block;} }
</style>
<div class="row">
<h1><a href="/#">My Polymer Blog</a></h1>
<flatiron-director route="[[route]]" autoHash></flatiron-director>
<h2>Posts</h2>
<!-- Table of contents -->
<ul>
<template repeat="[[post in posts.feed.entry]]">
<li><a href="#[[post.gsx$slug.$t]]">[[post.gsx$title.$t]]</a></li>
</template>
</ul>
<!-- Post content -->
<template repeat="[[post in posts.feed.entry]]">
<post-element post="[[post]]" selected="[[route]]"></post-element>
</template>
</div>
<polymer-jsonp auto url="https://spreadsheets.google.com/feeds/list/0AhcraNy3sgspdHVQUGd2M2Q0MEZnRms3c3dDQWQ3V1E/od6/public/values?alt=json-in-script&callback=" response="[[posts]]"></polymer-jsonp>
</template>
<script>
Polymer('blog-element', {
created: function() {},
enteredView: function() { },
leftView: function() { },
attributeChanged: function(attrName, oldVal, newVal) { }
});
</script>
</polymer-element>
Tuyệt vời! Bây giờ, chúng ta có một blog đơn giản đang đọc dữ liệu từ JSON và sử dụng hai phần tử Polymer được tạo bằng Yeoman.
Làm việc với các phần tử của bên thứ ba
Hệ sinh thái phần tử xung quanh Thành phần web đã phát triển trong thời gian gần đây với các trang web thư viện thành phần như customelements.io bắt đầu xuất hiện. Khi xem qua các phần tử do cộng đồng tạo, tôi tìm thấy một phần tử để tìm nạp hồ sơ gravatar. Chúng ta cũng có thể lấy và thêm phần tử này vào trang web blog của mình.
Sao chép nguồn phần tử gravatar vào thư mục /elements, đưa vào qua lệnh nhập HTML trong post.html, sau đó thêm
<link rel="import" href="gravatar-element/src/gravatar.html">
<polymer-element name="post-element" attributes="post selected">
<template>
<style>
@host { :scope {display: block;} }
</style>
<div class="col-lg-4">
<template if="[[post.gsx$slug.$t === selected]]">
<h2><a href="#[[post.gsx$slug.$t]]">[[post.gsx$title.$t]]</a></h2>
<p>By [[post.gsx$author.$t]]</p>
<gravatar-element username="[[post.gsx$email.$t]]" size="100"></gravatar-element>
<p>[[post.gsx$content.$t]]</p>
<p>[[post.gsx$date.$t]]</p>
<small>Keywords: [[post.gsx$keywords.$t]]</small>
</template>
</div>
</template>
<script>
Polymer('post-element', {
created: function() { },
enteredView: function() { },
leftView: function() { },
attributeChanged: function(attrName, oldVal, newVal) { }
});
</script>
</polymer-element>
Hãy xem những gì chúng ta có được:
Thật đẹp!
Trong một khoảng thời gian tương đối ngắn, chúng ta đã tạo một ứng dụng đơn giản bao gồm một số thành phần web mà không phải lo lắng về việc viết mã nguyên mẫu, tải các phần phụ thuộc xuống theo cách thủ công hoặc thiết lập máy chủ cục bộ hoặc quy trình xây dựng.
Tối ưu hoá ứng dụng
Quy trình công việc của Yeoman bao gồm một dự án nguồn mở khác có tên là Grunt – một trình chạy tác vụ có thể chạy một số tác vụ dành riêng cho bản dựng (được xác định trong Gruntfile) để tạo phiên bản ứng dụng được tối ưu hoá. Việc tự chạy grunt sẽ thực thi một tác vụ default mà trình tạo đã thiết lập để tìm lỗi mã nguồn, kiểm thử và tạo bản dựng:
grunt.registerTask('default', [
'jshint',
'test',
'build'
]);
Tác vụ jshint ở trên sẽ kiểm tra với tệp .jshintrc để tìm hiểu các lựa chọn ưu tiên của bạn, sau đó chạy tác vụ đó trên tất cả các tệp JavaScript trong dự án. Để biết toàn bộ các tuỳ chọn của bạn với JSHint, hãy xem tài liệu.
Tác vụ test có dạng như sau và có thể tạo cũng như phân phát ứng dụng cho khung kiểm thử mà chúng tôi đề xuất ngay từ đầu, Mocha. Công cụ này cũng sẽ thực thi các kiểm thử cho bạn:
grunt.registerTask('test', [
'clean:server',
'createDefaultTemplate',
'jst',
'compass',
'connect:test',
'mocha'
]);
Vì ứng dụng của chúng ta trong trường hợp này khá đơn giản, nên chúng ta sẽ để bạn tự viết mã kiểm thử dưới dạng một bài tập riêng. Có một số việc khác mà chúng ta cần xử lý trong quy trình xây dựng, vì vậy, hãy xem tác vụ grunt build được xác định trong Gruntfile.js sẽ làm gì:
grunt.registerTask('build', [
'clean:dist', // Clears out your .tmp/ and dist/ folders
'compass:dist', // Compiles your Sassiness
'useminPrepare', // Looks for <!-- special blocks --> in your HTML
'imagemin', // Optimizes your images!
'htmlmin', // Minifies your HTML files
'concat', // Task used to concatenate your JS and CSS
'cssmin', // Minifies your CSS files
'uglify', // Task used to minify your JS
'copy', // Copies files from .tmp/ and app/ into dist/
'usemin' // Updates the references in your HTML with the new files
]);
Chạy grunt build và một phiên bản sẵn sàng phát hành của ứng dụng sẽ được tạo để bạn có thể phân phối. Hãy cùng thử.
Thành công!
Nếu gặp khó khăn, bạn có thể xem phiên bản tạo sẵn của polymer-blog tại https://github.com/addyosmani/polymer-blog.
Chúng tôi còn có gì khác?
Thành phần web vẫn đang trong quá trình phát triển và do đó, các công cụ xung quanh chúng cũng vậy.
Chúng tôi hiện đang xem xét cách nối các lệnh nhập HTML để cải thiện hiệu suất tải thông qua các dự án như Vulcanize (một công cụ của dự án Polymer) và cách hệ sinh thái cho các thành phần có thể hoạt động với trình quản lý gói như Bower.
Chúng tôi sẽ thông báo cho bạn khi có câu trả lời chính xác hơn cho những câu hỏi này. Hãy cùng chờ đón những điều thú vị sắp tới!
Cài đặt Polymer độc lập bằng Bower
Nếu muốn bắt đầu với Polymer một cách đơn giản hơn, bạn có thể cài đặt trực tiếp Polymer từ Bower bằng cách chạy:
bower install polymer
để thêm thư viện này vào thư mục bower_components. Sau đó, bạn có thể tham chiếu đến tệp này trong chỉ mục ứng dụng theo cách thủ công và làm nên điều kỳ diệu trong tương lai.
Bạn nghĩ gì về thông tin này?
Giờ đây, bạn đã biết cách tạo một ứng dụng Polymer bằng cách sử dụng Thành phần web với Yeoman. Nếu bạn có ý kiến phản hồi về trình tạo này, vui lòng cho chúng tôi biết trong phần bình luận hoặc báo lỗi hoặc đăng lên trình theo dõi lỗi của Yeoman. Chúng tôi rất mong được biết bạn có muốn trình tạo này làm gì khác không vì chỉ thông qua việc bạn sử dụng và phản hồi thì chúng tôi mới có thể cải thiện được :)