移動APP開發(fā)框架盤點系列（二）：Web移動前端框架概覽
開源項目的成熟周期大致為三年左右。從React框架在前端領(lǐng)域掀起巨大的浪潮開始，我們見證了一個嶄新的前端的開始。而在之后的幾年中，隨著React Native在2015年的開源，Web移動前端領(lǐng)域也迎來了自己的發(fā)展高峰。特別是在過去的幾年里，移動前端領(lǐng)域經(jīng)歷了幾次重要的爆發(fā)期。現(xiàn)在，讓我們再次回顧并盤點那些值得關(guān)注的Web移動前端框架。
一、框架的成熟與更迭
當(dāng)我查看GitHub項目的代碼更新頻率時，一個驚人的周期模式浮現(xiàn)出來。如今正是Web移動前端框架的第二個成熟收獲期，眾多框架涌現(xiàn)并持續(xù)發(fā)展。不得不承認，這個周期是如此的精準(zhǔn)，讓人驚嘆。那么接下來將詳細解讀其中幾個關(guān)鍵點。
二、Vue與React的對比
在盤點過程中，一個有趣的發(fā)現(xiàn)是關(guān)于停止維護的項目，其中大部分是Vue框架的項目。雖然盤點開始時，我曾認為React框架處于某種劣勢，但在結(jié)束時卻發(fā)現(xiàn)，無論是在選擇多樣性還是成熟度上，React都占據(jù)了優(yōu)勢。這里的原因并不打算深入分析，每個人都有自己的看法和觀點。
三、網(wǎng)頁類框架的現(xiàn)狀與未來
盡管有一些網(wǎng)頁類框架停止維護，但也有許多項目堅持下來，并且涌現(xiàn)出了一批新項目。這背后是大廠的推動和需求導(dǎo)向的結(jié)果，因為近年來大廠在移動開發(fā)上的需求遠超過其他方面。個人項目要持續(xù)堅持確實不易。這次盤點雖然想對所有框架進行試用并給出推薦度，但由于進度原因暫時擱置。接下來的重點將放在漸進類框架上，也就是多端同構(gòu)框架（小程序框架）。由于國內(nèi)各種小程序平臺的盛行，多端框架的需求非常旺盛。但令人意外的是，大多數(shù)先行者并未能堅持下去。目前看來，Taro是一個成功的例子。未來這個領(lǐng)域?qū)懈嗟淖兓吞魬?zhàn)，漸進類框架最終可能會成為橋接類框架的一部分。這個賽道已經(jīng)聚集了大量的大廠參與競爭。接下來將介紹騰訊的新一代跨端開發(fā)框架Hippy。這是一個淘寶Weex的對標(biāo)項目，支持React和Vue兩種主流前端框架。Hippy 2.x架構(gòu)分為三個層次：UI（JS）層負責(zé)驅(qū)動UI指令生成；中間層C++負責(zé)抹平平臺差異性和提供高性能模塊；渲染層在Android和iOS上提供終端底層模塊、組件，并與布局引擎通信。關(guān)于Weex的遺棄問題也值得關(guān)注，未來的趨勢是提供工具與屏蔽平臺差異性的結(jié)合。像Hippy這樣的跨端開發(fā)框架將具有巨大的潛力。
第一章：Weex的落幕與北海的崛起
Weex的最終退場是必然的，淘寶在此基礎(chǔ)上發(fā)布了北海，旨在實現(xiàn)“Write Once, Run Everywhere”的理念。北海采用自繪技術(shù)，特別地，它是基于Flutter的自繪實現(xiàn)。這一變革展現(xiàn)了技術(shù)的不斷進步與創(chuàng)新。
第二章：Hippy 3.x的功能擴展與未來展望
Hippy 3.x持續(xù)在功能上有所突破，展現(xiàn)了騰訊一貫的風(fēng)格。未來的Hippy 3.x將在業(yè)務(wù)與渲染層上提供更多靈活性。業(yè)務(wù)層不再局限于JS驅(qū)動，可以選擇DSL、Dart等其他語言；渲染層則除了原生渲染外，還引入了如Flutter等其他渲染方式。這種創(chuàng)新為用戶帶來了更多選擇。
第三章：Kraken北海——高性能Web渲染引擎的詳細介紹
Kraken北海是一款高性能的Web渲染引擎，其核心基于Flutter進行渲染。它提供了一個開放的框架，不限制上層開發(fā)者使用的框架，如Vue、Rax或React等都可以與之配合開發(fā)。Kraken的runtime通過JS Engine Binding提供了Web標(biāo)準(zhǔn)的API接口，確保了良好的開發(fā)體驗。
第四章：Hummer——超輕量級動態(tài)化跨端開發(fā)框架的特點與創(chuàng)新
Hummer是一個由滴滴出品的超輕量級動態(tài)化跨端開發(fā)框架，以JS引擎為基石，支持多種JS引擎。它摒棄了DSL層和VDOM層，追求接近原生開發(fā)的體驗和性能。在此基礎(chǔ)上，Hummer還開發(fā)了一套基于MVVM架構(gòu)的開發(fā)框架——Tenon，使得使用Vue或React的代碼能夠轉(zhuǎn)換為原生Hummer代碼。這一創(chuàng)新為開發(fā)者提供了更多的選擇。
第五章：前端框架的繁榮與創(chuàng)新探索
隨著Web移動前端框架的第三個高速發(fā)展期到來，各類框架得到了極大的繁榮。個人在項目中的貢獻已經(jīng)變得微不足道，創(chuàng)新和架構(gòu)創(chuàng)新成為了制勝的關(guān)鍵。對于前端組件庫的頻繁更換帶來的代價，作者提出了創(chuàng)建一種框架來無縫切換組件庫的想法。這種框架理論上支持所有組件庫，為后來者提供了超越的機會。盡管大廠可能沒有需求發(fā)布這種框架，但對于開發(fā)者而言，這種探索仍然具有重要意義。接下來將發(fā)布useMobile庫，分為useMobileReact和useMobileVue兩個子庫，期待為前端開發(fā)者帶來更多可能性。
一、Bootstrap：引領(lǐng)前端開發(fā)的流行框架
Bootstrap無疑是當(dāng)前最流行、應(yīng)用最廣泛的前端開發(fā)框架之一。作為一款優(yōu)雅、直觀且功能強大的web設(shè)計工具包，Bootstrap能夠助力開發(fā)者創(chuàng)建跨瀏覽器兼容且美觀大氣的網(wǎng)頁。它提供了眾多簡潔的UI組件、12列響應(yīng)式柵格系統(tǒng)以及豐富的JavaScript插件。
Bootstrap主要由四部分內(nèi)容構(gòu)成：
1. 腳手架——提供全局樣式和響應(yīng)式的12列柵格布局系統(tǒng)。值得注意的是，Bootstrap在默認情況下并不包含響應(yīng)式布局功能，如需實現(xiàn)響應(yīng)式布局，需手動開啟。
2. 基礎(chǔ)CSS——為HTML頁面要素如表格、表單、按鈕和圖片等提供優(yōu)雅、一致的多種樣式。
3. 組件——收集了大量可重用的組件，如下拉菜單、按鈕組、導(dǎo)航面板等，包括tabs、pills、lists標(biāo)簽、面包屑導(dǎo)航、頁碼、縮略圖、進度條、媒體對象等。
4. JavaScript——包含一系列jQuery插件，可實現(xiàn)組件的動態(tài)頁面效果。插件涵蓋模態(tài)窗口、提示效果、“泡芙”效果、滾動監(jiān)控、旋轉(zhuǎn)木馬、輸入提示等。
二、Bootstrap的配套工具和資源
為了更好地利用Bootstrap進行開發(fā)，有許多工具和資源可以配合使用。以下是部分推薦工具和資源：
1. jQueryUIBootstrap——適合jQuery和Bootstrap愛好者的資源，可將Bootstrap的清爽界面組件引入jQueryUI中。
2. jQueryMobileBootstrapTheme——為jQueryMobile建立的主題，便于開發(fā)可在手機端優(yōu)雅訪問的網(wǎng)站。
3. FuelUX——為Bootstrap添加了一些輕量的JavaScript控件，安裝、修改、更新和優(yōu)化都很簡單方便。
4. Bootstrap提供的界面風(fēng)格及配色選項——可以給每個組件應(yīng)用不同的配色，使界面更加個性化。
5. BootSwatchr——可立刻查看主題修改后的效果，生成唯一URL方便分享和修改主題。
6. Bootswatch——提供大量免費的Bootstrap主題，豐富你的設(shè)計選擇。
7. Bootsnipp——在線前端框架交互組件制作工具，為設(shè)計師和開發(fā)者提供基于BootstrapHTML/CSS/JavaScript架構(gòu)的免費元素。
三、Bootstrap與其他框架的對比
雖然Bootstrap是目前最流行的前端開發(fā)框架之一，但市場上還有許多其他優(yōu)秀的框架，如Foundation、Vue等。每個框架都有其獨特的優(yōu)點和適用場景，開發(fā)者應(yīng)根據(jù)項目需求選擇合適的框架。
四、Bootstrap的應(yīng)用場景
Bootstrap因其簡潔、響應(yīng)式和可定制性強等特點，廣泛應(yīng)用于各種規(guī)模的網(wǎng)站和項目。無論是企業(yè)官網(wǎng)、電商網(wǎng)站還是小型博客網(wǎng)站，Bootstrap都能提供穩(wěn)定的前端支持。
前端開發(fā)框架的選擇要根據(jù)項目需求和個人喜好來決定。Bootstrap作為一款流行且功能強大的框架，提供了豐富的組件和工具，助力開發(fā)者快速構(gòu)建美觀大氣的網(wǎng)頁。市場上還有許多其他優(yōu)秀的框架，開發(fā)者應(yīng)多加了解和嘗試，以找到最適合自己的框架。
Fbootstrapp框架介紹
BootMetro框架特色
BootMetro框架汲取了Metro UI CSS的靈感，同樣是基于Bootstrap構(gòu)建。它能夠創(chuàng)建出具有Windows 8 Metro風(fēng)格的網(wǎng)站。在保留Bootstrap所有功能的基礎(chǔ)上，BootMetro還添加了頁面平鋪、應(yīng)用程序欄等獨特功能。Kickstrap框架的功能亮點
Kickstrap是Bootstrap的一個變體，它在Bootstrap的基礎(chǔ)上增加了眾多apps、主題和附加功能。這使得該框架可以獨立用于構(gòu)建網(wǎng)站，無需額外安裝其他工具。用戶可以自由選擇加載的app，如Knockout.js、Retina.js、FirebugLite和andUpdater等。選擇不同的主題可以讓你的網(wǎng)站在眾多Bootstrap構(gòu)建的網(wǎng)站中脫穎而出。附加功能則用于擴展Bootstrap UI庫，其語法與Bootstrap相似。常用的前端框架有哪些？
Twitter BootStrap（Apache v2.0；響應(yīng)式） 這是一個時尚、直觀且強大的前端框架，讓W(xué)eb開發(fā)變得更加簡單易懂。 Foundation（MIT；響應(yīng)式） 這是一個先進的響應(yīng)式前端框架，提供了一系列現(xiàn)代化的網(wǎng)頁開發(fā)工具。 960gs（GPL & MIT；響應(yīng)式） 960gs提供了一個簡單易用的網(wǎng)格系統(tǒng)，適合快速開發(fā)響應(yīng)式網(wǎng)頁。 Skeleton（MIT；響應(yīng)式） 這是一個美麗的Web模板，專注于響應(yīng)式和移動友好的開發(fā)體驗。 其他熱門前端框架 除了上述框架，還有許多其他熱門的前端框架可供選擇，如99lime HTML KickStart、Kube（面向?qū)I(yè)人員的CSS框架）、Less Framework（自適應(yīng)的CSS網(wǎng)格系統(tǒng)）、Flameinwork（適合懶人開發(fā)者的前端微框架）和G5 Framework（基于(x)HTML5、CSS、PHP的前端開發(fā)框架）等。第一章：一體化前端解決方案
Easy Framework是一個免費的一體化前端解決方案，它分為structural、presentational和interactive三層。這個框架為開發(fā)者提供了一個全面的工具集，旨在簡化開發(fā)過程并提升用戶體驗。
第二章：減少開發(fā)時間的前端框架
Blueprint是一個旨在減少開發(fā)時間的前端框架。它提供了豐富的組件和工具，幫助開發(fā)者快速構(gòu)建現(xiàn)代化的網(wǎng)頁應(yīng)用。這個框架特別適合于那些追求高效、希望縮短開發(fā)周期的開發(fā)者。
第三章：(x)HTML+CSS框架
YAML是一個采用創(chuàng)意共享的(x)HTML+CSS框架。它適合用于開發(fā)現(xiàn)代化的浮動布局網(wǎng)頁。YAML提供了靈活的布局系統(tǒng)和豐富的樣式選項，讓開發(fā)者能夠輕松創(chuàng)建出具有吸引力的網(wǎng)頁。
第四章：功能全面的CSS框架
BlueTrip是一個免費、功能全面且美觀的CSS框架。它特別適合于與Blueprint框架搭配使用。BlueTrip提供了豐富的樣式和組件，幫助開發(fā)者快速構(gòu)建高質(zhì)量的網(wǎng)頁應(yīng)用。
第五章：其他值得關(guān)注的CSS框架
本章將介紹其他幾個值得關(guān)注的CSS框架，包括YUI Grids CSS、52framework、elastiCSS等。這些框架各具特色，為開發(fā)者提供了不同的解決方案和工具集。例如，YUI Grids CSS由Yahoo開發(fā)小組開發(fā)而成，提供了多種預(yù)先設(shè)置的頁面寬度和模板選項；而52framework則對HTML5支持良好，簡單易用；elastiCSS是一個基于Web接口和印刷布局的簡單CSS框架。還將介紹一些與眾不同的CSS框架，如Emastic和Fluid 960 Grid System等。這些框架具有獨特的特性和功能，為開發(fā)者提供了更多的選擇空間。最后介紹的是xCSS和EM CSS Framework，它們分別提供了面向?qū)ο蟮墓ぷ髁骱?60px寬+ 12列網(wǎng)格系統(tǒng)+ CSS的通用樣式。這些框架能夠幫助開發(fā)者更高效地開發(fā)復(fù)雜樣式和提升用戶體驗。
以上就是關(guān)于這些前端框架和工具的詳細介紹。每個章節(jié)都提供了生動的描述和豐富的信息，旨在幫助讀者深入理解這些工具的特點和優(yōu)勢。
