我認為必須要學的前端技能和架構體系，技能架構體系

我認為必須要學的前端技能和架構體系，技能架構體系

今天說說 項目延期 

「 起因 」

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

而且後面有此系列課程推薦，報我名字或者公眾號名字可領取1000優惠券，別說沒給福利

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

「  人生苦短 我們需要一個基準」

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

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

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

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

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

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

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

Web 全棧式開發

 

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

 

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

 

這套技術不會被淘汰

 

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

 

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 相關技術。

 

綜上所述，這套技術對於公司來說，百利而無一害，所以掌握這套技術很好就業。

「 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二進位的位元組碼，構成了完整的程式。

寫了這麼長最後，做一個小小的推薦。十年河東 十年河西，從2016年開始，Web前端工程師開始大放異彩，人才需求和價值重要性都到了巔峰。

幫忙推薦一個csdn 的快速進階：4個月從零成長為市場需求的前端工程師計劃。目的是：將學員培養有核心競爭力的前端開發人員

（我沒收費，完全義務推薦）想著沒壞處，有興趣的可以去，報前端你別鬧 可以半價或者免費優惠

課程成長階段：

• 第一階段：Web 全棧核心技術實戰（1～6周）

• 第二階段：Node.js 技術與開發工具實戰 (7~10周)

• 第三階段：前端架構實戰（11～15周）

• 第四階段：移動端與傳統型程式開發（16～19周）

• 第五階段：畢業項目實戰

課程特色：

• 從零實戰，學習路徑分明，獨家體系大綱，有多名助教隨時答疑，不再困擾遇到的技術問題。線上學習+直播形式，無需脫產。

  
  

• 有專人（助教）來跟蹤你的學習進度，並根據你的編程基礎來制定專屬學習計劃，保證不掉隊。講師有著深厚的經驗，產、學、研結合緊密。

報名加號：CSDN06

加好友時候

備忘 "前端你別鬧" 可領取 半價 或者 全免課程優惠券