2018年的前端架構師都在幹嗎？

前言：本文整理自本身在知乎問題《2018年的前端是否有『架構』可言?》的回答。聽說是有掘金限量筆記本能夠拿，因而很沒骨氣地整理成文章發出來。若是你們也喜歡掘金的筆記本，也來發文章哦。

皮一下

一，明確下架構的定義，在知乎的這個問題中，題主說「整個後端的架構是很是複雜和龐大的，一個好的架構師須要在數不清的方案組合中進行架構選擇」。看起來架構彷佛是一個在無數方案組件中作選擇的問題。

因此，若是回答「前端的方案組合不少，因此架構也很麻煩」，是否就能夠迴應這個問題了。那麼，前端方案組合多嗎？確實是多如牛毛吧，比後端多不少不少吧。

以上是牛角尖。

1、關注點

後端架構的目標，題主也說到了，高性能、高可用、可擴展、安全。

至於後面說的那麼多知識點，雖然都是有用的，可是難免有些掉書袋了。高可用有各類難點，有各個方面的高可用須要關注，但事實上，後端通過這麼多年的發展，尤爲是海量用戶場景大量出現之後，這些問題的解決方案也都很是明確了。若是不明確的也是業界公認暫時無解的問題，例如分佈式CAP等。至於其中碰到的具體問題的的具體技術上的策略，若是還須要本身從頭去想，那這個後端工程師（還不叫架構師）應該是不合格的。我理解，作後端的架構其實基本上是在前人整理過的各類場景的解決方案中作選擇。

那麼前端呢？目標也是高性能、高可用、可擴展、安全嗎？因此只要數據庫不用選，語言不用選，框架三選一，架構就簡單了？我認爲這是對前端的關注點理解不到位的體現。

2、前端的核心關注點——用戶

做爲前端工程師，關注點是什麼呢？首先就是用戶，包括用戶側的操做和用戶體驗。

例如一個界面給到用戶，好比報錯是紅色文字仍是輸入框變紅？Loading放頂上仍是頁面中間？用戶點擊提交後按鈕顯示Loading仍是灰掉？轉菊花仍是骨架屏？先顯示佔位圖仍是先白屏？

再好比用戶訪問個人網站快不快，用起來爽不爽，會不會以爲卡，會不會以爲low。這些東西會決定你的頁面是單頁面仍是多頁面，URL如何設計，加載策略是什麼？

我認爲這些纔是前端最該關注的東西。

因此我作的架構一點都不高大上。僅僅是決定如何讓網站加載更快，如何不引入沒必要要的代碼，把沒必要要的代碼幹掉，如何讓用戶加載最少的內容，如何讓用戶最快看到效果，前端渲染仍是後端渲染，同步輸出仍是異步輸出等等。

是否是以爲一點都不是架構師乾的事？但前端構架師確實就是在幹這些事。因此，你要說前端架構師是一個技術上的架構師，倒還不如說是更關注用戶的體驗架構師。從這個角度來講，前端架構師和跟後端架構師的關注點不在一個維度上。

3、工程難度

題主說，「最多算上錯誤監控、埋點方案、緩存策略等偏運維的決策」，彷彿這些是一句話能夠搞定的很簡單的事情。

是，後端錯誤監控不難，無非try..catch嘛，再不濟進程掛了還有各類運維工具能夠救人於水火。可是前端呢？一個ajax加載失敗了怎麼監控，一個css加載失敗了怎麼監控，再極端一點，瀏覽器卡死了怎麼監控，頁面崩潰了怎麼監控？

至於埋點，能作得好的我都很是佩服。連用戶關閉了你的頁面都監控不到，還想經過埋點來獲取業務和技術數據？

至於緩存就更奇葩了，到底有沒有緩存，究竟是200仍是304仍是沒有請求了，到底版本對不對，到底有沒有被代理瞎搞，到底這個神奇的瀏覽器是怎麼處理緩存的……別覺得說一句「加個緩存」，就這麼輕輕鬆鬆地搞定了。每個把緩存玩好的前端工程師都值得尊敬。就不說更多的什麼localStorage/serviceWorker之類的了。

說這一大段，並非要說前端架構師搞這些很苦很累，大家要尊重咱們。而是想說，這些不起眼的事情，不如想象的那麼容易，不少時候架構師是在幫助工程師探路或者踩坑，把這些東西的技術方案搞定。

4、面向團隊

現階段的前端工程化還不成熟，這是個切實的狀況。架構師在項目選型的同時，有至關部分的精力會放到工程化方案的選型上。是否用webpack，是否用npm，是否用TypeScript，是否用ES6/7/8，是否要babel，是否用PostCSS。是否要CI，是否要自動打包發佈。是否要分包加載，是否要抽取CSS文件……

這些事，在後端可能不存在，在客戶端可能也不存在，或者即便存在，也被IDE悄悄地代勞了。做爲項目的選型者，寫幾個依賴，install一下就開工了。可是前端不行，前端這裏有大量的工程化選型或者配置/開發的任務。

做爲架構師，如何選擇一套好用的、沒有坑的語言/構建工具，也不容易。

我舉個例子吧，你們可能以爲TypeScript很好，直接用不就行了嗎？卻不知，TypeScript須要配置tsc或者webpack的ts-loader（如今babel也能夠了），還有tsconfig文件，以及各類.d.ts文件。固然，即便這樣，也有可能在寫代碼的時候報一堆沒法解決的錯誤，須要你花大量的時間去研究爲何有這個作，怎樣能夠不報錯（也可能根本就不能不報錯）。當你在Vue中使用TypeScript時，你須要研究怎樣讓它識別Vue Component的類型，怎樣作自動提示和類型檢查。當你在ajax使用時會發現你要研究怎樣將服務端返回的數據與某個類型映射起來（而後發如今runtime時毛用都沒有）。

前端架構師，也有至關多的精力在這上面。

這是一個好的現狀嗎？未必，但現狀確實如此，這個鍋架構師不背誰來背？

5、小結

所謂架構，我理解是綜合考慮目標、業界和團隊，做爲合理的方案選擇，既能支撐業務的發展，又能令團隊滿意。若是能達到這個目標，天然就是一個好的架構。目前來看，前端要作到一個好的架構不容易，作的事情並不比後端少。

至於說前端架構師作的所謂的這些架構的事情是否高大上，那是另外一個沒有答案的問題。