今天首先給大家隆重推薦一款移動端WebApp開發(fā)神器：Framework7。當(dāng)然啦，這篇帶有比較強(qiáng)烈的主觀意識偏好嘹屯，并且建立在一個必要的前提之上：你希望快速開發(fā)一款移動端的WebApp眉枕，但是團(tuán)隊里并沒有資深的前端工程師。
Framework7 是什么
Framework7 - 是一款開源免費的移動端 HTML 框架疏之， 用于開發(fā)接近原生iOS或Android系統(tǒng)外觀和體驗的 hybrid mobile apps 或 web apps殿雪。當(dāng)然你也可以把它當(dāng)成一款快速制作高保真APP原型的工具。
Framework7 的主要目標(biāo)是讓你能夠輕松地使用 HTML, CSS and JavaScript 開發(fā)iOS 或 Android 應(yīng)用锋爪。Framework7 是非常靈活的丙曙。 它并不會限制你的想象力或者強(qiáng)制搭配某些架構(gòu)方案。 Framework7 給你最大程度的自由其骄。
Framework7 并不打算兼容所有平臺亏镰。 它主要專注 iOS 和 Google Material design 以帶來最好的用戶體驗并保持簡單。
如果你打算開發(fā) iOS 或 Android 平臺下接近原生系統(tǒng)應(yīng)用外觀和體驗的 hybrid app (PhoneGap) 或者 web app 的話 Framework7 絕對適合你拯爽。
像做網(wǎng)站一樣超級簡單
使用 Framework7 開發(fā) iOS 應(yīng)用就像開發(fā)傳統(tǒng)網(wǎng)站一樣簡單索抓。 試著上手實踐一下你就會發(fā)現(xiàn)它驚人的簡單。你只需要一個簡單的HTML頁面并引入 Framework7 的 CSS 和 JS 文件即可毯炮。Framework7 并不強(qiáng)迫你寫那些需要JS處理的自定義標(biāo)簽（不像Angular或React）逼肯。 也并強(qiáng)迫你把所有內(nèi)容都寫在 JavaScript (或JSON)里面。 僅僅是普通的HTML否副，你在HTML里面寫什么就是什么汉矿。沒有黑魔法，沒有MVVM备禀，沒有復(fù)雜高深的理論或者工具需要學(xué)習(xí)洲拇。
側(cè)重 iOS
上面已經(jīng)提到Framework7 是一款側(cè)重 iOS 的框架奈揍。 從一開始，就考慮到如何最方便快捷地實現(xiàn)iOS平臺上各種驚艷的UI組件赋续，以及復(fù)雜的動畫和靈活的觸摸交互男翰。所以Framework7是你實現(xiàn)像素級精確iOS應(yīng)用的最佳選擇。
Material 皮膚
Framework7 Material 皮膚嚴(yán)格按照 Google Material 設(shè)計規(guī)范實現(xiàn)纽乱， 像素級精確實現(xiàn)了 Material 特性 - 包括視覺設(shè)計蛾绎、配色和交互效果。那么現(xiàn)在鸦列， Framework7 也是創(chuàng)建擁有原生 Material 界面和體驗的 Android 應(yīng)用的一個不錯選擇了租冠。
UI組件
Framework7 自帶很多可以直接使用的UI組件和插件，比如 modals,popup,action sheet, popover, list views, media lists, tabs, side panels, layout grid, preloader, form elements 等薯嗤。前面提到的大部分組件都完全不需要你寫任何JS代碼顽爹。
殺手锏
僅僅具備上述特征的話其實很多框架都具備，然而讓我如此推崇這款框架的主要原因是它的幾個獨有的殺手锏功能骆姐。
滑動返回
Framework7的一個最大特色就是提供了的滑動返回功能镜粤，當(dāng)你從屏幕左側(cè)向右滑動的時候可以返回到上一個頁面。并且玻褪，這不是一個 A-B 動畫肉渴，她完全跟隨你的手指觸摸而移動。
滑動操作
是不是希望你的應(yīng)用能像在郵件中一樣向左滑動一條消息就可以刪除带射？Framework7 的列表元素有相同的功能同规，并且有同樣平滑的動畫和觸控交互。
動態(tài)導(dǎo)航欄
就像上面說過的庸诱，F(xiàn)ramework7讓一切都有iOS7的體驗捻浦。其中一個重要的特點就是動態(tài)導(dǎo)航欄。當(dāng)你切換頁面的時候可以清楚地看到導(dǎo)航欄的元素是如何滑動并漸變的桥爽。
下拉刷新
Framework7 可能是第一且唯一一個使用原生滾動條實現(xiàn)下拉刷新功能的框架朱灿。這就是為什么Framework7的下拉刷新組件可以和原生的iOS應(yīng)用相媲美的根本原因。
聊天組件
Framework7 有一個非常強(qiáng)大的”聊天“組件钠四，你可以很容易定制并集成到你的app中盗扒，然后通過實時同步推送數(shù)據(jù)服務(wù)（比如 pusher 或者 PubNub）來實現(xiàn)不同用戶之間發(fā)送消息。
容易定制
Framework7 的一切都是非常簡單的缀去，所有的樣式都被拆分成了模塊化的小.less文件侣灶，所以定制自己的樣式非常容易。
實例展示里可以看到基于 Framework7 開發(fā)的已上架 iOS 和 Android 應(yīng)用:
更多特色
原生滾動條
Framework7最大的特點之一就是使用了原生的滾動條缕碎。所以你的滾動條會有原生滾動條一樣的加速度和回彈褥影，沒有任何bug和性能問題。
多屏視圖
Framework7支持多個獨立的視圖(view)咏雌。并且你可以不用寫任何JS凡怎，只需要在鏈接上加一個 data-view 就可以控制每一個視圖校焦。
不依賴第三方框架
Framework7 不依賴任何第三方框架。所以它很輕量统倒、高性能且靈活寨典。
簡潔的JS API
使用Framework7不需要學(xué)習(xí)任何新的知識，她的JS接口非常簡潔易用并且功能強(qiáng)大房匆。比如耸成，當(dāng)你需要彈出一個alert的時候你只需要 app.alert("Hello World!")。
高性能的動畫
Framework7 只使用帶硬件加速的CSS動畫以達(dá)到最好的性能浴鸿。
頁面動畫
Framework7最主要目標(biāo)之一就是讓你的Web應(yīng)用和iOS本地應(yīng)用有相同的外觀和交互體驗井氢。并且Framework7是唯一一個坐到了1:1精確平滑的頁面切換動畫的框架。
XHR + Caching + History + Preloading
這幾個功能的組合可以讓你的應(yīng)用的路由功能變得非常強(qiáng)大岳链。Framework7 通過Ajax來加載新頁面毙沾，并且可以通過緩存配置讓頁面的加載速度變得非常快宠页。她會在一定的時間內(nèi)緩存Ajax請求的結(jié)果（默認(rèn)是10分鐘），在緩存有效期內(nèi)不會發(fā)送新的請求而是直接從緩存中取出結(jié)果寇仓。
Dom7 - 自定義的DOM庫
Framework7不依賴任何第三方框架举户，包括dom操作，包括jquery遍烦。她有一個自帶的高性能dom庫 - DOM7俭嘁。并且，你不需要因為DOM7而學(xué)習(xí)任何新的知識服猪，因為DOM7的接口和大名鼎鼎的jQuery幾乎是一樣的供填，也支持鏈?zhǔn)秸Z法。
使用 Framework7 開發(fā)的iOS應(yīng)用實例
開發(fā)者：Click Innovate Ltd
開發(fā)者：Andrey Voronin
開發(fā)者：iDangero.us
開發(fā)者：Yevart
開發(fā)者：Bartlomiej Niemtur
開發(fā)者：Tim Busbee
更多實例請移步實例展示
開源免費
Framework7 是完全免費并開源的 (MIT 協(xié)議)罢猪。下載快速上手文檔貢獻(xiàn)代碼
為什么最適合小團(tuán)隊
上面說了這么多近她，其實也都是把官網(wǎng)翻譯了一下，那么為什么這個框架最適合小團(tuán)隊呢膳帕？我得出這個結(jié)論的主要原因如下：
完備的UI組件 基本上初期的產(chǎn)品不會有太強(qiáng)的自定義需求粘捎，很長一段時間都在圍繞系統(tǒng)控件排列組合，從需求的源頭上來看特別常見的就是嫌棄系統(tǒng)默認(rèn)的alert之類的太丑危彩，總是希望達(dá)到原生應(yīng)用的效果攒磨。而Framework7完美地解決了這個問題，幾乎所有的系統(tǒng)控件都已經(jīng)實現(xiàn)了汤徽，復(fù)制粘貼代碼片段就可以用了娩缰。只要不是太奇葩的產(chǎn)品形態(tài)，基本就是堆積木一樣的速度了谒府。
極低的上手難度 在這個前端技術(shù)爆炸性進(jìn)化的年代拼坎，你要是搞個框架出來不自帶打包工具浮毯，不支持自定義元素，不整點MVVM之類的高大上架構(gòu)方案你都不好意思跟人打招呼演痒。然而越來越高大上的方案意味著更高的上手難度亲轨，你真的能保證高大上的前端MVVM能被那些培訓(xùn)班突擊了不到半年的新員工領(lǐng)悟并正確地用在合適的場景嗎？你那些看上去很自動化很強(qiáng)大的打包工具真的沒有把事情搞復(fù)雜嗎鸟顺？咱能簡單點嗎惦蚊？我就是想在手機(jī)上做兩個頁面而已啊讯嫂！Framework7 在這方面做得足夠簡單蹦锋，再傳統(tǒng)不過的HTML，如果你不喜歡LESS也可以直接改CSS欧芽，對于廣大只熟悉jQuery的“偽前端”來說也完全沒有學(xué)習(xí)成本莉掂，拿來就用憎妙。但是該有的AJAX曲楚、router厘唾、模板引擎一樣不少。
最接近原生的體驗 其實對于廣大不那么牛逼的“前端工程師”來說不是做不出來頁面或者實現(xiàn)不了某些效果龙誊，而是做出來的效果實在差太遠(yuǎn)抚垃，自己都不好意思拿出手，老板就更不滿意了趟大。Framework7 在這方面提供了很多關(guān)鍵性的特性鹤树，動態(tài)導(dǎo)航、滑動返回逊朽、下拉刷新都是特別常見而新人往往又做不好的部分罕伯，現(xiàn)在好了，直接照著文檔套進(jìn)去就完事兒了叽讳。
單頁面的體驗多頁面的實現(xiàn) 手機(jī)的屏幕就只有那么大，所以現(xiàn)在的WebApp多數(shù)都會以分屏的方式來實現(xiàn)更復(fù)雜的功能绽榛。而傳統(tǒng)的頁面跳轉(zhuǎn)體驗顯然不那么好灭美，在網(wǎng)絡(luò)條件不那么理想的情況下每跳轉(zhuǎn)一次頁面都會白屏一陣兒推溃。于是乎各種各樣的 SPA （Sing Page Application）解決方案層出不窮届腐，相信一定有人試過Angular或者React之類的解決方案铁坎，然而現(xiàn)實終究會很殘酷地證明這些重型框架不適合移動端蜂奸，再怎么搞性能優(yōu)化都無濟(jì)于事。何況性能優(yōu)化也不是誰都能做得好的啊硬萍。Framework7在這方面就很取巧扩所，該是頁面還是頁面祖屏，該是鏈接還是鏈接，只是通過AJAX和router做到了無刷新加載期丰，這樣頁面仔在寫頁面的時候就可以比較簡單的區(qū)分不同的頁面舶衬。
弱點
這個框架最初只支持iOS圾浅，最近新加的 Material 皮膚也還有一些滑動返回之類的特征未實現(xiàn)
JS文件沒有模塊化的解決方案，幾乎所有的業(yè)務(wù)邏輯都只能寫在一個JS文件里面，如果應(yīng)用比較大邏輯比較復(fù)雜的話，可維護(hù)性是個問題轩性。
中文資源
國內(nèi)的阿里巴巴國際UED團(tuán)隊曾經(jīng)翻譯過該框架1.2.0版的官方文檔http://framework7.taobao.org/
不需要這么復(fù)雜的功能狠鸳？
如果你的應(yīng)用并不需要這么復(fù)雜的交互揣苏，也用不上那么多的UI控件脯厨，那么你可以試試Ratchet，同樣支持iOS和Android兩種風(fēng)格坑质，非常輕量合武，依賴的JS代碼量非常小且均為純原生JS眯杏。Twitter出品，跟大名鼎鼎的Bootstrap一脈相承壳澳。更重要的是代碼風(fēng)格非常棒岂贩，如果你打算自己造個新輪子的話萎津，那么這個 Ratchet 絕對是你最好的參考對象沒有之一。
有沒有介于兩者之間的抹镊？
還真有锉屈，哈哈。我們上面提到過的阿里巴巴國際UED團(tuán)隊垮耳，在綜合了前兩者的基礎(chǔ)之上颈渊，改良了一個很適合中國國情的輪子：SUI Mobile。跟阿里的其它前端開源項目一樣终佛，直接提供帶combo功能的CDN版本俊嗽。這下連自己部署都省了，直接引用就可以開始了铃彰。這個新造的輪子沒有Android版皮膚绍豁，但是加入了中國省市聯(lián)動選擇器這種中國特色的組件，不過我個人曾經(jīng)寫過一個基于百度地圖API的地址選擇器牙捉，體驗會更好些竹揍，回頭開源出來給大家玩兒。
