時(shí)隔我的萬(wàn)字長(zhǎng)文 《從軟件工程專業(yè)思考到的大前端技術(shù)棧-詳情篇》 在 GitChat 上發(fā)布一周后，于 2017 年 8 月 3 日晚上舉行了與訂閱者互動(dòng)的線上交流環(huán)節(jié)羊娃。

驚喜的是悍及，這場(chǎng) Chat 最終有 215 人預(yù)訂闽瓢。折合每人 4.9 元的參與費(fèi)，這里不妨說(shuō)出來(lái)心赶，最終 GitChat 平臺(tái)支付了我 754.11 元的稿費(fèi)鸳粉，并支付了我的推薦人 @余博倫 200+ 元的推薦費(fèi)——著實(shí)在酷熱的暑期留校學(xué)習(xí)中送了一把雪中炭。如果你也想發(fā)布一篇文章园担，讓大家付費(fèi)收聽的話，不妨聯(lián)系我作為你的推薦人枯夜，一起積極投身于知識(shí)付費(fèi)時(shí)代的潮流中~弯汰。

通過(guò)最終的微信群交流后，主持人整理的原文是 《韓亦樂：大前端技術(shù)棧從軟件工程角度實(shí)戰(zhàn)解析》湖雹，我在這里稍加補(bǔ)充咏闪，再次推送到我的公眾號(hào)之中，分享出來(lái)摔吏，也歡迎指教鸽嫂。

原文序：2017 年 8 月 3 日纵装，周四晚 8 點(diǎn) 30 分，freeCodeCamp 西安前端社區(qū)組織者据某，校內(nèi)互聯(lián)網(wǎng)實(shí)驗(yàn)室前端開發(fā)成員韓亦樂帶來(lái)了主題為《從軟件工程角度看大前端技術(shù)棧-詳情篇》的交流橡娄。以下是主持人 hrshy 整理的問(wèn)題精華，記錄了作者和讀者間問(wèn)答的精彩片段癣籽。

內(nèi)容提要：

• 如何確保自己在理論和實(shí)踐方面達(dá)到一致的挽唉？你做了哪些前端相關(guān)的項(xiàng)目，哪些感受比較深刻筷狼？
• 你花了多久掌握這些知識(shí)的瓶籽？
• 我是非科班，想轉(zhuǎn)行做前端開發(fā)埂材。我的問(wèn)題是塑顺，前端涉及的知識(shí)很多，需要學(xué)習(xí)到什么樣的程度才可以去找第一份前端相關(guān)的工作俏险？
• 一個(gè)人在開發(fā)严拒，寫的東西總是在不斷的重復(fù)，希望可以得到提升寡喝，但是不知道自己的代碼哪里需要升級(jí)糙俗，哪里需要改進(jìn)？
• 前端開發(fā)的發(fā)展前景如何预鬓？如何應(yīng)對(duì)快速更新的前端框架巧骚？由于前端知識(shí)太過(guò)豐富，有時(shí)候不知道從何學(xué)起該怎么辦格二？
• 有哪些比較好的javascript和angularjs開源項(xiàng)目劈彪？
• 如何參考官方api開發(fā)項(xiàng)目？
• ajax請(qǐng)求與websocket哪一個(gè)更好顶猜？
• 剛?cè)胄胁痪茫?能講一講requirjs和seajs這些模塊化開發(fā)還有掌握的必要嗎沧奴？
• 想問(wèn)一下，在工作完一個(gè)項(xiàng)目长窄，或者學(xué)習(xí)了某個(gè)技術(shù)點(diǎn)后滔吠，如何更清晰地從中獲得反饋，然后找到下一個(gè)關(guān)注點(diǎn)挠日？我做完一個(gè)項(xiàng)目都會(huì)做總結(jié)疮绷，但是，我并知道我的技術(shù)在同行中到達(dá)了什么程度嚣潜，哪些東西應(yīng)該重點(diǎn)關(guān)注從而塑造成自己的核心競(jìng)爭(zhēng)力冬骚？
• 想要掌握所有的這些知識(shí)肯定不是短時(shí)間可以做到的，并且在學(xué)習(xí)基礎(chǔ)知識(shí)的同時(shí)，新的技術(shù)和知識(shí)也在不停地出現(xiàn)只冻，那么要如何做才能夠消除知識(shí)焦慮庇麦，保持清醒不斷學(xué)習(xí)提升自己？

