經驗分享：如何系統學習 Web 前端技術？

CSDN學習發表於2017-10-30

本文作者：曾亮。晟暄科技 CEO ，HTML5 & Node.js 技術講師. Javascript前後端全棧開發人員 DDD／CQRS 設計師對 Node.js 和 HTML5 有多年開發經驗。獨立研發 Node.js 版的 CQRS framework , 國內為數不多的頂級領域驅動設計專家。 同時，曾亮老師在CSDN學院開設《前端特訓營》，透過4個月的從零實戰，掌握前端核心技術，成為前端工程師。目標是：將學員培養有核心競爭力的前端開發者。點我檢視技術圖譜。

這篇文章主要是面向小白使用者的，如果你有些基礎，當然也建議你看看，尤其是最後一個主題，或許你能得到一些啟發。本文的觀點，純屬個人自以為是的想法，不是真理，僅供參考。

拋開具體技術細節，先主要談談程式設計師如何更高效的，有選擇的學習技術。我能體會到選擇的輕鬆和樂趣，體會到身為技術人員和人類的平衡感。字裡行間中，我要表達的是一種放棄與選擇的哲學，能品到這一點，我就很高興。

人生苦短我們需要一個基線

古代小說裡，高手如雲，人們為了生存，要掌握一套保命武功。其中，我最喜歡的是輕功，畢竟三十六計走為上策（狡詐的一笑）。說到底，武功和技術一樣，都是為了生存。

問題是，現實一點來說，一個武者，很難掌握所有的武功秘籍，因為臣妾做不到啊；所以如果有一種武功，能夠遠攻和近攻，能逃跑能單挑，那就極好了。

玩“農藥”也一樣，我發現英雄們各有優缺點，但你又不可能什麼英雄都練，因為臣妾也做不到啊，畢竟上場時就一個英雄，所以就需要選擇，我選擇的是呂布和趙雲，他倆在遊戲故事設定中是情敵，其實貂蟬喜歡的是趙雲，我之所以選這兩個情敵成為基友，是因為符文一樣，這點很重要，五級符文真mde難攢，呂布和趙雲戰鬥力都很棒，我基本就練這兩個，現在的級別是永久鑽石，雖然不是最厲害的，但在王者的世界，確有一席之地。

技術也是一樣，我透過一套技術，每天用這套技術開發，不斷磨練，好過啥都學，啥都不深入，因為之所以深入，是因為你不斷去用，很多時候，一個技術名出來，就買書學，其實很傻很天真，因為技術是手段，目的是解決開發問題，如果用不上，就毫無意義。

回過頭來，我們發現“農藥”中選英雄，和選自己的技術體系是一樣的。我們狹義的目的，是想透過一種技術（手段），能夠開發儘可能多的應用程式。

那麼如果有這種技術，最好滿足以下幾個特點：開源，前後端全棧式開發，前後端程式碼可以共享，最好在有生之年不被淘汰的，最重要的是好就業的。

符合這些特點的技術，當屬 Web 技術了，下個主題讓我們探討，它為什麼符合。另外需要說明的是，這裡說的 Web 技術，是我進一步濃縮的技術體系，因為廣義上的 Web 技術，其實涵蓋的面太廣了，我們需要進一步，抽離出更符合這些特性的具體技術，形成一套便於開發的 Web 技術。所以，下面講的是狹隘的 Web 技術。

Web 全棧式開發

HTML5 與 Node.js 技術，可以讓程式設計師做到 Web 全棧式開發。這套技術是標準的、開源的。

HTML5 大家都聽過，百度就可以知道它的定義啊，歷史啊等一些資訊，所以，這裡不再贅述。HTML5 是標準化的技術，Node.js 是開源技術，所以完全免費，隨便用。另外，當你進入到 npmjs.com 網站，會發現無數 Node.js 第三方庫，最重要的，這都是免費的，開源的，這為我們的專案開發提供了一個強大的、免費的開發團隊！你可以直接用別人的開發成果！

這套技術不會被淘汰

