<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          字節(jié)跳動(dòng)重磅發(fā)布 2022 年 6 大前端技術(shù)發(fā)展趨勢(shì)

          共 4396字,需瀏覽 9分鐘

           ·

          2022-03-11 04:51

          上一篇:我已經(jīng)不用 try catch 處理異常了!太辣雞了!

          最近,字節(jié)跳動(dòng)技術(shù)團(tuán)隊(duì)公布了一份關(guān)于 2022 年前端技術(shù)的發(fā)展趨勢(shì)預(yù)測(cè),總結(jié)了新的一年前端技術(shù)可能產(chǎn)生的6個(gè)變化,讓我們一起來借鑒參考一下吧。

          01

          前端新標(biāo)準(zhǔn)
          2014 年 10 月 28 日,W3C 正式發(fā)布 HTML5.0 推薦標(biāo)準(zhǔn)讓前端技術(shù)蓬勃發(fā)展。雖然?HTML6.0?目前處于提案階段,但是社區(qū)已經(jīng)開始有了一些零星的討論,所以可能它離我們并不太遠(yuǎn)。2022 年,可能 HTML6 并不會(huì)推出,但是可能會(huì)有更多利于用戶體驗(yàn)的提案出現(xiàn)。

          Facebook 改名 Meta 后,元宇宙話題很火熱,但突然一夜之間,討論似乎又從元宇宙過渡到了 Web3.0。

          Web1.0到2.0的轉(zhuǎn)變,極大地改變了前端技術(shù),Web3.0時(shí)代,可能是去中心化,可能是物聯(lián)網(wǎng),可能是人工智能,值得每個(gè)前端開發(fā)去關(guān)注。

          02

          框架、工程與體驗(yàn)?
          前端框架

          在 StackOverflow 的“最受歡迎的 Web 框架”調(diào)查中,除去 SSR 渲染框架和 jQuery,上榜的前端框架共有 5 個(gè):


          React,Vue,Angular 依然是強(qiáng)勢(shì)鐵三角向前發(fā)展。在 2022 年 Vue3 會(huì)成為 Vue 的默認(rèn)版本,React 18 也會(huì)發(fā)布正式版本,從目前社區(qū)關(guān)注度來看, Vue3 源碼 Github star 27k+, React 18 WG Github star 3.9k+,且在 npm 的下載量上,新版本下載數(shù)目都比較可觀,所以很有可能今年嘗試和使用的人會(huì)變得更多。

          打包器

          打包器大概可以分為傳統(tǒng)編譯和ESM 混合編譯,而由于 ESM 混合編譯類打包器依賴于其他打包器,所以理論上 NPM 下載量永遠(yuǎn)不可能超過其依賴。同時(shí) ESM 混合編譯今年整體表現(xiàn)平平。

          UI 框架

          由于模塊化 CSS、搖樹、MVVM 的流行,UI 框架的選擇其實(shí)沒有那么舉足輕重了,針對(duì)自己選用的框架選擇一個(gè)符合項(xiàng)目風(fēng)格的 UI 即可。預(yù)計(jì)今年也不會(huì)有黑馬闖入和變動(dòng)。

          03

          智能搭建恰逢其時(shí)
          低代碼的崛起

          2021 年開年以來,低代碼行業(yè)被不斷關(guān)注,也引發(fā)了眾多企業(yè)的熱議與調(diào)研。

          低代碼發(fā)展初期,廠商的類型多樣化,傳統(tǒng)軟件廠商、互聯(lián)網(wǎng)大廠均涉及低代碼領(lǐng)域,通用型廠商相對(duì)垂直型廠商應(yīng)用場(chǎng)景更加廣泛,因此廠商數(shù)量更多。但隨著市場(chǎng)成熟,通用類型廠商競(jìng)爭(zhēng)加劇,垂直型廠商在細(xì)分的領(lǐng)域?qū)?huì)呈現(xiàn)優(yōu)勢(shì)明顯趨勢(shì),可以進(jìn)一步挖掘用戶場(chǎng)景,提升產(chǎn)品能力和用戶滿意度。及早布局低代碼產(chǎn)業(yè)生態(tài),多維度拓展廠商優(yōu)勢(shì),才能在未來占據(jù)高地。

          AI 與圖形化的探索

          人工智能作為跨時(shí)代技術(shù)在各個(gè)領(lǐng)域大放異彩,近些年 AI 能力在前端領(lǐng)域的嘗試與應(yīng)用帶來新一輪的技術(shù)革命。

          阿里的 imgcook 可以通過識(shí)別設(shè)計(jì)稿(Sketch / PSD /圖片)智能生成 React、Vue、Flutter、小程序等不同種類的代碼,并在同年雙 11 大促中自動(dòng)生成了 79.34% 的前端代碼,智能生成代碼不再只是一個(gè)線下實(shí)驗(yàn)產(chǎn)品,而是真正產(chǎn)生了價(jià)值。


          2022 年隨著低代碼和圖形化技術(shù)的逐步完善,二者會(huì)相互完善和成就彼此。使用者通過 AI 實(shí)現(xiàn)頁面的還原然后再通過低代碼平臺(tái)對(duì)頁面進(jìn)行調(diào)整,整個(gè)過程基本上不寫什么代碼就可以完成整個(gè)頁面的搭建,搭建頁面真的會(huì)變得特別簡(jiǎn)單。

          04

          跨平臺(tái)技術(shù)撬開多「端」世界的大門
          隨著從 PC 時(shí)代向移動(dòng)互聯(lián)網(wǎng)時(shí)代演進(jìn),原生客戶端因?yàn)樽陨硖旎ò宓脑蛞苍谥饾u向跨平臺(tái)方案傾斜,當(dāng)然這得益于跨平臺(tái)方案的明顯優(yōu)勢(shì)。對(duì)于開發(fā)者而言,可以做到一次開發(fā)多端復(fù)用,這在很大程度上能夠降低研發(fā)成本,提高產(chǎn)品效能。但是,移動(dòng)端的跨平臺(tái)技術(shù)并不是僅僅考慮一套代碼能夠運(yùn)行在不同場(chǎng)景即可,還需要解決性能、動(dòng)態(tài)性、研發(fā)效率以及一致性的問題。

          React Native VS Flutter

          React Native 是以 Web 技術(shù)開發(fā)原生應(yīng)用的典型框架。但是與眾多基于 html 的跨平臺(tái)框架相比,F(xiàn)lutter 絕對(duì)是體驗(yàn)最好,性能與構(gòu)建思路幾乎最接近原生開發(fā)的框架。

          ?Flutter 目前雖然有著跨端最好的性能和體驗(yàn)但是關(guān)注人數(shù)和 React Native 不相上下。React Native 由于先出優(yōu)勢(shì)加上 React 的影響力導(dǎo)致目前很多 APP 都已經(jīng)進(jìn)入存量階段,少有新的 APP 出現(xiàn),所以在沒有足夠的收益情況下,大部分 APP 是不會(huì)進(jìn)行技術(shù)變更的。所以在 2022 年,如果兩者都無重大的技術(shù)變更,除了對(duì) Flutter 關(guān)注的人會(huì)逐漸變多,兩者大概不會(huì)有什么比較大的轉(zhuǎn)變。

          小程序

          目前主流小程序平臺(tái)有 10 多家,包括騰訊的微信小程序、QQ 小程序;阿里的支付寶小程序、淘寶輕店鋪;字節(jié)跳動(dòng)的頭條小程序、抖音小程序;百度小程序等;不同平臺(tái)的實(shí)現(xiàn)標(biāo)準(zhǔn)各不相同,開發(fā)者需要學(xué)習(xí)不同平臺(tái)的開發(fā)規(guī)范做定制化開發(fā)。


          所以在 2019 年 9 月 12 日阿里巴巴主導(dǎo)發(fā)起并聯(lián)合 W3C 中國(guó)及國(guó)內(nèi)外廠商起草了 MiniApp 標(biāo)準(zhǔn)化白皮書(MiniApp Standardization White Paper),旨在制定共同標(biāo)準(zhǔn)減少平臺(tái)差異,并成立了相關(guān)工作組。

          截至目前產(chǎn)出了 lifecycle,manifest,packaging 等幾篇文檔,但從目前來看各平臺(tái)對(duì)這些標(biāo)準(zhǔn)的實(shí)現(xiàn)度還很低,并未實(shí)現(xiàn)統(tǒng)一,所以這么來看標(biāo)準(zhǔn)化的路看著還很長(zhǎng)。

          在當(dāng)下要解決跨平臺(tái)開發(fā)問題可以采用框架轉(zhuǎn)換。

          隨著一些跨端框架(Uniapp、Taro)的出現(xiàn)部分跨端轉(zhuǎn)換器基本已不再維護(hù),這邊僅作補(bǔ)充。我們接下來了解一些跨端轉(zhuǎn)換器相關(guān)的內(nèi)容:
          • wept: 微信小程序?qū)崟r(shí)運(yùn)行工具,目前支持 Web、iOS 兩端的運(yùn)行環(huán)境;

          • hera-cli: 用小程序方式來寫跨平臺(tái)應(yīng)用的開發(fā)框架,可以打包成 Android 、 iOS 應(yīng)用,以及 H5;

          • weweb-cli: 兼容小程序語法的前端框架,可以用小程序的寫法,來寫 web 應(yīng)用


          跨端這項(xiàng)技術(shù)并非為了完全替代原生開發(fā),針對(duì)每個(gè)場(chǎng)景我們都可以用原生寫出性能最佳的代碼。但是這樣做工作量太大,實(shí)際項(xiàng)目開發(fā)中需要掌握效率與優(yōu)化之間的平衡,跨端的使用場(chǎng)景并不一定是項(xiàng)目級(jí)別的,可以是業(yè)務(wù)級(jí)甚至是頁面級(jí)的。

          跨端的優(yōu)勢(shì)在于能讓我們?cè)跁鴮懜行实拇a、擁有更豐富的生態(tài)的同時(shí),還帶來了不錯(cuò)的性能。

          05

          泛前端
          “前端開發(fā)”的發(fā)展歷史像是一直在找尋自己的定位;從切圖仔、寫 HTML 模板的“石器時(shí)代”,到前后端分離、大前端的“工業(yè)時(shí)代”,再到現(xiàn)在跨端技術(shù)、低代碼的“電氣時(shí)代”。前端研發(fā)的職責(zé)一直在改變,同時(shí)前端研發(fā)需要掌握的技術(shù)也在迭代更新。

          Serverless

          從語義上來理解, serverless 即無服務(wù)架構(gòu),但是無服務(wù)器的說法僅僅是一種概念上的強(qiáng)調(diào),無服務(wù)架構(gòu)仍然在某處存在有服務(wù)器,只是開發(fā)者無需再像傳統(tǒng)開發(fā)一樣去關(guān)注這些基礎(chǔ)設(shè)施,而是將精力更聚焦在業(yè)務(wù)實(shí)際的邏輯代碼之上。另外,搜索公眾號(hào)互聯(lián)網(wǎng)架構(gòu)師后臺(tái)回復(fù)“2T”,獲取一份驚喜禮包。

          對(duì)比傳統(tǒng)的服務(wù)器托管方式,使用 serverless 架構(gòu)開發(fā),開發(fā)者無需多關(guān)注可用性、擴(kuò)縮容、監(jiān)控告警以及安全漏洞等等問題,只需要負(fù)責(zé) Faas 層的代碼來處理業(yè)務(wù)邏輯即可。

          全棧

          “全棧開發(fā)者”是指“同時(shí)掌握前端、后端以及其他網(wǎng)站開發(fā)相關(guān)技能的開發(fā)者”。全棧開發(fā)者能夠勝任產(chǎn)品開發(fā)的全流程,從前端到后端,從架構(gòu)設(shè)計(jì)到代碼落地,從自動(dòng)化測(cè)試到運(yùn)維等。對(duì)于公司來說,全棧工程師可以減小公司的用人成本,減少項(xiàng)目溝通成本;對(duì)于個(gè)人來說,擁有全鏈路技術(shù)有益于技術(shù)的閉環(huán),擴(kuò)展全局思維,提升個(gè)人能力和價(jià)值。


          DevOps

          DevOps(Development 和 Operations 的組合詞)是一種重視“軟件開發(fā)人員(Dev)”和“IT 運(yùn)維技術(shù)人員(OPS)”之間溝通合作的文化、運(yùn)動(dòng)或慣例。透過自動(dòng)化“軟件交付”和“架構(gòu)變更”的流程,來使得構(gòu)建、測(cè)試、發(fā)布軟件能夠更加地快捷、頻繁和可靠。可以把 DevOps 理解為一個(gè)過程、方法與系統(tǒng)的總稱。

          06

          5G場(chǎng)景下的新趨勢(shì)
          5G 的到來對(duì)于技術(shù)研發(fā)工作者的我們而言意味深遠(yuǎn)。它的出現(xiàn)是數(shù)據(jù)傳輸速度、響應(yīng)速度和連接性的一次巨大飛躍。

          5G 將與超高清視頻、VR、AR、消費(fèi)級(jí)云計(jì)算、智能家居、智慧城市、車聯(lián)網(wǎng)、物聯(lián)網(wǎng)、智能制造等產(chǎn)生深度融合,這些都將為前端技術(shù)的發(fā)展帶來新的增長(zhǎng)和機(jī)遇。

          WebAR & WebVR

          元宇宙概念火爆全球,目前的 WebAR 和 WebVR 技術(shù)距離實(shí)現(xiàn)元宇宙的愿景似乎還很遙遠(yuǎn),但借助于以 URL 的格式進(jìn)行傳播的優(yōu)勢(shì),通過社交媒體分享形式進(jìn)行推廣,WebAR 和 WebVR 無疑是用戶接觸到元宇宙門檻的最便捷的方式,不需要購(gòu)買昂貴的 VR 設(shè)備,不需要安裝 APP,通過手機(jī)網(wǎng)頁就可以進(jìn)行體驗(yàn)。在 5G 技術(shù)逐漸普及的當(dāng)今,現(xiàn)有的一些體驗(yàn)問題,例如:3D 模型體積較大,初次資源加載耗時(shí)長(zhǎng)之類的問題也能夠得到一些緩解。


          前端人在這塊能夠做些什么?從技術(shù)上來講,需要我們通過機(jī)器學(xué)習(xí)算法,實(shí)時(shí)地將虛擬圖像覆蓋到用戶屏幕,并且和真實(shí)世界中的位置進(jìn)行對(duì)齊,結(jié)合 WebRTC 技術(shù)實(shí)現(xiàn)網(wǎng)頁瀏覽器實(shí)時(shí)獲取和展示視頻流,再利用 WebGL 的能力,進(jìn)行 3D 人物模型加載,渲染和播放動(dòng)畫。

          Web 3D

          隨著 5G 技術(shù)發(fā)展,視頻加載速度會(huì)非???,簡(jiǎn)單的實(shí)時(shí)渲染會(huì)被視頻直接替代。復(fù)雜的可以通過服務(wù)器渲染,將畫面?zhèn)骰鼐W(wǎng)頁中,只要傳輸夠快,手機(jī)的性能就不再是問題。

          降低 web 3D 研發(fā)成本應(yīng)該是將來的一個(gè)重要發(fā)展路線,隨著技術(shù)門檻的降低,會(huì)吸引更多感興趣的人加入促使其正向發(fā)展。所以 Web 3D 可能會(huì)朝著平臺(tái)化的方向發(fā)展,能提供簡(jiǎn)單高效的工具將成為核心競(jìng)爭(zhēng)力。

          WebRTC ( Web Real-Time Communications )

          WebRTC 是一項(xiàng)實(shí)時(shí)通訊技術(shù),它為前端打開了信息傳遞的新世界大門,對(duì)于絕大多數(shù)前端開發(fā)者來說,對(duì)于信息的傳遞還局限于 XMLHttpRequest,升級(jí)到全雙工大家會(huì)用到 WebSocket ,對(duì)于能力閉塞的前端來說,WebRTC 無疑是打破了前端“楚門的世界”。

          1、2T架構(gòu)師學(xué)習(xí)資料干貨分享

          2、985副教授工資曝光

          3、字節(jié)跳動(dòng)面試經(jīng)驗(yàn)總結(jié),已順利拿到offer

          4、雷軍做程序員時(shí)寫的博客,很強(qiáng)大!

          5、人臉識(shí)別的時(shí)候,一定要穿上衣服?。?/a>

          6、清華大學(xué):2021 元宇宙研究報(bào)告!

          7、績(jī)效被打3.25B,員工將支付寶告上了法院,判了

          瀏覽 132
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          評(píng)論
          圖片
          表情
          推薦
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  日韩一级电影网 | 影音先锋男人资源在线播放 | 亚洲樱桃视频 | 日本无码每更新 | 日本黄色链接 |