2018前端開發進階之路

時間 2019-11-08

標籤前端開發進階之路简体版

原文原文鏈接

前言

前端技術近幾年發展十分迅速，各類框架層出不窮讓人目不暇接，好不容易掌握了一個前端框架結果還沒深刻理解又出現了新的框架，讓前端的開發同窗們累覺不愛。前段時間Node.js做者推出新的框架deno，在issue區內就出現了「求不要再更新了，學不動了」的吐槽。javascript

做爲程序員必定要不斷學習、瞭解最新的技術框架才能讓本身立於不敗之地。幸運的是，有很多人幫助指引可行的道路，幫助你們避免那些無用的路徑。Kamran Ahmed寫了一篇很是好的博客，介紹了他認爲的2018前端開發的進階之路。你們能夠去GitHub上面找到：https://github.com/kamranahmedse/developer-roadmap
Kamran Ahmed在博客中提到：前端

這個路線圖的目的是給你一個關於前端總體知識體系的概況, 在你困擾於下一步應該學習什麼的時候指導你, 而不是鼓勵你學習什麼是時髦的技術。你應該增長一些理解爲何一個工具會比其餘更好地適合某些狀況, 並記住時髦的技術歷來不是意味着最適合的工做。vue

2018前端開發進階之路

基礎篇

學習前端技術的基本三大組件：HTML、CSS、JS。這是前端開發的基礎，雖然這些技術已經存在很長時間，近幾年也是有不少新的技術不斷髮展出來。java

基礎知識相關資料react

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/ -- 阮一峯的博客，有很是多的科普型文章

除去一些基礎的知識以外，還須要瞭解一些進階擴展的內容。webpack

HTML5
HTML5是下一代HTML標準，目前大多數現代瀏覽器都已經支持，在原有HTML標準的基礎上額外提供了有趣的新特性：git

canvas - 用於繪畫的標籤
video和audio - 用於播放視頻和聲頻的標籤
本地離線存儲
地理位置定位
更強的表單校驗
...

CSS3
CSS3是最新的CSS標準，提供了一些新的特性：程序員

邊框和陰影
文本效果和字體
2D和3D轉換
動畫
...

ES六、ES7angularjs

ES6 既是一個歷史名詞，也是一個泛指，含義是 5.1 版之後的 JavaScript 的下一代標準，涵蓋了 ES201五、ES201六、ES2017 等等。es6

隨着現代瀏覽器的發展，愈來愈多的瀏覽器支持ES6甚至ES7的語法，經過Babel能夠將ES6/ES7的語法轉換成ES5，從而在現有環境中能夠運行，所以ES六、ES7基本成爲了現代JS語法的開發標準。

ES六、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.