前言

前端技術(shù)近幾年發(fā)展十分迅速，各種框架層出不窮讓人應(yīng)接不暇，好不容易掌握了一個(gè)前端框架結(jié)果還沒(méi)深入理解又出現(xiàn)了新的框架，讓前端的開(kāi)發(fā)同學(xué)們累覺(jué)不愛(ài)。前段時(shí)間Node.js作者推出新的框架deno，在issue區(qū)內(nèi)就出現(xiàn)了“求不要再更新了，學(xué)不動(dòng)了”的吐槽。

deno吐槽

這個(gè)路線圖的目的是給你一個(gè)關(guān)于前端整體知識(shí)體系的概況, 在你困擾于下一步應(yīng)該學(xué)習(xí)什么的時(shí)候指導(dǎo)你, 而不是鼓勵(lì)你學(xué)習(xí)什么是時(shí)髦的技術(shù)。你應(yīng)該增加一些理解為什么一個(gè)工具會(huì)比其他更好地適合某些情況, 并記住時(shí)髦的技術(shù)從來(lái)不是意味著最適合的工作。

2018前端開(kāi)發(fā)進(jìn)階之路

frontend-v2.png

基礎(chǔ)篇

學(xué)習(xí)前端技術(shù)的基本三大組件：HTML、CSS、JS。這是前端開(kāi)發(fā)的基礎(chǔ)，雖然這些技術(shù)已經(jīng)存在很長(zhǎng)時(shí)間，近幾年也是有很多新的技術(shù)不斷發(fā)展出來(lái)。

基礎(chǔ)知識(shí)相關(guān)資料

• w3cSchool: https://www.w3cschool.cn/ -- 在線編程學(xué)習(xí)網(wǎng)站
• MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/ -- Mozilla的官方網(wǎng)站，可以用于查找HTML、CSS、JS等標(biāo)準(zhǔn)API規(guī)范
• 阮一峰博客：http://www.ruanyifeng.com/blog/ -- 阮一峰的博客，有非常多的科普型文章

除去一些基礎(chǔ)的知識(shí)之外，還需要了解一些進(jìn)階擴(kuò)展的內(nèi)容。

HTML5
HTML5是下一代HTML標(biāo)準(zhǔn)，目前大多數(shù)現(xiàn)代瀏覽器都已經(jīng)支持，在原有HTML標(biāo)準(zhǔn)的基礎(chǔ)上額外提供了有趣的新特性：

• canvas - 用于繪畫(huà)的標(biāo)簽
• video和audio - 用于播放視頻和聲頻的標(biāo)簽
• 本地離線存儲(chǔ)
• 地理位置定位
• 更強(qiáng)的表單校驗(yàn)
• ...

CSS3
CSS3是最新的CSS標(biāo)準(zhǔn)，提供了一些新的特性：

• 邊框和陰影
• 文本效果和字體
• 2D和3D轉(zhuǎn)換
• 動(dòng)畫(huà)
• ...

ES6、ES7

ES6 既是一個(gè)歷史名詞，也是一個(gè)泛指，含義是 5.1 版以后的 JavaScript 的下一代標(biāo)準(zhǔn)，涵蓋了 ES2015、ES2016、ES2017 等等。

隨著現(xiàn)代瀏覽器的發(fā)展，越來(lái)越多的瀏覽器支持ES6甚至ES7的語(yǔ)法，通過(guò)Babel可以將ES6/ES7的語(yǔ)法轉(zhuǎn)換成ES5，從而在現(xiàn)有環(huán)境中可以運(yùn)行，因此ES6、ES7基本成為了現(xiàn)代JS語(yǔ)法的開(kāi)發(fā)標(biāo)準(zhǔn)。

ES6、ES7提供了大量的JS語(yǔ)法的擴(kuò)展和改進(jìn)：

• let語(yǔ)法
• 解構(gòu)
• 數(shù)組的擴(kuò)展
• 對(duì)象的擴(kuò)展
• async/wait對(duì)于異步的支持
• Module的支持

這些語(yǔ)法的擴(kuò)展和改進(jìn)使得JavaScript語(yǔ)言吸收了大量現(xiàn)代語(yǔ)言的優(yōu)點(diǎn)，大大提高了開(kāi)發(fā)效率。對(duì)于ES6語(yǔ)法的細(xì)節(jié)可以參考阮一峰的ECMAScript 6入門(mén)：http://es6.ruanyifeng.com/

