前端的世界裡沒有「容易」二字

• 2019 年 10 月 5 日
• 筆記

轉眼，2019年已經過去一大半了。

這半年，你過得怎麼樣？新的熱點技術學會了嗎？寫的程式碼還有bug嗎？頭髮還好嗎？還記得年初的 Flag 嗎？

2019年對於大前端技術領域而言變化不算太大，目前三大技術框架日趨成熟，短期內不大可能出現顛覆性的前端框架。

我將在這篇文章中，帶大家盤點一下：2019高級前端必備的 TOP 級知識點。你可以看一下你自己的技術體系和當下流行的技術棧，有多大的區別，以及接下來你該如何去規劃自己的學習方向。

1

框架層的更新

React，Vue，Angular依舊保持了前三，今年React發布了16.9,Vue3也即將發版，但是總體情況來看Angular在中國的開發者佔有率還是偏低，這個跟當初NG1和NG2的語法巨大變革不無關係(手動捂臉)。同時像Flutter for web(Flutter已經不僅僅可以運行在Android或者iOS上，還可以運行在Windows, MacOS, Linux, Chrome OS甚至是Web上)、還有Omi(融合Web Components 、JSX、HTM、虛擬DOM、功能樣式和代理合併到一個小型、高性能的框架)也是值得各位同學關注的。不過前端框架千千萬，唯有原理永流傳。

2

狀態管理

隨著前端框架的流行，組件化開發成為主流，然而隨著頁面複雜度越來越高，在一個組件文件中，要做UI渲染、事件處理、狀態管理等等事情，於是一個文件變的越來越複雜。同時，頁面組件層級變的複雜後，跨組件間的數據通訊也變的很繁瑣，需要將數據上提到父節點，通過property傳輸數據、回調方法更新父節點狀態等等。這個時候狀態管理也顯得尤為重要。一想到狀態管理大家肯定脫口而出Vuex、Redux、mobx等等。但是隨著React Hooks的愈加成熟，基於Hooks版本的輕量狀態管理也非常值得大家關注。https://github.com/mobxjs/mobx-react-lite

3

前端工程化

說到這裡，請大家看下邊這張我總結的圖吧。翹首企盼的Webpack5、一個前端在前端工程化中的具體實踐中，要做的工作越來越多。

4

微前端

微前端簡單地說，就是將一個巨無霸（Monolith）的前端工程拆分成一個一個的小工程，你也可以理解微服務前端化，每一個小項目完全具備獨立的開發、運行能力。整個系統就將由這些小工程協同合作，實現所有頁面的展示與交互。微前端也從最初的一個概念變為前端的新寵兒。一圖勝千言吧~

5

程式語言

來自statesofjs的統計，在類JS程式語言上，ES6遙遙領先，TypeScript也獲得接近半數的使用量。其次是Flow、Reason、Elm和ClojureScript。不過筆者更傾向於TS吧，因為我可以用裝飾器很輕鬆的實現依賴注入，而且像抽象類、介面、類型推斷、強類型這裡ES6-10還沒沒有。不過仁者見仁智者見智，選擇TS還是ES6還是要看具體的項目而定。

6

其他

其實整個大前端體系還有非常多需要提的比如工程化、服務端、監控、測試、跨端、等等，篇幅有限筆者寫到這為止了。希望大家能夠抓住當下大前端發展發展的新趨勢，找一份更好的offer。

寫在最後

看到這裡，你是不是想大喊：老子學不動了？成年人的世界沒有「容易」二字，你學不動，別人學得動，你只能靠邊站。但是為了給家人更好的生活，為了自己的夢想，你必須堅持下去。

引用張愛玲的一句話：中年以後的男人，時常會覺得很孤獨，因為他一睜開眼，周圍都是要依靠他的人，卻沒有他可以依靠的人。

前端技術路漫漫，成長的曲線非常的陡峭。老袁從業前端8年，冷暖自知，也希望大家能夠跟上這個時代，工作順利。

我曾經也是一名初級前端，我深知對於初級前端工程師來說，每天的工作大部分可能是搬磚，當你想跳槽漲薪的時候，你會發現自己的技術早就脫節了。

如果你想跟上前端高速發展的時代，如果你也想月薪3萬不是終點，是起點，如果你也想做點改變，

真的不妨來參加為1-3年前端同學精心準備的前端訓練營：

【高級前端必備的TOP級知識點】

???

大綱如下：

1.TypeScript+Webpack環境搭建

• 構建基於TypeScript編譯和運行環境
• 構建基於tsx組件化思想Webpack環境
• 構建TypeScript對Node.js的編譯支援

2.React hooks 實戰應用

• 去 Redux 使用React hooks 完成狀態管理
• 使用React hooks+Functional components

3.集成BFF開發模式完成真假路由混用

• 搭建基於Nest.js的後端開發環境
• 將React項目發布至其前端進行集成
• 完成BFF+SPA整體項目的測試環境搭建

4.Webpack開發SPA與MPA核心知識

• 了解SPA與MPA開發的性能指標區別
• CSS in JS & JS in CSS工程實踐
• 學習Webpack優化SPA與MPA配置區別

5.基於AST實現簡版Webpack

• 了解Webpack基礎運行原理
• 了解AST在前端開發具體用途
• 從0到1帶你手寫簡版的Webpack

6.Webpack5新特性嘗鮮與微前端

• 學習Webpack5最新特性和進展
• 學習Webpack在微前端具體實現細節