# New Generation Web - 我們從前端到微前端的故事 - John Liu

{%hackmd @JSDC2024/INuUpOqWS42gD1_pz5S4Bg %}

Slido：https://app.sli.do/event/bW7brKJsLaNLGoxuE3cHrg

> 開始做筆記
## About Me
- Engineer Manager @ Netskope
- Lecturer - LeetCode, Hisko, Appworks ...

##
- Angular

- PHP CodeIginter


## 元件緊密耦合 Component couple tightly


## 部署緊密耦合
- Too many dependencies

## 技術人尋覓不易
- Fullstack is rare
-

### 目標：
1. 共存和轉移並行
2. API-driven Design (API Gateway)
- Customer third-party to Us
3. 頁面和狀態共享
- Each microservice should share same state
4. 模組化與獨立的 CICD 流程
- 小修改還是可能踩雷

## 混合前端架構

- Let A, B teams to put their modules into the legacy app
- Kubernetes, can orchasture the microservices

### Angular native federation

### Webpack + Module Federation


### Core Library (核心library)
- Maintained by independent Team 獨立團隊去維護
- Storybook
- Each Team have their own versions 不同團隊使用不同版本(升級方便)

### Valtio - shared state 頁面狀態共享
- https://github.com/pmndrs/valtio

## 垂直與水平合作 (共存與轉移並行)
(這裡的箭頭不是要表達上對下的關係，可以視為上下游)

## 新增測試層 (模組化與獨立的 CICD 流程)
- Cypress 能做到 End to End test

## 部署管理 (模組化與獨立的 CICD 流程)

Spinnaker

## We are hiring

## 粉專
https://www.facebook.com/johnliu.software.thinking/

## Slido 提問
1. 混和前端挖空是指嵌入iframe嗎?還是什麼方式。如果不是iframe會不會遇到樣式衝突或是變數衝突的時候
> 獨立 JS 檔案

2. module federation 是用來作微前端的架構工具嗎? 為什麼會選用 module federation ?
> module federation 是微前端的架構工具，提供了較成熟、穩定的 API

3. valtio 可以理解為屬於微前端架構在用的狀態管理工具嗎?
> 是，在公司專案情境中很適合使用 valtio

4. 如果只有前端開發經驗,沒有後端經驗的話, 要如何讓公司仍然有興趣面試看看
> Resume
> 就丟履歷吧！主動在現在公司發掘、爭取不同的專案開發機會

5. 對新手有推薦如何解耦或設計模式的資源嗎?
>

6. 請問微前端後，是不是需要額外的人力去對配置檔案進行維護？
> Yes, extensive effort needed
> 所有人都會去執行和注意這件事

7. 微前端不會有效能問題嗎，各自都用不同的 bundle
> router 當下僅動態顯示一個元件，盡量避免同時載入多個微前端的模組。
> API calling is duplicated
>

8.module federation 可以做到 angular + react + vue 混合嗎
> 可以

9. 對新手有推薦如何解耦或設計模式的資源嗎?
> Design Pattern Guru

10. 請問剛剛說的Ａ 團隊和 B 團隊 開發不同模組 , 如果兩個團隊要使用一個共用的模組 剛剛說會用不同的版本來控制。 如果兩邊同時需要修改共用模組 那要怎麼處理
>
> 有時候要開發特定版本，需要依賴於別團隊的版本

> 聊天區
>