前端移動庫方案知識整理

問題整理

• web app or Hrbird app

  • web app 能夠直接在手機瀏覽器訪問，完成整個流程，涉及的技術有響應式設計和漸性加強， 以angularjs爲表明。
  • Hrbird app 須要藉助中間件,例如 phonegap 或者 appcan 完成打包，生成apk程序。

• phonegap vs appcan

Phonegap

優勢

• 支持大部分系統：Android,IOS ,Symbian, Windows Phone, Palm WebOS,
• Bada , Symbian
• 開源，能夠進行框架底層優化
• 框架提供自定義控件，能夠調用android原生功能
• 第三方插件豐富
• 安裝包體積偏小
• 文檔豐富
• 可在本地調試、發佈
• 支持本地打包、雲端打包

缺點

• 不一樣平臺須要搭建不一樣開發環境
• 框架沒有UI，須要使用第三方UI插件
• 框架僅提供基本API，擴展功能須要使用第三方插件
• 框架不支持自動加密，須要手動對HTML加密
• 框架未對UI進行優化，應用加載及UI相應時較慢
• 因爲第三方開發人員水平不一樣，插件質量良莠不齊

AppCan

優勢

• 支持四大主流系統：Android,IOS,Symbian,Windows Phone
• 提供一體化解決方案，方便環境搭建、開發、調試、發佈
• 框架自帶UI包，包含經常使用控件樣式
• 框架API豐富
• 支持本地打包、雲端打包
• 基於密鑰的代碼加密
• 技術支持相應及時
• 框架對UI、動畫渲染進行過優化，反應速度快

缺點

• 不開源，沒法修改、優化底層代碼
• 暫不支持自行開發控件/，沒法調取android原生功能
• 框架自帶功能過多，致使應用安裝包偏大。
• 文檔偏少
• 部分系統沒法使用IDE進行調試
• 只能在服務器端發佈，沒法在本地發佈
• IOS發佈，須要將證書上傳至服務器

Angularjs 優勢：

• 雙向數據綁定
• 模板
• MVC
• 依賴注入
• 指令
• 更方便測試

Angular的缺點其實很少.

• angular 入門很容易 但深刻後概念不少, 學習中較難理解.
• 文檔例子很是少, 官方的文檔基本只寫了api, 一個例子都沒有, 不少時候具體怎麼用都是google來的, 或直接問misko,angular的做者.
• 對IE6/7 兼容不算特別好, 就是能夠用jQuery本身手寫代碼解決一些.
• 指令的應用的最佳實踐教程少, angular其實很靈活, 若是不看一些做者的使用原則,很容易寫出 四不像的代碼, 例如js中仍是像jQuery的思想有不少dom操做.
• DI 依賴注入 若是代碼壓縮須要顯示聲明.

前端考慮方案

• appcan 只做爲打包工具，咱們不須要使用他的UI。
• 使用angularjs，業界公認的最好的移動 web app 框架。
• bootstarp - 響應式設計

關於選擇: angular.js VS backbone, 我把整理的一些信息share出來: emberjs, angular, knockout 都算比backbone新出現的MVVM, backbone算MVC. 找到的比較Angular的一些文章: http://955.cc/m2qr 比較Backbone.js, Angular.js, Ember.js, Knockout.js 心得 http://955.cc/mGjX 如今就開始使用AngularJS的三個重要緣由 有人說, 用angularjs代替backbone代碼減小一半, 也看到一些作手機web的由backbone轉到了angularjs. github上面angular的fork目前也已經超過了backbone, 因此大概能夠估計angularjs應該會比backbone更優秀.

關於選擇: jQuery Mobile VS zepto VS Sencha Touch jQuery Mobile 強大之處就在於其UI, 這一部分偏偏不是咱們所須要的, 性能也不算好. Sencha Touch 只支持webkit, 因此適用性不強 用戶羣很少, 第三方支持太少, 對於不熟悉 ExtJs 的人來講有必定的學習成本, 遇到緊急bug很差修改底層. zepto 純JS代碼比jQuery小不少, 兼容JQ語法, 主要針對手機端, 基本能夠從jQuery平滑過分.

關於選擇: seajs VS requirejs seajs的文檔很模糊, 每次升級變更蠻大, 不向下兼容, 用戶羣體不夠多, 須要server是nginx, 打包須要他們本身的一套工具並且文檔很混亂. requirejs 用戶羣體/成功案例比較多, 聽說有重複引用的問題. 相對在正式環境, requirejs應該是更佳的選擇.

dot.js 和 iScroll.js 就不須要和同類對比了, dot.js是目前最快的模板引擎, 其餘公司出品的好比twitter的hogan或者百度/淘寶等等出品的, 按性能都沒有超越DOT. iScroll.js 專門處理手機端的滾動, 應該沒有相似的能夠替代的了.

綜上, 聽說angularjs能夠完成絕大部分之前jquery完成的工做, 而也有本身的模版引擎語法. 因此, 使用angularjs後, zepto.js和dot.js這兩個可能也能夠省掉. 使用angularjs後, 是否須要requirejs也有待討論. angularjs資料: http://angularjs.cn/A003 angular 對開發人員要求很高，它能夠寫出漂亮的難以置信代碼 讓碼農又更多時間思考。代碼的結構，程序的邏輯，頁面的展現，而不是作苦力。

調試工具 ： AngularJS Batarang chrome 插件。

相關資料

最佳實踐

angular-ui

phonegap vs appcan

appcan

http://zouyesheng.com/angular.html

think in AngularJs 改變思惟習慣