2021前端會有什么新變化，首先需要搞清楚我們關注這些新技術的目的是什么？
相信對於關注這個問題的人包括我來說，除了了解技術發展風向作為飯后談資以外，最重要的是看能不能在公司內部落地、做出一番成績來，當然升職加薪那都是后話了。
回望過去
首先定義一下我說的“過去”是2019年及以前。
以史為鏡，可以知興替。回望一下過去，有利於我們對未來做出更好的判斷。我們先細數一下過去的幾年間大廠的前端都在做什么。
前端工程化
這個應該是前幾年社區討論的最多、面試問到最多的一個名詞，那么什么是前端工程化呢？我覺得需要從以下幾個概念開始講起。
模塊化
先說JavaScript的模塊化。
從ES6開始，JavaScript語言有了自己原生支持的模塊化方案——ES6 Module，這樣有個好處，前端們不用去使用社區定制的模塊加載方案，直接使用統一的就好。統一模塊方案之后，既可以不用額外引入模塊化解決方案的代碼，又可以為后面的自動化統一處理做好准備。
再說CSS的模塊化。
CSS模塊化主要是解決的CSS類名沖突的問題，比如常見的BEM約定以及社區豐富的CSS module解決方案，有了這些東西，前端工程多人開發就可以優雅的解決類名沖突的問題。
組件化
隨着React生態和Vue生態在國內各大前端團隊的落地，組件化開發已經是標配了，並且開源社區也沉淀出了以Element、Ant Design為代表的優秀組件庫。
大廠的程序員們在組件的概念上又做了一層抽象和封裝，比如以業務組件和業務區塊為抽象的中后台前端解決方案Ant Design Pro，並且它還在前端工具庫、前端UI設計語言等等方案做了統一。
自動化
首先是開發的自動化。
webpack和nodejs在開發的自動化上起了很大的作用。前端項目本地化開發的server由nodejs（常用，也不一定非得是nodejs）提供，開發過程中的各種輔助性plugin和loader都由webpack生態提供，上線前的代碼打包、代碼分割、資源處理也由webpack操作，可以說過去幾年間很多前端在職業晉升上都吃了引入webpack和nodejs的紅利。
再說babel，有了babel的配合，前端可以寫高版本的JavaScript方法，配合webpack loader，自動編譯成低版本JavaScript，前端能力再次得到提升。
其次是部署發布的自動化。
這個應該是很多大廠前端基建團隊做的事情，比如持續發布、版本控制、內部cdn建設等等。
大前端
這也是個在過去幾年炒的很熱的詞，不過這個詞不僅僅是炒作，它也實實在在的擴展了前端的能力以及現有的公司組織架構，比如據我所知有的公司移動端和前端就會划分到同一個團隊管理，統稱大前端團隊。
nodejs
這個在前端工程化部分已經說過一些，這里再次提起是因為在工程化中nodejs扮演的角色是提供nodejs環境以及部分后端能力，而在大前端團隊里是實實在在的存在nodejs工程師角色和nodejs項目的。比如說在前后端分離的過程中，部分公司（比如阿里淘寶）會發展出一個中間層的東西，這可以理解為是一個大前端團隊維護的業務接口聚合層，前端寫接口肯定是使用nodejs最順手，而且nodejs生態也在蓬勃發展，比如早些年的TJ大神一人之力扛起半個nodejs生態圈，涌現了koa、express這樣的基於中間件的開發庫，再到后來阿里巴巴的egg，再到Nest.js，現在基本已經沒有裸寫nodejs api的了。
跨端
先說說手機端
首先，最直接的跨端就是在APP殼子里面套HTML頁面來開發，這種方案也催生了很多hybrid解決方案，前端也需要去了解客戶端的知識以及JavaScript Bridge的設計，同時也減少了APP客戶端工程師的崗位😂
然后，隨着React生態蓬勃發展，Facebook開源了一個跨平台移動應用開發框架——ReactNative，它可以讓你以React的前端語法來開發移動應用，本質就是虛擬DOM映射原生UI元素、通過bridge調用原生API，這種思路讓前端的觸手伸到了移動開發，也促成了大前端團隊的建設。Vue生態也有阿里發起的Weex移動開發框架，原理類似。
再后來，Flutter出現了，它也是一個跨端的開發框架，准確來說它和JavaScript生態關系不大，使用Dart語言開發APP，並且有自己的跨平台自繪引擎來保證多端UI表現一致，但因為也是一種跨端的解決方案，所以也受到了大量前端工程師的關注和學習。
最后，還是要提一嘴小程序，這個技術方案其實是商業的產物，各個公司都想把內容和生態留在自家的APP里，所以從微信小程序開始（微信不是最早，但是發展的最好），阿里、百度、字節跳動等等這些公司都有了自家的小程序。
再說說桌面端
桌面端據我了解使用的比較多的是Electron，它可以讓前端以JavaScript來開發出桌面應用，比如字節跳動的飛書桌面端就是使用Electron來做的。
總結過去
從過去這些發展的技術可以看出來，前端主要是在做統一化、工程化、生態化的事情，從早些年間的刀耕火種跨越到比較完善的工程化開發，前端的能力范圍也得到了擴展，以前不能做的事情現在可以做了。
很多互聯網公司的前端高p也是在這一波浪潮中晉升，得到了更好的職業發展。
分析現在
首先定義一下我說的“現在”是2020年左右。
現在基本上各大公司的前端工程化改造大體完成，各種改造方案、組件庫都層出不窮，所以前端又有新玩法了。
Serverless
准確來說，Serverless並不是前端的技術領域，因為它解決的是讓開發者不用關心服務器底層架構和運維工作，形成一種“無服務器”的假象。
那為什么這個技術在前端領域會受到追捧呢？
因為這個技術剛好解決了整個開發鏈條中前端缺失的能力，即服務端底層和運維能力。各個大公司的前端團隊也都在嘗試把Serverless落地，比如在知乎上就可以看到很多關於Serverless的布道。
NoCode和LowCode
在我看來，低代碼（LowCode）和零代碼（NoCode）產品，是前端對現有能力整合之后，對其他領域的一種擴張和賦能。其實各大公司在某些特定業務場景中早已經有相關的產品落地了，比如廣告業務、電商運營的繁多的落地頁需求可以使用零代碼產品來解決，全程不需要代碼參與。
那既然之前有，現在為什么又提起低代碼和零代碼呢？我覺得原因有兩個：
之前解決的只是某些特定業務場景的問題，現在想把這種能力逐漸擴展到更多的業務場景，比如擴展到公司外部，來做toC的使用。
之前解決的只是頁面級的問題，現在想解決應用級的問題。
總結現在
當然了，現在的討論的比較多的、正在進行中的技術和解決方案肯定不止我說到的這兩種，歡迎大家補充。
目前大公司的前端們也在結合業務在做這方面的事情，如果你所在的團隊在做相關的事情，不如加入進去，不管是技術或職業發展，都會有比較好的收獲。
展望未來
React Server Component
這個目前還在提案中，未來成熟之后極有可能改變前端的開發方式，前端React生態的范圍又向服務度端擴展了，一波新的基礎建設、技術方案可以考慮了。
Serverless大規模落地
按照現在社區以及各大公司內部的發展，Serverless應該會在2021有大規模的落地，運維崗位會進一步減少
NoCode和LowCode持續發展
低代碼這個概念在2021年初因為釘釘發布會被再次帶火，因為釘釘的使用量以及toB端市場有很多內部應用的搭建需求，所以它強調這個概念也不奇怪。
相信有像阿里釘釘這樣的企業的推動，低代碼和零代碼會發展的更好。
不用焦慮
說了這么多，是不是更焦慮了？其實不用。
React核心成員Dan Abramov都大方承認了他並不了解Flex、Webpack等等技術，沒試過Serverless等等“時髦”技術，很多你會的技術他不會，照很多招聘標准來看他還評不上阿里P7，但是這並不影響他能成為React核心成員，以及他在他自己擅長的領域的造詣。
所以，不用都會，選定一個自己喜歡的、能做出成績的技術，深入下去吧！
最后
前端學習是一條漫長的道路，我們要學習的東西不僅僅只有表面的 技術，還要深入底層，弄明白下面的原理，只有這樣，我們才能夠提高自己的競爭力，在當今這個競爭激烈的世界里立足。
千里之行始於足下，願你我共勉。
金三銀四快到了，送給大家一個小福利，下面是我在工作之余整理的一些面試題，包含HTML、CSS、JavaScript、服務端與網絡、Vue、瀏覽器、react等等。
HTML 篇
- 圖片中 title 和 alt 區別？
- Html5 有哪些新特性、移除了哪些元素
- 瀏覽器是怎么對 Html5 的離線儲存資源進行管理和加載的呢
- 行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
- canvas在標簽上設置寬高 和在style中設置寬高有什么區別
- 瀏覽器是怎么對HTML5的離線儲存資源進行管理和加載的呢？
CSS 篇
- CSS中link與@import的區別：
- position的absolute與fixed共同點與不同點：
- BFC 有什么用
- 清除浮動的幾種方式
- Css3 新增偽類 - 偽元素
- IE盒子模型 、W3C盒子模型
- display:inline-block 什么時候不會顯示間隙？
- 行內元素float:left后是否變為塊級元素？
由於內容較多，為了避免閱讀體驗僅展示部分面試題，完整版的面試題+解析，【點擊我】免費獲取。
JavaScript篇
- js的各種位置，比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的區別？
- js拖拽功能的實現
- 異步加載js的方法
- js的防抖
- 繞不過去的閉包
- 說說你對作用域鏈的理解
- JavaScript原型，原型鏈 ? 有什么特點？
- 請解釋什么是事件委托/事件代理
- Javascript如何實現繼承？
Vue
- vue中 key 值的作用
- Vue 組件中 data 為什么必須是函數？
- vuex的State特性是？
- 介紹一下Vue的響應式系統
- computed與watch的區別
- 介紹一下Vue的生命周期
- 為什么組件的data必須是一個函數
- 組件之間是怎么通信的
由於篇幅有限，只能分享部分面試題，更多面試題及答案可以【點擊我】閱讀下載哦~無償分享給大家，算是一個感恩回饋吧
React
- 介紹Redux，主要解決什么問題？數據流程是怎么樣的？多個組件使用相同狀態如何進行管理？
- React-Redux到react組件的連接過
- Redux中間件是什么東西，接受幾個參數
- redux請求中間件如何處理並發
- 如何配置React-Router
- 路由的動態加載模塊
- React生命周期及自己的理解，以及V16對生命周期的修改
- 為什么使用虛擬dom？
瀏覽器
- 跨標簽頁通訊
- 瀏覽器架構
- 瀏覽器下事件循環(Event Loop)
- 從輸入 url 到展示的過程
- 重繪與回流
- 存儲
- Web Worker
- V8垃圾回收機制
- 內存泄露
- reflow(回流)和repaint(重繪)優化
- 如何減少重繪和回流?
- 一個頁面從輸入 URL 到頁面加載顯示完成，這個過程中都發生了什么？
- localStorage 與 sessionStorage 與cookie的區別總結
更多面試題及答案可以【點擊我】閱讀下載哦~