2021laravelconftwslides8

Our approach to Micro
Frontend in Vue.js
Tom Wu
2021.10.17

介紹演講者
Tom Wu
LINE Corp.
2014-2021: Yahoo Inc. Engineer
2018: Yahoo Meetup 主持⼈&講者
2021: LINE Corp. Engineer

緣起
LINE 擁有眾多的產品：LINE TODAY, LINE SPOT, LINE SHOPPING…等，也有不少的
engineering teams，隨著產品愈來愈多，我們想要有個⽅式，能夠更好的讓⼯程師們去
分⼯合作以及盡可能重複使⽤既有的程式碼，減少⼯程師們所需要花費的時間跟⼒氣。
※Source from︓************************

Sharing Components
再加上有⼀個統⼀的平台，可以展⽰所有的 sharing components
Bit Dev
Sharing Components

內容標題
Bit.dev
內容⽂案
※Source from︓https://bit.dev/
副標

比起使⽤別⼈寫好的 component，developers 更傾向⾃⼰寫⼀個。理由：
- 如果是⼀些⼩ component，比如按鈕、標籤之類的，我⾃⼰寫⼀個也很快
- 別⼈寫好的 component，不⼀定能夠完全合⽤我的使⽤情境
- ⾃⼰寫的 component 我能夠有完全的控制權
Sharing Components

Micro Frontend Architecture
※Source from︓https://micro-frontends.org/

- 與使⽤的技術無關（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）
※Source from︓https://micro-frontends.org/

Host Remote
Self-Contained

Pros:
- 可以很簡單的擴展⾴⾯
- 更快的部署（因為每個 module 可以個別部署）
- 不同的 module 可以使⽤不同的 tech stack
- 可以很好的切分開發區塊
- 比較容易測試個別的 modules

Cons:
- 組起來的⾴⾯（Host page）不好測試
- 不同 tech stack 間怎麼溝通，可能會有重複的 assets，比如: 3rd party libs 或是 CSS
files/classes
- 在 individual 開發的結果跟實際組出⾴⾯的時候，可能會有落差
- 不容易在 modules 間 share data (by iframe or other ways)
- 組⾴⾯的⼈很無聊

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 ⽤不可能

社群內有許多框架：
Micro Frontend Architecture – Libraries/Frameworks
- Module Federation
- Qiankun/Single SPA
- Micro App
- …

從 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

以 build/bundle/chunk 來
分享
Module Federation
架構圖

內容標題
Module Federation
內容⽂案
※Source from︓************************
Remote Setting

內容標題
Module Federation
內容⽂案
※Source from︓************************
Host Setting

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

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

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

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
功能

內容標題
Qiankun/Single SPA
內容⽂案
※Source from︓************************
How does it look like

Qiankun/Single SPA
Setting
※Source from︓https://qiankun.umijs.org/guide

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

- ⼤部分 micro frontend framework 不⽀援 SSR，不⽀援像是 Next.js/Nuxt.js
⼀類的 framework
- 因為要⽀援不同的 library/framework，所以需要這些 library/framework 有⼀
些 tweaks/workaround，比如改變 webpack config 去暴露⼀些 render
hooks
- 要實際⽤在 production 上還是問題過多（可以從各 framework 的 issues 跟
gitter 看得出來）
整理⼀下

- Share Self-Contained Modules，讓開發者可以隨取即⽤，⽽不只是分享⼀個
⼩ component，讓⼤家比較有動⼒去重複使⽤既有的程式碼
- 這些 Self-Contained Modules 可以個別被獨立開發，讓不同的 team 各⾃處
理
- Modules 之間可以溝通
- ⽀援 SSR
- ⽀援既有的 frameworks 像是 Next.js/Nuxt.js
梳理⼀下
根據前⾯的 survey 再重新梳理我們的需求

內容標題
Pre-installed Self-Contained Modules
架構圖
Pre-install

Host:
- 可以是 Nuxt.js/Next.js based 的 app
Remote(self-contained modules):
- 能夠被獨立開發，獨立被 run 起來
- 能夠被 export 成被 Host import 的 chunks，並以 module 為單位
- Module 要包含 fetch data 的部分，以及內部的邏輯，讓它是個獨立⾃成⼀格的個體
- 分別⽀援 Nuxt.js/Next.js

- 使⽤ yarn/npm 去 pre-install，在 build time 時 import 進來，所以沒有 dynamic import 時會
遇到的 proxy or routing 問題
- 開發時使⽤ Nuxt.js/Next.js 做基底，所以能夠同時⽀援 client/server side render
- 使⽤ peerDependencies 去處理共⽤ library，減少 duplicated lib 的問題

- 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 為例

以 Nuxt 為例
Configuration
Layer
Presentation
Layer
JS Logic Data Layer

以 Nuxt 為例
Team A
Team B
Module
A
Module
B
App A
App B

獨立 module 開發預覽

Host 開發預覽

我們還是可以利⽤ bit.dev，來幫助我們有個平台去看所有可使⽤的 modules，也幫助 planner 或是設計師
在規劃的時候，知道⼿裡有什麼東⻄可以⽤

失去的好處
- 獨立部署
- 獨立測試
- 相容不同 tech stack

Micro frontend 有很多種實現⽅式
- Iframe
- WebComponent
- 沙箱隔離
- Module Federation
- Pre-Install and treat as whole app in the end

What‘s the next?
- Pre-Install Self-Contained Modules
- Module Federation 還是可以期待

2021laravelconftwslides8

More Related Content

What's hot

Similar to 2021laravelconftwslides8

More from LiviaLiaoFontech

2021laravelconftwslides8