移動(dòng)APP開(kāi)發(fā)框架概覽——Web移動(dòng)前端框架大盤(pán)點(diǎn)

一、開(kāi)篇概述

開(kāi)源項(xiàng)目的成熟周期大約三年一輪，自React框架于2013年引爆前端框架熱潮開(kāi)始，我們見(jiàn)證了一個(gè)又一個(gè)技術(shù)周期的崛起。緊接著，React Native在2015年的開(kāi)源，標(biāo)志著Web移動(dòng)前端周期的開(kāi)啟。從15至16年，再到18-19年，直至當(dāng)前的21-22年，移動(dòng)前端領(lǐng)域經(jīng)歷了三次爆發(fā)。

二、移動(dòng)開(kāi)發(fā)框架的演進(jìn)

三年前，在第一個(gè)成熟收獲期，我們?cè)鴮?duì)移動(dòng)開(kāi)發(fā)框架進(jìn)行了盤(pán)點(diǎn)。如今，站在第二個(gè)成熟收獲期的起點(diǎn)，我們?cè)俅伪患夹g(shù)發(fā)展的速度所震撼。當(dāng)查看GitHub項(xiàng)目的代碼頻率時(shí)，一個(gè)驚人的周期規(guī)律浮出水面。

三、框架的興衰與現(xiàn)狀

在盤(pán)點(diǎn)過(guò)程中，一個(gè)有趣的發(fā)現(xiàn)浮出水面：停止維護(hù)的項(xiàng)目中，絕大多數(shù)為Vue框架項(xiàng)目。而React框架在選擇面和成熟度上，已逐漸超越Vue。盡管原因多樣，但每個(gè)人心中都有自己的看法。

網(wǎng)頁(yè)類(lèi)框架即前端組件框架，雖然有不少項(xiàng)目停止維護(hù)，但也有許多項(xiàng)目堅(jiān)持下來(lái)，并且涌現(xiàn)了一批新項(xiàng)目。大廠的移動(dòng)開(kāi)發(fā)需求遠(yuǎn)高于其他方面，個(gè)人項(xiàng)目要堅(jiān)持確實(shí)不易。

四、漸進(jìn)類(lèi)框架的多端同構(gòu)趨勢(shì)

此次的重點(diǎn)是漸進(jìn)類(lèi)框架，即所謂多端同構(gòu)框架（小程序框架）。隨著國(guó)內(nèi)小程序平臺(tái)的興起，多端框架的需求日益旺盛。盡管大多數(shù)先行者未能堅(jiān)持下來(lái)，但Taro的成功讓我們看到了希望。這類(lèi)框架變化最大，未來(lái)仍將有眾多框架競(jìng)爭(zhēng)出局。漸進(jìn)類(lèi)框架作為過(guò)渡性產(chǎn)品，最終將融入橋接類(lèi)框架之中。與橋接類(lèi)框架協(xié)同是框架未來(lái)的出路。這個(gè)賽道已經(jīng)基本被大廠所占據(jù)。

五、新興跨端開(kāi)發(fā)框架的探討——以Hippy為例

如騰訊的新一代跨端開(kāi)發(fā)框架Hippy，作為淘寶Weex的對(duì)標(biāo)項(xiàng)目，其功能全面壓制，官方支持React和Vue兩種主流前端框架。Hippy 2.x架構(gòu)分為三個(gè)層次：UI(JS)層、中間層C++以及渲染層Android和iOS。它致力于抹平平臺(tái)差異性并提供高性能模塊。面對(duì)Weex的停更，Hippy的發(fā)布無(wú)疑加劇了競(jìng)爭(zhēng)。未來(lái)的移動(dòng)應(yīng)用開(kāi)發(fā)框架將如何演變，我們拭目以待。

移動(dòng)APP開(kāi)發(fā)框架持續(xù)演進(jìn)，Web移動(dòng)前端領(lǐng)域更是百花齊放。在技術(shù)的浪潮中，我們需要緊跟步伐，不斷學(xué)習(xí)和探索新的技術(shù)趨勢(shì)。

一、Weex的落幕與北海的崛起

Weex項(xiàng)目的終止是必然的，而淘寶隨后推出的升級(jí)版“北?！表?xiàng)目，正為實(shí)現(xiàn)“Write Once, Run Everywhere”的目標(biāo)而努力。北?；贔lutter并采用自繪技術(shù)。

