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

閱讀時間約 6 分鐘

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

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

raw-image

JAMSTACK = JavaScript / API / Markup Stack

JAMSTACK

Jamstack: For fast and secure sites
什麼是 JAMstack


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

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

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

raw-image

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

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

  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,單單是思考其特性就能夠讓我們找到很多優化既有流程的點。

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





avatar-img
18會員
33內容數
從超過 50 個合作經驗中擷取在系統開發、顧問及營運上的經驗及心得
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Sam Huang的沙龍 的其他內容
作為程式開發者,每次聽到「加個 flag 就好」或者「開個變數存起來」這種話總是會心頭一驚。理由也很正常,就是像這樣子的 workaround 並沒有真正解決問題,只是徒留技術債,以後怎麼爆炸的都不知道。 workaround 聽起來真的是十惡不赦,不是嗎? 可凡存在必有道理,不如來聊聊 wor
「為什麼要維護?有 bug 你們就要負責啊,你們怎麼可以給我們有 bug 的東西!」 一瞬間我也是愣了一下,還差點被說服(?)。
我們的世界實際上由虛擬和實體兩個部分組成。NFT已經在虛擬世界中證明了自己的價值,但如果將NFT應用於現實世界,又會有哪些可能性呢?
一旦甲乙方進到零和賽局,情感上開始對抗之後,兩敗俱傷就是必然的結局了。既然是這樣,合約的撰寫及執行不妨看作是合作誠意的具象表態。
「幫我做的跟 Facebook 一樣單純就好」 「嗯 … ?」 不管怎麼估計都可能失準,在一件事做完之前你怎麼知道能不能做到?
殺雞用牛刀,降維打擊總是一個安全做法。殺雞何必用牛刀?但牛刀是真的有用啊!而手上有錘子什麼看起來都像釘子,問題是錘子真的能敲啊!
作為程式開發者,每次聽到「加個 flag 就好」或者「開個變數存起來」這種話總是會心頭一驚。理由也很正常,就是像這樣子的 workaround 並沒有真正解決問題,只是徒留技術債,以後怎麼爆炸的都不知道。 workaround 聽起來真的是十惡不赦,不是嗎? 可凡存在必有道理,不如來聊聊 wor
「為什麼要維護?有 bug 你們就要負責啊,你們怎麼可以給我們有 bug 的東西!」 一瞬間我也是愣了一下,還差點被說服(?)。
我們的世界實際上由虛擬和實體兩個部分組成。NFT已經在虛擬世界中證明了自己的價值,但如果將NFT應用於現實世界,又會有哪些可能性呢?
一旦甲乙方進到零和賽局,情感上開始對抗之後,兩敗俱傷就是必然的結局了。既然是這樣,合約的撰寫及執行不妨看作是合作誠意的具象表態。
「幫我做的跟 Facebook 一樣單純就好」 「嗯 … ?」 不管怎麼估計都可能失準,在一件事做完之前你怎麼知道能不能做到?
殺雞用牛刀,降維打擊總是一個安全做法。殺雞何必用牛刀?但牛刀是真的有用啊!而手上有錘子什麼看起來都像釘子,問題是錘子真的能敲啊!
你可能也想看
Google News 追蹤
Thumbnail
敏捷開發的實踐方式有很多,其中以簡單、易懂的 Scrum 框架最廣為大家接受。 2024年7月 LeSS 網站發布了新一版的《Scrum 指南》,其中調整的內容我覺得讓這個框架更符合實務上的應用,因此就其內容並結合個人經驗與見解撰寫這篇短文,希望幫助大家快速了解這套能幫助團隊適應變化的敏捷開發方法。
Thumbnail
套件(Package)是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中,套件通常包含了相關的程式碼、資源文件和元數據,並提供了統一的名稱空間和版本管理。
Thumbnail
軟體系統的發展歷程大多相似,首重解決基本需求、提供操作介面,進而提升安全性、擴充功能、優化操作。
前言: 前一篇講了 JS 的定義,這裡來談談能用它來做什麼, 希望能限制在 500 字以內(這是我看文章的極限,超過字數就會開始分心(?))
前言: 一直想要把自己的學習筆記整理整理,至少在寫下筆記的時候,也能釐清觀念。 結果拖延到現在,終於要提筆了,不知道能堅持多久(???)。
Thumbnail
學習Spring Boot是Java工程師必備技能,文章分享瞭如何自學並快速上手Spring Boot開發,包括架構、開發工具、專案建立以及實作過程。
Thumbnail
npm(全名 Node Package Manager,node套件管理器)
Thumbnail
在 2021 年的剛轉職成為前端工程師的時候,我在面試時滿常會被詢問到 JavaScript 中閉包的議題,當時候自己回答的滿差的,於是在 2022 年時,我寫了一系列的有關於函式程式設計鐵人賽的文章, 裡頭就有簡單提到有關於閉包的議題。
Thumbnail
在數位時代,擁有自己的網站至關重要。然而,高昂的網站開發和維護成本可能是一大挑戰。本文介紹了幾個免費框架軟體,如WordPress,Joomla,Drupal,Wix和Blogger,讓您輕鬆建立和管理自己的網站。
Thumbnail
敏捷開發的實踐方式有很多,其中以簡單、易懂的 Scrum 框架最廣為大家接受。 2024年7月 LeSS 網站發布了新一版的《Scrum 指南》,其中調整的內容我覺得讓這個框架更符合實務上的應用,因此就其內容並結合個人經驗與見解撰寫這篇短文,希望幫助大家快速了解這套能幫助團隊適應變化的敏捷開發方法。
Thumbnail
套件(Package)是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中,套件通常包含了相關的程式碼、資源文件和元數據,並提供了統一的名稱空間和版本管理。
Thumbnail
軟體系統的發展歷程大多相似,首重解決基本需求、提供操作介面,進而提升安全性、擴充功能、優化操作。
前言: 前一篇講了 JS 的定義,這裡來談談能用它來做什麼, 希望能限制在 500 字以內(這是我看文章的極限,超過字數就會開始分心(?))
前言: 一直想要把自己的學習筆記整理整理,至少在寫下筆記的時候,也能釐清觀念。 結果拖延到現在,終於要提筆了,不知道能堅持多久(???)。
Thumbnail
學習Spring Boot是Java工程師必備技能,文章分享瞭如何自學並快速上手Spring Boot開發,包括架構、開發工具、專案建立以及實作過程。
Thumbnail
npm(全名 Node Package Manager,node套件管理器)
Thumbnail
在 2021 年的剛轉職成為前端工程師的時候,我在面試時滿常會被詢問到 JavaScript 中閉包的議題,當時候自己回答的滿差的,於是在 2022 年時,我寫了一系列的有關於函式程式設計鐵人賽的文章, 裡頭就有簡單提到有關於閉包的議題。
Thumbnail
在數位時代,擁有自己的網站至關重要。然而,高昂的網站開發和維護成本可能是一大挑戰。本文介紹了幾個免費框架軟體,如WordPress,Joomla,Drupal,Wix和Blogger,讓您輕鬆建立和管理自己的網站。