我认为必须要学的前端技能和架构体系
今天說說 項目延期?
「?起因?」
這篇文章主要是面向小白用戶和初中級前端，如果你有些基礎，當然也建議你看看，尤其是最后一個主題，或許你能得到一些啟發。本文的觀點，純屬個人自以為是的想法，不是真理，僅供參考。
而且后面有此系列課程推薦，報我名字或者公眾號名字可領取1000優惠券，別說沒給福利
拋開具體技術細節，先主要談談程序員如何更高效的，有選擇的學習技術。我能體會到選擇的輕松和樂趣，體會到身為技術人員和人類的平衡感。字里行間中，我要表達的是一種放棄與選擇的哲學，能品到這一點，我就很高興。
「?人生苦短 我們需要一個基線」
古代小說里，高手如云，人們為了生存，要掌握一套保命武功。其中，我最喜歡的是輕功，畢竟三十六計走為上策（狡詐的一笑）。說到底，武功和技術一樣，都是為了生存。
問題是，現實一點來說，一個武者，很難掌握所有的武功秘籍，因為臣妾做不到啊；所以如果有一種武功，能夠遠攻和近攻，能逃跑能單挑，那就極好了。
玩“農藥”也一樣，我發現英雄們各有優缺點，但你又不可能什么英雄都練，因為臣妾也做不到啊，畢竟上場時就一個英雄，所以就需要選擇，我選擇的是呂布和趙云，他倆在游戲故事設定中是情敵，其實貂蟬喜歡的是趙云，我之所以選這兩個情敵成為基友，是因為符文一樣，這點很重要，五級符文真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 相關技術。
?
綜上所述，這套技術對于公司來說，百利而無一害，所以掌握這套技術很好就業。
「 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
加好友時候
備注 "前端你別鬧" 可領取 半價 或者 全免課程優惠券
總結
以上是生活随笔為你收集整理的我认为必须要学的前端技能和架构体系的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [C++学习笔记](double*)ma
- 下一篇： [我的1024开源程序]350元写的HT