2021上半年前端技術(shù)趨勢(shì)洞察 丨【W(wǎng)EB前端大作戰(zhàn)】

前端技術(shù)在傳統(tǒng)意義上指HTML、CSS、JavaScript等一組用來(lái)滿足Web頁(yè)面展示的編程技術(shù)。1995年Brendan Eich用了不到10天就創(chuàng)建了JavaScript，那時(shí)JavaScript的設(shè)計(jì)并非以速度見(jiàn)長(zhǎng)，基本上市用于表單驗(yàn)證的，速度非常緩慢。彼時(shí)的頁(yè)面不僅粗糙簡(jiǎn)陋，而且除了進(jìn)行超鏈接跳轉(zhuǎn)，沒(méi)有辦法實(shí)現(xiàn)任何交互。現(xiàn)在的前端技術(shù)非常早已不再拘泥于滿足頁(yè)面展示，而是開(kāi)始延展到通過(guò)全棧來(lái)閉環(huán)產(chǎn)品。

最近一年以來(lái)，全球智能協(xié)同辦公領(lǐng)域需求暴漲，音視頻解決方案飛速發(fā)展。在音視頻技術(shù)方面，前端技術(shù)憑借WebRTC、WebAssembly等技術(shù)而大顯身手。在跨平臺(tái)開(kāi)發(fā)方面，前端技術(shù)具有天然的優(yōu)勢(shì)，這使得產(chǎn)品能夠一次開(kāi)發(fā)，在PC、Web、移動(dòng)端、IoT產(chǎn)品、汽車(chē)產(chǎn)品的多種終端完成產(chǎn)品閉環(huán)。軟件工程效率方面，前端DevOps技術(shù)持續(xù)發(fā)展，Webpack等工具鏈持續(xù)完善。 在軟件工程能力方面，云原生技術(shù)體系，特別是Serverless技術(shù)，賦能前端技術(shù)，真正實(shí)現(xiàn)前端工程團(tuán)隊(duì)的全棧開(kāi)發(fā)模式。在產(chǎn)品化方面，低代碼技術(shù)是最為引人注目的解決方案。 例如微軟公司的第四朵智能云Power Platform, 通過(guò)“無(wú)代碼”和“低代碼”的簡(jiǎn)單方式，讓用戶輕松地自定義構(gòu)建業(yè)務(wù)應(yīng)用程序。以低成本的軟件解決方案實(shí)現(xiàn)了商業(yè)數(shù)據(jù)分析產(chǎn)品的核心產(chǎn)品價(jià)值。

這些表明前端已經(jīng)有能力透過(guò)業(yè)務(wù)深入產(chǎn)業(yè)，繼而影響商業(yè)結(jié)果。

接下來(lái)，本文將盤(pán)點(diǎn)以下2021上半年最重要的前端技術(shù)趨勢(shì)：

WebAssembly技術(shù)生態(tài)

WebRTC與音視頻

DevOps工程效果

低代碼平臺(tái)的商業(yè)價(jià)值

跨端開(kāi)發(fā)技術(shù)

全棧開(kāi)發(fā)技術(shù)與Serverless

前端框架和語(yǔ)言

WebAssembly技術(shù)生態(tài)

數(shù)十年來(lái)，JavaScript一直是Web交互的中堅(jiān)力量，如今又出現(xiàn)了一個(gè)新的挑戰(zhàn)者，WebAssembly —— 簡(jiǎn)稱WASM。 WebAssembly源于Mozilla發(fā)起的Asm.js項(xiàng)目，也被稱為“設(shè)計(jì)補(bǔ)充 JavaScript”，其本解碼速度比JS解析快得多，讓高性能的Web應(yīng)用在瀏覽器上運(yùn)行成為可能。該模塊可在瀏覽器中的專(zhuān)有虛擬機(jī)上執(zhí)行，與JavaScript虛擬機(jī)共享內(nèi)存和線程等資源。現(xiàn)在主流瀏覽器基本都支持了WebAssembly。