問(wèn)：如何確保自己在理論和實(shí)踐方面達(dá)到一致的喜德？你做了哪些前端相關(guān)的項(xiàng)目山橄，哪些感受比較深刻？

答： 在這里住诸，允許我把“理論”與“實(shí)踐”相關(guān)聯(lián)于“廣度”與“深度”驾胆，從這場(chǎng)活動(dòng)的文章可以看出我所涉及到的知識(shí)面比較廣，但實(shí)話說(shuō)贱呐，我的深度還不足以匹配廣度丧诺。
對(duì)于確保理論和實(shí)踐方面的一致，我傾向于將文章最后在軟技能層面所說(shuō)的那八個(gè)字作為學(xué)習(xí)指引——“刻意練習(xí)”和“持續(xù)改進(jìn)”奄薇，可以感悟一下這八個(gè)字驳阎。
我上學(xué)期期末用一個(gè)月多的時(shí)間，和兩個(gè)服務(wù)端同學(xué)共同參與了中國(guó)軟件杯競(jìng)賽項(xiàng)目之——基于微信公眾平臺(tái)的圖書借閱系統(tǒng)馁蒂。很遺憾的是呵晚，最終被全國(guó)范圍內(nèi)的團(tuán)隊(duì)競(jìng)爭(zhēng)下去了，這個(gè)項(xiàng)目讓我感受深刻沫屡。我在這次項(xiàng)目之后寫了相關(guān)總結(jié)文章可以看看饵隙，里面有我知道我沒進(jìn)決賽前的所有感悟。《“消失”的這倆個(gè)月里沮脖，我的前端項(xiàng)目如何從零開始》金矛。

問(wèn)：你花了多久掌握這些知識(shí)的？

答： 從我分享的《如何寫一篇優(yōu)質(zhì)的博客》 的寫作背景可以看出： 我從高三暑假經(jīng)過(guò)一些編程方面的指引提前了解了 Web 開發(fā)的一些知識(shí)勺届。那時(shí)在不會(huì) JS 的情況下快速入手了 CodeIgniter 這個(gè) PHP 框架驶俊，實(shí)踐了一些對(duì)數(shù)據(jù)庫(kù)的增刪改查，學(xué)了學(xué) BootStrap 框架免姿。高三暑假的這個(gè)學(xué)習(xí)過(guò)程主要是通過(guò)觀看視頻來(lái)的饼酿。
第一天來(lái)大學(xué)，帶了三本編程圣經(jīng)書：《PHP 與 MySQL 高級(jí)程序設(shè)計(jì)》胚膊、《鳥哥的 Linux 私房菜：基礎(chǔ)篇》故俐、《高級(jí) JavaScript 程序設(shè)計(jì)》。并且在一個(gè)月內(nèi)加入了校內(nèi)互聯(lián)網(wǎng)實(shí)驗(yàn)室學(xué)習(xí)服務(wù)端編程紊婉。正式轉(zhuǎn)前端是因?yàn)榇笠皇罴賲⒓恿?ThoughtWorks 在西安的“全棧暑期特訓(xùn)營(yíng)”(以促進(jìn)女生編程為主购披，這里先不多說(shuō))，這個(gè)對(duì)我影響很大肩榕。之后就以簡(jiǎn)書、微信公眾號(hào)、微信群為主體進(jìn)行學(xué)習(xí)株汉、討論筐乳、分享。簡(jiǎn)而言之乔妈，到現(xiàn)在這個(gè)大二暑假蝙云，我用了整整兩年。

問(wèn)：我是非科班路召，想轉(zhuǎn)行做前端開發(fā)勃刨。我的問(wèn)題是，前端涉及的知識(shí)很多股淡，需要學(xué)習(xí)到什么樣的程度才可以去找第一份前端相關(guān)的工作身隐？

