Web App 行動開發 (3) – Sencha Touch 開發環境建置

12 年前

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 有很多用心的設計，因此在這裡推薦使用。