JAMSTACK 數年實踐回望:一個管理及開發的平衡

Sam Huang
RevtelTech
Published in
Dec 5, 2023

--

沒有最正確的軟體架構,通常都需要隨著時間和發展階段進行修正和修改。系統最終會變成怎樣往往也和公司的管理方式及運作模式密切相關。

在過去的幾年裡,為應對需求,公司的軟體架構走向了 JAMSTACK 的風格。這裡分享一些關於這種架構的感受和經驗。

JAMSTACK = JavaScript / API / Markup Stack

JAMSTACK
- Jamstack: For fast and secure sites
- 什麼是 JAMstack

JAMstack,全名為”JavaScript, APIs, and Markup”,是近年來廣受討論的一個技術概念。這種架構利用靜態網頁技術,結合 API 整合,將整體系統的架構精簡化,以取得更優越的性能、更高的安全性、卓越的可擴展性,同時降低了維護成本。

透過將前端、後端和內容進行有效的解耦,JAMstack 提供了更靈活且容易擴展的開發方式。

這個概念值得開發人員深入參考,特別是在思考系統的哪些部分可以進行緩存的情況下。即使您的系統目前並未考慮使用 JAMstack 架構,了解並接觸這個概念也是相當有價值的。

架構的調整始終來自於需求

公司的主營業務是協助各式商業模式顧問及開發軟體方案,所以日常會面臨到的狀況是

  1. 領域非常多元(目前累積十多個領域),各種應用都有可能找我們協助
  2. 客戶從新創到已在市場上成功多年的單位都有
  3. 通常都會同時需要網站、APP 及後台系統

技術架構的建立是一個漸進的過程,需要在實際開發中改進,不斷調整和優化。有趣的是,經過幾年的發展發現系統架構逐漸趨向 JAMstack 的路線。

目前我們的技術組成大概如下,從中取得蠻多好處

  1. 前端走 React 技術棧:ReactJS / GatsbyJS / React Native
  2. 後端全雲端化,透過 AWS Lambda / CloudFront 及 MongoDB 以微服務、無伺服器架構將系統攤平

這使得公司在應對多元領域和各種應用需求時更具靈活性。前端技術的選擇使得客戶能夠獲得高度交互性的使用體驗,而後端的雲端化和微服務結構則提供了更好的擴展性和效能。這樣的技術架構也易於連結跨專案間的研發成果,可以很好的共享一些開發成果。

在許多案例上驗證 JAMSTACK 的效益極好

這樣的系統架構讓我們克服了許多實際的開發挑戰,比如

  1. 印刷業電商系統:前端多圖效能佳,且能複合複雜的後端流程
    - 更多細節:印刷業專屬電商 HiPrint 開發分享 — 以 GatsbyJS 打造高速 ERP / EC
    - 案例網址:感官文化印刷理想印制印刷吧
  2. 法朋甜點烘焙坊:透過微服務技術,易於應付突然間的大流量(高低可以在一小時內差到十數倍)
    - 更多細節:三分鐘內數百萬業績的高流量電商煉成 — Le Ruban Pâtisserie 法朋烘焙甜點坊
    - 案例網址:Le Ruban Pâtisserie 法朋烘焙甜點坊
  3. 拉亞線上點餐:透過微服務技術及完整 API 設計,同時完成 WEB 及 APP 開發及因應高流量
    - 案例網址:拉亞線上點餐拉亞漢堡 Laya Now (android)拉亞漢堡LayaNow (iOS)
  4. 台北市律師公會:透過 MongoDB 協助資料庫梳理並成功完成後台及雙平台 APP
    - 案例網址:台北律師公會

實踐上 JAMSTACK 帶來的好處及影響

除去一般 JAMSTACK 的幾個特點之外(如高效能及高安全性,當然這幾個優點已經夠讓人驚艷),在實踐上對我們來說更重要的可能是改變了某些工作流程及需求。

列舉幾個比較有感的點如下:

  1. 降低知識儲備的要求
    日常和客戶的溝通主要集中在應用層面,討論資料流程和互動方式等相關事項。然而,在實際的維護和開發過程中,我們通常需要對底層架構有更深入的認識。JAMSTACK 架構的扁平性(例如,在前端整合流程上幾乎等同於程式碼提交)有助於有效降低資訊傳遞上的落差。
    這種扁平的架構使得人員在執行任務、培訓和調度上更具靈活性和餘裕。開發和維運的任務可以更清晰地被切分,這使得團隊更容易協同合作。底層的透明度提高了開發者對整體系統的理解,從而更容易進行調試、優化和擴展。
    同時,這樣的結構也有助於提高人員的養成效率。由於整合流程相對簡單,開發者可以更專注於應用層的功能和特性,而不必過多擔憂底層的實現細節。這種結構的設計有助於降低開發者的學習曲線,同時簡化了協同工作的流程。
  2. 降低部署時的困難
    和客戶的溝通通常著重在應用層而不太涉及底層的架構。然而當合作的終點是將系統部署在客戶端時,由於目標框架的不同,很常會遇到困擾,有時也甚至必須根據客戶需求改變開發框架。但在 JAMSTACK 的概念下,前端是靜態網頁,與後端的介接有統一的介面,這使得系統更容易整合到客戶的既有系統中,類似於微前端的概念。
    這種結構的優勢在於可以很好地適應不同的客戶需求,並且無形中提高了系統的彈性。過往我們曾如此將方案部署入金融機構而幾乎沒遇到困難。
  3. 易於第三方資料源協作
    軟體開發過程中,資料的串整和整理往往佔據相當大的時間比重。透過JAMSTACK 在資料源整合上的彈性,可以使得這一過程更加靈活且高效。
    在 JAMSTACK 的框架下,由於前端是靜態網頁,資料的呈現可以更容易地由專責處理資料的團隊進行直接修改。這種彈性使得資料處理和前端顯示的變更能夠更加即時和協同合作。此外,JAMSTACK 中使用的git管理系統,進一步規範了資料的版本控制,有效地降低了因資料編修而引入的問題,同時也減少了需要投入的人力成本。

結語:技術的發展使各種架構變得可能,如何組合比選邊站重要

每種技術框架及組合都有其優點和缺點,JAMSTACK 也不例外,比如在一些即時互動的需求上就需要額外處理。

然而新技術和概念的價值常常不僅僅體現在單一的技術突破,更在於其開啟的新可能性。新技術如平台工具的進展使得DevOps更容易導入,這進一步促進了敏捷開發的實踐。由此來觀察 JAMSTACK,單單是思考其特性就能夠讓我們找到很多優化既有流程的點。

保持開放的心態去接觸不同的技術框架和概念才是保持進步的方法!

--

--

Sam Huang
RevtelTech

[ https://www.sam-huang.info/ ] 始於嵌入式系統,途經 Web / APP 再到區塊鏈。是個逐步由底層走向上層的軟體人,持續尋找技術和商模的平衡對接