漫談前端工程化基建和架構(gòu)設(shè)計【送幾本】
文末有送書活動
透過工程基建，架構(gòu)有跡可循。
前端開發(fā)是一個龐大的體系，紛繁復(fù)雜的知識點鑄成了一張信息密度極高的圖譜。在開發(fā)過程中，一行代碼就可能使宿主引擎陷入性能瓶頸；團隊中的代碼量呈幾何級數(shù)式增長，可能愈發(fā)尾大不掉，掣肘業(yè)務(wù)的發(fā)展。這些技術(shù)環(huán)節(jié)，或宏觀或微觀，都與工程化基建、架構(gòu)設(shè)計息息相關(guān)。
如何打造一個順滑的工程化流程，為研發(fā)效率不斷助力？如何建設(shè)一個穩(wěn)定可靠的基礎(chǔ)設(shè)施，為業(yè)務(wù)產(chǎn)出保駕護航？對于這些問題，我在多年的工作中反復(fù)思考、不斷實踐，如今也有了一些經(jīng)驗和感悟。
因此，我又萌生了寫書的想法。
先來和大家聊聊寫《前端架構(gòu)師：基礎(chǔ)建設(shè)與架構(gòu)設(shè)計思想》這本書的初心吧。
作為團隊管理者，一直以來我都被人才招聘所困擾。經(jīng)歷了數(shù)百場面試，我看到了太多千篇一律的“皮囊”。
我精通Vue.js，看過Vue.js源碼 = 我能熟記Object.defineProperty/Proxy，也知道發(fā)布/訂閱模式。
我精通AST = 我知道AST是抽象語法樹，知道能用它做些什么。
我能熟練使用Babel = 我能記清楚很多Babel配置項，甚至默寫出Babel Plugin模板代碼。
當(dāng)知識技術(shù)成為應(yīng)試八股文時，人才招聘就會淪為“面試造火箭，工作擰螺絲”的逢場作戲。對于上述問題，我不禁會追問：
你知道Vue.js完整版本和運行時版本的區(qū)別嗎？
如果你不知道Vue.js運行時版本不包含模板編譯器，大概率也無法說清Vue.js在模板編譯環(huán)節(jié)具體做了什么。如果只知道實現(xiàn)數(shù)據(jù)劫持和發(fā)布/訂閱模式的幾個API，又何談精通原理？
請你手寫一個“匹配有效括號”算法，你能做到嗎？
如果連LeetCode上easy難度的編譯原理相關(guān)算法題都無法做出，何談理解分詞、AST這些概念？
如何設(shè)計一個C端Polyfill方案？
如果不清楚@babel/preset-env的useBuiltIns不同配置背后的設(shè)計理念，何談了解Babel？更別說設(shè)計一個性能更好的降級方案了。
另一方面，我很理解求職者，他們也面臨困惑。
該如何避免相似的工作做了3年，卻沒能積累下3年的工作經(jīng)驗？
該如何從繁雜且千篇一律的業(yè)務(wù)需求中抽身出來，花時間總結(jié)經(jīng)驗、提高自己？
該如何為團隊帶來更高的價值，體現(xiàn)經(jīng)驗和能力？
為了破局，焦慮的開發(fā)者漸漸成為“短期速成知識”的收藏者。你以為收藏的是知識，其實收藏的是“知道”；你以為掌握了知識，其實只是囤積了一堆“知道”。
近些年我也一直在思考：如何抽象出真正有價值的開發(fā)知識？如何發(fā)現(xiàn)并解決技術(shù)成長瓶頸，培養(yǎng)人才？
于是，我將自己在海外和BAT服務(wù)多年積累的經(jīng)驗分享給大家，將長時間以來我認(rèn)為最有價值的信息系統(tǒng)性地整理輸出。
從當(dāng)前的招聘情況和開發(fā)社區(qū)中呈現(xiàn)的景象來看，短平快、碎片化的內(nèi)容（比如快速搞定“面經(jīng)題目”）很容易演變成跳槽加薪的“興奮劑”，但是在某種程度上，它們只能成為緩解焦慮的“精神鴉片”。
試想，如果你資質(zhì)平平，缺少團隊中“大?！钡闹更c，工作內(nèi)容只是在已有項目中寫幾個頁面或配合運營活動，如此往復(fù)，技術(shù)水平一定無法提高，工作三四年后可能和應(yīng)屆生并無差別。
這種情況出現(xiàn)的主要原因還是大部分開發(fā)者無法接觸到好項目。
這里的“好項目”是指：你能在項目中從0到1打造應(yīng)用的基礎(chǔ)設(shè)施、確定應(yīng)用的工程化方案、實現(xiàn)應(yīng)用構(gòu)建和發(fā)布的流程、設(shè)計應(yīng)用中的公共方法和底層架構(gòu)。
只有系統(tǒng)地研究這些內(nèi)容，開發(fā)者才能真正打通自身的“任督二脈”，實現(xiàn)個人和團隊價值的最大化。
我將上述內(nèi)容總結(jié)定義為：前端工程化基建和架構(gòu)設(shè)計。
這是每位開發(fā)者成長道路上的稀缺資源。
一輪又一輪的業(yè)務(wù)需求是煩瑣和機械的，但工程化基建和架構(gòu)設(shè)計卻是萬丈高樓的根基，是巨型航母的引擎和發(fā)動機，是區(qū)分一般開發(fā)者和一流架構(gòu)師的分水嶺。
因此，前端工程化基建和架構(gòu)設(shè)計的價值對于個人、業(yè)務(wù)來說都是不言而喻的。
我們知道，前端目前處在前所未有的地位高度：前端職場既快速發(fā)展著，也迎接著優(yōu)勝劣汰；前端技術(shù)有著與生俱來的混亂，也有著與這種混亂抗衡的規(guī)范。
這些都給前端工程化基建帶來了更大的挑戰(zhàn)，對技術(shù)架構(gòu)設(shè)計能力也提出了更高的要求。
對于實際業(yè)務(wù)來說，在前端工程化基建當(dāng)中：
團隊作戰(zhàn)并非單打獨斗，那么如何設(shè)計工作流程，打造一個眾人皆贊的項目根基？
項目依賴紛繁復(fù)雜，如何做好依賴管理和公共庫管理？
如何深入理解框架，真正做到精通框架和準(zhǔn)確拿捏技術(shù)選型？
從最基本的網(wǎng)絡(luò)請求庫說起，如何設(shè)計一個穩(wěn)定靈活的多端Fetch庫？
如何借助Low Code或No Code技術(shù)，實現(xiàn)越來越智能的應(yīng)用搭建方案？
如何統(tǒng)一中后臺項目架構(gòu)，提升跨業(yè)務(wù)線的產(chǎn)研效率？
如何開發(fā)設(shè)計一套適合業(yè)務(wù)的組件庫，封裝分層樣式，最大限度做到復(fù)用，提升開發(fā)效率？
如何設(shè)計跨端方案，“Write Once，Run Everywhere”是否真的可行？
如何處理各種模塊化規(guī)范，以及精確做到代碼拆分？
如何區(qū)分開發(fā)邊界，比如前端如何更好地利用Node.js方案開疆?dāng)U土？
以上這些都直接決定了前端的業(yè)務(wù)價值，體現(xiàn)了前端團隊的技術(shù)能力。
那到底什么才是我理解的“前端工程化基建和架構(gòu)設(shè)計”呢？
我以身邊常見的一些小事兒為例：不管是菜鳥還是經(jīng)驗豐富的開發(fā)者，都有過被配置文件搞到焦頭爛額的時候，一不小心就引起命令行報錯，編譯不通過，終端上只顯示了短短幾行英文字母，卻都是warning和error。
也許你可以通過搜索引擎找到臨時解決方案，匆匆忙忙重新回到業(yè)務(wù)開發(fā)中追趕工期。但報錯的本源到底是什么，究竟什么是真正高效的解決方案？如果不深入探究，你很快還會因為類似的問題浪費大把時間，同時技術(shù)能力毫無提升。
再試想，對于開發(fā)時遇見的一些詭異問題，你也許會刪除一次node_moudles，并重新執(zhí)行npm install命令，然后發(fā)現(xiàn)“重啟大法”有時候真能奇跡般地解決問題。可是你對其中的原理卻鮮有探究，也不清楚這是否是一種優(yōu)雅的解決方案。
又或者，為了實現(xiàn)一個通用功能（也許就是為了找到一個函數(shù)參數(shù)的用法），你不得不翻看項目中的“屎山代碼”，浪費大把時間?？墒敲鎸v史代碼，你卻完全不敢重構(gòu)。經(jīng)過日積月累，“歷史”逐漸成為“天坑”，“屎山代碼”成為業(yè)務(wù)桎梏。
基于多年對一線開發(fā)過程的觀察，以及對人才成長的思考，我心中的“前端工程化基建和架構(gòu)設(shè)計”已不是簡單的思維模式輸出，不是“陽春白雪”的理論，也不是社區(qū)搜索即得的Webpack配置羅列和原理復(fù)述，而是從項目中的痛點提取基礎(chǔ)建設(shè)的意義，從個人發(fā)展瓶頸總結(jié)工程化架構(gòu)和底層設(shè)計思想。
基于此，我的新書《前端架構(gòu)師：基礎(chǔ)建設(shè)與架構(gòu)設(shè)計思想》的內(nèi)容呼之欲出。
事實上，前端工程化基建和架構(gòu)設(shè)計相關(guān)話題在網(wǎng)上少之又少。
我?guī)缀醴榱松鐓^(qū)所有的相關(guān)課程和圖書，它們更多的是講解Webpack的配置和相關(guān)源碼，以及列舉npm基礎(chǔ)用法等。我一直在思考，什么樣的內(nèi)容能夠幫助讀者突破“會用”的表層，從更高的視角看待問題。
本書包括五個部分，涵蓋30個主題（30篇），其中每一部分的內(nèi)容簡介如下。
第一部分 前端工程化管理工具（01~05）
以npm和Yarn包管理工具切入工程化主題，通過Webpack和Vite構(gòu)建工具加深讀者對工程化的理解。事實上，工具的背后是原理，因此我不會枯燥地列舉某個工具的優(yōu)缺點和基本使用方式，而是會深入介紹幾個極具代表性的工具的技術(shù)原理和演變過程。只有吃透這些內(nèi)容，才能真正理解工程化架構(gòu)。希望通過這一部分，讀者能夠認(rèn)識到如何刨根問底地學(xué)習(xí)，如何像一名架構(gòu)師一樣思考。
第二部分 現(xiàn)代化前端開發(fā)和架構(gòu)生態(tài)（06~16）
這部分將一網(wǎng)打盡大部分開發(fā)者每天都會接觸卻很少真正理解的知識點。希望通過第二部分，讀者能夠真正意識到，Webpack工程師的職責(zé)并不是寫寫配置文件那么簡單，Babel生態(tài)體系也不是使用AST技術(shù)玩轉(zhuǎn)編譯原理而已。這部分內(nèi)容能夠幫助讀者培養(yǎng)前端工程化基礎(chǔ)建設(shè)思想，這也是設(shè)計一個公共庫、主導(dǎo)一項技術(shù)方案的基礎(chǔ)知識。
第三部分 核心框架原理與代碼設(shè)計模式（17~22）
在這一部分中，我們將一起來探索經(jīng)典代碼的奧秘，體會設(shè)計模式和數(shù)據(jù)結(jié)構(gòu)的藝術(shù)，請讀者結(jié)合業(yè)務(wù)實踐，思考優(yōu)秀的設(shè)計思想如何在工作中落地。同時，我們會針對目前前端社區(qū)所流行的框架進(jìn)行剖析，相信通過不斷學(xué)習(xí)經(jīng)典思想和剖析源碼內(nèi)容，各位讀者都能有新的收獲。
第四部分 前端架構(gòu)設(shè)計實戰(zhàn)（23~26）
在這一部分中，我會一步一步帶領(lǐng)大家從0到1實現(xiàn)一個完整的應(yīng)用項目或公共庫。這些工程實踐并不是社區(qū)上泛濫的Todo MVC，而是代表先進(jìn)設(shè)計理念的現(xiàn)代化工程架構(gòu)項目（比如設(shè)計實現(xiàn)前端+移動端離線包方案）。同時在這一部分中，我也會對編譯和構(gòu)建、部署和發(fā)布這些熱門話題進(jìn)行重點介紹。
第五部分 前端全鏈路——Node.js全棧開發(fā)（27~30）
在這一部分中，我們以實戰(zhàn)的方式靈活運用并實踐Node.js。這一部分不會講解Node.js的基礎(chǔ)內(nèi)容，讀者需要先儲備相關(guān)知識。我們的重點會放在Node.js的應(yīng)用和發(fā)展上，比如我會帶大家設(shè)計并完成一個真正意義上的企業(yè)級網(wǎng)關(guān)，其中涉及網(wǎng)絡(luò)知識、Node.js 理論知識、權(quán)限和代理知識等。再比如，我會帶大家研究并實現(xiàn)一個完善可靠的Node.js服務(wù)系統(tǒng)，它可能涉及異步消息隊列、數(shù)據(jù)存儲，以及微服務(wù)等傳統(tǒng)后端知識，讓讀者能夠真正在團隊項目中落地Node.js技術(shù)，不斷開疆?dāng)U土。
總之，這本書內(nèi)容很多，干貨滿滿。
客觀來說，我絕不相信一本“武功秘籍”就能讓一個人一路打怪升級，一步登天。
我更想讓這本書成為一個促成你我交流的機會，在輸出自己經(jīng)驗積累的同時，我希望它能幫助到每一個人。
你準(zhǔn)備好了嗎？
來和我一起，像架構(gòu)師一樣思考吧！
粉絲專享六折，快快掃碼搶購吧！
如果喜歡本文 歡迎 在看丨留言丨分享至朋友圈 三連
送書參與方式：
留言參與，在評論區(qū)留言隨便聊聊你對前端工程化或者架構(gòu)的認(rèn)識或者看法都可以，如果是前端新手對架構(gòu)或者工程化還不了解的，可以聊聊對前端的一些想法，或者你最近學(xué)習(xí)有什么問題都可以留言參與，提出一個有質(zhì)量的問題也是不容易的。
中間之后我會在留言里回復(fù)中獎結(jié)果，截止時間為：8 月 25 日 24 點。
溫馨提醒：點贊、在看、轉(zhuǎn)發(fā)三連中獎率會更高哦