瀏覽器的碎片化一直對(duì)于前端開(kāi)發(fā)是個(gè)巨大的挑戰(zhàn)，好在移動(dòng)互聯(lián)網(wǎng)時(shí)代中手機(jī)瀏覽器對(duì)于新的標(biāo)準(zhǔn)跟進(jìn)要遠(yuǎn)遠(yuǎn)好于PC時(shí)代。當(dāng)然對(duì)于采用一些新的API或者特性的時(shí)候還是需要考慮兼容性，可以通過(guò)https://www.caniuse.com/這個(gè)網(wǎng)站查看瀏覽器的支持情況。

前端工程化

隨著前端技術(shù)越來(lái)越復(fù)雜，對(duì)于工程化的要去也要求越來(lái)越高，這里也提到幾個(gè)目前前端工程化必不可的幾個(gè)工具。

NPM、Yarn
類(lèi)似于Java中的Maven、iOS中的CocoaPods，NPM和Yarn是前端項(xiàng)目中的依賴(lài)包管理工具，通過(guò)配置文件可以非常方便的設(shè)置第三方依賴(lài)，可以控制特定版本或者更新。
NPM - https://www.npmjs.com/
Yarn - https://yarnpkg.com/zh-Hans/
對(duì)于NPM和Yarn的區(qū)別，這篇文章應(yīng)該可以幫到你：Understanding differences between npm, yarn and pnpm

構(gòu)建工具
Webpack
官網(wǎng)：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.

Webpack

靜態(tài)代碼檢查
通過(guò)靜態(tài)代碼檢查可以幫助解決一些明顯代碼問(wèn)題，并且可以落實(shí)一些代碼規(guī)范。靜態(tài)代碼檢查可以在日常開(kāi)發(fā)過(guò)程中或者最后發(fā)布過(guò)程中使用。

ESLint：https://eslint.org/ -- 基于ES6語(yǔ)法的靜態(tài)代碼檢查
Airbnb JavaScript Style：https://github.com/airbnb/javascript -- Airbnb的JavaScript規(guī)范提供非常多的好建議，如果需要自定義自己的代碼規(guī)范最好從這個(gè)模板開(kāi)始

靜態(tài)類(lèi)型檢查
JS的一個(gè)比較嚴(yán)重的問(wèn)題是在于對(duì)象類(lèi)型的檢查，它不像其他面向?qū)ο笳Z(yǔ)言例如Java、OC等有嚴(yán)格的編譯階段的類(lèi)型檢查。所以JS的代碼往往很容易出現(xiàn)類(lèi)型錯(cuò)誤，而且在編寫(xiě)復(fù)雜應(yīng)用的時(shí)候如果出現(xiàn)對(duì)于方法聲明的修改也會(huì)是噩夢(mèng)般的體驗(yàn)。
目前JavaScript生態(tài)中有兩個(gè)不錯(cuò)的靜態(tài)類(lèi)型檢查的工具：

• TypeScript：https://www.tslang.cn/ - JS的超集，支持完善的類(lèi)型檢查擴(kuò)展，從語(yǔ)法層面來(lái)看更接近面向?qū)ο蟮恼Z(yǔ)法概念，對(duì)于一個(gè)復(fù)雜前端工程推薦使用。
• Flow：https://flow.org/ - JS代碼的靜態(tài)類(lèi)型的檢查工具，可以通過(guò)聲明對(duì)象的類(lèi)型達(dá)到靜態(tài)類(lèi)型的檢查，比較輕量級(jí)并且對(duì)于現(xiàn)有代碼侵入性較少，容易上手。

前端框架

前端框架最近層出不窮，每隔幾年都會(huì)出現(xiàn)一些新的框架，流行一段時(shí)間然后再出現(xiàn)新的框架，因此作為前端工程師需要不僅僅了解框架如何使用，還需要清楚哪個(gè)框架在哪種場(chǎng)景下最適合。
目前前端框架主要有三個(gè)：React、Angular和Vue。下面是npm服務(wù)器下載量趨勢(shì)對(duì)比：

React、Angular和Vue

