英文原文：Things to learn for Modern Web Development

將近 4 年前,，我寫了一篇名為《Future of Web and Mobile: HTML5, CSS3 and Javascript》的博客文章,，其中我提到了 Javascript 的出現(xiàn)，以及 JavaScript 框架，例如 jQuery,、Knockout 等的爆發(fā),。

快進到現(xiàn)在，我發(fā)現(xiàn)現(xiàn)代 web 開發(fā)再一次將發(fā)生壓倒性的改變,。信息資訊的鋪天蓋地令人迷惑,，尤其對于初學(xué)者而言。首要原因是新的框架,，例如 Angular 2 和 ReactJs 出現(xiàn)了,，使用了尚未完全定型的 ECMAScript 6 特性。并且有更多的工具可用于轉(zhuǎn)換 ES6 代碼為普通的舊的 JavaScript 代碼,，也就是 ES5,。

我概括了一系列我們應(yīng)該學(xué)習(xí)的編程語言/工具，以便于理解勢不可擋和快速變化的現(xiàn)代 web 開發(fā),。

JavaScript

這是唯一一種所有瀏覽器都理解的編程語言,，并且它是前端開發(fā)的支柱。JavaScript 也被稱為 ECMAScript,，ES 5,。在深入其他語言之前好好理解這門編程語言非常重要。

ES6

這是 Javascript 語言的擴展,，而且許多瀏覽器正在實現(xiàn) ES6。好處是哪怕是現(xiàn)在,，你也可以開始編寫 ES6 代碼,，因為你可以使用 transpiler（轉(zhuǎn)譯器）如 Babel 來轉(zhuǎn)換 ES6 代碼為 ES5 代碼。經(jīng)歷這些并了解新功能是一件好事,。不過,，沒有不要鉆研得太深因為它們很容易發(fā)生變化。

Babel

這是最流行的 ES6 到 ES5 轉(zhuǎn)譯器之一,。此外,，它還被許多框架，如 React 所推薦,。要想實時地將 ES6 轉(zhuǎn)換為 ES5 代碼,，在ljs.io/repl/有一個可用的 REPL。

需要注意的是 Babel 不僅僅是 ES6 到 ES5 的轉(zhuǎn)譯器,。它也是 JSX 到 JavaScript 的轉(zhuǎn)譯器,。不知道什么是 JSX？那么請看下面,。

NodeJS

NodeJS 是一個服務(wù)器端平臺,，它允許你用 JavaScript 語言構(gòu)建后端。為什么我要提 NodeJS 呢？這是因為,，即使你對后端開發(fā)不感興趣,，但是許多前端工具依賴于 NodeJS。至少要熟悉 node 和它的命令行工具,。

NPM

NPM 是 node 的軟件包管理器,。就像 pip 之于 Python，ruby gems 之于 Ruby,，以及 Maven 之于 Java,。了解如何安裝/刪除/升級軟件包，尤其是 package.json 文件結(jié)構(gòu),。

Grunt 或 Gulp

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

Bower

上述工具用于基本的前端開發(fā)已經(jīng)足夠。不過下面我還要說一說兩個最流行的框架,，即 React 和 Angular,。

ReactJs

ReactJs 是構(gòu)建視圖最流行的前端庫。請注意,，它不僅僅是 MVC 中的V,，因此和框架如 Angular 沒有比較性。ReactJs 是用 ES6 寫的,，并且可以用 Babel 轉(zhuǎn)譯為 ES5,。它還使用也可以用 Babel 轉(zhuǎn)譯為 JavaScript 的 JSX。

WebPack 或 Browserify

這兩個都是最流行的模塊打包機,。它們可以獲取 js 源代碼,，找出正確的依賴關(guān)系，并發(fā)出可以驅(qū)動整個應(yīng)用程序的 JavaScript 文件,。我更喜歡 WebPack,。點此查看關(guān)于 WebPack。

Flux或 Redux

React 組件被布置在一個層次結(jié)構(gòu)中,。大部分時間,，數(shù)據(jù)模型遵循層次結(jié)構(gòu),。在這種情況下，F(xiàn)lux 并不怎么有用,。然而,，有時候你的數(shù)據(jù)模型是不分層的。當(dāng)你的 React 組件開始接收外部道具,，或你有少量的組件開始變得非常復(fù)雜的時候,，那么你可能會想要試試 Flux。

Immutable.js

Immutable.js 提供了一套數(shù)據(jù)結(jié)構(gòu),，可以幫助解決在構(gòu)建 React app 時的某些性能問題,。這是一個偉大的庫，你可能會在你的 app 中大量使用它,，但是當(dāng)你關(guān)注于性能影響時,，它就完全沒用了。

Angular 2

Angular 2 是 JavaScript 中最流行的 MVC 框架之一的下一個版本,。它被完全重新設(shè)計過了,，并且有一條陡峭的學(xué)習(xí)曲線。全面支持雙向數(shù)據(jù)綁定,。在選擇 Angular 2 開發(fā)時要小心評估,。

TypeScript

Angular 2 推薦 TypeScript 作為編程語言的首選。我不是很熟悉 TypeScript,，但我認為它增加了靜態(tài)類型到 Javascript 的動態(tài)特性中,。最后，我相信它只是一個轉(zhuǎn)譯器,。

Service workers

實驗性的 API,。它就像是在瀏覽器用于做各種工作的一個后臺線程。我想它也增加對離線瀏覽的支持,。

Fetch API 和 Push API

請自行閱讀鏈接。因為到目前為止我自己對此也是知之甚少,。

-