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

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

在過去的幾年裡，為應對需求，公司的軟體架構走向了 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，單單是思考其特性就能夠讓我們找到很多優化既有流程的點。

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