從2020看2021前端發(fā)展趨勢(shì)
來(lái)源：SegmentFault 思否
作者：野林
前言
又到了年底，想簡(jiǎn)單談?wù)勥@一年前端的發(fā)展，以及21年可能會(huì)出現(xiàn)的一些趨勢(shì)。毋庸置疑，2020年確實(shí)是不平凡的一年，對(duì)前端來(lái)說(shuō)，私以為可以用“大前端持續(xù)深耕，泛前端兼容并包”這十四個(gè)字來(lái)形容。
這里需要明確一下我對(duì)“大前端”以及“泛前端”這兩個(gè)概念的理解：首先大前端可以分為廣義的“大前端”和狹義的“大前端”，市面上常說(shuō)的大前端主要分為這兩類(lèi)，所謂廣義的“大前端”是指以前端技術(shù)解決所有本屬于其他領(lǐng)域問(wèn)題的前端技術(shù)，這里其實(shí)是包含了后邊所說(shuō)的泛前端的概念，也就是說(shuō)只要是使用前端技術(shù)去解決的都可以定義為“大前端”；而狹義的“大前端”是僅指垂直到后端領(lǐng)域的前端技術(shù)，其代表是以node.js為主的擴(kuò)展的去解決后端領(lǐng)域的技術(shù)，如出現(xiàn)了諸如express、koa、egg、nest等等配套的后端技術(shù)框架，甚至出現(xiàn)了node的微服務(wù)框架，我這里不做說(shuō)明僅指狹義的“大前端”概念。
對(duì)于“泛前端”，這個(gè)概念沒(méi)有歧義，通常指的都是跨端技術(shù)，比如客戶(hù)端、桌面端，甚至HUB等等，上圖中所示的僅僅指一部分框架，并未收錄完全，畢竟js/ts的社區(qū)實(shí)在太太太太活躍了，下面簡(jiǎn)單分說(shuō)一下“大前端”和“泛前端”個(gè)人的一些見(jiàn)解，是以前端三大框架Vue、React、Angular為核心進(jìn)行橫向和縱向的框架探討。
泛前端技術(shù)框架探討
大前端技術(shù)框架探討
今年阿里前端練習(xí)生計(jì)劃將前端領(lǐng)域劃分了七大方向，分別是工程化方向、前端中后臺(tái)方向、Node.js方向、跨端技術(shù)方向、互動(dòng)技術(shù)方向、可視化技術(shù)方向、前端智能化方向，個(gè)人認(rèn)為Node.js是一個(gè)整體的前端基礎(chǔ)，并不能單算做一個(gè)方向，因而我將其替換為音視頻方向，私以為可將前端方向劃分為以下幾種，下面我將在這幾個(gè)不同的方向維度進(jìn)行個(gè)人的一些闡述和拙見(jiàn)：
中后臺(tái)方向：微前端 可視化方向：antv 智能化方向：imgcook 互動(dòng)方向：Eva 音視頻方向：wasm 工程化方向：severless、全鏈路工程 跨端方向：kbone、rax
中后臺(tái)方向
對(duì)于中后臺(tái)方向，這是傳統(tǒng)web方向，對(duì)于前端來(lái)說(shuō)，2020年對(duì)于微前端的落地應(yīng)用已有很多實(shí)踐。因此，私以為微前端會(huì)作為未來(lái)前端大型應(yīng)用的一種趨勢(shì)，對(duì)于不同團(tuán)隊(duì)的不同技術(shù)棧的匯總整合是一個(gè)比較好的方案，雖然不同于服務(wù)端的那種微服務(wù)可以微的很徹底，但是前端加持著ts等的特性也是可以實(shí)現(xiàn)微化的效果，從而優(yōu)化工時(shí)，提升效率，避免重復(fù)勞作； 既然第一點(diǎn)提到了ts，那這里我想說(shuō)一說(shuō)關(guān)于ts的問(wèn)題，在19年我對(duì)ts的態(tài)度尚存觀望，但在今年，我認(rèn)為ts可以作為一種必備技能來(lái)考察和實(shí)踐，并不是因?yàn)榇蠹叶荚谟茫且驗(yàn)殡S著時(shí)間的發(fā)展，現(xiàn)在前端要承載的能力越來(lái)越重，項(xiàng)目也越來(lái)越大，ts可以很好的約定，對(duì)于后期的維護(hù)以及修改都可以很好的限制，對(duì)于大型團(tuán)隊(duì)、大型項(xiàng)目來(lái)說(shuō)，ts是不二之選；另外，如果有團(tuán)隊(duì)真的要去開(kāi)發(fā)服務(wù)端，那我真的建議你去用ts，如果你用過(guò)nest.js，你會(huì)發(fā)現(xiàn)和寫(xiě)java真的沒(méi)什么區(qū)別，而且服務(wù)端的很多理念也可以通過(guò)ts的各種特性來(lái)使用，比如泛型、抽象類(lèi)等。當(dāng)然，如果是小團(tuán)隊(duì)，而且需要快速開(kāi)發(fā)，對(duì)于小而美的應(yīng)用，個(gè)人認(rèn)為還是js適合，畢竟js是一門(mén)靈活的語(yǔ)言，哈哈哈~
可視化方向
可視化這里，今年其實(shí)沒(méi)有做多少實(shí)踐，但是個(gè)人認(rèn)為，這七個(gè)大方向而言，最容易出成果，或者說(shuō)最能出大佬的，可能還真是可視化領(lǐng)域，如果能在可視化領(lǐng)域做到了前5%，那么我相信各大廠(chǎng)肯定會(huì)花錢(qián)養(yǎng)著你，畢竟我擁有你不一定重要，但是對(duì)手不擁有你對(duì)我很重要，你的技術(shù)壁壘就呈現(xiàn)了出來(lái)，也就在這個(gè)內(nèi)卷的江湖獲得了一些領(lǐng)先和優(yōu)勢(shì)，最起碼裁員的優(yōu)先級(jí)也不會(huì)那么靠前，哈哈哈~ 第一點(diǎn)說(shuō)的有點(diǎn)兒遠(yuǎn)，說(shuō)說(shuō)實(shí)在的，個(gè)人覺(jué)得可以將阿里的antv作為可視化領(lǐng)域的一個(gè)標(biāo)桿，針對(duì)各種特定領(lǐng)域進(jìn)行展開(kāi)，比如gis等，當(dāng)然，其實(shí)可視化領(lǐng)域研究的深的話(huà)還是挺冷門(mén)的，這其實(shí)也會(huì)有一些機(jī)會(huì)，webGL/webAR/webVR等等都可以作為切入點(diǎn)，配合著下面的音視頻領(lǐng)域，這兩個(gè)的相互結(jié)合，確實(shí)還是能做出些東西的。
智能化方向
智能化領(lǐng)域，個(gè)人認(rèn)為其實(shí)核心不在于前端，而在于人工智能，而人工智能領(lǐng)域就不僅僅前端那么些東西了，對(duì)于封裝好的如TensorFlow.js，我們是直接拿來(lái)用的，但是對(duì)于領(lǐng)面的模型建立其實(shí)才是關(guān)鍵，如果有同學(xué)想在智能化領(lǐng)域有所發(fā)展，個(gè)人建議還是要深鉆一下，最好可以深造一下，畢竟這個(gè)東西是真的需要學(xué)術(shù)研究+產(chǎn)業(yè)實(shí)踐的。 在產(chǎn)業(yè)實(shí)踐的前端領(lǐng)域，阿里還是比較領(lǐng)先的，比如imgcook，其核心目的是將圖片轉(zhuǎn)成前端代碼，利用的機(jī)器視覺(jué)去識(shí)別圖片中的不同的位置信息等，將其轉(zhuǎn)成前端的代碼，也就是所謂的D2C，即：Design to Code，今年的D2大會(huì)上又提出了P2C，即：Product to Code，但并不是真的將人類(lèi)語(yǔ)言直接轉(zhuǎn)換成code，而是對(duì)D2C的一個(gè)業(yè)務(wù)擴(kuò)展，對(duì)于D2C某些業(yè)務(wù)代碼利用一些特定的schema進(jìn)行約定，讓機(jī)器學(xué)習(xí)過(guò)程中多一些參數(shù)約束，從而提升代碼實(shí)現(xiàn)度。雖然轉(zhuǎn)化的代碼還很冗余，但是對(duì)于一些初級(jí)的項(xiàng)目或頁(yè)面，確實(shí)可以交給機(jī)器去實(shí)現(xiàn)，個(gè)人認(rèn)為人工智能對(duì)低端重復(fù)的工作確實(shí)會(huì)進(jìn)行替代，也算是對(duì)前端內(nèi)卷做了一定的貢獻(xiàn)，攤手...
互動(dòng)方向
互動(dòng)方向，目前大頭還是在游戲方向，但是我還是認(rèn)為頁(yè)游或前端實(shí)現(xiàn)游戲主要還是做一些開(kāi)胃菜的功能，并不能真正的將用戶(hù)帶進(jìn)沉浸式的體驗(yàn)，對(duì)于小游戲引擎，今年阿里好像出了一個(gè)eva的引擎，感興趣的同學(xué)可以看看。 對(duì)于新體驗(yàn)方面，AR/VR/MR等可能在明年5g深化的時(shí)候會(huì)有一些落地實(shí)踐，但可能還是不溫不火，互動(dòng)方向配合設(shè)計(jì)的新理念可能會(huì)是一個(gè)新的突破點(diǎn)。
音視頻方向
這里想說(shuō)一說(shuō)WebAssembly，雖然都說(shuō)wasm是會(huì)替代掉js，但目前看應(yīng)該還不太現(xiàn)實(shí)，wasm目前主要還是配合音視頻領(lǐng)域多一些，另外就是一些額外的優(yōu)化措施，配合rust進(jìn)行優(yōu)化等，如果有志于音視頻領(lǐng)域有所建樹(shù)的同學(xué)，wasm確實(shí)可以?xún)?chǔ)備起來(lái)。 webrtc是音視頻領(lǐng)域一個(gè)繞不開(kāi)的技術(shù)，另外就是播放器的實(shí)現(xiàn)，video.js、flv.js等，對(duì)于一些視頻播放的協(xié)議也要了解，如rtmp/rtsp等，今年疫情的關(guān)系，帶動(dòng)著直播領(lǐng)域的火熱，前端音視頻方向說(shuō)不定會(huì)是一個(gè)風(fēng)口。
工程化方向
工程化方向就不得不提serverless，這是今年前端最火熱的一個(gè)話(huà)題了，私以為serverless不僅僅是前端領(lǐng)域的變化，它可能改變目前的開(kāi)發(fā)模式，以后沒(méi)有前后端之分（ps：目前確實(shí)是有合的趨勢(shì)），只有云工程師和端工程師之分，那么對(duì)于目前的前端來(lái)說(shuō)，我們就不能僅僅只關(guān)注前端領(lǐng)域的一些內(nèi)容了，docker、k8s等屬于傳統(tǒng)后端或運(yùn)維的部分，我們也需要掌握，對(duì)于一些后端的思維及名詞也需要熟悉，如限流、削峰、服務(wù)降級(jí)等。當(dāng)然serverless的前提其實(shí)是云原生，如果沒(méi)有云化，那實(shí)現(xiàn)serverless的效果應(yīng)該不如目前這樣，當(dāng)然個(gè)人認(rèn)為這是一個(gè)必然的趨勢(shì)，從今年的云棲大會(huì)以及運(yùn)營(yíng)商5g云化來(lái)看，云網(wǎng)融合、云邊協(xié)同應(yīng)該會(huì)是主流。 前端工程化另外一個(gè)方向就是全鏈路的工程化，從腳手架、low code、插件市場(chǎng)等全鏈路的提供，簡(jiǎn)化前端開(kāi)發(fā)門(mén)檻，這里可以參考淘系的飛冰，對(duì)low code以及ide的插件提供都有涉及，以及ui組件庫(kù)的提供等等，形成一個(gè)全鏈路的前端生態(tài)。這里可以說(shuō)說(shuō)low code和no code，no code是一個(gè)無(wú)需任何編碼的現(xiàn)成的工具，就是完全沒(méi)有編程的入口；low code是一個(gè)需要部分編碼的工具，為了是給一些非專(zhuān)業(yè)人士但又有編程需要的人員使用，強(qiáng)調(diào)開(kāi)發(fā)出來(lái)給別人用，常見(jiàn)的比如給運(yùn)營(yíng)人員用的h5編輯器，如易企秀、maka、ih5等。
跨端方向
跨端方向是一個(gè)老生常談的問(wèn)題，主流還是要write once，run anywhere，常見(jiàn)的無(wú)非就是利用各種框架將各個(gè)DSL進(jìn)行來(lái)回轉(zhuǎn)換，但其實(shí)這是一個(gè)偽命題，本質(zhì)是不可能達(dá)到大一統(tǒng)的局面的，抽象就很難具象，這兩者需要有一個(gè)平衡，需要對(duì)具體常見(jiàn)具體分析。 私以為小程序領(lǐng)域是端方向下一個(gè)各家大佬追逐的市場(chǎng)，因?yàn)閍pp領(lǐng)域的跑馬圈地都已基本形成，現(xiàn)在再去開(kāi)發(fā)出一個(gè)現(xiàn)象級(jí)的app幾乎很難很難了，但是將app作為操作系統(tǒng)，以小程序去帶動(dòng)用戶(hù)，形成用戶(hù)閉環(huán)，還是有很大市場(chǎng)的，類(lèi)小程序應(yīng)用，如pwa、快應(yīng)用等都是這種承載方式的不同展現(xiàn)，對(duì)跨端來(lái)說(shuō)，這個(gè)不失為一種發(fā)展選擇。對(duì)于小程序的框架也出現(xiàn)了kbone、rax等，可能也會(huì)有一個(gè)類(lèi)似w3c這樣的一個(gè)小程序標(biāo)準(zhǔn)，但是像微信這種巨無(wú)霸應(yīng)用，是否真的會(huì)遵守就是另一回事了，總之，其實(shí)也不失為一個(gè)選擇。
總結(jié)
回望2020，展望2021，總結(jié)如下：
大前端持續(xù)深耕，泛前端兼容并包 中后臺(tái)微服務(wù)化，可視化行業(yè)細(xì)化 智能側(cè)算法深化，互娛側(cè)形態(tài)變化 音視頻結(jié)構(gòu)優(yōu)化，工程側(cè)全面轉(zhuǎn)化 跨端側(cè)具體改化，前端更加內(nèi)卷化
好了，2021到了，愿大家在這個(gè)內(nèi)卷的時(shí)代，都有自己的一技之長(zhǎng)，形成自己的核心競(jìng)爭(zhēng)力，升職加薪，再創(chuàng)輝煌，共勉?。。?/span>
評(píng)論
圖片
表情