目前大火的 Jamstack 究竟是什麼?
做者:Timothy McCallum、Miley Fu 與 Vivian Hujavascript
Jamstack 是一套用於構建現代互聯網應用的技術棧。它在邊緣雲、serverless 計算、以及大前端有普遍的應用,也在今年受到資本市場的追捧。它到底有什麼魔力呢?這篇文章將帶你瞭解 Jamstack 的概念以及開發範式。咱們也將討論 Rust 與 WebAssembly 這樣的新興技術如何讓 Jamstack 更快,更安全,更易用。html
什麼是Jamstack?
Jamstack 是一種構建網站和 web 應用程序的新方法。Jamstack 的 Stack 指的是許多獨立,可是能夠組合,的技術層。當它們結合在一塊兒時可以提供一個完整的 web 應用。前端
Jamstack 架構中的 JAM 是指客戶端 JavaScript、可重用的後端 API,和用戶界面的 Markup,好比 HTML 與 CSS。java
Jamstack 的關鍵特徵是前端 Web UI 與基於 API 的後端服務之間的清晰區分。與垂直集成的傳統 Web 應用程序不一樣的是, Jamstack 應用程序是模塊化和分散式的:UI 能夠經過靜態網頁服務器、CDN、甚至基於區塊鏈的存儲進行分發;後端 API 服務能夠部署在雲上,也能夠由邊緣節點就近提供服務。git
爲何 Jamstack 超級贊?
從技術棧比較的角度來看,用於開發 Web 應用程序的另外一個常見技術棧是 LAMP (Linux, Apache, MySQL, PHP) 之後其後的 MEAN (MongoDB, Express.JS, Angular, Node.JS)。github
LAMP 概覽
K7.india at English Wikipedia, CC BY 3.0 https://creativecommons.org/licenses/by/3.0, via Wikimedia Commonsweb
從上面的圖表能夠看出,從應用開發者的角度,當使用 LAMP 技術棧時,有不少的組件能夠安裝,而且能夠同時配置和維護。LAMP 應用的用戶界面是由後端服務器動態生成的。絕大部分邏輯與計算都在服務器上。前端的瀏覽器只負責渲染。數據庫
JAM 概覽
與 LAMP 技術棧相比,Jamstack 在許多不一樣之處 ,這對開發者構建網站或 web 應用的方式有着深遠的影響。從部署架構上講,Jamstack 應用的用戶界面是經過「編譯」生成的靜態網頁,從而大大提升了性能,安全性,以及下降了服務端的複雜度與計算負載。編程
從開發者的角度來看,一些主要的區別包括:後端
- Jamstack 開發者不須要安裝或管理操做系統(如 Linux)
- Jamstack 開發者不須要管理安全策略(服務器防火牆)
- Jamstack 開發者不須要安裝或管理應用程序數據庫(如 MySQL)
- Jamstack 開發者能夠在不使用 HTTP (Web)服務器(如 Apache)的狀況下部署 Web 站點或 Web 應用
整體而言,選擇使用 Jamstack 建立網站和 web 應用有4個主要好處: 成本效益、性能改進、更好的安全性和更好的用戶/開發者體驗。
JAM 組件
讓咱們先快速看一下構成 JAM 的 3個組件; Javascript、APIs 和 Markup。而後,咱們會重點關注動態可編程的 API 組件。
Javascript
毋庸置疑,JavaScript 是網絡上最流行的編程語言之一。Javascript 容許 Web 應用開發者在 HTML 頁面中輕鬆地進行請求後端服務產生的動態內容。這些安全的 HTTP 請求(由客戶端發出)可用於調用遠程 API 端點並將結果返回給客戶端(應用)。
API
API 是以微服務的形式訪問動態數據的一種很好的方式。互聯網上有許多公開可用的 API 端點,它們能夠返回大量頗有用的數據。其中一個例子是太陽系開放數據 API,它能夠返回全部行星、衛星、矮星、彗星和小行星等各類數據。
這裏有一個例子,說明了咱們如何經過 API 得到水星的軸向傾斜。
[https://api.le-systeme-solaire.net/rest/bodies/mercury](https://api.le-systeme-solaire.net/rest/bodies/mercury)
這個 API 服務節點返回至關多的數據,以下所示。
{ "id": "mercure", "name": "Mercure", "englishName": "Mercury", "isPlanet": true, "moons": null, "semimajorAxis": 57909227, "perihelion": 46001200, "aphelion": 69816900, "eccentricity": 0.20560, "inclination": 7.00000, "mass": { "massValue": 3.30114, "massExponent": 23 }, "vol": { "volValue": 6.08300, "volExponent": 10 }, "density": 5.42910, "gravity": 3.70000, "escape": 4250.00000, "meanRadius": 2439.40000, "equaRadius": 2440.53000, "polarRadius": 2439.70000, "flattening": 0, "dimension": "", "sideralOrbit": 87.96900, "sideralRotation": 1407.60000, "aroundPlanet": null, "discoveredBy": "", "discoveryDate": "", "alternativeName": "", "axialTilt": 0.0352 }
正如這裏能看到的,到目前爲咱們無需設置任何服務器基礎設施就能夠訪問動態內容。讓咱們快速查看如何使用 JAM 管理該項任務,即幾行 Javascript 來獲得數據,以及一些 markup 來將數據做爲有效信息展現。
Markup
Markup 使咱們能夠很是容易地建立視覺上使人滿意的網頁。爲了演示這一點,我建立了一個簡單的 HTML 頁面(源代碼在這裏),你能夠試一下,以下圖所示。
NASA/Johns Hopkins University Applied Physics Laboratory/Carnegie Institution of Washington. Edited version of Image:Mercury in color — Prockter07.jpg by Papa Lima Whiskey., Public domain, via Wikimedia Commons
你會注意到,這個 demo 僅使用 GitHub pages託管。固然,你也能夠將 HTML 源代碼複製到本地的文件夾,並在 PC 本地將它打開。根本不須要運行服務器。使用內容分發網路(CDN)還能夠幫助你將客戶端的響應時間減到最少。
若是你想生成一個更爲花哨的靜態站點,有不少軟件產品能夠幫助你,好比Gatsby 、Hugo、Netlify 、Vercel 等等。
無需服務器,建立和發佈你本身的 API 端點
SpaceX, CC0, via Wikimedia Commons
剛剛演示了咱們不費吹灰之力地從公開可用的公共端點獲取數據。可是……
若是你能夠建立和部署本身的 API 端點,但不想要任何額外的服務器,有沒有什麼辦法 🤔 ?
咱們不只能夠訪問開放數據(如上所示) ,編寫本身定製的邏輯來處理數據、圖像和視頻。咱們還能夠與其餘人共享咱們開發的 API 端點(自定義函數) 。
Serverless 服務
顧名思義,serverless 服務讓開發者在不運行本身的服務器的狀況下提供 API 服務。開發者只須要上傳一段代碼就能夠提供服務。公有云通常來講提供兩種 serverless 服務。
- Database-as-a-service (DaaS) 數據庫服務爲 Jamstack 應用提供基於雲數據庫的存儲與查詢服務。它用來管理應用的狀態,好比用戶數據的存儲。
- Function-as-a-service (FaaS) 函數服務提供無狀態的計算。它一般支持多種編程語言與框架,與數據庫或者雲存儲服務一塊兒爲 Jamstack 應用提供邏輯後端。
細心的讀者可能已經發現,在公有云上部署 serverless API 服務並不徹底適合 Jamstack 的理念。J 與 M 都已經經過邊緣雲部署了,爲何 A 不行呢?在邊緣雲上部署 serverless 函數的須要新一代的輕量級軟件容器。這是 CNCF 旗下的 WasmEdge 這種 WebAssembly 沙箱的重要應用場景。
Rust 函數計算服務
WasmEdge 能夠部署在邊緣雲與邊緣設備上。它符合 OCI 標準,能被 CRI-O 與 Kubernetes 這樣的工具調度與管理。WasmEdge 可讓開發者用 Rust 語言寫安全高性能的函數服務,也能夠支持爲場景定製的 DSL 低代碼解決方案。
在這篇文章,咱們用 Second State 公司基於 WasmEdge 發佈的一個免費 FaaS 服務做爲示例,來演示怎麼用 Rust 語言開發部署 Jamstack 應用的 serverless API 服務。
Second State 提供了跨雲的 FaaS 基礎設施,可使用它來建立、部署和調用本身的定製函數。不管你想建立一個全新的 web 應用,遷移你現有的 web 應用,仍是僅僅[加強你 web 應用的客戶端] (https://medium.com/wasm/an-easy-way-to-boost-your-client-side-javascript-using-webassembly-wasm-de35c53cc2a2),基於 WasmEdge 的 FaaS 都是很好的選擇。甚至不須要用戶名和密碼。全部的調用都是經過開放的 Web 、經過安全的 HTTP 請求執行的。幾分鐘內就能夠部署一個本身的應用。
這裏有許多精彩的預建 demo 和教程,使你可以學習如何建立本身的 FaaS 端點。這些預構建函數(demos)包括:
這裏的要點是,你能夠建立本身的代碼執行服務,即在不提供任何基礎設施的狀況下運行本身的自定義代碼。Second State 的 FaaS「容許開發者在無論理服務器的狀況下在雲中上傳和執行代碼」。
下一步
這篇文章,咱們介紹了 Jamstack 的基本概念,以及如何基於 WasmEdge 根據本身的需求快速開發出一個動態的 API。下一篇,咱們將介紹如何在目前大火的 Vercel 中使用 WebAssembly Runtime/WasmEdge 在 Jamstack 應用中使用 Rust 函數來編寫 API。