前端開發者不該錯過的
Serverless 技術
Kyle Mo
@JSDC 2021
From Frontend To Full-Stack
Be More Powerful 💪
Kyle Mo
Software Engineer @ Onedegree
Writer @ StarBugs Weekly
Agenda
前端開發模式的演進
前端通往全端的困難
前端為什麼需要後端技能樹
Serverless
前端開發模式的演進
The Evolution Of Frontend Development
模板渲染的動態頁面
Ajax 帶來的前後端分離
Node.js 帶起的前端工程化
基於 Node.js 的全端開發
大前端時代
前端工程師
網頁工程師
前端開發模式的演進
The Evolution Of Frontend Development
模板渲染的動態頁面
Ajax 帶來的前後端分離 - v1.0
Node.js 帶起的前端工程化
基於 Node.js 的全端開發
大前端時代
前端開發模式的演進
The Evolution Of Frontend Development
模板渲染的動態頁面
Ajax 帶來的前後端分離
Node.js 帶起的前端工程化 - v2.0
大前端時代
基於 Node.js 的全端開發 - v2.0
前端開發模式的演進
The Evolution Of Frontend Development
模板渲染的動態頁面
Ajax 帶來的前後端分離
Node.js 帶起的前端工程化
大前端時代 - v2.5
基於 Node.js 的全端開發
前端開發模式的演進
The Evolution Of Frontend Development
模板渲染的動態頁面
Ajax 帶來的前後端分離
Node.js 帶起的前端工程化
基於 Node.js 的全端開發
Serverless - v3.0 or Not
大前端時代
Maybe...?
What Is Next ?
前端通往全端的困難
Difficulties From Frontend To Fullstack
業界曾經流傳一句話：「通常自稱 Full Stack 的人都很廢。」
Which One ?
水深
時間
團隊架構
It Doesn't Mean We As Frontend Developer Don't Need Backend Skills ...
Server Side Rendering (SSR)
Backend For Frontend (BFF)
Server Side Rendering (SSR)
Authentication & Authorization
Middlewares
Cache Control
Server Side Data Fetching
Backend For Frontend (BFF)
Direct Client-To-Microservices Communication
Client Coupled With Services
Round Trips
Security
DRY
API Gateway Pattern
Reverse Proxy
Decouple
Requests Aggregation
Extract Common Logics
Backend For Frontend (BFF)
One Backend Per User Experience
語言：Node.js
Server Side 相關知識： Concurrency, I/O, Networking, OS
Service Management: Scaling, High Availability, Fault Tolerance, Monitor
Data Management： Logging, Consistency, Fault Tolerance
Obstacles
商業邏輯、API
Database、CDN、檔案儲存空間
Monitor、Logging、Concurrent、Load Balancing、 Reliability
Security、K8S、Backup
We Can Do This Part !
Serverless Can Help !
Serverless
No Server
FaaS + BaaS
X
FaaS
Function As A Service
BaaS
Backend As A Service
AWS Lambda
Azure Functions
...
Message Queue
Cloud Storage
Logging
...
Google Cloud Functions
Event Based
Stateless
Advantages
Focus On Business Logic
Pay As You Go
Disadvantages
Cold Start & Latency
Coupled With Cloud Provider
Auto Scaling
Not Suitable For Long Running & High Concurrency Task
Deploy Faster
Advantages
Focus On Business Logic
Low Cost
Disadvantages
Cold Start & Latency
Coupled With Cloud Provider
Auto Scaling
Not Suitable For Long Running & High Concurrency Task
Deploy Faster
Serverless Services Providers
Possibilities with Serverless
Frontend
Backend
Serverless
Micro Service A
Micro Service B
Micro Service C
Function
Function
Function
Function
Function
Function
Function
Function
Function
Function
Function
Function
設計
開發
測試
部署上線
With Serverless
We Can Be More Powerful And Generate More Value
💪