認識微前端:一種用於前端 Web 開發的微服務

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"對於Web應用來說,前端越來越大,後端越來越不重要。現代 Web 應用程序 80%-90% 的代碼爲前端代碼,後端代碼非常少。可以想象,現在大多數新的web應用程序都面臨着類似的情況。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Web 應用程序也會隨着時間而變化,開發技術和框架也是如此。這需要支持允許不同的前端框架共存,例如在Vue2中構建的舊模塊需要與React或者Vue3中構建的新模塊集成。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"單體式應用越來越臃腫","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"對大型前端應用程序採用單一方法將變得笨重,需要有一種方法將其分解爲可以獨立運行的較小模塊。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"例如:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"apps.devpoint.cn/micro","attrs":{}}],"attrs":{}},{"type":"text","text":":使用靜態HTML構建的入口頁面","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"apps.devpoint.cn/settings","attrs":{}}],"attrs":{}},{"type":"text","text":":使用vue2構建的舊模塊","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"apps.devpoint.cn/dashboard","attrs":{}}],"attrs":{}},{"type":"text","text":":使用vue3構建的新模塊","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"接下來需要做一下幾件事:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"一個純JavaScript的代碼庫,管理路由和用戶會話,還有一些公共的CSS。兩者都應該儘可能的輕。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"一個單獨的模塊集,“小應用程序”,構建於各種框架,存儲在不同的代碼庫中。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"一個部署系統,它將來自不同代碼庫的所有模塊集成在一起,並在模塊更新時部署到服務器。","attrs":{}}]}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"解決方案是微前端","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"事實證明,很多公司在使用相同的方法,常用術語叫“微前端(Micro frontends)”。Micro Frontends 一詞於 2016 年底首次出現在 ","attrs":{}},{"type":"link","attrs":{"href":"https://www.thoughtworks.com/radar/techniques/micro-frontends","title":"","type":null},"content":[{"type":"text","text":"ThoughtWorks Technology Radar","attrs":{}}]},{"type":"text","text":" 中,將微服務的概念擴展到前端領域。在微服務框架裏面可以構建一個功能豐富且功能強大的瀏覽器應用程序,即單頁應用程序,使其位於微服務架構之上。隨着時間的推移,前端面臨不斷增長的需求和難以維護代碼,這就是常說的前端單體架構。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"微前端背後的思路是將網站或 Web 應用程序視爲由獨立團隊開發擁有的功能組合。每個團隊都有自己關心和專攻的不同業務或任務領域。團隊是跨職能的,從數據庫到用戶界面、端到端地開發其功能。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"前端單體架構","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/0d/0d36a9a4378a4c2f9a4866cdb1e306bb.jpeg","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"微前端架構","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/11/115466f9c22d89d8f39c9edcfaa24e0d.jpeg","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"實現微前端","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"以下是實現微前端的幾種常見的方法,但不限於以下方案:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":1,"normalizeStart":1},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://github.com/single-spa/single-spa","title":"","type":null},"content":[{"type":"text","text":"Single-SPA","attrs":{}}]},{"type":"text","text":"(一個前端微服務的javascript框架):它可以在同一個頁面上組合多個框架,而不需要刷新頁面(請看這個集成了React、Vue、Angular 1、Angular 2等","attrs":{}},{"type":"link","attrs":{"href":"https://single-spa.surge.sh/","title":"","type":null},"content":[{"type":"text","text":"DEMO","attrs":{}}]},{"type":"text","text":")。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"通過URL的不同集成多個單頁應用程序:這些應用程序使用 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"npm/bower","attrs":{}}],"attrs":{}},{"type":"text","text":" 組件實現集成。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":3,"align":null,"origin":null},"content":[{"type":"text","text":"將微應用隔離到 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"iframe","attrs":{}}],"attrs":{}},{"type":"text","text":" 中使用庫和 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Window.postMessage","attrs":{}}],"attrs":{}},{"type":"text","text":" API進行協調。","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"iframe","attrs":{}}],"attrs":{}},{"type":"text","text":" 數據狀態共享由其父窗口公開的API。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":4,"align":null,"origin":null},"content":[{"type":"text","text":"通過共享事件總線(例如 ","attrs":{}},{"type":"link","attrs":{"href":"https://github.com/chrisdavies/eev","title":"","type":null},"content":[{"type":"text","text":"eev","attrs":{}}]},{"type":"text","text":" )實現不同的模塊間的通信,每個模塊使用自己的框架構建,只要處理傳入和傳出事件。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":5,"align":null,"origin":null},"content":[{"type":"text","text":"使用 Varnish Cache 集成不同的模塊。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":6,"align":null,"origin":null},"content":[{"type":"text","text":"Web組件集成:Web 組件是作爲 W3C 規範提出的一組標準。允許創建可以導入到 Web 應用程序中的可重用組件,就像可以導入任何網頁的小部件。可以將Web組件與後端一起打包到微服務中,將前端應用程序簡化爲路由,並由路由來對不同Web組件進行編排。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":7,"align":null,"origin":null},"content":[{"type":"text","text":"“Blackbox”React 組件。","attrs":{}}]}]}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"資源","attrs":{}}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://github.com/single-spa/single-spa","title":"","type":null},"content":[{"type":"text","text":"Single-SPA框架","attrs":{}}]},{"type":"text","text":"(請參見上文)。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"micro-frontends.org( ","attrs":{}},{"type":"link","attrs":{"href":"https://github.com/neuland/micro-frontends","title":"","type":null},"content":[{"type":"text","text":"GitHub倉庫","attrs":{}}]},{"type":"text","text":" ),包含“與多個獨立團隊一起構建現代 Web 應用程序的技術、策略和方法”。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://www.mosaic9.org/","title":"","type":null},"content":[{"type":"text","text":"Project Mosaic","attrs":{}}]},{"type":"text","text":",一組支持大型網站微服務風格架構的庫。","attrs":{}}]}]}],"attrs":{}}]}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章