今天首先給大家隆重推薦一款移動端WebApp開發神器：Framework7。當然啦，這篇帶有比較強烈的主觀意識偏好，並且建立在一個必要的前提之上：你希望快速開發一款移動端的WebApp，但是團隊里並沒有資深的前端工程師。
Framework7 是什么
Framework7 - 是一款開源免費的移動端 HTML 框架， 用於開發接近原生iOS或Android系統外觀和體驗的 hybrid mobile apps 或 web apps。當然你也可以把它當成一款快速制作高保真APP原型的工具。
Framework7 的主要目標是讓你能夠輕松地使用 HTML, CSS and JavaScript 開發iOS 或 Android 應用。Framework7 是非常靈活的。 它並不會限制你的想象力或者強制搭配某些架構方案。 Framework7 給你最大程度的自由。
Framework7 並不打算兼容所有平台。 它主要專注 iOS 和 Google Material design 以帶來最好的用戶體驗並保持簡單。
如果你打算開發 iOS 或 Android 平台下接近原生系統應用外觀和體驗的 hybrid app (PhoneGap) 或者 web app 的話 Framework7 絕對適合你。
像做網站一樣超級簡單
使用 Framework7 開發 iOS 應用就像開發傳統網站一樣簡單。 試着上手實踐一下你就會發現它驚人的簡單。你只需要一個簡單的HTML頁面並引入 Framework7 的 CSS 和 JS 文件即可。Framework7 並不強迫你寫那些需要JS處理的自定義標簽（不像Angular或React）。 也並強迫你把所有內容都寫在 JavaScript (或JSON)里面。 僅僅是普通的HTML，你在HTML里面寫什么就是什么。沒有黑魔法，沒有MVVM，沒有復雜高深的理論或者工具需要學習。
側重 iOS
上面已經提到Framework7 是一款側重 iOS 的框架。 從一開始，就考慮到如何最方便快捷地實現iOS平台上各種驚艷的UI組件，以及復雜的動畫和靈活的觸摸交互。所以Framework7是你實現像素級精確iOS應用的最佳選擇。
Material 皮膚
Framework7 Material 皮膚嚴格按照 Google Material 設計規范實現， 像素級精確實現了 Material 特性 - 包括視覺設計、配色和交互效果。那么現在， Framework7 也是創建擁有原生 Material 界面和體驗的 Android 應用的一個不錯選擇了。
UI組件
Framework7 自帶很多可以直接使用的UI組件和插件，比如 modals,popup,action sheet, popover, list views, media lists, tabs, side panels, layout grid, preloader, form elements 等。前面提到的大部分組件都完全不需要你寫任何JS代碼。
殺手鐧
僅僅具備上述特征的話其實很多框架都具備，然而讓我如此推崇這款框架的主要原因是它的幾個獨有的殺手鐧功能。
滑動返回
Framework7的一個最大特色就是提供了的滑動返回功能，當你從屏幕左側向右滑動的時候可以返回到上一個頁面。並且，這不是一個 A-B 動畫，她完全跟隨你的手指觸摸而移動。
滑動操作
是不是希望你的應用能像在郵件中一樣向左滑動一條消息就可以刪除？Framework7 的列表元素有相同的功能，並且有同樣平滑的動畫和觸控交互。
動態導航欄
就像上面說過的，Framework7讓一切都有iOS7的體驗。其中一個重要的特點就是動態導航欄。當你切換頁面的時候可以清楚地看到導航欄的元素是如何滑動並漸變的。
下拉刷新
Framework7 可能是第一且唯一一個使用原生滾動條實現下拉刷新功能的框架。這就是為什么Framework7的下拉刷新組件可以和原生的iOS應用相媲美的根本原因。
聊天組件
Framework7 有一個非常強大的”聊天“組件，你可以很容易定制並集成到你的app中，然后通過實時同步推送數據服務（比如 pusher 或者 PubNub）來實現不同用戶之間發送消息。
容易定制
Framework7 的一切都是非常簡單的，所有的樣式都被拆分成了模塊化的小 .less 文件，所以定制自己的樣式非常容易。
實例展示里可以看到基於 Framework7 開發的已上架 iOS 和 Android 應用:
更多特色
原生滾動條
Framework7最大的特點之一就是使用了原生的滾動條。所以你的滾動條會有原生滾動條一樣的加速度和回彈，沒有任何bug和性能問題。
多屏視圖
Framework7支持多個獨立的視圖(view)。並且你可以不用寫任何JS，只需要在鏈接上加一個 data-view 就可以控制每一個視圖。
不依賴第三方框架
Framework7 不依賴任何第三方框架。所以它很輕量、高性能且靈活。
簡潔的JS API
使用Framework7不需要學習任何新的知識，她的JS接口非常簡潔易用並且功能強大。比如，當你需要彈出一個alert的時候你只需要 app.alert("Hello World!")。
高性能的動畫
Framework7 只使用帶硬件加速的CSS動畫以達到最好的性能。
頁面動畫
Framework7最主要目標之一就是讓你的Web應用和iOS本地應用有相同的外觀和交互體驗。並且Framework7是唯一一個坐到了1:1精確平滑的頁面切換動畫的框架。
XHR + Caching + History + Preloading
這幾個功能的組合可以讓你的應用的路由功能變得非常強大。Framework7 通過Ajax來加載新頁面，並且可以通過緩存配置讓頁面的加載速度變得非常快。她會在一定的時間內緩存Ajax請求的結果（默認是10分鍾），在緩存有效期內不會發送新的請求而是直接從緩存中取出結果。
Dom7 - 自定義的DOM庫
Framework7不依賴任何第三方框架，包括dom操作，包括jquery。她有一個自帶的高性能dom庫 - DOM7。並且，你不需要因為DOM7而學習任何新的知識，因為DOM7的接口和大名鼎鼎的jQuery幾乎是一樣的，也支持鏈式語法。
使用 Framework7 開發的iOS應用實例
Sprint Social
開發者： Click Innovate Ltd
TeamSpender
開發者： Andrey Voronin
Series Seven
開發者： iDangero.us
Monday Delights
開發者： Yevart
PolyGen
開發者： Bartlomiej Niemtur
Wonder Polls
開發者： Tim Busbee
更多實例請移步 實例展示
開源免費
Framework7 是完全免費並開源的 (MIT 協議)。 下載 快速上手 文檔 貢獻代碼
為什么最適合小團隊
上面說了這么多，其實也都是把官網翻譯了一下，那么為什么這個框架最適合小團隊呢？我得出這個結論的主要原因如下：
- 完備的UI組件 基本上初期的產品不會有太強的自定義需求，很長一段時間都在圍繞系統控件排列組合，從需求的源頭上來看特別常見的就是嫌棄系統默認的alert之類的太丑，總是希望達到原生應用的效果。而Framework7完美地解決了這個問題，幾乎所有的系統控件都已經實現了，復制粘貼代碼片段就可以用了。只要不是太奇葩的產品形態，基本就是堆積木一樣的速度了。
- 極低的上手難度 在這個前端技術爆炸性進化的年代，你要是搞個框架出來不自帶打包工具，不支持自定義元素，不整點MVVM之類的高大上架構方案你都不好意思跟人打招呼。然而越來越高大上的方案意味着更高的上手難度，你真的能保證高大上的前端MVVM能被那些培訓班突擊了不到半年的新員工領悟並正確地用在合適的場景嗎？你那些看上去很自動化很強大的打包工具真的沒有把事情搞復雜嗎？咱能簡單點嗎？我就是想在手機上做兩個頁面而已啊！Framework7 在這方面做得足夠簡單，再傳統不過的HTML，如果你不喜歡LESS也可以直接改CSS，對於廣大只熟悉jQuery的“偽前端”來說也完全沒有學習成本，拿來就用。但是該有的AJAX、router、模板引擎一樣不少。
- 最接近原生的體驗 其實對於廣大不那么牛逼的“前端工程師”來說不是做不出來頁面或者實現不了某些效果，而是做出來的效果實在差太遠，自己都不好意思拿出手，老板就更不滿意了。Framework7 在這方面提供了很多關鍵性的特性，動態導航、滑動返回、下拉刷新都是特別常見而新人往往又做不好的部分，現在好了，直接照着文檔套進去就完事兒了。
- 單頁面的體驗多頁面的實現 手機的屏幕就只有那么大，所以現在的WebApp多數都會以分屏的方式來實現更復雜的功能。而傳統的頁面跳轉體驗顯然不那么好，在網絡條件不那么理想的情況下每跳轉一次頁面都會白屏一陣兒。於是乎各種各樣的 SPA （Sing Page Application）解決方案層出不窮，相信一定有人試過Angular或者React之類的解決方案，然而現實終究會很殘酷地證明這些重型框架不適合移動端，再怎么搞性能優化都無濟於事。何況性能優化也不是誰都能做得好的啊。Framework7在這方面就很取巧，該是頁面還是頁面，該是鏈接還是鏈接，只是通過AJAX和router做到了無刷新加載，這樣頁面仔在寫頁面的時候就可以比較簡單的區分不同的頁面。
弱點
- 這個框架最初只支持iOS，最近新加的 Material 皮膚也還有一些滑動返回之類的特征未實現
- JS文件沒有模塊化的解決方案，幾乎所有的業務邏輯都只能寫在一個JS文件里面，如果應用比較大邏輯比較復雜的話，可維護性是個問題。
中文資源
國內的阿里巴巴國際UED團隊曾經翻譯過該框架1.2.0版的官方文檔 http://framework7.taobao.org/
不需要這么復雜的功能？
如果你的應用並不需要這么復雜的交互，也用不上那么多的UI控件，那么你可以試試Ratchet ，同樣支持iOS和Android兩種風格，非常輕量，依賴的JS代碼量非常小且均為純原生JS。Twitter出品，跟大名鼎鼎的Bootstrap一脈相承。更重要的是代碼風格非常棒，如果你打算自己造個新輪子的話，那么這個 Ratchet 絕對是你最好的參考對象沒有之一。
有沒有介於兩者之間的？
還真有，哈哈。我們上面提到過的阿里巴巴國際UED團隊，在綜合了前兩者的基礎之上，改良了一個很適合中國國情的輪子： SUI Mobile。跟阿里的其它前端開源項目一樣，直接提供帶combo功能的CDN版本。這下連自己部署都省了，直接引用就可以開始了。這個新造的輪子沒有Android版皮膚，但是加入了中國省市聯動選擇器這種中國特色的組件，不過我個人曾經寫過一個基於百度地圖API的地址選擇器，體驗會更好些，回頭開源出來給大家玩兒。