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 吧。

本文介紹 Web Starter Kit 的入門第一步：簡單認識開發環境，並開始修改第一個 Web App。首先，必須根據 Web Starter Kit 官方網站上的說明，安裝 Web Starter Kit 所需的開發環境。

從架構面來看，Web Starter Kit 提供二個環境：

• Node.js 的 Runtime
• 一套 Web App 的 HTML5 文件（ Mobile-optimized HTML 模板與 CSS 定義）

Web Starter Kit 並非像是 Android SDK 提供完整的 IDE 環境，所以使用 Web Starter Kit 前，仍有一些背景知識與工具要事前準備好。第一個必備工具，當然就是 Editor 了。撰寫程式碼，包含 HTML5 與 CSS，最佳首選當然就是 Sublime Text 3。Web Starter Kit 官方也推薦這個編輯器；這個編輯器是工程師的基本裝備。

Web Starter Kit 內容比較單純：就只有 Node.js 的 Runtime，以及一套 HTML5 文件模板。不過，它確實簡化許多繁鎖的技術細節。例如，現在的 Node.js 開發者，每個人都有不同的環境，有些人用 Grunt，有些人用 Gulp；同樣是使用 Grunt 環境，每個人撰寫的 Tasks 又不一樣。

使用 HTML5 來開發 Web App，大家的 Page Structure 又不同，每個人還會有自已的 CSS 定義；如果是 RWD 的話，Media Query 的寫法又不一致（對螢幕寬度的定義標準不一）。如果現在大家都直接引用 Web Starter Kit，這一切都可以成為標準。所以，Web Starter Kit 或許有機會把 Multi-Device HTML5 App 的開發與 User Experience 標準化。

Step 1: 編譯

下載並完成 Web Starter Kit 的環境安裝後，直接在 web-starter-kit-0.2.0-beta/ 目錄下執行 gulp 指令，編譯 app/ 下的內容。編譯後的結果，會存放至 dist/ 目錄下。

Step 2: 執行

編譯後，再執行 gulp serve 指令，啟動 Node.js 的 Web Server。Web Starter Kit 的 gulp 環境支援 Live Reload；這時，gulp 會自動開啟瀏覽器，並且自動瀏覽我們的 Web App。

Step 3: 體驗 Live Reload

開啟 app/ 目錄下的 index.html 文件，這就是在上個步驟所看到的網頁。你會發現，index.html 已經將 ViewPort、Page Structure 等各種技術細節，都事先定義完成了。我們的第一個 Web App 就從這裡開始。

首先，可以找到 <header> 區塊，接著將裡頭的 <h1> 文字修改為「InnoBoard」：

        <header class="app-bar promote-layer">
            <div class="app-bar-container">
                <button class="menu"><img src="images/hamburger.svg"></button>
                <h1 class="logo">InnoBoard</h1>
                <section class="app-bar-actions">
                <!-- Put App Bar Buttons Here -->
                </section>
            </div>
        </header>

存檔的同時，會發現 gulp 幫我們重新「整理網頁」了，而且重速相當快。這個功能就叫做 Live Reload。