大型公司如亞馬遜、Meta、谷歌或 Salesforce等等,均衡使用混合前端技術堆疊網站,雖然從「程式碼整潔」的角度來看,這似乎有悖常理,但這是一種經過深思熟慮的架構策略,原因如下:
1) 微前端架構與團隊自主性
在大型公司中,往往是成千上萬的工程師共同開發同一個產品,如果整個網站是單一的 React 或 Angular 單體應用,那麼每個團隊都會受到單一部署流程的限制。於是,公司使用微前端,將頁面的不同部分(例如搜尋列、產品推薦和購物車)由不同的團隊管理。再者,A 團隊可能傾向於使用 React 來建立複雜的互動式儀表板,而 B 團隊則可能使用 Svelte 來建立高效能、輕量級的落地頁,只要他們遵守共同的約定,就可以獨立部署,而不會破壞對方團隊的程式碼。
2) 大型公司很少有時間「暫停」業務六個月來重寫舊網站。當公司決定從舊技術(例如 jQuery 或 AngularJS)遷移到現代技術(例如 React)時,他們會逐頁或逐組件地進行遷移,在這個長達數年的過渡期內,網站自然會成為一個混合體。
3) 當 Salesforce 或 Google 等巨頭收購新創公司時,這家新創公司會擁有自己的科技堆疊。通常情況下,透過 Web 元件將新創公司現有的如Vue.js 控制面板整合到母公司的 React 生態系統中,比從頭開始重寫整個產品更具成本效益。
4) 不同的框架各有優勢,公司的主頁需要對搜尋引擎友善且速度極快,他們可能會使用 Astro 或 Next.js 來產生靜態頁面。然而,登入使用者儀表板可能是一個重量級的 React 或 Angular 單頁應用程式 (SPA),因為 SEO 在這裡並不重要,但複雜的狀態管理卻至關重要。所以,內部管理面板通常使用開發速度最快的框架來建構(例如 Retool 或舊版的 Angular),而面向客戶的網站則使用最前沿的框架。
5) 為了在不同的框架中保持一致的品牌形象(顏色、按鈕、字體),許多大型公司使用 Web Components(例如 Lit、Stencil)來建立其設計系統,由於 Web Components 是瀏覽器原生元件,因此可以將其新增至 React 應用程式、Vue 應用,甚至是純 HTML 頁面中。即使「邏輯」分散在不同的框架中,也能實現「外觀和感覺」的統一。