2021前端會有什么新變化队他，首先需要搞清楚我們關(guān)注這些新技術(shù)的目的是什么卷仑？
相信對于關(guān)注這個問題的人包括我來說，除了了解技術(shù)發(fā)展風(fēng)向作為飯后談資以外麸折，最重要的是看能不能在公司內(nèi)部落地锡凝、做出一番成績來，當(dāng)然升職加薪那都是后話了垢啼。
回望過去
首先定義一下我說的“過去”是2019年及以前窜锯。
以史為鏡，可以知興替芭析∶回望一下過去，有利于我們對未來做出更好的判斷馁启。我們先細(xì)數(shù)一下過去的幾年間大廠的前端都在做什么驾孔。
前端工程化
這個應(yīng)該是前幾年社區(qū)討論的最多、面試問到最多的一個名詞惯疙，那么什么是前端工程化呢翠勉？我覺得需要從以下幾個概念開始講起。
模塊化
先說JavaScript的模塊化霉颠。
從ES6開始眉菱，JavaScript語言有了自己原生支持的模塊化方案——ES6 Module，這樣有個好處掉分，前端們不用去使用社區(qū)定制的模塊加載方案俭缓，直接使用統(tǒng)一的就好克伊。統(tǒng)一模塊方案之后，既可以不用額外引入模塊化解決方案的代碼华坦，又可以為后面的自動化統(tǒng)一處理做好準(zhǔn)備愿吹。
再說CSS的模塊化。
CSS模塊化主要是解決的CSS類名沖突的問題惜姐，比如常見的BEM約定以及社區(qū)豐富的CSS module解決方案犁跪，有了這些東西，前端工程多人開發(fā)就可以優(yōu)雅的解決類名沖突的問題歹袁。
組件化
隨著React生態(tài)和Vue生態(tài)在國內(nèi)各大前端團隊的落地坷衍，組件化開發(fā)已經(jīng)是標(biāo)配了，并且開源社區(qū)也沉淀出了以Element条舔、Ant Design為代表的優(yōu)秀組件庫枫耳。
大廠的程序員們在組件的概念上又做了一層抽象和封裝，比如以業(yè)務(wù)組件和業(yè)務(wù)區(qū)塊為抽象的中后臺前端解決方案Ant Design Pro孟抗，并且它還在前端工具庫迁杨、前端UI設(shè)計語言等等方案做了統(tǒng)一。
自動化
首先是開發(fā)的自動化凄硼。
webpack和nodejs在開發(fā)的自動化上起了很大的作用铅协。前端項目本地化開發(fā)的server由nodejs（常用，也不一定非得是nodejs）提供摊沉，開發(fā)過程中的各種輔助性plugin和loader都由webpack生態(tài)提供狐史，上線前的代碼打包、代碼分割说墨、資源處理也由webpack操作预皇，可以說過去幾年間很多前端在職業(yè)晉升上都吃了引入webpack和nodejs的紅利。
再說babel婉刀，有了babel的配合吟温，前端可以寫高版本的JavaScript方法，配合webpack loader突颊，自動編譯成低版本JavaScript鲁豪，前端能力再次得到提升。
其次是部署發(fā)布的自動化律秃。
這個應(yīng)該是很多大廠前端基建團隊做的事情爬橡，比如持續(xù)發(fā)布、版本控制棒动、內(nèi)部cdn建設(shè)等等糙申。
大前端
這也是個在過去幾年炒的很熱的詞，不過這個詞不僅僅是炒作船惨，它也實實在在的擴展了前端的能力以及現(xiàn)有的公司組織架構(gòu)柜裸，比如據(jù)我所知有的公司移動端和前端就會劃分到同一個團隊管理缕陕，統(tǒng)稱大前端團隊。
nodejs
這個在前端工程化部分已經(jīng)說過一些疙挺，這里再次提起是因為在工程化中nodejs扮演的角色是提供nodejs環(huán)境以及部分后端能力扛邑，而在大前端團隊里是實實在在的存在nodejs工程師角色和nodejs項目的。比如說在前后端分離的過程中铐然，部分公司（比如阿里淘寶）會發(fā)展出一個中間層的東西蔬崩，這可以理解為是一個大前端團隊維護的業(yè)務(wù)接口聚合層，前端寫接口肯定是使用nodejs最順手搀暑，而且nodejs生態(tài)也在蓬勃發(fā)展沥阳，比如早些年的TJ大神一人之力扛起半個nodejs生態(tài)圈，涌現(xiàn)了koa自点、express這樣的基于中間件的開發(fā)庫桐罕，再到后來阿里巴巴的egg，再到Nest.js樟氢，現(xiàn)在基本已經(jīng)沒有裸寫nodejs api的了。
跨端
先說說手機端
首先侠鳄，最直接的跨端就是在APP殼子里面套HTML頁面來開發(fā)埠啃，這種方案也催生了很多hybrid解決方案，前端也需要去了解客戶端的知識以及JavaScript Bridge的設(shè)計伟恶，同時也減少了APP客戶端工程師的崗位??
然后碴开，隨著React生態(tài)蓬勃發(fā)展，F(xiàn)acebook開源了一個跨平臺移動應(yīng)用開發(fā)框架——ReactNative博秫，它可以讓你以React的前端語法來開發(fā)移動應(yīng)用潦牛，本質(zhì)就是虛擬DOM映射原生UI元素、通過bridge調(diào)用原生API挡育，這種思路讓前端的觸手伸到了移動開發(fā)巴碗，也促成了大前端團隊的建設(shè)。Vue生態(tài)也有阿里發(fā)起的Weex移動開發(fā)框架即寒，原理類似橡淆。
再后來，F(xiàn)lutter出現(xiàn)了母赵，它也是一個跨端的開發(fā)框架逸爵，準(zhǔn)確來說它和JavaScript生態(tài)關(guān)系不大，使用Dart語言開發(fā)APP凹嘲，并且有自己的跨平臺自繪引擎來保證多端UI表現(xiàn)一致师倔，但因為也是一種跨端的解決方案，所以也受到了大量前端工程師的關(guān)注和學(xué)習(xí)周蹭。
最后趋艘，還是要提一嘴小程序疲恢，這個技術(shù)方案其實是商業(yè)的產(chǎn)物，各個公司都想把內(nèi)容和生態(tài)留在自家的APP里致稀，所以從微信小程序開始（微信不是最早冈闭，但是發(fā)展的最好），阿里抖单、百度萎攒、字節(jié)跳動等等這些公司都有了自家的小程序。
再說說桌面端
桌面端據(jù)我了解使用的比較多的是Electron矛绘，它可以讓前端以JavaScript來開發(fā)出桌面應(yīng)用耍休，比如字節(jié)跳動的飛書桌面端就是使用Electron來做的。
總結(jié)過去
從過去這些發(fā)展的技術(shù)可以看出來货矮，前端主要是在做統(tǒng)一化羊精、工程化、生態(tài)化的事情囚玫，從早些年間的刀耕火種跨越到比較完善的工程化開發(fā)喧锦，前端的能力范圍也得到了擴展，以前不能做的事情現(xiàn)在可以做了抓督。
很多互聯(lián)網(wǎng)公司的前端高p也是在這一波浪潮中晉升燃少，得到了更好的職業(yè)發(fā)展。
分析現(xiàn)在
首先定義一下我說的“現(xiàn)在”是2020年左右铃在。
現(xiàn)在基本上各大公司的前端工程化改造大體完成阵具，各種改造方案、組件庫都層出不窮定铜，所以前端又有新玩法了阳液。
Serverless
準(zhǔn)確來說，Serverless并不是前端的技術(shù)領(lǐng)域揣炕，因為它解決的是讓開發(fā)者不用關(guān)心服務(wù)器底層架構(gòu)和運維工作帘皿，形成一種“無服務(wù)器”的假象。
那為什么這個技術(shù)在前端領(lǐng)域會受到追捧呢畸陡？
因為這個技術(shù)剛好解決了整個開發(fā)鏈條中前端缺失的能力矮烹，即服務(wù)端底層和運維能力。各個大公司的前端團隊也都在嘗試把Serverless落地罩锐，比如在知乎上就可以看到很多關(guān)于Serverless的布道奉狈。
NoCode和LowCode
在我看來，低代碼（LowCode）和零代碼（NoCode）產(chǎn)品涩惑，是前端對現(xiàn)有能力整合之后仁期，對其他領(lǐng)域的一種擴張和賦能。其實各大公司在某些特定業(yè)務(wù)場景中早已經(jīng)有相關(guān)的產(chǎn)品落地了，比如廣告業(yè)務(wù)跛蛋、電商運營的繁多的落地頁需求可以使用零代碼產(chǎn)品來解決熬的，全程不需要代碼參與。
那既然之前有赊级，現(xiàn)在為什么又提起低代碼和零代碼呢押框？我覺得原因有兩個：
之前解決的只是某些特定業(yè)務(wù)場景的問題，現(xiàn)在想把這種能力逐漸擴展到更多的業(yè)務(wù)場景理逊，比如擴展到公司外部橡伞，來做toC的使用。
之前解決的只是頁面級的問題晋被，現(xiàn)在想解決應(yīng)用級的問題兑徘。
總結(jié)現(xiàn)在
當(dāng)然了，現(xiàn)在的討論的比較多的羡洛、正在進(jìn)行中的技術(shù)和解決方案肯定不止我說到的這兩種挂脑，歡迎大家補充。
目前大公司的前端們也在結(jié)合業(yè)務(wù)在做這方面的事情欲侮，如果你所在的團隊在做相關(guān)的事情崭闲，不如加入進(jìn)去，不管是技術(shù)或職業(yè)發(fā)展威蕉，都會有比較好的收獲刁俭。
展望未來
React Server Component
這個目前還在提案中，未來成熟之后極有可能改變前端的開發(fā)方式忘伞，前端React生態(tài)的范圍又向服務(wù)度端擴展了薄翅，一波新的基礎(chǔ)建設(shè)沙兰、技術(shù)方案可以考慮了氓奈。
Serverless大規(guī)模落地
按照現(xiàn)在社區(qū)以及各大公司內(nèi)部的發(fā)展，Serverless應(yīng)該會在2021有大規(guī)模的落地鼎天，運維崗位會進(jìn)一步減少??
NoCode和LowCode持續(xù)發(fā)展
低代碼這個概念在2021年初因為釘釘發(fā)布會被再次帶火舀奶，因為釘釘?shù)氖褂昧恳约皌oB端市場有很多內(nèi)部應(yīng)用的搭建需求，所以它強調(diào)這個概念也不奇怪斋射。
相信有像阿里釘釘這樣的企業(yè)的推動育勺，低代碼和零代碼會發(fā)展的更好。
不用焦慮
說了這么多罗岖，是不是更焦慮了涧至？其實不用。
React核心成員Dan Abramov都大方承認(rèn)了他并不了解Flex桑包、Webpack等等技術(shù)南蓬，沒試過Serverless等等“時髦”技術(shù)，很多你會的技術(shù)他不會，照很多招聘標(biāo)準(zhǔn)來看他還評不上阿里P7赘方，但是這并不影響他能成為React核心成員烧颖，以及他在他自己擅長的領(lǐng)域的造詣。
所以窄陡，不用都會炕淮，選定一個自己喜歡的、能做出成績的技術(shù)跳夭，深入下去吧涂圆！