學習是有成本的，時間是寶貴的，因為生命寶貴；人都是想用更多時間陪陪家人，陪陪女朋友和基友，也喜歡玩玩“農藥”，去迪士尼當回小孩兒；如果你愛技術勝於當人的樂趣，那麼恭喜你！至少我們不太喜歡，學個一溜十三招，最後學的東東淘汰了或過時了。

HTML5 技術是標準的，我們用到的瀏覽器都支援他，所以在可預見的未來不會被淘汰。而 Node.js 是開源的，不受一個公司的控制，卻受到各個大咖公司的贊助和支援，包括微軟、因特爾、IBM … 具體參看 https://nodejs.org/en/foundation/members/ 所以 Node.js 在可預見的未來，也不會被淘汰。

所以學習 HTML5 and Node.js 技術可長久有效。

這套技術可前後端全棧式開發

我們所說的 HTML5 和 Node.js ，是前後端技術的代名詞，因為圍繞它們的，是非常龐大的生態圈。這個我們會在下一主題中說明。

一個軟體可以分為前端和後端，比如一個 App 分為客戶端和伺服器端程式。透過 HTML5 技術可以開發客戶端程式，伺服器端程式可以用 Node.js 開發。

那麼，為什麼 HTML5 要與 Node.js 構成前後端全棧技術呢？而不能是 html5 ＋ php 或其它呢？也不是不能，而是前者更有優勢。

瀏覽器程式是採用 Javascript 語言編寫的，而伺服器端的 Node.js 程式，也是用 Javascript 語言編寫的，所以前後端可以統一使用一種程式語言開發。這樣前後端的很多庫，都可以共享，既可以執行前端，又可以執行後端，提高了開發效率。

學好這套技術好就業

上面說了一些，這套技術的優勢所在，那麼為什麼說，學好這套技術好就業呢？要回答這個問題，還需更進一步說明，使用這套技術到底能幹什麼。

我們掌握這套技術後，可以開發全端程式，比如 iPhone Android 的 APP ，可以開發 Web 程式，可以開發桌面應用程式，甚至可以開發物聯網程式等等，更重要的是它節省了開發成本，提高了開發效率。

節省開發成本，是因為僱傭一個程式設計師，可以同時開發前後端，工資要比兩個人少，而且由於 Node.js 本身的特點，可以節省公司伺服器，這也是 paypal 之所以用 Node.js 技術重寫系統的原因。

而提高開發效率，是因為使用這套技術，可以寫一套程式，執行在 Android iPhone PC 和伺服器端，當然這樣說有些誇張，多少會更改一些，但基本上做到了，一次編寫到處執行。

再有，Web 前端肯定要用到 HTML5 技術，後端可能會用到其他技術，但即便後端程式不用 Node.js 開發，或多或少都要用到 Node.js ，因為圍繞它誕生的一些工具，在開發中必然會用到的，比如 Webpack ，Gulp等 Node.js 相關技術。

綜上所述，這套技術對於公司來說，百利而無一害，所以掌握這套技術很好就業。目前我在CSDN學院開設前端特訓營，目標是：將學員培養有核心競爭力的前端開發者。從、你們可以點選進去檢視裡面需要的技術知識點和前端就業薪資。傳送門點我吧！

Web 前端技術知識體系

前面講了兩點。第一點，說明人精力有限，有空要多陪陪基友和女友，所以我們要選擇一套全棧式開發技術，幫助我們輕鬆開發應用程式，這就是 HTML5 + Node.js 技術體系。第二點，吹了半天，來說明這套技術多多好。

那麼，HTML5 和 Node.js 就是兩種技術嗎？當然不是了，衍生出的技術好多好多。HTML5 是什麼，你 google 吧，我這裡不貼上了，可好？如果你說：google 臣妾做不到，那就百度吧。

Web 前端程式，實際上執行環境就是瀏覽器，現代瀏覽器已經是一個平臺了，提供了很多 API ，我們叫做 Web API。編寫一個 Web 前端程式，需要用到的技術有 HTML5 / CSS3 / Javascript 。而 HTML5 往往是這些技術的總稱。

那麼，用這三個技術確實能寫出程式來了，但是從頭自己些也是很慢的，可以用很多工具庫和框架，幫助我們快速開發。

前端技術庫

