20211017 - Our approach to Micro Frontend in Vue

🤘大會網站：https://laravelconf.tw/
👉 議題程度 ：中階 🔴🔴⚫
👉 分享大綱：
在 LINE 裡面有眾多的產品，我們想找出一個方式能夠降低開發新功能的 effort。Micro Front-End 架構是我們想嘗試的切入點，切開頁面上的模組來尋找可能的分享方式，這個 session 會跟你分享我們嘗試的整個過程，以及可能的解法。
👉講者介紹：
- LINE front-end engineer
- ex-yahoo tech lead

Transcript

1. Our approach to Micro Frontend in Vue.js Tom Wu 2021.10.17
2. 介紹演講者 Tom Wu LINE Corp. 2014-2021: Yahoo Inc. Engineer 2018: Yahoo Meetup 主持⼈&講者 2021: LINE Corp. Engineer
3. 緣起 LINE 擁有眾多的產品：LINE TODAY, LINE SPOT, LINE SHOPPING…等，也有不少的 engineering teams，隨著產品愈來愈多，我們想要有個⽅式，能夠更好的讓⼯程師們去 分⼯合作以及盡可能重複使⽤既有的程式碼，減少⼯程師們所需要花費的時間跟⼒氣。 ※Source from︓************************
4. Sharing Components 再加上有⼀個統⼀的平台，可以展⽰所有的 sharing components Bit Dev Sharing Components
5. 內容標題 Bit.dev 內容⽂案 ※Source from︓https://bit.dev/ 副標
6. 內容標題 Bit.dev 內容⽂案 ※Source from︓https://bit.dev/ 副標
7. However 使⽤率卻不⾼
8. 比起使⽤別⼈寫好的 component，developers 更傾向⾃⼰寫⼀個。理由： - 如果是⼀些⼩ component，比如按鈕、標籤之類的，我⾃⼰寫⼀個也很快 - 別⼈寫好的 component，不⼀定能夠完全合⽤我的使⽤情境 - ⾃⼰寫的 component 我能夠有完全的控制權 Sharing Components
9. Micro Frontend Architecture ※Source from︓https://micro-frontends.org/
10. - 與使⽤的技術無關（Be Technology Agnostic） - 能夠區隔個團隊的程式碼 （Isolate Team Code） - 區隔不同的資源，⽤前綴字去區隔 css, local storage naming 等等 （Establish Team Prefixes） (JS/styles isolation) - 盡量使⽤原⽣的⽅式在程式碼之間溝通（Favor Native Browser Features over Custom APIs） - 組出來的網站要夠有彈性夠堅固（Build a Resilient Site） Micro Frontend Architecture ※Source from︓https://micro-frontends.org/
11. Micro Frontend Architecture Host Remote Self-Contained
12. Pros: - 可以很簡單的擴展⾴⾯ - 更快的部署（因為每個 module 可以個別部署） - 不同的 module 可以使⽤不同的 tech stack - 可以很好的切分開發區塊 - 比較容易測試個別的 modules Micro Frontend Architecture
13. Cons: - 組起來的⾴⾯（Host page）不好測試 - 不同 tech stack 間怎麼溝通，可能會有重複的 assets，比如: 3rd party libs 或是 CSS files/classes - 在 individual 開發的結果跟實際組出⾴⾯的時候，可能會有落差 - 不容易在 modules 間 share data (by iframe or other ways) - 組⾴⾯的⼈很無聊 Micro Frontend Architecture
14. Pros: - 做到原⽣的 JS, styles 隔離 - 做到 Technology Agnostic，你想⽤什麼 tech stack 都可以 Micro Frontend Architecture - Iframe(Utility Platform) Cons: - 速度慢，每個 iframe 都要重複 fetch 它需要的 assets 以及 build DOM/CSSDOM tree - Iframe 與 host 的溝通不容易 - Iframe 裡⾯的東⻄無法超出它的範圍，比如某個 iframe 裏⾯實作了 dialog 的功能，但他只能存在於 此 iframe 裡，想要拉出來給 host ⽤不可能
15. 社群內有許多框架： Micro Frontend Architecture – Libraries/Frameworks - Module Federation - Qiankun/Single SPA - Micro App - …
16. 從 Bundle Level 來看 Module Federation Multiple separate builds should form a single application. These separate builds should not have dependencies between each other, so they can be developed and deployed individually. ※Source from︓https://medium.com/swlh/webpack-5-module-federation-a-ga me-changer-to-javascript-architecture-bcdd30e02669
17. 以 build/bundle/chunk 來 分享 Module Federation 架構圖
18. 內容標題 Module Federation 內容⽂案 ※Source from︓************************ Remote Setting
19. 內容標題 Module Federation 內容⽂案 ※Source from︓************************ Host Setting
20. Module Federation - 個別的 app 彼此是 standalone 的，可以分開 deploy，可以互相引⽤ - LINE TODAY 現在已經是⾃⼰⼀個完善的 app server，可以在改動最⼩的情況下，把 TODAY server 當 module server 來⽤ - 另外可以再起⼀個新的 module server，讓他 host 所有 sharable 的 chunk，⾃⼰也可以 host ⼀個 module list site，讓想要引⽤的 developer 去看 demo。 - 如果某個 module 有線上的問題，可以只重新 deploy 有問題的 module 就好 The benefits
21. Module Federation - 對於 SSR 的⽀援度有問題，無法在 server side 簡單的拉到需要的 chunk，需要不少的 workaround 去處理 - ⽬前只有 Webpack 5 ⽀援，Nuxt 2 只⽀援到 Webpack 4，所以 Nuxt base 的專案⽬前無法 使⽤（October 12, 2021, 10 PM GMT+8 會推出 Nuxt 3） - 在 Next.js 上使⽤在拉 asset 的時候會有 routing 的問題，需要搭配 MF 作者⾃⼰寫的 extension 去 workaround Problems we bumped into
22. Qiankun is an implementation of Micro Frontends, which based on single-spa. It aims to make it easier and painless to build a production-ready microfront-end architecture system. Qiankun/Single SPA ※Source from︓ https://qiankun.umijs.org/guide
23. Qiankun/Single SPA - 與使⽤的技術無關（Technology Agnostic） - HTML Entry 接入⽅式（HTML Entry access mode） - 樣式隔離（Style Isolation） - JS 沙盒隔離（JS Sandbox） by Proxy - 預載入資源（Prefetch Assets） ※Source from︓https://qiankun.umijs.org/guide 功能
24. 內容標題 Qiankun/Single SPA 內容⽂案 ※Source from︓************************ How does it look like
25. Qiankun/Single SPA Setting ※Source from︓https://qiankun.umijs.org/guide
26. Qiankun/Single SPA - Micro apps 沒辦法 server-side render - Micro apps 也不能使⽤ next.js, nuxt.js 等框架，因為它需要你暴露 mount 的 function 以及需 要⼀個啟動⽂件，但 next/nuxt 都已經包起來，⽤ plugin 的⽅式插入，基本上能夠更動的就是 (next|nuxt).config.js Issue we bumped into
27. - ⼤部分 micro frontend framework 不⽀援 SSR，不⽀援像是 Next.js/Nuxt.js ⼀類的 framework - 因為要⽀援不同的 library/framework，所以需要這些 library/framework 有⼀ 些 tweaks/workaround，比如改變 webpack config 去暴露⼀些 render hooks - 要實際⽤在 production 上還是問題過多（可以從各 framework 的 issues 跟 gitter 看得出來） 整理⼀下
28. - Share Self-Contained Modules，讓開發者可以隨取即⽤，⽽不只是分享⼀個 ⼩ component，讓⼤家比較有動⼒去重複使⽤既有的程式碼 - 這些 Self-Contained Modules 可以個別被獨立開發，讓不同的 team 各⾃處 理 - Modules 之間可以溝通 - ⽀援 SSR - ⽀援既有的 frameworks 像是 Next.js/Nuxt.js 梳理⼀下 根據前⾯的 survey 再重新梳理我們的需求
29. 內容標題 Pre-installed Self-Contained Modules 架構圖 Pre-install
30. Host: - 可以是 Nuxt.js/Next.js based 的 app Remote(self-contained modules): - 能夠被獨立開發，獨立被 run 起來 - 能夠被 export 成被 Host import 的 chunks，並以 module 為單位 - Module 要包含 fetch data 的部分，以及內部的邏輯，讓它是個獨立⾃成⼀格的個體 - 分別⽀援 Nuxt.js/Next.js Pre-installed Self-Contained Modules
31. Pre-installed Self-Contained Modules - 使⽤ yarn/npm 去 pre-install，在 build time 時 import 進來，所以沒有 dynamic import 時會 遇到的 proxy or routing 問題 - 開發時使⽤ Nuxt.js/Next.js 做基底，所以能夠同時⽀援 client/server side render - 使⽤ peerDependencies 去處理共⽤ library，減少 duplicated lib 的問題
32. Pre-installed Self-Contained Modules - Nuxt.js 的 fetch() 可以在任意 component 拉資料： - On the server, before the initial page is rendered - On the client, some time after the component is mounted - 利⽤這個特性，我們可以讓個別的 modules ⾃⼰處理 data 的抓取，然後做成 self-contained modules - 使⽤ registerModule 來把個別的 store 註冊進去 host - 如果是 Next.js 我們就要⾃⼰定義 provider 和 consumer，以及考慮如何組合 store 以 Nuxt 為例
33. Pre-installed Self-Contained Modules 以 Nuxt 為例 Configuration Layer Presentation Layer JS Logic Data Layer
34. Pre-installed Self-Contained Modules 以 Nuxt 為例 Team A Team B Module A Module B App A App B
35. Pre-installed Self-Contained Modules 獨立 module 開發預覽
36. Pre-installed Self-Contained Modules Host 開發預覽
37. Pre-installed Self-Contained Modules 我們還是可以利⽤ bit.dev，來幫助我們有個平台去看所有可使⽤的 modules，也幫助 planner 或是設計師 在規劃的時候，知道⼿裡有什麼東⻄可以⽤
38. Pre-installed Self-Contained Modules 失去的好處 - 獨立部署 - 獨立測試 - 相容不同 tech stack
39. Micro frontend 有很多種實現⽅式 Micro Frontend Architecture - Iframe - WebComponent - 沙箱隔離 - Module Federation - Pre-Install and treat as whole app in the end
40. What‘s the next? - Pre-Install Self-Contained Modules - Module Federation 還是可以期待
41. THANK YOU 感謝聆聽