Try   HackMD

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

歡迎來到 JSDC 2021 共筆

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

共筆入口：https://hackmd.io/@JSDC-tw/2021conference
手機版請點選上方 按鈕展開議程列表。

共筆協作，共享知識，打造開放社群。

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Welcome to JSDC 2021 Collaborative Writing

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Collaborative Writing Workplace：https://hackmd.io/@JSDC-tw/2021conference
Using mobile please tap to unfold the agenda.

Build a community with open collaboration.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

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

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Kyle Mo 莫力全

開場詞

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

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Agenda

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

前端開發模式的演進

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

模板渲染的動態頁面

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

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?)

前端往全端的困難

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • 通常自稱 Full Stack 都是廢物 （此為業界網路流傳）
  • Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →
  • 大部分的 web 開發者還是偏向其中一端
    • Image Not Showing Possible Reasons
      • The image file may be corrupted
      • The server hosting the image is unavailable
      • The image path is incorrect
      • The image format is not supported
      Learn More →

前端為何需要後端技能樹

  • 上文不代表前端不要後端技能
  • Server-Side Rendering
    • Image Not Showing Possible Reasons
      • The image file may be corrupted
      • The server hosting the image is unavailable
      • The image path is incorrect
      • The image format is not supported
      Learn More →
    • Next.js / getServerSideProps
      • Image Not Showing Possible Reasons
        • The image file may be corrupted
        • The server hosting the image is unavailable
        • The image path is incorrect
        • The image format is not supported
        Learn More →
        • 不是很好的寫法
        • 只是示範
  • BFF (Backend For Frontend)
    • Image Not Showing Possible Reasons
      • The image file may be corrupted
      • The server hosting the image is unavailable
      • The image path is incorrect
      • The image format is not supported
      Learn More →
    • Direct CTM Communication
      • Image Not Showing Possible Reasons
        • The image file may be corrupted
        • The server hosting the image is unavailable
        • The image path is incorrect
        • The image format is not supported
        Learn More →
      • 用戶端會跟服務高 couple
      • Round Trips (network)
        • delay
      • Security
        • API Public
      • DRY
        • 通用、重複的邏輯
        • 抽成一層
    • API Gateway Pattern
      • Image Not Showing Possible Reasons
        • The image file may be corrupted
        • The server hosting the image is unavailable
        • The image path is incorrect
        • The image format is not supported
        Learn More →
      • Reverse Proxy
      • Requests Aggregation
      • Decouple
      • Extract Common Logics
    • Image Not Showing Possible Reasons
      • The image file may be corrupted
      • The server hosting the image is unavailable
      • The image path is incorrect
      • The image format is not supported
      Learn More →
      • API Pattern 可能產生問題
        • 每個平台需要的資料不一樣
          • ex. 手機不需要大量資料
        • 架構造成混亂
      • BFF 就是 solution
        • One Backend Per User Experience

Obstacles

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

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

Serverless

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

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

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

好處與壞處

Adv

  • 專注商業邏輯
  • Pay as you go
    • Image Not Showing Possible Reasons
      • The image file may be corrupted
      • The server hosting the image is unavailable
      • The image path is incorrect
      • The image format is not supported
      Learn More →
  • Auto scaling
  • 快速部署

D.Adv

  • 與 Cloud Provider 過於耦合
  • 冷啟動與 Latency
  • 不適合長期執行與高並行作業
    • Serverless 服務有限制
      • Image Not Showing Possible Reasons
        • The image file may be corrupted
        • The server hosting the image is unavailable
        • The image path is incorrect
        • The image format is not supported
        Learn More →
    • Serverless 貴貴

服務提供商

  • 補充
    • Vercel
    • Bingo
    • Firebase Hosting

Serverless 的願景

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

  • 前端都能做了！

總結

從前端走向全端

Last changed by 
 
JSDC.tw
0
1147

Read more

#Session 1 窮途末路的 SPA，堅持 CSR 到放棄

從這開始 可以直接打字做共筆囉 :point_down: KK 徐凱 Web 實驗室 早期用 CSR 寫 SPA 名詞解釋

Jun 29, 2023
#Session 4 JS在生成式、演算藝術與NFT的應用

{%hackmd 2YoCBdBPTjmHXDr9lEpWuQ %} 從這開始 可以直接打字做共筆囉 :point_down: https://hackmd.io/V_HFtUJDQ8un2QVb5ti8jA# Processing - p5.js p5.js three.js pixi.js

Sep 15, 2022
#Session 2 為什麼許多公司都願意導入 Next.js

{%hackmd 2YoCBdBPTjmHXDr9lEpWuQ %} 從這開始 可以直接打字做共筆囉 :point_down: Leo 邱柏鈞 Hahow B2B 前端工程師 Medium | Airwaves StarBugs

Jul 17, 2022
#Session 2 JavaScript 模組進化論 - 模組化的演進與實戰

{%hackmd 2YoCBdBPTjmHXDr9lEpWuQ %} 從這開始 可以直接打字做共筆囉 :point_down: Mujing JavaScript 概念三明治 Outline

Mar 5, 2022
Read more from JSDC.tw
Published on HackMD