WebAssembly的出現(xiàn)為Web開(kāi)發(fā)者打開(kāi)了一扇新的大門(mén)。開(kāi)發(fā)者將能夠使用其它編程語(yǔ)言來(lái)創(chuàng)建Web應(yīng)用程序：C,C++,Go，Rust，Java，Python，PHP來(lái)實(shí)現(xiàn)完整的系統(tǒng)。目前國(guó)內(nèi)外越來(lái)越多的團(tuán)隊(duì)基于WASM進(jìn)行了業(yè)務(wù)實(shí)踐。 例如：騰訊IMWeb團(tuán)隊(duì)將ffmpeg編譯為WASM版本且在瀏覽器中運(yùn)行，將過(guò)去處于黑盒中，只有瀏覽器底層才能使用的音視頻編解碼能力徹底解放。前端頁(yè)面中對(duì)音視頻流直接進(jìn)行處理，在完全不依賴后臺(tái)的情況下，便捷、高效的實(shí)現(xiàn)了視頻播放幀預(yù)覽與視頻幀截圖等功能。

另一最為重要的特性是WebAssembly 的沙箱功能。當(dāng)程序編譯成 WASM 模塊，再加載到運(yùn)行引擎中時(shí)，實(shí)際上你的模塊運(yùn)行在其私有的沙箱中。沙箱中的程序不能訪問(wèn)沙箱以外的地址空間，否則將被運(yùn)行引擎終止并返回異常，同時(shí) WASM 程序調(diào)用 API 來(lái)訪問(wèn)系統(tǒng)資源時(shí)也會(huì)受到運(yùn)行引擎的監(jiān)管。這樣的沙箱功能可以在許多場(chǎng)景下提供傳統(tǒng)的原生編譯程序無(wú)法支持的功能。

WebAssembly 的許多特性在不同環(huán)境下可以帶來(lái)各種價(jià)值：

安全運(yùn)行第三方代碼：這個(gè)功能在云端或者邊緣計(jì)算中非常有意義，也是現(xiàn)代容器技術(shù)如 Docker 的核心價(jià)值之一。在移動(dòng)設(shè)備、物聯(lián)網(wǎng)設(shè)備、智能小家電以及可信運(yùn)行環(huán)境上對(duì)這樣的功能也有非常強(qiáng)烈的需求。

跨平臺(tái)與環(huán)境的應(yīng)用：考慮到 WebAssembly 是由 W3C 定義的標(biāo)準(zhǔn)化字節(jié)文件格式，當(dāng)某些產(chǎn)品需要提供類(lèi)似瀏覽器方式來(lái)裝載第三方模塊時(shí)，使用 WebAssembly 作為媒介格式是一個(gè)非常有吸引力的方案。假設(shè)你有一個(gè)很好的圖像識(shí)別算法，你可以把你的算法以 WASM 模塊的方式發(fā)布。其他人通過(guò)集成 WAMR 這樣的引擎就可以在不同架構(gòu)、不同平臺(tái)、不同環(huán)境調(diào)用這個(gè)算法，比如在云端容器、可信執(zhí)行環(huán)節(jié)（TEE）、物聯(lián)網(wǎng)設(shè)備上都可以調(diào)用。

超輕量級(jí)：WASM 規(guī)范的設(shè)計(jì)充分考慮了在瀏覽器上需要通過(guò)網(wǎng)絡(luò)從服務(wù)器端下載并即時(shí)運(yùn)行的需求，操作碼的設(shè)計(jì)相當(dāng)精簡(jiǎn)。通過(guò)開(kāi)發(fā)階段的編譯不再需要對(duì)下載程序進(jìn)行文本解析，實(shí)例的對(duì)象與內(nèi)存模型也較為簡(jiǎn)單。這些特點(diǎn)使 WASM 模塊可以非常快地完成加載進(jìn)入執(zhí)行狀態(tài)，創(chuàng)建一個(gè)執(zhí)行實(shí)例只需要很少量的資源。

高性能：WebAssembly 的字節(jié)碼設(shè)計(jì)充分考慮了即時(shí)編譯的友好性，不僅可以達(dá)到很快的編譯速度，還可以獲得很高的運(yùn)行速度。

動(dòng)態(tài)模塊加載：這個(gè)功能在小設(shè)備上尤其有用，過(guò)去固件必須統(tǒng)一編譯、統(tǒng)一更新，如今通過(guò)固件中的 WASM 運(yùn)行引擎，可以動(dòng)態(tài)加載和執(zhí)行 WASM 模塊。

重用海量 C/C++ 庫(kù)資源： 你也許需要在 JS、Java 或者 Python 程序中調(diào)用一些 C/C++ 庫(kù)，傳統(tǒng)方式只能使用各種語(yǔ)言自身的綁定接口來(lái)集成這些第三方 C/C++ 庫(kù)。現(xiàn)在我們可以把第三方 C/C++ 庫(kù)源程序編譯成 WASM 模塊，然后通過(guò)先綁定 WAMR 或者其他 WASM 引擎來(lái)執(zhí)行 WASM 模塊。例如在 JVM 上通過(guò) JNI 綁定了 WAMR，就不用再使用 JNI 去綁定其他 C/C++ 庫(kù)了。