答：“剛開始學(xué)”“需要掌握哪些”“非科班轉(zhuǎn)行”“什么程度”這幾個(gè)問(wèn)題有個(gè)共通性——如何從零開始，到能勝任前端工作唯灵。對(duì)于我這個(gè)還沒找工作的學(xué)生（但畢竟組織過(guò) fcc 西安社區(qū)線下編程活動(dòng)認(rèn)識(shí)好多新人）贾铝，希望下面的一些話不至于白日談。
參考我的 Chat 文章中“前端開發(fā)”上的”必修“內(nèi)容埠帕，這里只強(qiáng)調(diào)一點(diǎn)：前端三大語(yǔ)言基礎(chǔ)要牢實(shí)垢揩，其中要能從 HTML 聊到 HTML5，從 CSS 聊到 CSS3敛瓷，從 JavaScript 聊到 ECMAScript叁巨。其中當(dāng)然包括 DOM 操作、AJAX 操作和 JS 原生特性呐籽、組件化開發(fā)锋勺、瀏覽器兼容、響應(yīng)式布局绝淡、單頁(yè)面應(yīng)用宙刘、調(diào)試方法等等基礎(chǔ)知識(shí)點(diǎn)。
我從上個(gè)學(xué)期的競(jìng)賽經(jīng)歷中感悟到一點(diǎn)便是：項(xiàng)目驅(qū)動(dòng)學(xué)習(xí)牢酵。一起多實(shí)踐~至于在哪里找項(xiàng)目悬包，Github 是個(gè)很不錯(cuò)的選擇。

問(wèn)：一個(gè)人在開發(fā)馍乙，寫的東西總是在不斷的重復(fù)布近，希望可以得到提升，但是不知道自己的代碼哪里需要升級(jí)丝格，哪里需要改進(jìn)撑瞧？

答： 這也就是——如何從“搬磚”中得到成長(zhǎng)？
整理這個(gè)項(xiàng)目用到的技術(shù)棧显蝌，從中找到下次可以優(yōu)化的地方预伺。
平時(shí)接觸新技術(shù)點(diǎn)時(shí)订咸，做一些小 Demo 留存著隨時(shí)復(fù)用。以后項(xiàng)目也能及時(shí)想到酬诀、快速用到這些技術(shù)點(diǎn)了脏嚷。
剛剛?cè)豪?@虎頭錘 說(shuō)的“審丑”讓我想到了代碼審查。如果有一起學(xué)習(xí)的小伙伴的話瞒御，帶上一起語(yǔ)音打游戲的勁遠(yuǎn)程結(jié)對(duì)編程父叙、互相代碼審查是不錯(cuò)的選擇。據(jù)我所知很多公司也是很重視代碼審查活動(dòng)的肴裙。

從上圖可見趾唱，我每次倒是習(xí)慣在寫一個(gè)項(xiàng)目前先想想這次我能用哪些酷炫的技術(shù)，這可以看做提升之前的思想準(zhǔn)備蜻懦，雖然之后大部分技術(shù)沒用上甜癞。

問(wèn)：前端開發(fā)的發(fā)展前景如何？如何應(yīng)對(duì)快速更新的前端框架阻肩？由于前端知識(shí)太過(guò)豐富带欢，有時(shí)候不知道從何學(xué)起該怎么辦？

答： 慶幸的是烤惊，由于IT 行業(yè)還沒有被壟斷乔煞、軟件開發(fā)成本高等原因、程序員的工資還是很可觀的柒室。前端開發(fā)作為其中的一派渡贾，展現(xiàn)了該有的活力。記得余博倫說(shuō)過(guò) “前端這行真的和任何一行本質(zhì)上沒有什么區(qū)別雄右。還是空骚，一切看個(gè)人±奕裕” 也就是說(shuō)：縱然現(xiàn)在前端領(lǐng)域相比其它編程領(lǐng)域更火熱點(diǎn)囤屹，但遲早會(huì)平衡的。
“不知道從何學(xué)起”對(duì)自身會(huì)引發(fā)倆個(gè)角度的問(wèn)題：一是技術(shù)上遲遲沒有替身逢渔，這個(gè)解決方法在上面的問(wèn)答里已經(jīng)有所涉及肋坚；二是由此會(huì)產(chǎn)生知識(shí)焦慮，我也被困于此很久肃廓，現(xiàn)在是以“刻意聯(lián)系”和“持續(xù)改進(jìn)”作為指引智厌，保證每天都有產(chǎn)出、每個(gè)階段都有可以看出自己技術(shù)提升的小項(xiàng)目即可盲赊，千萬(wàn)不要成為“野心”的奴隸铣鹏。

