從2020看2021前端發展趨勢

前言

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

泛前端技術框架探討

	Vue	React	Angular
web端	Vue全家桶	React全家桶	Angular全家桶
桌面端	Electron/Nw	Electron/Nw	Electron/Nw/Cordova/Ionic
原生移動端	Weex	React Native	Cordova/Ionic
小程序端	uniapp/mpvue/mapx	taro/Rax	無

大前端技術框架探討

	Vue	React	Angular
web端	Vue全家桶	React全家桶	Angular全家桶
SSR	Nuxt	Next	Universal
服務端	無特定	無特定	可配合Nest

今年阿里前端練習生計劃將前端領域劃分了七大方向，分別是工程化方向、前端中後臺方向、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到了，願你們在這個內卷的時代，都有本身的一技之長，造成本身的核心競爭力，升職加薪，再創輝煌，共勉！！！