Web前端開發必學15大技術

 

快進到如今，我發現現代web開發再一次將發生壓倒性的改變。信息資訊的鋪天蓋地使人迷惑，尤爲對於初學者而言。首要緣由是新的框架，例如 Angular 2和ReactJs出現了，使用了還沒有徹底定型的ECMAScript 6特性。而且有更多的工具可用於轉換ES6代碼爲普通的舊的JavaScript代碼，也就是ES5。

 

我歸納了一系列咱們應該學習的編程語言/工具，以便於理解勢不可擋和快速變化的現代web開發。

JavaScript

這是惟一一種全部瀏覽器都理解的編程語言，而且它是前端開發的支柱。JavaScript也被稱爲ECMAScript，ES 5。在深刻其餘語言以前好好理解這門編程語言很是重要。

ES6

這是Javascript語言的擴展，並且許多瀏覽器正在實現ES6。好處是哪怕是如今，你也能夠開始編寫ES6代碼，由於你可使用 transpiler（轉譯器）如Babel來轉換ES6代碼爲ES5代碼。經歷這些並瞭解新功能是一件好事。不過，沒有不要鑽研得太深由於它們很容易發 生變化。

Babel

這是最流行的ES6到ES5轉譯器之一。此外，它還被許多框架，如React所推薦。要想實時地將ES6轉換爲ES5代碼,須要注意的是Babel不只僅是ES6到ES5的轉譯器。它也是JSX到JavaScript的轉譯器。不知道什麼是JSX？那麼請看下面。

NodeJS

NodeJS是一個服務器端平臺，它容許你用JavaScript語言構建後端。爲何我要提NodeJS呢？這是由於，即便你對後端開發不感興趣，可是許多前端工具依賴於NodeJS。至少要熟悉node和它的命令行工具。

NPM

NPM是node的軟件包管理器。就像pip之於Python，ruby gems之於Ruby，以及Maven之於Java。瞭解如何安裝/刪除/升級軟件包，尤爲是package.json文件結構。

Grunt或Gulp

這兩個是運行在Node平臺上最爲流行的任務運行器。從技術上講，它們是針對npm的軟件包。它們容許你自動化許多前端任務，如Lint源文件，串聯，縮減，部署以及更多。

Bower

這是用於前端庫自己的一個軟件包管理工具。想添加Jquery到你的應用程序？和使用bower install jquery同樣容易。

上述工具用於基本的前端開發已經足夠。不過下面我還要說一說兩個最流行的框架，即React和Angular。

ReactJs

ReactJs是構建視圖最流行的前端庫。請注意，它不只僅是MVC中的V，所以和框架如Angular沒有比較性。ReactJs是用ES6寫的，而且能夠用Babel轉譯爲ES5。它還使用也能夠用Babel轉譯爲JavaScript的JSX。

WebPack或Browserify

這兩個都是最流行的模塊打包機。它們能夠獲取js源代碼，找出正確的依賴關係，併發出能夠驅動整個應用程序的JavaScript文件。我更喜歡WebPack。點此查看關於WebPack。

Flux或Redux

React組件被佈置在一個層次結構中。大部分時間，數據模型遵循層次結構。在這種狀況下，Flux並不怎麼有用。然而，有時候你的數據模型是不分層的。當你的React組件開始接收外部道具，或你有少許的組件開始變得很是複雜的時候，那麼你可能會想要試試Flux。

Immutable.js

Immutable.js提供了一套數據結構，能夠幫助解決在構建React app時的某些性能問題。這是一個偉大的庫，你可能會在你的app中大量使用它，可是當你關注於性能影響時，它就徹底沒用了。

Angular 2

Angular 2是JavaScript中最流行的MVC框架之一的下一個版本。它被徹底從新設計過了，而且有一條陡峭的學習曲線。全面支持雙向數據綁定。在選擇Angular 2開發時要當心評估。

TypeScript

Angular 2推薦TypeScript做爲編程語言的首選。我不是很熟悉TypeScript，但我認爲它增長了靜態類型到Javascript的動態特性中。最後，我相信它只是一個轉譯器。

Service workers

實驗性的API。它就像是在瀏覽器用於作各類工做的一個後臺線程。我想它也增長對離線瀏覽的支持。

Fetch API和Push API

請自行閱讀連接。由於到目前爲止我本身對此也是知之甚少。