問(wèn)：有哪些比較好的 Javascript 和 AngularJS 開源項(xiàng)目？

答：好的開源項(xiàng)目可以多逛 Github 平臺(tái)哀蘑，上面的 js 項(xiàng)目數(shù)不勝數(shù)诚卸。Github 中的項(xiàng)目最新趨勢(shì)葵第、自己關(guān)注的人的最新動(dòng)態(tài)等功能，能讓我們更好的開拓視野合溺。以 Github 平臺(tái)的點(diǎn)贊量前倆名的開源項(xiàng)目來(lái)說(shuō)羹幸，都是 js 相關(guān)的。第一名 fcc 平臺(tái)我們可以看到一個(gè)完整的辫愉、基于 MEAN 架構(gòu)的全棧項(xiàng)目如何搭建起來(lái)，還能學(xué)習(xí)其中的運(yùn)營(yíng)理念将硝、公益理念恭朗。第二名 BootStrap 前端庫(kù)我們可以通過(guò)了解其柵格結(jié)構(gòu)等并通過(guò)定量的閱讀源碼來(lái)提高自己的編程實(shí)力。

問(wèn)：如何參考官方 api 開發(fā)項(xiàng)目依疼？

答： api 接口會(huì)用 ajax 痰腮、jsonp 等調(diào)用就好。這里應(yīng)該說(shuō)的是如何參考官方文檔的技術(shù)點(diǎn)進(jìn)行實(shí)戰(zhàn)律罢？比如 Bootstrap 官網(wǎng)上每一個(gè)技術(shù)點(diǎn)下面都有如何使用的示例代碼的膀值。

問(wèn)：ajax 請(qǐng)求與 websocket 哪一個(gè)更好？

答：以我的能力來(lái)看误辑，這兩個(gè)技術(shù)沒有直接的競(jìng)爭(zhēng)關(guān)系沧踏。簡(jiǎn)單來(lái)說(shuō)，前者進(jìn)行普通網(wǎng)絡(luò)請(qǐng)求巾钉，防止惡意請(qǐng)求服務(wù)器數(shù)據(jù)翘狱；后者主要解決了 http 前期版本中客戶端需要主動(dòng)聯(lián)系服務(wù)端的缺點(diǎn)（例如 ajax 輪詢），最終可以使客戶端與服務(wù)端雙向通信砰苍，具體使用哪一個(gè)需要根據(jù)業(yè)務(wù)場(chǎng)景進(jìn)行選型潦匈。對(duì)于初學(xué)者來(lái)說(shuō)，倆者都有所實(shí)戰(zhàn)并了解其意義會(huì)是最好的赚导。

問(wèn)：剛?cè)胄胁痪茫?能講一講 RequirJS 和 SeaJS 這些模塊化開發(fā)還有掌握的必要嗎茬缩？

答： 組件化開發(fā)、模塊化開發(fā)吼旧，可以從很主流的前端框架 React 中看到它們的身影凰锡，為什么不去掌握呢？這可以作為提升瓶頸的重要一步 —— 尤其在 Web App 時(shí)代到來(lái)的大背景下黍少。

問(wèn)：想問(wèn)一下寡夹，在工作完一個(gè)項(xiàng)目，或者學(xué)習(xí)了某個(gè)技術(shù)點(diǎn)后厂置，如何更清晰地從中獲得反饋菩掏，然后找到下一個(gè)關(guān)注點(diǎn)？我做完一個(gè)項(xiàng)目都會(huì)做總結(jié)昵济，但是智绸，我并知道我的技術(shù)在同行中到達(dá)了什么程度野揪，哪些東西應(yīng)該重點(diǎn)關(guān)注從而塑造成自己的核心競(jìng)爭(zhēng)力？

