jQuery Mobile + PhoneGap 快速打造 App

再次回到 mobile app 的世界。

最近接了一個 case，要做一個跨平台的 news feed，想到的組合就是 jQuery Mobile + PhoneGap，為了讓 code 更乾淨，也加入了 backbone.js 這個 MV* framework，說真的，這樣的組合我還沒開發過任何一支產品，本身是 back-end 起家，frontend 算是玩興趣的，兜一些小玩意還可以，開發大 project 就辛苦些...


用 jQuery mobile 兜 UI 比 native code 快了 n 倍，常用的 page view、table view、navigation bar...都可以在簡單的幾行 html 搞定。呈現 static 資料很容易，如果是 dynamic 資料對我這新手就...
分析需求之後，大概就幾個版型：category list、title list、content display，然後塞進不同的資料(來源可以是 api server 吐回來的 json)


Main menu 打算用 slide panel 來呈現，panel 這物件是要擺在 page 裡面的，那如果每個 page 都需要 panel 該怎做？
javascript - jquery mobile: do I have to create a new panel for every page - Stack Overflow
一份 menu 共用摟，我想到的是把 panel 獨立成一個 template，在 pageshow event 去加載
看到一些蠻炫的 panel

• 15 Slide Panel jQuery Plugins - DesignHuntR
• 10 jQuery Panel Slider Plugins | jQuery4u

jQM 的 page sample 中，同個 html 嵌了多個 page，這在現實環境也是不合需求的。第一、全部的 page 放在同一頁肯定 code 會過長，第二、page 的內容會是 dynamic 的，page 本身應該只是個樣版
官網有提到動態載入 page 的方式：jQuery Mobile and Dynamic Page Generation
很明顯的沒有 router 與 template 的支援，code 相當冗長，於是就引入了 backbone.js 的 route 與 underscore.js 的 template

由於 jQM 與 backbone.js 都會監聽 hash change event，若要使用後者的 router，請參考

• jQuery Mobile, Backbone.js and Require.js
• Using Backbone.js with jQuery Mobile | Christophe Coenraets

如果閒自己寫 html 太慢，可以使用 jQM UI builder

• jquery mobile UI builder
• mobjectify - Mockups and more for the mobile web
• The Fastest Mobile Prototyping - Codiqa