MPA 與 SPA 的差別
賣了兩個關子，終於要開始介紹如何開發 Web App 了，今天的主角就是 Sencha Touch，未來一系列文章也會把重點放在這裡。開始之前先介紹一下，一般來說 Web 可以分成 MPA 與 SPA 兩種風格：
MPA (Multi-page Application) 多頁面應用指的就是最傳統的 HTML 網頁設計，早期的網站都是這樣的設計，所之稱為「網頁設計」。使用 MPA 在使用者瀏覽 Web 時會依據點擊需求切換頁面，瀏覽器會不停的重載頁面 (Reload)，M$ IE 就會一直發出卡卡卡的聲音，整個操作也常感覺卡卡。如果使用這樣的設計在 Web App 中，使用者體驗比較差，整體流暢度扣分。但進入門檻低，簡單套個 jQuery Mobile 就可以完成。
SPA (Single-page Application) 顧名思義在 Web 設計上使用單一頁面，利用 JavaScript 操作 Dom 的技術實現各種應用，現今在介面上算是非常受歡迎的設計，搭配 AJAX 使得整體介面反應速度相當迅速，並且能夠實現各種豐富的使用者介面。典型的 gmail 就是最好的例子。缺點是學習門檻高，而 JavaScript 又有跨瀏覽器的問題，此外在不 Reload 頁面的狀況下，記憶體控制也變得更複雜與重要，也是我們為什麼要介紹 UI Framework 來開發的原因。
Sencha Touch 介紹
開發 Web App 之前找個成熟的 UI Framework 來實作 SPA 是正確的決定，市面上有非常多的 Mobile UI Framework，最有名的就是 jQuery Mobile 與 Sencha Touch，如果要朝向 SPA 設計，選擇 Sencha Touch 會比較適合。最重要的是到目前來看，Sencha Touch 是免費且開放的（使用 Open Source GPLv3 License），而我也一直支持開放原始碼軟體。
Sencha Touch 是一個行動裝置使用介面的開發框架，包含了完整的 UI 元件與物件導向設計概念，當然也包含了 MVC 設計，除此之外還提供完整的測試與佈署框架。Sencha 的核心是 Ext.JS，所以學習過 Ext.JS 的朋友們如果要入手 Sencha Touch 會感覺非常熟悉。
除此之外 Sencha Touch 還有很多附屬的應用軟體，像是 Project 管理工具 Sencha CMD, 圖表函式 Touch Charts, 視覺化 UI 開發工具 Sencha Architect 與類似 Flash 的 Sencha Animator (HTML5 Baesd)。在看過部分 Sencha Touch 的 Source Code 之後發現這個 Framework 有很多用心的設計，因此在這裡推薦使用。
安裝 Sencha Touch 開發環境
開始吧，我們接下來介紹如何建立開發環境，請先準備以下環境：
- 電腦一台 (作業系統安裝 Windows, Linux, Mac 都可以，我確定這些平台都可以順利執行)
- 安裝 Safari 瀏覽器 (下載位置)
- 準備一個好用的 IDE 用文字編輯工具，最好支援 JavaScript 解析
準備好後接下來請下載 Sencha Touch 2 GPL 壓縮檔 (目前最新版本為 2.1.1)，下載後請直接解壓縮，網址如下：
http://www.sencha.com/products/touch/download/
接著下載 Sencha CMD 安裝檔(目前最新版本為 3.0.2.288)，Sencha 前身為 Sencha Tools 可以用來管理 Ext.JS Project，網址如下：
http://www.sencha.com/products/senchacmd/
下載後執行並進行安裝，畫面如下：
安裝後進入「命令提示字元」輸入「sencha」按下 <Enter> 鍵，就會出現以下畫面顯示目前 sencha 命令的版本，看到這個畫面就表示你成功了。
建置你的第一個 Sencha Project
再來我們先切換至剛剛下載的 Sencha Touch 解壓縮目錄，接著透過 sencha 這個命令建立 Sencha Touch Project，請輸入以下命令：
sencha generate app MyApp e:\Myapp
上面的命令中 MyApp 是 App 名稱，最後 e:\Myapp 是指定 Project 產生的目錄。按下 <Enter> 後你就會看到 sencha 程式幫我們在指定的目錄建立 Sencha Touch Project，執行畫面如下：
產生的 Sencha Touch 檔案如下：
接下來我們用 Safari 開啟 index.html 就可以看到我們的 App 順利執行了，點擊下方的選單，是不是很有 App 的感覺呢？
善用 Safari 開發者工具
未來的開發上可以多利用 Safari 內建的開發者工具輔助我們進行 Debug，開啟方式先進入「偏好設定」將「在選單列中顯示 "開發人員" 選單」打勾，畫面如下：
接著我們就可以按下 <Ctrl> + <Alt> + <C> 開啟開發者工具了，開啟後的畫面如下：
先介紹到這裡，下一篇文章會開始慢慢介紹 Sencha Touch 的架構與開發教學，敬請期待。
系列文章
- Web App 行動開發 (1) - Web App 開發介紹
- Web App 行動開發 (2) - 如何設計出一個好用的 Web App？
- Web App 行動開發 (3) – Sencha Touch 開發環境建置
- Web App 行動開發 (4) – Sencha Touch 基本架構介紹
- Web App 行動開發 (5) – Sencha Touch 物件導向類別系統介紹
- Web App 行動開發 (6) – Sencha Touch 初探 Application
- Web App 行動開發 (7) – Sencha Touch Device Profile 實作教學
- Web App 行動開發 (8) – Sencha Touch Component 介紹