前言：本文整理自自己在知乎問題《2024年的前端是否有『架構(gòu)』可言?》的回答。愛掏網(wǎng) - it200.com據(jù)說是有掘金限量筆記本可以拿，于是很沒骨氣地整理成文章發(fā)出來。愛掏網(wǎng) - it200.com如果大家也喜歡掘金的筆記本，也來發(fā)文章哦。愛掏網(wǎng) - it200.com
一，明確下架構(gòu)的定義，在知乎的這個(gè)問題中，題主說“整個(gè)后端的架構(gòu)是非常復(fù)雜和龐大的，一個(gè)好的架構(gòu)師需要在數(shù)不清的方案組合中進(jìn)行架構(gòu)選擇”。愛掏網(wǎng) - it200.com看起來架構(gòu)似乎是一個(gè)在無數(shù)方案組件中做選擇的問題。愛掏網(wǎng) - it200.com
所以，如果回答“前端的方案組合很多，所以架構(gòu)也很麻煩”，是否就可以回應(yīng)這個(gè)問題了。愛掏網(wǎng) - it200.com那么，前端方案組合多嗎？確實(shí)是多如牛毛吧，比后端多很多很多吧。愛掏網(wǎng) - it200.com
以上是牛角尖。愛掏網(wǎng) - it200.com
后端架構(gòu)的目標(biāo)，題主也說到了，高性能、高可用、可擴(kuò)展、安全。愛掏網(wǎng) - it200.com
至于后面說的那么多知識(shí)點(diǎn)，雖然都是有用的，但是不免有些掉書袋了。愛掏網(wǎng) - it200.com高可用有各種難點(diǎn)，有各個(gè)方面的高可用需要關(guān)注，但事實(shí)上，后端經(jīng)過這么多年的發(fā)展，尤其是海量用戶場(chǎng)景大量出現(xiàn)以后，這些問題的解決方案也都非常明確了。愛掏網(wǎng) - it200.com如果不明確的也是業(yè)界公認(rèn)暫時(shí)無解的問題，例如分布式CAP等。愛掏網(wǎng) - it200.com至于其中碰到的具體問題的的具體技術(shù)上的策略，如果還需要自己從頭去想，那這個(gè)后端工程師（還不叫架構(gòu)師）應(yīng)該是不合格的。愛掏網(wǎng) - it200.com我理解，做后端的架構(gòu)其實(shí)基本上是在前人整理過的各種場(chǎng)景的解決方案中做選擇。愛掏網(wǎng) - it200.com
那么前端呢？目標(biāo)也是高性能、高可用、可擴(kuò)展、安全嗎？所以只要數(shù)據(jù)庫不用選，語言不用選，框架三選一，架構(gòu)就簡(jiǎn)單了？我認(rèn)為這是對(duì)前端的關(guān)注點(diǎn)理解不到位的體現(xiàn)。愛掏網(wǎng) - it200.com
作為前端工程師，關(guān)注點(diǎn)是什么呢？首先就是用戶，包括用戶側(cè)的操作和用戶體驗(yàn)。愛掏網(wǎng) - it200.com
例如一個(gè)界面給到用戶，比如報(bào)錯(cuò)是紅色文字還是輸入框變紅？Loading放頂上還是頁面中間？用戶點(diǎn)擊提交后按鈕顯示Loading還是灰掉？轉(zhuǎn)菊花還是骨架屏？先顯示占位圖還是先白屏？
再比如用戶訪問我的網(wǎng)站快不快，用起來爽不爽，會(huì)不會(huì)覺得卡，會(huì)不會(huì)覺得low。愛掏網(wǎng) - it200.com這些東西會(huì)決定你的頁面是單頁面還是多頁面，URL如何設(shè)計(jì)，加載策略是什么？
我認(rèn)為這些才是前端最該關(guān)注的東西。愛掏網(wǎng) - it200.com
所以我做的架構(gòu)一點(diǎn)都不高大上。愛掏網(wǎng) - it200.com僅僅是決定如何讓網(wǎng)站加載更快，如何不引入不必要的代碼，把不必要的代碼干掉，如何讓用戶加載最少的內(nèi)容，如何讓用戶最快看到效果，前端渲染還是后端渲染，同步輸出還是異步輸出等等。愛掏網(wǎng) - it200.com
是不是覺得一點(diǎn)都不是架構(gòu)師干的事？但前端構(gòu)架師確實(shí)就是在干這些事。愛掏網(wǎng) - it200.com所以，你要說前端架構(gòu)師是一個(gè)技術(shù)上的架構(gòu)師，倒還不如說是更關(guān)注用戶的體驗(yàn)架構(gòu)師。愛掏網(wǎng) - it200.com從這個(gè)角度來說，前端架構(gòu)師和跟后端架構(gòu)師的關(guān)注點(diǎn)不在一個(gè)維度上。愛掏網(wǎng) - it200.com
題主說，“最多算上錯(cuò)誤監(jiān)控、埋點(diǎn)方案、緩存策略等偏運(yùn)維的決策”，仿佛這些是一句話可以搞定的很簡(jiǎn)單的事情。愛掏網(wǎng) - it200.com
是，后端錯(cuò)誤監(jiān)控不難，無非try..catch嘛，再不濟(jì)進(jìn)程掛了還有各種運(yùn)維工具可以救人于水火。愛掏網(wǎng) - it200.com但是前端呢？一個(gè)ajax加載失敗了怎么監(jiān)控，一個(gè)css加載失敗了怎么監(jiān)控，再極端一點(diǎn)，瀏覽器卡死了怎么監(jiān)控，頁面崩潰了怎么監(jiān)控？
至于埋點(diǎn)，能做得好的我都非常佩服。愛掏網(wǎng) - it200.com連用戶關(guān)閉了你的頁面都監(jiān)控不到，還想通過埋點(diǎn)來獲取業(yè)務(wù)和技術(shù)數(shù)據(jù)？
至于緩存就更奇葩了，到底有沒有緩存，到底是200還是304還是沒有請(qǐng)求了，到底版本對(duì)不對(duì)，到底有沒有被代理瞎搞，到底這個(gè)神奇的瀏覽器是怎么處理緩存的……別以為說一句“加個(gè)緩存”，就這么輕輕松松地搞定了。愛掏網(wǎng) - it200.com每一個(gè)把緩存玩好的前端工程師都值得尊敬。愛掏網(wǎng) - it200.com就不說更多的什么localStorage/serviceWorker之類的了。愛掏網(wǎng) - it200.com
說這一大段，并不是要說前端架構(gòu)師搞這些很苦很累，你們要尊重我們。愛掏網(wǎng) - it200.com而是想說，這些不起眼的事情，不如想象的那么容易，很多時(shí)候架構(gòu)師是在幫助工程師探路或者踩坑，把這些東西的技術(shù)方案搞定。愛掏網(wǎng) - it200.com
現(xiàn)階段的前端工程化還不成熟，這是個(gè)切實(shí)的情況。愛掏網(wǎng) - it200.com架構(gòu)師在項(xiàng)目選型的同時(shí)，有相當(dāng)部分的精力會(huì)放到工程化方案的選型上。愛掏網(wǎng) - it200.com是否用webpack，是否用npm，是否用TypeScript，是否用ES6/7/8，是否要babel，是否用PostCSS。愛掏網(wǎng) - it200.com是否要CI，是否要自動(dòng)打包發(fā)布。愛掏網(wǎng) - it200.com是否要分包加載，是否要抽取CSS文件……
這些事，在后端可能不存在，在客戶端可能也不存在，或者即使存在，也被IDE悄悄地代勞了。愛掏網(wǎng) - it200.com作為項(xiàng)目的選型者，寫幾個(gè)依賴，install一下就開工了。愛掏網(wǎng) - it200.com但是前端不行，前端這里有大量的工程化選型或者配置/開發(fā)的任務(wù)。愛掏網(wǎng) - it200.com
作為架構(gòu)師，如何選擇一套好用的、沒有坑的語言/構(gòu)建工具，也不容易。愛掏網(wǎng) - it200.com
我舉個(gè)例子吧，大家可能覺得TypeScript很好，直接用不就好了嗎？殊不知，TypeScript需要配置tsc或者webpack的ts-loader（現(xiàn)在babel也可以了），還有tsconfig文件，以及各種.d.ts文件。愛掏網(wǎng) - it200.com當(dāng)然，即使這樣，也有可能在寫代碼的時(shí)候報(bào)一堆無法解決的錯(cuò)誤，需要你花大量的時(shí)間去研究為什么有這個(gè)做，怎樣可以不報(bào)錯(cuò)（也可能根本就不能不報(bào)錯(cuò)）。愛掏網(wǎng) - it200.com當(dāng)你在Vue中使用TypeScript時(shí)，你需要研究怎樣讓它識(shí)別Vue Component的類型，怎樣做自動(dòng)提示和類型檢查。愛掏網(wǎng) - it200.com當(dāng)你在ajax使用時(shí)會(huì)發(fā)現(xiàn)你要研究怎樣將服務(wù)端返回的數(shù)據(jù)與某個(gè)類型映射起來（然后發(fā)現(xiàn)在runtime時(shí)毛用都沒有）。愛掏網(wǎng) - it200.com
前端架構(gòu)師，也有相當(dāng)多的精力在這上面。愛掏網(wǎng) - it200.com
這是一個(gè)好的現(xiàn)狀嗎？未必，但現(xiàn)狀確實(shí)如此，這個(gè)鍋架構(gòu)師不背誰來背？
所謂架構(gòu)，我理解是綜合考慮目標(biāo)、業(yè)界和團(tuán)隊(duì)，作為合理的方案選擇，既能支撐業(yè)務(wù)的發(fā)展，又能令團(tuán)隊(duì)滿意。愛掏網(wǎng) - it200.com如果能達(dá)到這個(gè)目標(biāo)，自然就是一個(gè)好的架構(gòu)。愛掏網(wǎng) - it200.com目前來看，前端要做到一個(gè)好的架構(gòu)不容易，做的事情并不比后端少。愛掏網(wǎng) - it200.com
至于說前端架構(gòu)師做的所謂的這些架構(gòu)的事情是否高大上，那是另一個(gè)沒有答案的問題。愛掏網(wǎng) - it200.com
作者：TooBug
鏈接：https://juejin.im/post/5b10b00de51d45069f5e0110
來源：掘金
著作權(quán)歸作者所有。愛掏網(wǎng) - it200.com商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。愛掏網(wǎng) - it200.com