比較火的技術包括： JQuery , Angular2 , React , Redux , Vue.js 等，這些工具庫各有千秋，比如，比較小的程式，用 JQuery 就可以搞定了，如果比較複雜的，可以用 React ，Angular2 或 Vue.js 庫。

開發 Android 、iPhone 和桌面程式

上面介紹的部分前端技術，可以寫出程式來，但只能執行在瀏覽器中，我們也可以用打包工具，讓開發好的程式，執行在 Android iPhone 和電腦上。

PhoneGap 和 React-Native 就可以用我們已知的技術，來開發Android 和 iPhone 程式，而用 electron 就可以把程式打包成 PC 電腦桌面程式。

掌握以上技術，就讓我們可以開發各種客戶端程式了。

伺服器端技術

那麼，伺服器端程式用 Node.js 就可以了嗎？你當然可以從頭寫伺服器端程式，最好是用現成的框架。比如 Express koajs 等框架，來編寫 Web 伺服器端程式。

資料庫也是需要的，要不資料就沒法持久化和查詢了，我推薦用 mongodb 資料庫，採用 mongoosejs 庫來寫 Node.js 的資料庫程式，因為 mongodb 資料庫的文件結構，和 javasript 的 json 是很類似的，另外 mongodb shell 用的也是 javascript 語言。

單元測試

到目前為止，前後端程式所需技術，都夠用了。那麼，還有一個問題，就是測試！程式開發後，再整體測試，會出現很多幽靈bug，也就是很難找到問題根源bug。所以，最好是單元測試，就是寫點程式碼就測試一下，遇到問題及時解決，而不是 bugs 攢多了到最後無法解決。這方面的單元測試工具也有很多，推薦 Node.js 後端程式用 mocha 做單元測試，前端用 jasmine + karma 做單元測試，因為karma 可以讓我們在終端就能看到多個瀏覽器測試結果，而不是各種瀏覽器，挨著個的重新整理看結果，前端瀏覽器測試最麻煩，因為有相容問題，所以用 karma 大大提高了我們測試效率。

打包工具

像 Webpack , gulp 等技術也是需要掌握的，可以幫助我們自動打包程式。

Web 前端技術學習路線圖

上面說了這麼多，到底如何一步步掌握這些技術呢？下面推薦一個學習路線圖，希望對初學者有幫助。

Javascript 語言：全棧開發中，用的程式語言就是 javascript

HTML5 標籤和 DOM：這是前端最核心技術，為之後學習各種開發框架，打下堅實基礎。

CSS3：學習透過 css 開發網頁和各種可視 UI 元件。

SASS：利用 sass 語言，開發複雜的頁面 css

Node.js：掌握Node.js 核心 API ，具備後端開發能力。

Express 5.x 框架：掌握 Express 框架，從而具備快速開發後端程式的能力。

socket.io 庫：讓前後端透過 websocket協議通訊，是web 開發遊戲、聊天等程式必備技術。

Mongoose 框架：可以讓程式具備文件資料儲存能力

Git 命令與 github：可以對專案進行版本管理，從而能團隊開發專案。

Gulp 構建工具實戰：透過 gulp 工具，靈活對專案進行構建。

Webpack：可以用和 Node.js 後端模組化方式，開發前端程式，從而能開發大型系統。

Jasmine & Karma：可以利用 Jasmine & Karma 輕鬆實現，多種瀏覽器同時進行單元測試，而不必切換介面。

前端相關框架：JQuery ／ Bootstrap ／ Vue.js ／React ／ Angular透過框架幫我我們快速開發程式

移動端與桌面程式開發工具：phonegap ／ react-native / electron / 微信小程式開發，這套工具，基本上只是打包工具，和提供了一些特定平臺 API ，開發還是使用之前的 Web 技術。

如果透過這套學習路線圖學完，那麼就業是毫無壓力的，但是做為有志向的碼奴，我們還需要展望未來和擴充套件眼界。想要詳細檢視學習知識點的，點我檢視吧！傳送門在此。

一提到擴充套件眼界，有些人就會，瘋狂的拿來一本永遠不用技術的書，啃起來，比如你是用 html5 寫前端介面的，永遠用不上 QT 寫介面，你買本 QT 津津有味的學起來，如果你感覺不錯，那就學吧。