WebRTC的火熱

隨著互聯(lián)網(wǎng)的不斷加速和音視頻技術(shù)的不斷發(fā)展，許多以音視頻技術(shù)為依托的產(chǎn)品相繼面世，比如：直播、短視頻等等。從3G到4G，再到即將到來(lái)的5G時(shí)代，移動(dòng)網(wǎng)絡(luò)的帶寬和質(zhì)量越來(lái)越高，海量低延遲直播、互動(dòng)直播也成為了可能。

音頻技術(shù)發(fā)展到今天，實(shí)際已經(jīng)非常成熟了。從H264/H265、VP8/VP9以及后面的AV1編解碼器，解決了視頻壓縮率的問(wèn)題；而5G的商用，解決了帶寬的問(wèn)題。這兩個(gè)問(wèn)題解決后，各行各業(yè)都開(kāi)始使用音視頻技術(shù)來(lái)實(shí)現(xiàn)更佳的用戶體驗(yàn)，比如：音視頻會(huì)議、直播帶貨、在線教育、遠(yuǎn)程醫(yī)療、娛樂(lè)游戲等等。

2020年由于疫情的影響，大家更多地認(rèn)識(shí)和了解到音視頻相關(guān)的行業(yè)。音視頻技術(shù)底層離不開(kāi)編解碼標(biāo)準(zhǔn)的發(fā)展。而就在今年，新一代國(guó)際視頻編解碼標(biāo)準(zhǔn)（H.266/VVC）正式出爐，其后續(xù)的落地實(shí)踐非常值得關(guān)注。從行業(yè)應(yīng)用的發(fā)展來(lái)看，圍繞音視頻直播一定會(huì)有三個(gè)發(fā)展方向：更快、更便宜、更智能。

之前音視頻領(lǐng)域有兩大技術(shù)路線：一類(lèi)是RTC，它主要用于滿足多人會(huì)議中的低延時(shí)互動(dòng)；另一類(lèi)是流媒體直播/點(diǎn)播，主要滿足于對(duì)延時(shí)要求不大的高并發(fā)低成本場(chǎng)景。而端上的音視頻處理技術(shù)主要圍繞更智能，諸如人臉識(shí)別、美顏、降噪、超分等處理優(yōu)化來(lái)展開(kāi), 行業(yè)中也有更多的實(shí)踐落地，從后端到前端都在探索更為極致的體驗(yàn)。

從Chrome、Firefox到近幾年蘋(píng)果Safari的加入與支持，各個(gè)云服務(wù)廠商、騰訊云、阿里云、網(wǎng)易云、七牛云以及諸如專(zhuān)門(mén)音視頻服務(wù)商（聲網(wǎng)和即構(gòu)科技等等），都將WebRTC納入瀏覽器實(shí)時(shí)音視頻首選方案。

前端DevOps

相比前面提到的兩個(gè)趨勢(shì)，DevOps內(nèi)涵更加豐富，不僅是單一的技術(shù)，而是框架、工具鏈、方法論、項(xiàng)目管理、組織方法的綜合運(yùn)用。

前端DevOps為研發(fā)效率賦能。 當(dāng)下各大科技公司軟件工程都在重點(diǎn)投入研發(fā)力量持續(xù)完善。開(kāi)發(fā)運(yùn)維一體化流程，CI/CD流程的串聯(lián)，幫助業(yè)務(wù)提升研發(fā)效能。

前端相關(guān)的DevOps需要為Node為中心的服務(wù)器開(kāi)發(fā)體系進(jìn)行設(shè)計(jì)，在當(dāng)下，云原生的發(fā)展大勢(shì)情況下，Node服務(wù)上云的相關(guān)容器技術(shù)是DevOps的重點(diǎn)領(lǐng)域。

低代碼/無(wú)代碼平臺(tái)

