Save 37% off PRO during our Black Friday Sale! »

20211017 - Our approach to Micro Frontend in Vue

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

2102a6b8760bd6f57f672805723dd83a?s=128

LINE Developers Taiwan
PRO

October 17, 2021
Tweet

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 感謝聆聽