前言
前端技術近幾年發展十分迅速，各種框架層出不窮讓人應接不暇，好不容易掌握了一個前端框架結果還沒深入理解又出現了新的框架，讓前端的開發同學們累覺不愛。前段時間Node.js作者推出新的框架deno，在issue區內就出現了“求不要再更新了，學不動了”的吐槽。
作為程序員一定要不斷學習、了解最新的技術框架才能讓自己立於不敗之地。幸運的是，有不少人幫助指引可行的道路，幫助大家避免那些無用的路徑。Kamran Ahmed寫了一篇非常好的博客，介紹了他認為的2018前端開發的進階之路。大家可以去GitHub上面找到：https://github.com/kamranahmedse/developer-roadmap
Kamran Ahmed在博客中提到：
這個路線圖的目的是給你一個關於前端整體知識體系的概況, 在你困擾於下一步應該學習什么的時候指導你, 而不是鼓勵你學習什么是時髦的技術。你應該增加一些理解為什么一個工具會比其他更好地適合某些情況, 並記住時髦的技術從來不是意味着最適合的工作。
2018前端開發進階之路
基礎篇
學習前端技術的基本三大組件：HTML、CSS、JS。這是前端開發的基礎，雖然這些技術已經存在很長時間，近幾年也是有很多新的技術不斷發展出來。
基礎知識相關資料
- w3cSchool: https://www.w3cschool.cn/ -- 在線編程學習網站
- MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/ -- Mozilla的官方網站，可以用於查找HTML、CSS、JS等標准API規范
- 阮一峰博客：http://www.ruanyifeng.com/blog/ -- 阮一峰的博客，有非常多的科普型文章
除去一些基礎的知識之外，還需要了解一些進階擴展的內容。
HTML5
HTML5是下一代HTML標准，目前大多數現代瀏覽器都已經支持，在原有HTML標准的基礎上額外提供了有趣的新特性：
- canvas - 用於繪畫的標簽
- video和audio - 用於播放視頻和聲頻的標簽
- 本地離線存儲
- 地理位置定位
- 更強的表單校驗
- ...
CSS3
CSS3是最新的CSS標准，提供了一些新的特性：
- 邊框和陰影
- 文本效果和字體
- 2D和3D轉換
- 動畫
- ...
ES6、ES7
ES6 既是一個歷史名詞，也是一個泛指，含義是 5.1 版以后的 JavaScript 的下一代標准，涵蓋了 ES2015、ES2016、ES2017 等等。
隨着現代瀏覽器的發展，越來越多的瀏覽器支持ES6甚至ES7的語法，通過Babel可以將ES6/ES7的語法轉換成ES5，從而在現有環境中可以運行，因此ES6、ES7基本成為了現代JS語法的開發標准。
ES6、ES7提供了大量的JS語法的擴展和改進：
- let語法
- 解構
- 數組的擴展
- 對象的擴展
- async/wait對於異步的支持
- Module的支持
這些語法的擴展和改進使得JavaScript語言吸收了大量現代語言的優點，大大提高了開發效率。對於ES6語法的細節可以參考阮一峰的ECMAScript 6入門：http://es6.ruanyifeng.com/
瀏覽器的碎片化一直對於前端開發是個巨大的挑戰，好在移動互聯網時代中手機瀏覽器對於新的標准跟進要遠遠好於PC時代。當然對於采用一些新的API或者特性的時候還是需要考慮兼容性，可以通過https://www.caniuse.com/這個網站查看瀏覽器的支持情況。
前端工程化
隨着前端技術越來越復雜，對於工程化的要去也要求越來越高，這里也提到幾個目前前端工程化必不可的幾個工具。
NPM、Yarn
類似於Java中的Maven、iOS中的CocoaPods，NPM和Yarn是前端項目中的依賴包管理工具，通過配置文件可以非常方便的設置第三方依賴，可以控制特定版本或者更新。
NPM - https://www.npmjs.com/
Yarn - https://yarnpkg.com/zh-Hans/
對於NPM和Yarn的區別，這篇文章應該可以幫到你：Understanding differences between npm, yarn and pnpm
構建工具
Webpack
官網：https://webpack.js.org/
At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.
靜態代碼檢查
通過靜態代碼檢查可以幫助解決一些明顯代碼問題，並且可以落實一些代碼規范。靜態代碼檢查可以在日常開發過程中或者最后發布過程中使用。
ESLint：https://eslint.org/ -- 基於ES6語法的靜態代碼檢查
Airbnb JavaScript Style：https://github.com/airbnb/javascript -- Airbnb的JavaScript規范提供非常多的好建議，如果需要自定義自己的代碼規范最好從這個模板開始
靜態類型檢查
JS的一個比較嚴重的問題是在於對象類型的檢查，它不像其他面向對象語言例如Java、OC等有嚴格的編譯階段的類型檢查。所以JS的代碼往往很容易出現類型錯誤，而且在編寫復雜應用的時候如果出現對於方法聲明的修改也會是噩夢般的體驗。
目前JavaScript生態中有兩個不錯的靜態類型檢查的工具：
- TypeScript：https://www.tslang.cn/ - JS的超集，支持完善的類型檢查擴展，從語法層面來看更接近面向對象的語法概念，對於一個復雜前端工程推薦使用。
- Flow：https://flow.org/ - JS代碼的靜態類型的檢查工具，可以通過聲明對象的類型達到靜態類型的檢查，比較輕量級並且對於現有代碼侵入性較少，容易上手。
前端框架
前端框架最近層出不窮，每隔幾年都會出現一些新的框架，流行一段時間然后再出現新的框架，因此作為前端工程師需要不僅僅了解框架如何使用，還需要清楚哪個框架在哪種場景下最適合。
目前前端框架主要有三個：React、Angular和Vue。下面是npm服務器下載量趨勢對比：
可以看出React的優勢非常明顯，而且差距越來越大，Angular也比較流行，Vue在國內會更加流行。三個框架各自都有不錯的生態，社區也都非常活躍。
React
官網：https://reactjs.org/
React有幾個顯著的特點：聲明式、組件化、Virtual Dom、高性能，同時整個生態最為完整和活躍，衍生出React Native的框架可以在智能手機中實現多端的高性能渲染。
React的生態擴展：
- 狀態管理：Redux和Mobx - 通過這兩個狀態管理庫可以更好的管理組件的State，將UI組件和數據狀態解耦，並且通過純函數的模式可以實現UI狀態的可預測性。
- React Native：https://reactnative.cn/ - RN應該是React框架目前領先的一個重要因素，通過Virtual Dom實現了對於iOS、Android的原生組件的渲染，所以它結合的Web開發的效率和原生組件的用戶體驗，因此現在有大量app開始采用這個框架來進行開發。
- Next：https://www.npmjs.com/package/next - 基於React的服務端渲染框架。
Angular
官網：https://angularjs.org/
HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.
- Rx.js：https://cn.rx.js.org/ - RxJS 是使用 Observables 的響應式編程的庫，它使編寫異步或基於回調的代碼更容易。
Vue
官網：https://cn.vuejs.org/
Vue (讀音 /vjuː/，類似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。
Vue的生態擴展
- Vuex：https://vuex.vuejs.org/zh/ - 專為 Vue.js 應用程序開發的狀態管理模式，類似Redux和React的關系。
- Vue Server Renderer：https://ssr.vuejs.org/zh/ - 基於Vue的服務端渲染框架。
測試框架
JavaScript的測試框架有許多，不同框架的側重點不太一樣，所以需要理解每種測試框架的用途，挑選最適合你的框架。
一些參考的對比文章：
有些框架會更多的面向邏輯的Unit Test，有些框架會更多的面向組件UI的Unit Test，根據你的需求進行挑選，然后最重要的是將業務邏輯從UI組件中盡量抽離，設定一個覆蓋率的標准，搭建一個CI/CD的集成環境持續保證代碼的質量。
其他的前端技術
前端和移動端的融合是大勢所趨，美團有個技術分享關於動態化技術方案總結值得大家參考，根據開發模式和偏Native/H5兩個維度區分出幾種技術方案。在前端並不存在普適的方案，任何技術方案都需要結合業務場景，才能找到最合適的方案。
總結
前端的工程師是極其苦逼的一群人，需要不斷的學習新的技術、框架，但是需要站在更高的角度去了解各個技術的優劣點，找到解決業務發展的痛點，融會貫通才能輕松應對。
曾經有人說過，“只要是JS能實現的地方，最終必然會用JS來實現”，前端的技術之路是曲折，前途是光明的，大家一起努力！
有興趣同學可以關注微信公眾號奶爸碼農，不定期分享投資理財、IT相關內容：