二、Hippy 3.x的功能擴(kuò)展與騰訊風(fēng)格

Hippy 3.x繼承了以往版本的Kpi功能并持續(xù)擴(kuò)展，這充分展現(xiàn)了騰訊的迭代與創(chuàng)新風(fēng)格。未來(lái)，Hippy將在業(yè)務(wù)與渲染層提供更多靈活性。業(yè)務(wù)層不再局限于JS驅(qū)動(dòng)，可以選擇DSL、Dart等其他語(yǔ)言驅(qū)動(dòng)；渲染層也將支持除原生渲染外的其他渲染方式，如Flutter（Voltron）渲染。

三、北海Kraken：高性能Web渲染引擎

Kraken是一款基于Flutter的高性能Web渲染引擎。它提供了豐富的API接口，支持多種開(kāi)發(fā)框架如Vue、Rax和React等。Kraken追求全平臺(tái)一致性，并致力于遵循W3C標(biāo)準(zhǔn)。作為一款小號(hào)瀏覽器，它的主要任務(wù)是確保標(biāo)準(zhǔn)的嚴(yán)謹(jǐn)執(zhí)行。

四、Hummer：超輕量級(jí)動(dòng)態(tài)化跨端開(kāi)發(fā)框架

Hummer是滴滴出行推出的超輕量級(jí)動(dòng)態(tài)化跨端開(kāi)發(fā)框架。它以JS引擎為基礎(chǔ)，支持多種JS引擎如JavaScriptCore、Hermers等。Hummer通過(guò)舍棄DSL層和VDOM層換來(lái)接近原生開(kāi)發(fā)的體驗(yàn)和性能。在此基礎(chǔ)上，還開(kāi)發(fā)了基于MVVM架構(gòu)的開(kāi)發(fā)框架Tenon，可將Vue或React代碼轉(zhuǎn)換為原生Hummer代碼。Hummer作為小程序平臺(tái)，具有超輕量特點(diǎn)，為APP無(wú)限提升能力提供了可能。

五、前端框架的發(fā)展與探索

當(dāng)前，Web移動(dòng)前端框架正處于第三個(gè)高速發(fā)展期，各類(lèi)框架日益繁榮。在這個(gè)背景下，創(chuàng)新及架構(gòu)創(chuàng)新成為制勝的關(guān)鍵。對(duì)于前端組件庫(kù)頻繁更換帶來(lái)的代價(jià)，我希望能創(chuàng)建一個(gè)無(wú)縫切換組件庫(kù)的框架，理論上支持所有組件庫(kù)并為后來(lái)者提供機(jī)會(huì)。雖然大型公司可能沒(méi)有需求或不愿發(fā)布此類(lèi)框架，但我仍會(huì)進(jìn)行useMobile庫(kù)的開(kāi)發(fā)和嘗試，分為useMobileReact和useMobileVue兩部分發(fā)布。期待在未來(lái)能帶給大家更多創(chuàng)新和突破。前端開(kāi)發(fā)框架概覽：探索Bootstrap及其他熱門(mén)框架

一、Bootstrap：前端開(kāi)發(fā)的佼佼者

Bootstrap，無(wú)疑是當(dāng)前最流行、應(yīng)用最廣泛的前端開(kāi)發(fā)框架。作為一款優(yōu)雅、直觀且功能強(qiáng)大的web設(shè)計(jì)工具包，Bootstrap能夠助力開(kāi)發(fā)者創(chuàng)建出跨瀏覽器兼容且美觀大氣的網(wǎng)頁(yè)。

Bootstrap主要包含四部分內(nèi)容：

1. 腳手架——提供全局樣式和響應(yīng)式的12列柵格布局系統(tǒng)。需要注意的是，Bootstrap在默認(rèn)情況下并不直接支持響應(yīng)式布局，如需此功能，需手動(dòng)開(kāi)啟。

2. 基礎(chǔ)CSS——為基本的HTML元素，如表格、表單、按鈕和圖片等，提供優(yōu)雅、一致的多重樣式。

3. 組件——收集了大量可重用的組件，包括下拉菜單、按鈕組、導(dǎo)航面板等，滿足各種頁(yè)面元素的需求。

