從2020看2021前端發展趨勢

前言

又到了年底，想簡單談談這一年前端的發展，以及21年可能會出現的一些趨勢。毋庸置疑，2020年確實是不平凡的一年，對前端來說，私以為可以用“大前端持續深耕，泛前端相容幷包”這十四個字來形容。這裡需要明確一下我對“大前端”以及“泛前端”這兩個概念的理解：首先大前端可以分為廣義的“大前端”和狹義的“大前端”，市面上常說的大前端主要分為這兩類，所謂廣義的“大前端”是指以前端技術解決所有本屬於其他領域問題的前端技術，這裡其實是包含了後邊所說的泛前端的概念，也就是說只要是使用前端技術去解決的都可以定義為“大前端”；而狹義的“大前端”是僅指垂直到後端領域的前端技術，其代表是以node.js為主的擴充套件的去解決後端領域的技術，如出現了諸如express、koa、egg、nest等等配套的後端技術框架，甚至出現了node的微服務框架，我這裡不做說明僅指狹義的“大前端”概念。對於“泛前端”，這個概念沒有歧義，通常指的都是跨端技術，比如客戶端、桌面端，甚至HUB等等，上圖中所示的僅僅指一部分框架，並未收錄完全，畢竟js/ts的社群實在太太太太活躍了，下面簡單分說一下“大前端”和“泛前端”個人的一些見解，是以前端三大框架Vue、React、Angular為核心進行橫向和縱向的框架探討

泛前端技術框架探討

大前端技術框架探討

今年阿里前端練習生計劃將前端領域劃分了七大方向，分別是工程化方向、前端中後臺方向、Node.js方向、跨端技術方向、互動技術方向、視覺化技術方向、前端智慧化方向，個人認為Node.js是一個整體的前端基礎，並不能單算做一個方向，因而我將其替換為音視訊方向，私以為可將前端方向劃分為以下幾種，下面我將在這幾個不同的方向維度進行個人的一些闡述和拙見：

• 中後臺方向：微前端
• 視覺化方向：antv
• 智慧化方向：imgcook
• 互動方向：Eva
• 音視訊方向：wasm
• 工程化方向：severless、全鏈路工程
• 跨端方向：kbone、rax

中後臺方向

1. 對於中後臺方向，這是傳統web方向，對於前端來說，2020年對於微前端的落地應用已有很多實踐。因此，私以為微前端會作為未來前端大型應用的一種趨勢，對於不同團隊的不同技術棧的彙總整合是一個比較好的方案，雖然不同於服務端的那種微服務可以微的很徹底，但是前端加持著ts等的特性也是可以實現微化的效果，從而優化工時，提升效率，避免重複勞作；
2. 既然第一點提到了ts，那這裡我想說一說關於ts的問題，在19年我對ts的態度尚存觀望，但在今年，我認為ts可以作為一種必備技能來考察和實踐，並不是因為大家都在用，而是因為隨著時間的發展，現在前端要承載的能力越來越重，專案也越來越大，ts可以很好的約定，對於後期的維護以及修改都可以很好的限制，對於大型團隊、大型專案來說，ts是不二之選；另外，如果有團隊真的要去開發服務端，那我真的建議你去用ts，如果你用過nest.js，你會發現和寫java真的沒什麼區別，而且服務端的很多理念也可以通過ts的各種特性來使用，比如泛型、抽象類等。當然，如果是小團隊，而且需要快速開發，對於小而美的應用，個人認為還是js適合，畢竟js是一門靈活的語言，哈哈哈

視覺化方向

1. 視覺化這裡，今年其實沒有做多少實踐，但是個人認為，這七個大方向而言，最容易出成果，或者說最能出大佬的，可能還真是視覺化領域，如果能在視覺化領域做到了前5%，那麼我相信各大廠肯定會花錢養著你，畢竟我擁有你不一定重要，但是對手不擁有你對我很重要，你的技術壁壘就呈現了出來，也就在這個內卷的江湖獲得了一些領先和優勢，最起碼裁員的優先順序也不會那麼靠前，哈哈哈
2. 第一點說的有點兒遠，說說實在的，個人覺得可以將阿里的antv作為視覺化領域的一個標杆，針對各種特定領域進行展開，比如gis等，當然，其實視覺化領域研究的深的話還是挺冷門的，這其實也會有一些機會，webGL/webAR/webVR等等都可以作為切入點，配合著下面的音視訊領域，這兩個的相互結合，確實還是能做出些東西的

智慧化方向