答： 看這個(gè)：《“消失”的這倆個(gè)月里瞧栗，我的前端項(xiàng)目如何從零開始》 斯稳。我也習(xí)慣作總結(jié)，這個(gè)習(xí)慣很不錯(cuò)迹恐。
“了解同行技術(shù)”可以逛社區(qū)看文章挣惰、關(guān)注/訂閱一些博客、參與技術(shù)社區(qū)交流殴边、了解技術(shù)背后每個(gè)傳播者憎茂、分享者的故事。比如我的這個(gè)正在搭建中的“迷之你們”收藏夾锤岸。

“核心競(jìng)爭(zhēng)力”——可以通過(guò)打造良好的 ID 體系來(lái)實(shí)現(xiàn)竖幔。比如我在去年所繪制的這張圖。

@余博倫 問(wèn)：想要掌握所有的這些知識(shí)肯定不是短時(shí)間可以做到的是偷，并且在學(xué)習(xí)基礎(chǔ)知識(shí)的同時(shí)拳氢，新的技術(shù)和知識(shí)也在不停地出現(xiàn)，那么要如何做才能夠消除知識(shí)焦慮蛋铆，保持清醒不斷學(xué)習(xí)提升自己馋评？

答： 余大上來(lái)就是問(wèn)生活問(wèn)心態(tài)~我最近常常在克服焦慮的路上。我時(shí)刻告訴自己：野心和產(chǎn)出能力戒职、深度和廣度栗恩、理論與實(shí)踐，一定要平衡才有更好的發(fā)展洪燥。補(bǔ)充一個(gè)彩蛋磕秤，這篇 Chat 文章也將成為我接下來(lái)大三一年的填坑指南，相信也就不會(huì)有太多的知識(shí)焦慮了~捧韵。

在此感謝 異步社區(qū) 為本次活動(dòng)提供的贈(zèng)書《Web全棧工程師的自我修養(yǎng)》倆本市咆。分別送給了 @果凍 和 @張大俠。@果凍 把關(guān)于數(shù)據(jù)庫(kù)同步的問(wèn)題請(qǐng)教了很久再来，讓我們看到了對(duì)于“求知”的堅(jiān)持蒙兰；@張大俠 的問(wèn)題最終被 @余博倫 回復(fù)了，回復(fù)者推薦去收聽知乎大咖 @小爝 的知乎 Live芒篷，而 @小爝 的知乎 Live 每場(chǎng)都很貴搜变。。送本書壓壓驚吧针炉。

異步社區(qū) 是人民郵電出版社旗下IT專業(yè)圖書旗艦社區(qū)挠他，也是國(guó)內(nèi)領(lǐng)先的IT專業(yè)圖書社區(qū)，致力于優(yōu)質(zhì)學(xué)習(xí)內(nèi)容的出版和分享篡帕，實(shí)現(xiàn)了紙書電子書的同步上架殖侵。

• Hello贸呢，我是韓亦樂，現(xiàn)任本科軟工男一枚拢军。軟件工程專業(yè)的一路學(xué)習(xí)中楞陷，我有很多感悟，也享受持續(xù)分享的過(guò)程茉唉。如果想了解更多或能及時(shí)收到我的最新文章固蛾，歡迎訂閱我的個(gè)人微信號(hào)：韓亦樂。我的簡(jiǎn)書個(gè)人主頁(yè)中度陆，有我的訂閱號(hào)二維碼和 Github 主頁(yè)地址魏铅；我的知乎主頁(yè) 中也會(huì)堅(jiān)持產(chǎn)出，歡迎關(guān)注坚芜。
• 本文內(nèi)部編號(hào)經(jīng)由我的 Github 相關(guān)倉(cāng)庫(kù)統(tǒng)一管理；本文可能發(fā)布在多個(gè)平臺(tái)但僅在上述倉(cāng)庫(kù)中長(zhǎng)期維護(hù)斜姥；本文同時(shí)采用【知識(shí)共享署名-非商業(yè)性使用-禁止演繹 4.0 國(guó)際許可協(xié)議】進(jìn)行許可鸿竖。