4. JavaScript——包含一系列jQuery插件，實(shí)現(xiàn)組件的動(dòng)態(tài)頁(yè)面效果，如模態(tài)窗口、提示效果、“泡芙”效果、滾動(dòng)監(jiān)控等。

二、Bootstrap的配套工具與資源

為了更高效地利用Bootstrap進(jìn)行開(kāi)發(fā)，有許多工具和資源可以配合使用。

1. jQueryUIBootstrap——為jQuery和Bootstrap愛(ài)好者提供，將Bootstrap的清爽界面組件引入到j(luò)QueryUI中。

2. jQueryMobileBootstrapTheme——為jQueryMobile建立的主題，使Bootstrap開(kāi)發(fā)的網(wǎng)站在手機(jī)端也能優(yōu)雅訪問(wèn)。

3. FuelUX——為Bootstrap添加了一些輕量的JavaScript控件，安裝、修改、更新和優(yōu)化都很簡(jiǎn)單方便。

4. Bootstrap自帶的界面風(fēng)格及配色選項(xiàng)——可以為每個(gè)組件應(yīng)用不同的配色，使頁(yè)面更具個(gè)性化。

5. BootSwatchr——即時(shí)查看主題修改后的效果，每次變動(dòng)都會(huì)生成一個(gè)唯一的URL，方便分享和修改主題。

6. Bootswatch——提供大量免費(fèi)的Bootstrap主題。

7. Bootsnipp——在線前端框架交互組件制作工具，為設(shè)計(jì)師和開(kāi)發(fā)者提供基于BootstrapHTML/CSS/JavaScript架構(gòu)的免費(fèi)元素。

8. LayoutIt——通過(guò)界面拖放生成器創(chuàng)建基于Bootstrap的前端代碼，方便快捷地添加和修改Bootstrap風(fēng)格的組件屬性。

三、除Bootstrap外的前端開(kāi)發(fā)框架

除了Bootstrap，還有許多優(yōu)秀的前端開(kāi)發(fā)框架，如Foundation、Vue.js、React等。這些框架各有特色，為開(kāi)發(fā)者提供不同的開(kāi)發(fā)體驗(yàn)和解決方案。

四、前端開(kāi)發(fā)框架的選擇與運(yùn)用

在選擇前端開(kāi)發(fā)框架時(shí)，需根據(jù)項(xiàng)目的具體需求、開(kāi)發(fā)團(tuán)隊(duì)的熟悉程度、個(gè)人喜好等因素進(jìn)行考慮。了解各框架的優(yōu)缺點(diǎn)，充分發(fā)揮其優(yōu)勢(shì)，為項(xiàng)目帶來(lái)最佳的前端開(kāi)發(fā)體驗(yàn)。

前端開(kāi)發(fā)框架是前端開(kāi)發(fā)者的重要工具，選擇適合的框架能夠提高開(kāi)發(fā)效率、優(yōu)化用戶體驗(yàn)。在Bootstrap的基礎(chǔ)上，還有許多其他優(yōu)秀的框架和工具值得我們探索和學(xué)習(xí)。

Fbootstrapp

Fbootstrapp是一款基于Bootstrap框架的擴(kuò)展應(yīng)用，它提供了與Facebook iframe apps相類(lèi)似的設(shè)計(jì)和功能。該框架包含了所有標(biāo)準(zhǔn)的Bootstrap組件的基本CSS和HTML，如排版、表單、按鈕、表格、柵格和導(dǎo)航等，同時(shí)輔以Facebook風(fēng)格的設(shè)計(jì)。開(kāi)發(fā)者可以利用Fbootstrapp快速構(gòu)建富有現(xiàn)代感和易用性的網(wǎng)站。

BootMetro

BootMetro框架汲取了Metro UI CSS的靈感，建立在Bootstrap框架之上，專(zhuān)門(mén)用于創(chuàng)建具有Windows 8 Metro風(fēng)格的網(wǎng)站。它除了包含Bootstrap的所有功能外，還增加了一些獨(dú)特的功能，如頁(yè)面平鋪和應(yīng)用程序欄等，為開(kāi)發(fā)者提供了更豐富的工具集。

Kickstrap

