認識 Web Starter Kit

nikybook 2015-06-12

展开全文

Bootstrap 是一個廣受歡迎的 CSS Framework，它有現成的 Grid System 可以支援 Responsive Web Design（RWD）網頁製作。Responsive Web Design是製作多屏（Multi-Device）網頁的技術，RWD 能讓網頁同時在 PC、平板與手機等不同的 Screen 上顯示。

一些 App 開發者，會以 HTML5 的技術來製作 App。除了直接撰寫 Media Query 外，利用像是 Bootstrap 這樣的 CSS Framework 也大有人在。現在，HTML5 App 開發者又多了另外一個選擇了：Web Starter Kit。Web Starter Kit 是 Google 官方出品的工具，它的主要目的就是幫助開發者，製作 Responsive Web Design 的 App。

主要特色

根據 Web Starter Kit 的官方說明，這套工具的主要特色如下：

提供一個 Mobile-optimized 的 HTML5 文件模板
提供 RWD 的能力
提供一些視覺化的組件（Component）
提供一套基於 GulpJS Build System 的環境

在 2013 年以前，Node.js 開發者會使用 Grunt 來搭建工作環境；Grunt 是一個 Task Runner 環境，用來撰寫一些「任務」，例如：啟動 Node.js 主程式的任務、或是最小化 CSS 的任務。這有點像是 Makefile 環境。

使用 Gulp.js

Gulp.js 在 2014 年橫空出世，有一種完全取代 Grunt 的感覺。 Gulp.js 的特點是使用了 Node.js 的 Streams 系統，Streams 是一個非常重要的 Node.js 特色。Streams 提供了抽象的 Read/Write 接口，並且基於 EventEmitter。

EventEmitter 又是什麼東西呢？這是一個 Node.js 的事件處理系統，Backend 開發者會用它來實作 Workflow Automation。總而言之，基於 Streams 的 Gulp 擁有更好的處理效能。

此外，寫過 Gruntfile.js （Grunt 的設定檔）的開發者都知道，Gruntfile.js 雖然也是使用 JavaScript 語法，但程式碼內容並不好看；意思是，感覺不像是在寫 Node.js 程式。Gulp.js 就很有寫程式的感覺。Web Starter Kit 會採用 Gulp.js 一點都不另人意外。

Responsive Web Design Patterns

Web Starter Kit 的另一個特點是，它把 Responsive Web Design 歸納成一套 Patterns，稱為 Responsive Web Design Patterns。個人認為，這是 Web Starter Kit 非常重要的貢獻。雖然類似這種 Mobile-optimized UI Patterns 不在少數（例如 Android App 就有自已的 UI Patterns），但 Web Starter Kit 為繁為簡、汲取各家之優點，整理出 5 個基礎的模式，對於使用 HTML5 來開發 Multi-Deivce Apps 是非常重要的 Milestone。這項貢獻有助於達到二個重要目的：

Unified user experience。未來可以統一操作方式：提供使用者一致性的操作經驗。
Device experience。Web Starter Kit 的目標是 Multi-Device，所以提供好的、一致性的裝置使用經驗，就是一個重要的技術工作。

Web Starter Kit 的 Responsive Web Design Patterns 看起來，直接引用了大家已經習慣多時的操作介面，而不是重新發明，例如：Off canvas；Off canvas 是在設計 Web 時，很常用的一種選單設計方式。所以，依循 Web Starter Kit 的這 5 個 Patterns 來設計 UI，理論上可以讓使用者「無痛上手」你的 App。

Mobile-optimized HTML5 模板

在 Web Starter Kit 的 app/ 目錄下，可以找到一個 index.html 檔案，這就是 Web Starter Kit 提供的 "Hello, World" 模板。在這個模板裡，已經定義好 ViewPort、iOS web apps meta data、page structure 等基本資訊，這些重覆性的工作，都不需要再自已實作了；所以，開啟這個檔案，開始擴充你的第一個 Web app 吧。

本文轉載自：Jollen's Blog