從2014年Forrester的研究報(bào)告提出“l(fā)ow-code”一詞到今天，低代碼領(lǐng)域持續(xù)升溫。從低代碼領(lǐng)域的行業(yè)角度看，2017年后，微軟、甲骨文等各大廠家紛紛加入了低代碼賽道的競(jìng)爭(zhēng)。近年來(lái)，獲得3.6億美元融資的Outsystems更是成為低代碼領(lǐng)域海外市場(chǎng)的一只獨(dú)角獸。國(guó)內(nèi)方面，也不乏阿里的云鳳蝶、點(diǎn)石、iVX、輕流、積木等平臺(tái)的誕生，低代碼產(chǎn)品領(lǐng)域的蓬勃發(fā)展，正成為特定場(chǎng)景軟件開(kāi)發(fā)的重要趨勢(shì)。

簡(jiǎn)單而言，“低代碼”和“無(wú)代碼”平臺(tái)的商業(yè)理念是“賦能全民開(kāi)發(fā)”。對(duì)現(xiàn)在趨勢(shì)中所說(shuō)的“低代碼”和“無(wú)代碼”，一般認(rèn)為的區(qū)別在于：

無(wú)代碼：自己編程給自己用，給用戶的感覺(jué)就是一個(gè)軟件。因此，平臺(tái)不會(huì)給自己定位成一個(gè)“編程工具”。主要是通過(guò)圖形化的操作來(lái)降低學(xué)習(xí)曲線，類(lèi)似PPT、Excel等。在垂直領(lǐng)域的特定場(chǎng)景中，才能做到好用。

低代碼：編程給其他人用，通過(guò)降低專(zhuān)業(yè)難度，讓運(yùn)營(yíng)人員也參與進(jìn)來(lái)。平臺(tái)評(píng)估好預(yù)制的場(chǎng)景和需求，減少?gòu)念^寫(xiě)代碼的成本，一定程度上可以通過(guò)圖形化的方式滿足業(yè)務(wù)訴求。

這類(lèi)平臺(tái)產(chǎn)品的價(jià)值點(diǎn)在于大幅度降低業(yè)務(wù)交付的成本。 在技術(shù)實(shí)現(xiàn)方面，可基于目前可視化和模型驅(qū)動(dòng)理念，結(jié)合當(dāng)下大前端跨端體驗(yàn)的融合技術(shù)以及云原生的支持。可視化搭建去完成業(yè)務(wù)可以讓產(chǎn)品和運(yùn)營(yíng)人員參與進(jìn)來(lái)，可以極大地釋放軟件開(kāi)發(fā)者的人力瓶頸，也進(jìn)一步促進(jìn)了技術(shù)和業(yè)務(wù)的深度合作。

微軟公司的Power Platform就是這樣一個(gè)平臺(tái)。目前Power Platform包括三個(gè)產(chǎn)品：

Power BI：商業(yè)數(shù)據(jù)分析，

Power Apps：APP開(kāi)發(fā)，

Power Automate：辦公流程自動(dòng)化，

騰訊公司的Vision低代碼平臺(tái)是為運(yùn)營(yíng)場(chǎng)景優(yōu)化的，賦能運(yùn)營(yíng)人員。Vision生成的代碼兼容React，Vue.js， JQuery 等不同技術(shù)棧，實(shí)現(xiàn)了PC、H5、微信小程序的可視化運(yùn)營(yíng)的頁(yè)面搭建。

為了滿足復(fù)雜交互的運(yùn)營(yíng)需求，Vision也提供可視化搭建引擎Gems，支持復(fù)雜的管理頁(yè)面，支持?jǐn)?shù)據(jù)接口的可視化搭建與生成。

預(yù)計(jì)2021年低代碼大前端繼續(xù)迅猛發(fā)展。從早期的通過(guò)模塊化搭建解決營(yíng)銷(xiāo)活動(dòng)領(lǐng)域的問(wèn)題，轉(zhuǎn)向突破解決內(nèi)部復(fù)雜的中后臺(tái)業(yè)務(wù)需求，既適用于面向C側(cè)用戶的產(chǎn)品運(yùn)營(yíng)，也貼合B側(cè)用戶的數(shù)據(jù)管理需求。

（未完待續(xù)）

參考資料：

WebAssembly官網(wǎng)：https://webassembly.org/

微軟Power Platform： https://www.microsoft.com/China/cloudproductivity/powerplatform/index.html

騰訊IMWeb：https://mp.weixin.qq.com/s/aAmFyYF7Y6F2-9-LrZ-fsg

InfoQ：https://mp.weixin.qq.com/s/LduadVMjFMDra0PxYDTQ1w

【W(wǎng)EB前端大作戰(zhàn)】火熱進(jìn)行中：https://bbs.huaweicloud.com/blogs/255890

web前端

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。