其實，我們學任何技術，都要講究是否有用，技術本身是冰冷的，如果沒有價值，或用不上就不必學，除非你理論計算機學家，這個職位我編出來的，不造有沒有這個崗位。

廢話不多說了，我們來擴充套件一下有用的眼界，展望一下有用的未來！

擴充套件眼界與未來展望

前文提到的，說實話也只是冰山一角，這個一角也確實能開發，幾乎所有的應用程式了，但是冰山的下半部分，卻讓我們更加神往！雖然技術是冰冷的，但做為活力四射的技術，還是會感受到一絲震撼人心的靈光！下面我挑兩個高階技術，來分享一下。

CQRS framework 我一手帶大的孩子

Web 前端開發人員，記住你們只是前端！不要越界好不好！你們沒這個本事！

但遺憾的是，本文的標題 “如何學習 Web 前端技術？” 真的只是謙虛說法，誰說我們不能開發後端程式了？！

Node.js 為後端開發提供了基石，望著老牌技術的一些框架啊，資料分析相關的框架啊，給人的感覺 Node.js 還很年輕，開發一些簡單的 Web CURD 程式就得了。但是，這些並不正確，隨著 Node.js 本身能量，和各種第三方庫讓 Node.js 可以開發微服務，大型系統，比如 paypal 系統就是用 Node.js 寫的，難道不夠強大嗎？

後端是個籠統的概念，如果後端只是 Web 伺服器端，那麼 Node.js 開發是沒問題的，那麼為什麼給人的感覺，後端好像很牛逼呢？因為後端指的是支援高併發訪問、大型系統、複雜系統。

也就是系統很龐大，用一般的 CURD 簡單開發模式，無法勝任這種複雜性。那麼，這個其實和技術無關；而是，是否有應對開發複雜系統的框架。

CQRS https://github.com/liangzeng/cqrs 是 DDD 領域驅動設計理論的落地框架，我為 Node.js 開發了 CQRS framework ，從而可以讓 Node.js 具備開發超大型系統的能力，當然它不只限於此！

來來來，讓我們“吹”一下吧！

Node.js CQRS 框架，適合於開發大中小程式，也很適合開發微服務，它具有橫向無限擴充套件機制，可以利用多cpu和多伺服器分散式效能，具備事件驅動、saga長故事、saga回輪、actor模式、事件回溯。在未來，也將執行在瀏覽器，可替代 redux 和其他資料管理框架，將統一管理業務資料，透過 cqrs framework 強大的相容性和 js 的簡單性相結合，實現無所不在的開發便利。

最近，Node.js CQRS 框架增加了 DCI 特性，從而完成 CQRS + DDD + Actor + DCI 的有機整合，為開發大中小專案提供強大的核心支援，分散式／微服務，或普通的 react 應用（cqrs將代替類redux框架，提供更完善、更可靠和更強悍的技術支援），將在一開始，給程式設計師一種可控性，而不是一盤散沙，無論多大規模的專案，可控性、可擴充套件性、無限橫向擴充套件性，都是成功專案的必備。

這是一個很大的話題，先吹到這裡。

WebAssembly

WebAssembly 是瀏覽器和 Node.js 環境下，新加入的程式格式，簡單來說，就是讓執行效率接近原生程式。未來的新開發應用軟體，基本上採用 HTML5 + Node.js 前後端全棧來開發，因為開發效率高，而程式中的一些需要高繁運算部分，採用 Javascript/Typescript 開發後轉換為位元組碼，但不應把整個專案轉換為位元組碼二進位制，那是很傻的。不準確的說 95%＋的動態JS程式碼加 <5% JS/TS轉為wasm二進位制的位元組碼，構成了完整的程式。

大家可以參看 https://github.com/AssemblyScript/assemblyscript

先說這些吧，還有很多要說的，不過留到下次吧。希望本文對你有些啟發！

最後，做一個小小的推薦。十年一變，從2016 年開始，Web前端工程師開始大放異彩，人才需求重返巔峰。

本文作者曾亮老師，在CSDN出品4個月從零成長為前端工程師計劃。目的是：將學員培養有核心競爭力的前端開發者。

成長階段：