第二章：Web移動(dòng)前端框架概覽
開(kāi)源項(xiàng)目的成熟周期大約三年，自React框架在2013年的誕生開(kāi)始，前端框架的發(fā)展便進(jìn)入了新的篇章。而在2015年，隨著React Native的開(kāi)源，Web移動(dòng)前端框架的周期正式開(kāi)啟。過(guò)去的幾年里，移動(dòng)前端領(lǐng)域經(jīng)歷了數(shù)次技術(shù)爆發(fā)，特別是在15-16年、18-19年和當(dāng)前的21-22年。在這第二個(gè)成熟收獲期，我們有必要對(duì)現(xiàn)有的移動(dòng)前端框架進(jìn)行深入盤點(diǎn)。
一、框架周期與現(xiàn)狀
當(dāng)我們深入分析GitHub項(xiàng)目的活躍度時(shí)，一個(gè)驚人的周期模式浮現(xiàn)出來(lái)。前端框架的發(fā)展似乎遵循著一個(gè)準(zhǔn)確的周期規(guī)律，這讓人不禁驚嘆。目前正處于移動(dòng)前端的爆發(fā)期，許多項(xiàng)目正活躍地推進(jìn)中。
二、Vue與React的對(duì)比
在盤點(diǎn)過(guò)程中，一個(gè)有趣的發(fā)現(xiàn)是關(guān)于停止維護(hù)的項(xiàng)目，其中絕大多數(shù)為Vue框架項(xiàng)目。起初，我以為React框架處于劣勢(shì)，但在實(shí)際研究中發(fā)現(xiàn)，React在選擇面和成熟度上均超越了Vue。這次的變化中，React的勢(shì)頭強(qiáng)勁，這背后的原因有很多，也許每個(gè)人都有自己獨(dú)到的見(jiàn)解。
三、網(wǎng)頁(yè)類框架的堅(jiān)守與新興
盡管有大量的項(xiàng)目停止維護(hù)，但網(wǎng)頁(yè)類框架仍然堅(jiān)持下來(lái)，并且涌現(xiàn)出了一批新項(xiàng)目。這背后的推動(dòng)力主要來(lái)自于大廠對(duì)移動(dòng)開(kāi)發(fā)的需求。在這些年的發(fā)展中，大廠的需求遠(yuǎn)高于其他方面，個(gè)人項(xiàng)目的堅(jiān)持確實(shí)不易。
四、漸進(jìn)類框架與多端同構(gòu)的趨勢(shì)
本次盤點(diǎn)的重點(diǎn)是漸進(jìn)類框架，也就是所謂的多端同構(gòu)框架（小程序框架）。隨著國(guó)內(nèi)小程序平臺(tái)的興起，多端框架的需求日益旺盛。盡管大多數(shù)先行者未能堅(jiān)持下去，但Taro的成功案例仍然讓人矚目。這類框架的變化最大，預(yù)計(jì)將有更多框架面臨出局。這類框架注定是一個(gè)過(guò)渡性的產(chǎn)品，最終將演變成橋接類框架的一部分。與橋接類框架協(xié)同將是框架未來(lái)的出路。目前這個(gè)領(lǐng)域已經(jīng)聚集了大量的大廠。
五、騰訊新一代跨端開(kāi)發(fā)框架Hippy的深度解析
Hippy是騰訊的新一代跨端開(kāi)發(fā)框架，看似是淘寶Weex的對(duì)標(biāo)項(xiàng)目。在Weex實(shí)質(zhì)停更后發(fā)布，Hippy 2.x架構(gòu)分為三個(gè)層次：UI(JS)層、中間層C++和渲染層Android和iOS。這一架構(gòu)旨在抹平平臺(tái)差異性并提供高性能模塊。對(duì)于Weex的遺棄，其原因在于ReactNative提供工具而Weex提供框架，試圖實(shí)現(xiàn)“Write Once, Run Everywhere”，但這也導(dǎo)致了Weex功能相對(duì)弱小并存在較多漏洞。Hippy的發(fā)布無(wú)疑為這個(gè)領(lǐng)域帶來(lái)了新的競(jìng)爭(zhēng)與機(jī)遇。Weex的落幕與北海的崛起
一、Weex的落幕
Weex的最終退出舞臺(tái)，其實(shí)是一種必然。淘寶在此基礎(chǔ)上發(fā)布了北海升級(jí)版，其目標(biāo)是實(shí)現(xiàn)“Write Once, Run Everywhere”的愿景。這一跨越性的嘗試采用了基于Flutter的自繪技術(shù)。而在這個(gè)過(guò)程中，Hippy 3.x系列持續(xù)深化其KPI功能，充滿了騰訊風(fēng)格的創(chuàng)新與迭代。
二、Hippy的未來(lái)與北海的渲染技術(shù)
在未來(lái)的Hippy 3.x中，業(yè)務(wù)層和渲染層可以根據(jù)用戶實(shí)際需求靈活切換。業(yè)務(wù)層不再局限于JS驅(qū)動(dòng)，可以選擇DSL、Dart等其他語(yǔ)言作為驅(qū)動(dòng)方式。而在渲染層方面，除了現(xiàn)有的原生渲染，也將支持如Flutter的Voltron渲染。而Kraken北海作為高性能Web渲染引擎，其底層基于Flutter技術(shù)，為開(kāi)發(fā)者提供了更豐富的選擇。無(wú)論是Vue、Rax還是React的開(kāi)發(fā)者，都能輕松上手Kraken應(yīng)用。
三、Kraken的技術(shù)特點(diǎn)與挑戰(zhàn)
Kraken通過(guò)JS Engine Binding的方式提供了一系列Web標(biāo)準(zhǔn)的API接口。調(diào)用這些API會(huì)執(zhí)行相關(guān)邏輯并創(chuàng)建一系列指令發(fā)送給Dart層處理。其實(shí)質(zhì)是一個(gè)追求全平臺(tái)一致性的小程序平臺(tái)。盡管各平臺(tái)的不一致性是自然的，但Kraken努力追求真實(shí)性能的實(shí)現(xiàn)。它也是一個(gè)基于W3C標(biāo)準(zhǔn)的高性能渲染引擎，注重標(biāo)準(zhǔn)的精確執(zhí)行。
四、Hummer的超輕量級(jí)跨端開(kāi)發(fā)
除了Kraken，Hummer也是一個(gè)值得關(guān)注的超輕量級(jí)動(dòng)態(tài)化跨端開(kāi)發(fā)框架。它以JS引擎為基石，支持多種JS引擎，并配備了經(jīng)過(guò)優(yōu)化的Yoga布局引擎，以縮小兩端視圖布局的差異。Hummer的特點(diǎn)在于其摒棄了業(yè)界其他動(dòng)態(tài)化跨端框架的DSL層和VDOM層，以換取接近原生開(kāi)發(fā)的體驗(yàn)和性能。在此基礎(chǔ)上，還開(kāi)發(fā)了基于MVVM架構(gòu)的開(kāi)發(fā)框架Tenon，使得使用Vue或React編寫(xiě)的代碼能轉(zhuǎn)換成原生Hummer的代碼。對(duì)于想要提升APP能力的開(kāi)發(fā)者來(lái)說(shuō)，嵌入Hummer是一個(gè)不錯(cuò)的選擇。
五、前端框架的發(fā)展與未來(lái)探索
隨著Web移動(dòng)前端框架的高速發(fā)展，各類框架如雨后春筍般涌現(xiàn)。而個(gè)人在具體的項(xiàng)目貢獻(xiàn)上雖然顯得微不足道，但創(chuàng)新及架構(gòu)創(chuàng)新依然是制勝的關(guān)鍵手段。在這個(gè)背景下，我對(duì)于React未來(lái)的發(fā)展充滿信心。我也在思考如何降低更換組件庫(kù)帶來(lái)的代價(jià)。為此，我想創(chuàng)建一個(gè)框架，實(shí)現(xiàn)無(wú)縫切換組件庫(kù)的功能，為前端開(kāi)發(fā)者提供更多選擇和探索的機(jī)會(huì)。盡管大型企業(yè)可能對(duì)此沒(méi)有太大需求，但我依然愿意發(fā)布這樣的框架useMobileReact和useMobileVue等解決方案供開(kāi)發(fā)者們使用并期待從中看到更多的創(chuàng)新和突破。推薦度待我正式發(fā)布后再行填補(bǔ)完善。
微軟在IOS平臺(tái)推出的Outlook Web App新應(yīng)用
近日，在廣州的知名app開(kāi)發(fā)公司啟匯網(wǎng)絡(luò)官網(wǎng)上，微軟為IOS平臺(tái)的企業(yè)用戶帶來(lái)了一項(xiàng)重大更新：Outlook Web App的原生應(yīng)用。這一應(yīng)用將微軟的Exchange服務(wù)推向了一個(gè)新的高度，為企業(yè)用戶提供了更為便捷和高效的郵件體驗(yàn)。
這款針對(duì)IOS平臺(tái)的手機(jī)與平板應(yīng)用，是微軟為企業(yè)用戶提供的在線電子郵件服務(wù)。與一般消費(fèi)者使用的Outlook.com不同，這款應(yīng)用保留了Web版的現(xiàn)代化用戶界面體驗(yàn)，并增加了許多新功能。如今，用戶可以享受到新郵件推送提醒、聯(lián)系人同步、離線使用、語(yǔ)音命令等便捷功能，甚至管理員可以遠(yuǎn)程刪除數(shù)據(jù)，大大提高了安全性和便利性。
其實(shí)，Webapp開(kāi)發(fā)的核心就是構(gòu)建一個(gè)針對(duì)Iphone、Android等移動(dòng)設(shè)備的web站點(diǎn)。其技術(shù)基礎(chǔ)包括HTML或HTML5、CSS3以及JavaScript，而服務(wù)端技術(shù)則可能采用JAVA、PHP、ASP等。這些技術(shù)共同為Web App的開(kāi)發(fā)提供了強(qiáng)大的支持。
從app開(kāi)發(fā)公司的角度看，Web App開(kāi)發(fā)正受到越來(lái)越多企業(yè)的重視。UC瀏覽器引入的網(wǎng)頁(yè)應(yīng)用中心（移動(dòng)Web App應(yīng)用商店）就是一個(gè)明顯的例證。在這個(gè)平臺(tái)上，用戶可以在瀏覽器上直接調(diào)取使用各種Web App，無(wú)需下載和安裝。據(jù)統(tǒng)計(jì)，UC網(wǎng)頁(yè)應(yīng)用中心的月活躍用戶數(shù)已經(jīng)超過(guò)4700萬(wàn)，Web App的積累添加次數(shù)已超過(guò)1.8億次，收錄的Web App種類超過(guò)20大類，數(shù)量超過(guò)1500款。這也意味著越來(lái)越多的app開(kāi)發(fā)者開(kāi)始通過(guò)UC網(wǎng)頁(yè)應(yīng)用中心推廣他們的Web App。
那么，Web App究竟有何魅力呢？其實(shí)，Web app開(kāi)發(fā)的效果可以根據(jù)開(kāi)發(fā)者的需求而變得復(fù)雜或簡(jiǎn)單。無(wú)論其復(fù)雜程度如何，它都必須完成某些特定的任務(wù)。現(xiàn)在的web已經(jīng)不再是單純的網(wǎng)站，而是已經(jīng)成為了網(wǎng)站和應(yīng)用的混合體。那么，我們?cè)撊绾螀^(qū)分web app和網(wǎng)站呢？主要有以下三個(gè)要素：
1. Web app提供了出色的用戶體驗(yàn)，使用戶能夠輕松地完成任務(wù)，并充分利用設(shè)備本地的性能。
2. Web應(yīng)用提供了豐富的視覺(jué)體驗(yàn)，同時(shí)不會(huì)分散用戶的注意力。它注重美學(xué)，采用與本地應(yīng)用相同的設(shè)計(jì)模式，同時(shí)保持易用性。
3. Web應(yīng)用強(qiáng)調(diào)的是用戶的交互、參與和完成任務(wù)，而不是僅僅讓他們?yōu)g覽網(wǎng)頁(yè)。應(yīng)用程序是自我包含的，用戶無(wú)需導(dǎo)航到其他站點(diǎn)或應(yīng)用即可完成任務(wù)。
相對(duì)于Native App，Web App開(kāi)發(fā)具有其獨(dú)特的優(yōu)勢(shì)：
1. 開(kāi)發(fā)成本較低，只需使用web開(kāi)發(fā)技術(shù)即可完成web app的開(kāi)發(fā)。
2. 升級(jí)較為簡(jiǎn)單，無(wú)需通知用戶，只需在服務(wù)端更新文件即可，用戶幾乎感覺(jué)不到任何變化。
3. 與一般的web一樣，Web App的維護(hù)相對(duì)簡(jiǎn)單，它實(shí)質(zhì)上就是一個(gè)站點(diǎn)。
許多app開(kāi)發(fā)公司看好Web的未來(lái)發(fā)展，主要是看中了它的靈活性——既擁有在web上完成任務(wù)的一切優(yōu)點(diǎn)，又能在離線時(shí)完成這些任務(wù)。HTML5等技術(shù)為Web App提供了應(yīng)用緩存和客戶端存儲(chǔ)等功能，使應(yīng)用可以在無(wú)網(wǎng)絡(luò)聯(lián)接的情況下繼續(xù)工作。這種靈活性使得Web App在未來(lái)的發(fā)展中具有巨大的潛力。
原生APP與WebApp開(kāi)發(fā)的差異探究
一、開(kāi)發(fā)方面的差異
原生APP開(kāi)發(fā)需要針對(duì)每一種移動(dòng)操作系統(tǒng)進(jìn)行獨(dú)立開(kāi)發(fā)，如iPhone、安卓等，每種平臺(tái)都需要使用特定的開(kāi)發(fā)語(yǔ)言，如Java（Android）、Objective-C（iOS）等。原生APP開(kāi)發(fā)需要使用各自的軟件開(kāi)發(fā)包、開(kāi)發(fā)工具和控件，因此開(kāi)發(fā)成本較高，開(kāi)發(fā)速度較慢，維護(hù)費(fèi)用也較高。而Web App則不同，它運(yùn)行在移動(dòng)設(shè)備的瀏覽器上，因此只需要一個(gè)開(kāi)發(fā)項(xiàng)目，可以通過(guò)HTML、CSS或JavaScript進(jìn)行開(kāi)發(fā)，開(kāi)發(fā)費(fèi)用較低，開(kāi)發(fā)速度也更快。
二、功能方面的差異
原生App作為一個(gè)系統(tǒng)性的應(yīng)用程序，可以類比于電腦上的軟件。它可以調(diào)用移動(dòng)終端的硬件設(shè)備，如麥克風(fēng)、攝像頭、短信、GPS、藍(lán)牙等，實(shí)現(xiàn)功能豐富。而Web App則類似于電腦上的網(wǎng)頁(yè)，主要是頁(yè)面展示類的APP，雖然也可以使用一些移動(dòng)硬件設(shè)備的功能，但相比原生App，功能使用上有所限制。三、應(yīng)用安裝使用方面的差異
四、版本控制方面的差異
原生App的用戶可以自由選擇是否更新軟件版本，因此可能存在不同用戶使用不同版本的情況，這也帶來(lái)了維護(hù)成本的相對(duì)較高的問(wèn)題。而Web App則所有用戶使用同一版本，功能一致。版本更新相對(duì)便捷，只需在服務(wù)器側(cè)更新數(shù)據(jù)即可。但Web App的入口不太明顯，需要用戶記住并主動(dòng)訪問(wèn)，推廣時(shí)可能需要更多的努力。
五、加載速度方面的差異
原生APP由云服務(wù)器數(shù)據(jù)APP應(yīng)用客戶端兩部分組成，所有的UI元素、數(shù)據(jù)內(nèi)容、邏輯框架都安裝在手機(jī)終端上。訪問(wèn)時(shí)，不需要重新下載加載應(yīng)用頁(yè)面框架，只需要加載數(shù)據(jù)即可，因此加載速度更快，頁(yè)面響應(yīng)更快。而Web App則需要重新加載頁(yè)面的所有元素，訪問(wèn)速度受手機(jī)終端性能與網(wǎng)絡(luò)環(huán)境的限制，可能導(dǎo)致加載速度慢，操作頻繁容易卡教。 原生App更偏向于交互和用戶體驗(yàn)，而Web APP更偏向于信息展示和簡(jiǎn)單交互。如果需要訪問(wèn)硬件功能，如攝像頭、傳感器等，一般使用原生App。而在費(fèi)用有限的情況下，中心功能可以使用原生APP，周邊輔助功能則可以使用Web App。兩者各有優(yōu)劣，根據(jù)實(shí)際情況選擇最合適的開(kāi)發(fā)方式是關(guān)鍵。
一、引言
隨著科技的飛速發(fā)展，移動(dòng)應(yīng)用領(lǐng)域的競(jìng)爭(zhēng)愈發(fā)激烈。為了提升用戶體驗(yàn)并滿足快速迭代的需求，開(kāi)發(fā)者們不斷探索創(chuàng)新方法。當(dāng)前，一種流行趨勢(shì)是將原生App和Web App進(jìn)行融合，這種融合策略帶來(lái)了許多優(yōu)勢(shì)，正逐漸成為應(yīng)用開(kāi)發(fā)的熱門方向。
二、原生App與Web App融合的概念解析
所謂的原生App和Web App融合，指的是在開(kāi)發(fā)過(guò)程中，應(yīng)用的主要框架采用原生開(kāi)發(fā)技術(shù)，確保核心功能的交互體驗(yàn)達(dá)到最佳狀態(tài)。而關(guān)于詳細(xì)的業(yè)務(wù)內(nèi)容或輔助功能，則通過(guò)網(wǎng)頁(yè)進(jìn)行封裝，實(shí)現(xiàn)快速迭代和更新。這種策略結(jié)合了原生應(yīng)用和Web應(yīng)用的優(yōu)點(diǎn)，旨在為用戶提供流暢的體驗(yàn)和高效的更新機(jī)制。
三、融合策略的優(yōu)勢(shì)分析
1. 交互體驗(yàn)與性能優(yōu)化：原生應(yīng)用能充分利用設(shè)備的硬件性能，提供流暢的用戶交互體驗(yàn)。其主要框架采用原生開(kāi)發(fā)技術(shù)，確保了核心功能的性能和穩(wěn)定性。
2. 快速迭代與便捷更新：通過(guò)網(wǎng)頁(yè)封裝詳細(xì)內(nèi)容和輔助功能，開(kāi)發(fā)者可以輕松地對(duì)應(yīng)用進(jìn)行遠(yuǎn)程更新，無(wú)需經(jīng)過(guò)復(fù)雜的審核和發(fā)布流程。這大大縮短了開(kāi)發(fā)周期，提高了產(chǎn)品的迭代效率。
3. 跨平臺(tái)兼容性：Web App的部分使得應(yīng)用更容易在不同操作系統(tǒng)和設(shè)備上實(shí)現(xiàn)兼容，擴(kuò)大了應(yīng)用的用戶覆蓋范圍。
4. 降低成本與維護(hù)壓力：相較于完全的原生應(yīng)用開(kāi)發(fā)，融合策略能降低開(kāi)發(fā)成本，同時(shí)減輕維護(hù)壓力，因?yàn)閃eb部分可以通過(guò)簡(jiǎn)單的網(wǎng)頁(yè)更新來(lái)修復(fù)問(wèn)題和增加功能。
四、具體實(shí)現(xiàn)方式的探討
在實(shí)際開(kāi)發(fā)中，實(shí)現(xiàn)原生App與Web App的融合涉及多個(gè)技術(shù)層面的考量。開(kāi)發(fā)者需要熟練掌握前端技術(shù)、后端技術(shù)以及與原生平臺(tái)的交互技術(shù)。設(shè)計(jì)合理的架構(gòu)來(lái)平衡原生和Web部分的功能，確保整體應(yīng)用的穩(wěn)定性和流暢性。
五、未來(lái)展望與挑戰(zhàn)
雖然原生App與Web App的融合策略帶來(lái)了諸多優(yōu)勢(shì)，但也面臨著一些挑戰(zhàn)。隨著技術(shù)的不斷進(jìn)步和用戶需求的變化，開(kāi)發(fā)者需要不斷探索新的融合方式和技術(shù)，以適應(yīng)市場(chǎng)的變化。保持應(yīng)用的穩(wěn)定性和安全性也是未來(lái)的重要研究方向。
原生App與Web App的融合是一種具有潛力的策略，它結(jié)合了原生應(yīng)用和Web應(yīng)用的優(yōu)點(diǎn)，為開(kāi)發(fā)者提供了更多的選擇和可能性。隨著技術(shù)的不斷發(fā)展，這種融合策略將在移動(dòng)應(yīng)用領(lǐng)域發(fā)揮更大的作用。
