【干貨】前端架構有哪些核心問題？

  前段時間，我們發布了《深度解讀當代前端架構進化史，下一個趨勢在哪?》這篇萬字長文，文章梳理了從經典MVC開始，到今天包括JavaScript 驅動的 SSR 和 GraphQL在內的前端架構的新面孔的演進。值得關注的是，如今的前端框架是面向組件的。除此之外，在實際工作中，我們還要面臨新的環境與挑戰。本文作者Winter提煉了前端架構中的核心問題，希望對你的理論認識與實踐有所幫助。

  在傳統桌面軟件開發中，架構師是一種通過設計架構保證團隊能夠良好分工和有序工作的崗位。在工程領域，我們凡是要做點什么事兒，都會有明確的目的性，這個目的性，一定是為了完成生產服務業務的。

  為什么桌面軟件開發需要架構師和架構設計呢?因為桌面軟件開發具有高度的復雜性，如果沒有架構，就沒法分解成互相耦合低的模塊來分工。所以一般來說，架構是為了分工而存在的。但是到了前端領域，這個問題是否還存在呢?答案是，不存在。

  前端是個天然按照頁面解耦的技術，在多頁面架構中，頁面的復雜度大約剛好適合一個人的工作量。(所以，我們的結論是，前端根本不需要架構設計。當然，我這句話是開玩笑的。)

  前端不存在分工問題，但是在多人協同時，仍然要解決質量和效率的問題，這就需要組件化了。除此之外還有前端特有的兼容性問題，也是需要從架構的角度去解決的。

  對于一些追求極致的團隊來說，會挑戰“單頁面應用”，通過單頁面應用來提升用戶體驗，單頁面應用的升級版本是谷歌提出的PWA，PWA既是業務方案也是技術方案，在技術層面，它近乎苛刻地規定了網頁的各方面的體驗標準。

  前端領域還有一個特有的生態：框架，第一代前端框架(如jQuery, PrototypeJS)重點解決了兼容問題和API的易用性問題，在現代瀏覽器普及之后，這些問題逐漸變得不存在或者不重要，所以第二代前端框架(如Vue，Angular，React)重點解決了組件化問題。選擇合適的框架，可以節約架構的成本，還能夠享受社區資源。

  接下來，我會圍繞前端架構的幾個核心問題，為你介紹前端架構工作。

  組件化

  組件化講起來是個非常簡單的概念，前端主要的開發工作是UI開發，而把UI上的各種元素分解成組件，規定組件的標準，實現組件運行的環境就是組件化了。

  現行的組件化方案，目前有五種主流選擇：

  Web Component;

  Vue;

  React;

  Angular;

  自研。

  Web Component 是W3C推行的規范，理論上是未來的選項，但是實際上這份標準的狀態堪憂。Shadow DOM 的設計比較復雜，一般的前端掌握起來都比較困難。

  此外，CSS也比較難以應用，需要依靠CSS Houdini。目前來說，我還沒有看到那個前端團隊實際在使用Web Component作為組件化方案。當然，它的優勢也非常明顯：不需要任何額外的運行時支持，就能在現代瀏覽器環境運行，也可以跟HTML無縫結合。

  Vue 是目前最受歡迎的框架(從Github star來看)，由華人程序員尤小右開發和維護。它有兩個主要特點：一個是比較符合原本的JS/CSS/HTML書寫習慣;另一個是它綁定了MVVM模式，直接確定了UI架構，通過DSL的支持，數據交互非常簡潔。

  React 是Facebook推行的新一代Web框架。它利用JSX模式，把HTML、CSS和JS都放進了JS文件中，對于不喜歡CSS和HTML的前端工程師來說，是很理想的。它還可以遷移到React Native，直接編寫簡單的客戶端應用。

  Angular 是Google推出的Web框架，它是比較標準的MVVM模式。Angular曾經因為大版本兼容性而飽受詬病，目前它的核心競爭力是與TypeScript結合得較好。

  上面是我對幾種方案的簡單介紹。但是實際上，我們做技術選型時的主要依據是團隊的現狀，開發移動端還是桌面端、是否跟Native結合、團隊成員的技能分布都是需要考慮的因素，這些框架本身的特點，目前我認為僅僅是一種偏好選項，而不是關鍵因素。

  兼容性和適配性

  前端開發的特有問題就是兼容性，到了移動時代，需要面對不同的機型，我們又需要解決適配性問題。

  兼容性問題到2011年左右都是前端的主旋律，但是在之后，隨著現代瀏覽器的逐漸普及，兼容性問題逐漸減小，所以我們這里就不多談兼容性問題了。

  適配問題主要適配的是屏幕的三個要素：

  單位英寸像素數(Pixel Per Inch，PPI)：現實世界的一英寸內像素數，決定了屏幕的顯示質量。

  設備像素比率(Device Pixel Ratio，DPR)：物理像素與邏輯像素(px)的對應關系。

  分辨率(Resolution)：屏幕區域的寬高所占像素數。

  在當前環境下，分辨率適配可以使用vw單位解決，DPR適配則需要用到CSS的viewport規則來控制縮放比例解決，而PPI主要影響的是文字，可以采用media規則來適配。

  單頁應用

  前文已經講過，前端架構的解耦問題不大，因為頁面是天然解耦的，但是，大家都知道，瀏覽器加載HTML時是會有白屏過程的，對追求極致體驗的團隊來說，希望能夠進一步提升體驗，于是就有了“單頁應用(SPA)”的概念。

  單頁應用是把多個頁面的內容實現在同一個實際頁面內的技術，因為失去了頁面的天然解耦，所以就要解決耦合問題。也就是說，我們要在一個“物理頁面”內，通過架構設計來實現若干個“邏輯頁面”。邏輯頁面應該做到獨立開發和獨立發布，一種思路是，每個邏輯頁面一個JS，用一個SPA框架加載JS文件。從交互的角度，這并不困難，但是，這里還有一個隱性需求：保持前進后退歷史。

  一般來說，前進后退歷史使用URL的Hash部分來控制，但是onhashchange事件并沒有提供前進或者后退信息，目前還沒有完美的解決方案，只能犧牲一部分體驗。實現單頁應用的邏輯頁面發布需要改造發布系統，在工程上，這也是一個比較大的挑戰。

  擴展前端新邊界

  除了解決現實問題，我認為前端架構的職責還包括擴展前端的邊界，所以前端架構還包含了很多Native開發任務：如客戶端和前端結合的方案 Weex 和 React Native、前端和圖形學結合的方案 GCanvas、前端的3D框架Three.js，這些都是試圖用架構的手段賦予前端新的能力的嘗試。

  這些具體的嘗試涉及很多領域知識，我這里就不做詳細介紹了，但是如果你成為了一個前端架構師，我希望你也把“拓展前端邊界”當做團隊的核心目標之一。

  總結

  本文從宏觀的角度介紹了前端架構相關的知識，重點介紹了“組件化”“適配性”“單頁應用”三個前端架構需要解決的核心問題，組件化在社區有很多現成的方案，我們需要做的主要工作是框架選型。適配性需要用到CSS的幾種特性：vw單位、viewport規則和media規則，單頁應用重點是邏輯頁面解耦、獨立開發和發布和保持前進后退歷史。