1. 智慧化領域，個人認為其實核心不在於前端，而在於人工智慧，而人工智慧領域就不僅僅前端那麼些東西了，對於封裝好的如TensorFlow.js，我們是直接拿來用的，但是對於領面的模型建立其實才是關鍵，如果有同學想在智慧化領域有所發展，個人建議還是要深鑽一下，最好可以深造一下，畢竟這個東西是真的需要學術研究+產業實踐的
2. 在產業實踐的前端領域，阿里還是比較領先的，比如imgcook，其核心目的是將圖片轉成前端程式碼，利用的機器視覺去識別圖片中的不同的位置資訊等，將其轉成前端的程式碼，也就是所謂的D2C，即：Design to Code，今年的D2大會上又提出了P2C，即：Product to Code，但並不是真的將人類語言直接轉換成code，而是對D2C的一個業務擴充套件，對於D2C某些業務程式碼利用一些特定的schema進行約定，讓機器學習過程中多一些引數約束，從而提升程式碼實現度。雖然轉化的程式碼還很冗餘，但是對於一些初級的專案或頁面，確實可以交給機器去實現，個人認為人工智慧對低端重複的工作確實會進行替代，也算是對前端內卷做了一定的貢獻，攤手...

互動方向

1. 互動方向，目前大頭還是在遊戲方向，但是我還是認為頁遊或前端實現遊戲主要還是做一些開胃菜的功能，並不能真正的將使用者帶進沉浸式的體驗，對於小遊戲引擎，今年阿里好像出了一個eva的引擎，感興趣的同學可以看看
2. 對於新體驗方面，AR/VR/MR等可能在明年5g深化的時候會有一些落地實踐，但可能還是不溫不火，互動方向配合設計的新理念可能會是一個新的突破點

音視訊方向

1. 這裡想說一說WebAssembly，雖然都說wasm是會替代掉js，但目前看應該還不太現實，wasm目前主要還是配合音視訊領域多一些，另外就是一些額外的優化措施，配合rust進行優化等，如果有志於音視訊領域有所建樹的同學，wasm確實可以儲備起來
2. webrtc是音視訊領域一個繞不開的技術，另外就是播放器的實現，video.js、flv.js等，對於一些視訊播放的協議也要了解，如rtmp/rtsp等，今年疫情的關係，帶動著直播領域的火熱，前端音視訊方向說不定會是一個風口

工程化方向

1. 工程化方向就不得不提serverless，這是今年前端最火熱的一個話題了，私以為serverless不僅僅是前端領域的變化，它可能改變目前的開發模式，以後沒有前後端之分（ps：目前確實是有合的趨勢），只有雲工程師和端工程師之分，那麼對於目前的前端來說，我們就不能僅僅只關注前端領域的一些內容了，docker、k8s等屬於傳統後端或運維的部分，我們也需要掌握，對於一些後端的思維及名詞也需要熟悉，如限流、削峰、服務降級等。當然serverless的前提其實是雲原生，如果沒有云化，那實現serverless的效果應該不如目前這樣，當然個人認為這是一個必然的趨勢，從今年的雲棲大會以及運營商5g雲化來看，雲網融合、雲邊協同應該會是主流
2. 前端工程化另外一個方向就是全鏈路的工程化，從腳手架、low code、外掛市場等全鏈路的提供，簡化前端開發門檻，這裡可以參考淘系的飛冰，對low code以及ide的外掛提供都有涉及，以及ui元件庫的提供等等，形成一個全鏈路的前端生態。這裡可以說說low code和no code，no code是一個無需任何編碼的現成的工具，就是完全沒有程式設計的入口；low code是一個需要部分編碼的工具，為了是給一些非專業人士但又有程式設計需要的人員使用，強調開發出來給別人用，常見的比如給運營人員用的h5編輯器，如易企秀、maka、ih5等

跨端方向

1. 跨端方向是一個老生常談的問題，主流還是要write once，run anywhere，常見的無非就是利用各種框架將各個DSL進行來回轉換，但其實這是一個偽命題，本質是不可能達到大一統的局面的，抽象就很難具象，這兩者需要有一個平衡，需要對具體常見具體分析
2. 私以為小程式領域是端方向下一個各家大佬追逐的市場，因為app領域的跑馬圈地都已基本形成，現在再去開發出一個現象級的app幾乎很難很難了，但是將app作為作業系統，以小程式去帶動使用者，形成使用者閉環，還是有很大市場的，類小程式應用，如pwa、快應用等都是這種承載方式的不同展現，對跨端來說，這個不失為一種發展選擇。對於小程式的框架也出現了kbone、rax等，可能也會有一個類似w3c這樣的一個小程式標準，但是像微信這種巨無霸應用，是否真的會遵守就是另一回事了，總之，其實也不失為一個選擇

總結

回望2020，展望2021，總結如下：

1. 大前端持續深耕，泛前端相容幷包
2. 中後臺微服務化，視覺化行業細化
3. 智慧側演算法深化，互娛側形態變化
4. 音視訊結構優化，工程側全面轉化
5. 跨端側具體改化，前端更加內卷化

好了，2021到了，願大家在這個內卷的時代，都有自己的一技之長，形成自己的核心競爭力，升職加薪，再創輝煌，共勉！！！