Kickstrap是Bootstrap的一個(gè)變體，它在Bootstrap的基礎(chǔ)上增加了眾多apps、主題和附加功能。這個(gè)框架可以獨(dú)立用于構(gòu)建網(wǎng)站，無(wú)需額外安裝其他組件。用戶只需將其部署到網(wǎng)站上，即可輕松使用。Kickstrap提供的apps包括Knockout.js、Retina.js、FirebugLite和andUpdater等，同時(shí)用戶也可以根據(jù)需要自行添加更多apps。選擇不同的主題可以讓你的網(wǎng)站在眾多的Bootstrap構(gòu)建網(wǎng)站中脫穎而出。附加功能則是一系列用于擴(kuò)展Bootstrap UI庫(kù)的附件，其語(yǔ)法與Bootstrap相似，使開(kāi)發(fā)者能夠更靈活地構(gòu)建用戶界面。

常用的前端框架有哪些

1. Twitter BootStrap（響應(yīng)式） 這是一個(gè)時(shí)尚、直觀且強(qiáng)大的前端框架，使Web開(kāi)發(fā)變得更加簡(jiǎn)單。其Apache v2.0許可證保證了其開(kāi)源性和可定制性。 2. Foundation（響應(yīng)式） Foundation是一個(gè)先進(jìn)的響應(yīng)式前端框架，為開(kāi)發(fā)者提供了構(gòu)建現(xiàn)代網(wǎng)站所需的各種工具。 3. 960gs（響應(yīng)式） 960gs提供了一個(gè)簡(jiǎn)單的網(wǎng)格系統(tǒng)，適合快速開(kāi)發(fā)。其GPL和MIT雙重許可證保證了其使用的廣泛性。 其他流行的前端框架 除了上述的Bootstrap及其相關(guān)框架，還有如Skeleton、99lime HTML KickStart、Kube、Less Framework、Flameinwork和G5 Framework等前端框架可供選擇。這些框架各有特色，適用于不同的開(kāi)發(fā)需求和場(chǎng)景。

第一章：Easy Framework（免費(fèi)）

Easy Framework是一個(gè)前端一體化的解決方案，它精細(xì)地分為structural、presentational、interactive三層，為開(kāi)發(fā)者提供從結(jié)構(gòu)到表現(xiàn)的全面支持，同時(shí)確保交互性體驗(yàn)流暢。

第二章：Blueprint（免費(fèi)）

Blueprint是一個(gè)旨在顯著減少開(kāi)發(fā)時(shí)間的前端框架。它以高效、簡(jiǎn)潔為設(shè)計(jì)理念，幫助開(kāi)發(fā)者快速構(gòu)建出高質(zhì)量的前端應(yīng)用。

第三章：YAML與BlueTrip（創(chuàng)意共享/免費(fèi)）

YAML是一個(gè)現(xiàn)代化的(x)HTML+CSS框架，適合開(kāi)發(fā)浮動(dòng)布局。而B(niǎo)lueTrip則是一個(gè)功能全面、美觀的CSS框架，常與Blueprint配合使用，共同打造出色的前端界面。

第四章：YUI3:Grids CSS（BSD）

YUI Grids CSS是Yahoo開(kāi)發(fā)小組精心打造的CSS框架，名聲昭著。它為開(kāi)發(fā)者提供四種預(yù)設(shè)頁(yè)面寬度和六種模板，方便快速布局和設(shè)計(jì)。

第五章：其他優(yōu)秀框架（創(chuàng)意共享/MIT等）

這一章節(jié)匯集了其他多個(gè)優(yōu)秀的框架，如52framework對(duì)HTML5支持良好，簡(jiǎn)單易用；elastiCSS是一個(gè)基于Web接口和印刷布局的簡(jiǎn)單CSS框架；Emastic則是一個(gè)獨(dú)特的CSS框架。還有Fluid 960 Gride System，其模板基于Nathan Smith的作品創(chuàng)建，融合了MooTools和jQuery的效果。xCSS是一個(gè)面向?qū)ο蟮腃SS框架，能讓你的工作流更加簡(jiǎn)潔明了。EM CSS Framework則提供了一個(gè)960px寬+ 12列網(wǎng)格系統(tǒng)+ CSS的通用樣式，適用于多種開(kāi)發(fā)場(chǎng)景。

這些框架各有特色，開(kāi)發(fā)者可以根據(jù)項(xiàng)目需求和個(gè)人喜好選擇合適的框架來(lái)助力開(kāi)發(fā)。