可以看出React的優(yōu)勢(shì)非常明顯，而且差距越來(lái)越大，Angular也比較流行，Vue在國(guó)內(nèi)會(huì)更加流行。三個(gè)框架各自都有不錯(cuò)的生態(tài)，社區(qū)也都非?；钴S。

React
官網(wǎng)：https://reactjs.org/
React有幾個(gè)顯著的特點(diǎn)：聲明式、組件化、Virtual Dom、高性能，同時(shí)整個(gè)生態(tài)最為完整和活躍，衍生出React Native的框架可以在智能手機(jī)中實(shí)現(xiàn)多端的高性能渲染。

React的生態(tài)擴(kuò)展：

• 狀態(tài)管理：Redux和Mobx - 通過(guò)這兩個(gè)狀態(tài)管理庫(kù)可以更好的管理組件的State，將UI組件和數(shù)據(jù)狀態(tài)解耦，并且通過(guò)純函數(shù)的模式可以實(shí)現(xiàn)UI狀態(tài)的可預(yù)測(cè)性。
• React Native：https://reactnative.cn/ - RN應(yīng)該是React框架目前領(lǐng)先的一個(gè)重要因素，通過(guò)Virtual Dom實(shí)現(xiàn)了對(duì)于iOS、Android的原生組件的渲染，所以它結(jié)合的Web開(kāi)發(fā)的效率和原生組件的用戶(hù)體驗(yàn)，因此現(xiàn)在有大量app開(kāi)始采用這個(gè)框架來(lái)進(jìn)行開(kāi)發(fā)。
• Next：https://www.npmjs.com/package/next - 基于React的服務(wù)端渲染框架。

Angular
官網(wǎng)：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 的響應(yīng)式編程的庫(kù)，它使編寫(xiě)異步或基于回調(diào)的代碼更容易。

Vue
官網(wǎng)：https://cn.vuejs.org/

Vue (讀音 /vju?/，類(lèi)似于 view) 是一套用于構(gòu)建用戶(hù)界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫(kù)只關(guān)注視圖層，不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。

Vue的生態(tài)擴(kuò)展

• Vuex：https://vuex.vuejs.org/zh/ - 專(zhuān)為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式，類(lèi)似Redux和React的關(guān)系。
• Vue Server Renderer：https://ssr.vuejs.org/zh/ - 基于Vue的服務(wù)端渲染框架。

測(cè)試框架

JavaScript的測(cè)試框架有許多，不同框架的側(cè)重點(diǎn)不太一樣，所以需要理解每種測(cè)試框架的用途，挑選最適合你的框架。
一些參考的對(duì)比文章：

• TESTING REACT APPLICATIONS WITH KARMA, JEST OR MOCHA
• Unit Testing React Components: Jest or Enzyme?

有些框架會(huì)更多的面向邏輯的Unit Test，有些框架會(huì)更多的面向組件UI的Unit Test，根據(jù)你的需求進(jìn)行挑選，然后最重要的是將業(yè)務(wù)邏輯從UI組件中盡量抽離，設(shè)定一個(gè)覆蓋率的標(biāo)準(zhǔn)，搭建一個(gè)CI/CD的集成環(huán)境持續(xù)保證代碼的質(zhì)量。

其他的前端技術(shù)

前端和移動(dòng)端的融合是大勢(shì)所趨，美團(tuán)有個(gè)技術(shù)分享關(guān)于動(dòng)態(tài)化技術(shù)方案總結(jié)值得大家參考，根據(jù)開(kāi)發(fā)模式和偏Native/H5兩個(gè)維度區(qū)分出幾種技術(shù)方案。在前端并不存在普適的方案，任何技術(shù)方案都需要結(jié)合業(yè)務(wù)場(chǎng)景，才能找到最合適的方案。

動(dòng)態(tài)化方案

總結(jié)

前端的工程師是極其苦逼的一群人，需要不斷的學(xué)習(xí)新的技術(shù)、框架，但是需要站在更高的角度去了解各個(gè)技術(shù)的優(yōu)劣點(diǎn)，找到解決業(yè)務(wù)發(fā)展的痛點(diǎn)，融會(huì)貫通才能輕松應(yīng)對(duì)。
曾經(jīng)有人說(shuō)過(guò)，“只要是JS能實(shí)現(xiàn)的地方，最終必然會(huì)用JS來(lái)實(shí)現(xiàn)”，前端的技術(shù)之路是曲折，前途是光明的，大家一起努力！