---
tags: jsdc2021
---

# #Session 3 從前端邁向全端 - 前端開發者不該錯過的 Serverless 技術

{%hackmd 2YoCBdBPTjmHXDr9lEpWuQ %}

> 從這開始
> 可以直接打字做共筆囉 :point_down:

Kyle Mo 莫力全

## 開場詞

- 主要改變後端生態
- 前端也有好處


## Agenda


## 前端開發模式的演進


### 模板渲染的動態頁面

- 早期：前端表單送後端
- 後端語言 + 模板語言
- 網頁工程化

### AJAX 帶來的前後端分離 [1.0]

- 前端
- 使用者體驗
- 後端
- 商業邏輯
- 資料串接和溝通
- "前端工程師" 的誕生

### Node.js 帶來的前端工程化 [2.0]

- Node.js / NPM
- 加速網站部署流程
- 前端開發邁向工程化、標準化、規範化、模組化
-

### 基於 Node.js 的全端開發 [2.0]

- Browser -> Server!
- 全端開發

### 大前端時代 [2.5]

- 供通點
- 跨時代的技術所引發
- 不會說 3.0 而是 2.5
- React.js / Vue.js / Angular ...
- 前端跨越到後端的開發
- 跨平台
- React Native
- Electron
- Flutter

### 下一步

- Serverless (3.0 or not, maybe?)

## 前端往全端的困難

- 通常自稱 Full Stack 都是廢物 （此為業界網路流傳）
<!-- 贊同 :+1: -->
<!-- 我就是廢物 -->
<!-- 我也碰全端，但我不會說自己全端 orz -->

- 
- 大部分的 web 開發者還是偏向其中一端
- 

## 前端為何需要後端技能樹

- 上文不代表前端不要後端技能
- Server-Side Rendering
- 
- Next.js / `getServerSideProps`
- 
- 不是很好的寫法
- 只是示範
- BFF (Backend For Frontend)
- 
- Direct CTM Communication
- 
- 用戶端會跟服務高 couple
- Round Trips (network)
- delay
- Security
- API Public
- DRY
- 通用、重複的邏輯
- 抽成一層
- API Gateway Pattern
- 
- Reverse Proxy
- Requests Aggregation
- Decouple
- Extract Common Logics
- 
- API Pattern 可能產生問題
- 每個平台需要的資料不一樣
- ex. 手機不需要大量資料
- 架構造成混亂
- BFF 就是 solution
- One Backend Per User Experience

### Obstacles


- 有前端以外的團隊參與維護
- 有很多地方需要考慮
- 前端適合商業邏輯、API
- 其他部分交給 Serverless

## Serverless


- 前端專注上層開發
- Serverless 管理底層內容
- FaaS X BaaS
- Platforms
- AWS Lambda
- Google CF
- Google Cloud Run
- Azure Functions
- Firebase
- Message Queue
- Cloud Storage
- Logging
- Stateless
- 不適合在 containers 放資料
- 無法保證 container 會續存
- 需要外部服務


### 好處與壞處

### Adv

- 專注商業邏輯
- Pay as you go
- 
- Auto scaling
- 快速部署
-

#### D.Adv

- 與 Cloud Provider 過於耦合
- 冷啟動與 Latency <!-- 用過 CF, Cloud Run 有感-->
- 不適合長期執行與高並行作業
- Serverless 服務有限制
- 
- Serverless 貴貴

### 服務提供商


- 補充
- Vercel
- Bingo
- Firebase Hosting

### Serverless 的願景


- Backend Engineer 不會被取代
- 不是每個狀況適合 Serverless

- 前端都能做了！

## 總結


從前端走向全端