Framework7 - 是一款開源免費的移動端 HTML 框架

今天首先給你們隆重推薦一款移動端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 協議)。 下載 快速上手 文檔 貢獻代碼

爲何最適合小團隊

上面說了這麼多，其實也都是把官網翻譯了一下，那麼爲何這個框架最適合小團隊呢？我得出這個結論的主要緣由以下：

1. 完備的UI組件 基本上初期的產品不會有太強的自定義需求，很長一段時間都在圍繞系統控件排列組合，從需求的源頭上來看特別常見的就是嫌棄系統默認的alert之類的太醜，老是但願達到原生應用的效果。而Framework7完美地解決了這個問題，幾乎全部的系統控件都已經實現了，複製粘貼代碼片斷就能夠用了。只要不是太奇葩的產品形態，基本就是堆積木同樣的速度了。
2. 極低的上手難度 在這個前端技術爆炸性進化的年代，你要是搞個框架出來不自帶打包工具，不支持自定義元素，不整點MVVM之類的高大上架構方案你都很差意思跟人打招呼。然而愈來愈高大上的方案意味着更高的上手難度，你真的能保證高大上的前端MVVM能被那些培訓班突擊了不到半年的新員工領悟並正確地用在合適的場景嗎？你那些看上去很自動化很強大的打包工具真的沒有把事情搞複雜嗎？咱能簡單點嗎？我就是想在手機上作兩個頁面而已啊！Framework7 在這方面作得足夠簡單，再傳統不過的HTML，若是你不喜歡LESS也能夠直接改CSS，對於廣大隻熟悉jQuery的「僞前端」來講也徹底沒有學習成本，拿來就用。可是該有的AJAX、router、模板引擎同樣很多。
3. 最接近原生的體驗 其實對於廣大不那麼牛逼的「前端工程師」來講不是作不出來頁面或者實現不了某些效果，而是作出來的效果實在差太遠，本身都很差意思拿出手，老闆就更不滿意了。Framework7 在這方面提供了不少關鍵性的特性，動態導航、滑動返回、下拉刷新都是特別常見而新人每每又作很差的部分，如今好了，直接照着文檔套進去就完事兒了。
4. 單頁面的體驗多頁面的實現 手機的屏幕就只有那麼大，因此如今的WebApp多數都會以分屏的方式來實現更復雜的功能。而傳統的頁面跳轉體驗顯然不那麼好，在網絡條件不那麼理想的狀況下每跳轉一次頁面都會白屏一陣兒。因而乎各類各樣的 SPA （Sing Page Application）解決方案層出不窮，相信必定有人試過Angular或者React之類的解決方案，然而現實終究會很殘酷地證實這些重型框架不適合移動端，再怎麼搞性能優化都無濟於事。況且性能優化也不是誰都能作得好的啊。Framework7在這方面就很取巧，該是頁面仍是頁面，該是連接仍是連接，只是經過AJAX和router作到了無刷新加載，這樣頁面仔在寫頁面的時候就能夠比較簡單的區分不一樣的頁面。

弱點

1. 這個框架最初只支持iOS，最近新加的 Material 皮膚也還有一些滑動返回之類的特徵未實現
2. 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的地址選擇器，體驗會更好些，回頭開源出來給你們玩兒。