現代Web開發需要學習的15大技術

本文由碼農網 – 小峰原創翻譯，轉載請看清文末的轉載要求，歡迎參與我們的付費投稿計劃！

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

快進到現在，我發現現代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程式碼，在https://babeljs.io/repl/有一個可用的REPL。
<wbr><wbr>

需要注意的是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

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