「译文」目前大火的 Jamstack 到底是什么?

简介: 「译文」目前大火的 Jamstack 到底是什么?

Jamstack 是一套用于构建现代互联网应用的技术栈。它在边缘云、serverless 计算、以及大前端有广泛的应用,也在今年受到资本市场的追捧。它到底有什么魔力呢?这篇文章将带你了解 Jamstack 的概念以及开发范式。我们也将讨论 Rust 与 WebAssembly 这样的新兴技术如何让 Jamstack 更快,更安全,更易用。

什么是 Jamstack?

Jamstack 是一种构建网站和 web 应用程序的新方法。Jamstack 的 Stack 指的是许多独立,但是可以组合的技术栈。当它们结合在一起时能够提供一个完整的 web 应用。

Jamstack 架构中的 JAM 是指客户端 JavaScript、可重用的后端 API,和用户界面的 Markup,比如 HTML 与 CSS。

Jamstack 的关键特征是前端 Web UI 与基于 API 的后端服务之间的清晰区分。与垂直集成的传统 Web 应用程序不同的是, Jamstack 应用程序是模块化和分散式的:UI 可以通过静态网页服务器、CDN、甚至基于区块链的存储进行分发;后端 API 服务可以部署在云上,也可以由边缘节点就近提供服务。

为什么 Jamstack 超级赞?

从技术栈比较的角度来看,用于开发 Web 应用程序的另一个常见技术栈是 LAMP (Linux, Apache, MySQL, PHP) 以后其后的 MEAN (MongoDB, Express.JS, Angular, Node.JS)。

LAMP 概览

LNMP

图片:K7.india at English Wikipedia, CC BY 3.0 https://creativecommons.org/licenses/by/3.0, via Wikimedia Commons

从上面的图表可以看出,从应用开发者的角度,当使用 LAMP 技术栈时,有很多的组件可以安装,并且可以同时配置和维护。LAMP 应用的用户界面是由后端服务器动态生成的。绝大部分逻辑与计算都在服务器上。前端的浏览器只负责渲染。

JAM 概览

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
AWK

这个 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
}
JSON

正如这里能看到的,到目前为我们无需设置任何服务器基础设施就可以访问动态内容。让我们快速查看如何使用 JAM 管理该项任务,即几行 Javascript 来得到数据,以及一些 markup 来将数据作为有效信息展示。

Markup

Markup 使我们可以非常容易地创建视觉上令人满意的网页。为了演示这一点,我创建了一个简单的 HTML 页面,你可以试一下,如下图所示。

Mercury in color

图片来源: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

图片来源: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 沙箱的重要应用场景。

WasmEdge 网址:https://github.com/WasmEdge/WasmEdge

Rust 函数计算服务

WasmEdge 可以部署在边缘云与边缘设备上。它符合 OCI 标准,能被 CRI-O 与 Kubernetes 这样的工具调度与管理。WasmEdge 可以让开发者用 Rust 语言写安全高性能的函数服务,也可以支持为场景定制的 DSL 低代码解决方案。

在这篇文章,我们用 Second State 公司基于 WasmEdge 发布的一个免费 FaaS 服务作为示例,来演示怎么用 Rust 语言开发部署 Jamstack 应用的 serverless API 服务。

网址:https://www.secondstate.io/faas/

基于 WasmEdge 的示例服务

Second State 提供了跨云的 FaaS 基础设施,可以使用它来创建、部署和调用自己的定制函数。无论你想创建一个全新的 web 应用,迁移你现有的 web 应用,还是仅仅增强你 web 应用的客户端 ,基于 WasmEdge 的 FaaS 都是很好的选择。甚至不需要用户名和密码。所有的调用都是通过开放的 Web 、通过安全的 HTTP 请求执行的。几分钟内就可以部署一个自己的应用。

这里有许多精彩的预建 demo 和教程,使你能够学习如何创建自己的 FaaS 端点。这些预构建函数 (demo) 包括:

  • 图像分类 (教程、demo)
  • 面部识别 (教程、 demo)
  • 发送邮件 (教程、demo)
  • 给图片打水印 (教程、demo)
  • 在视频中识别食物 (教程、 demo)
  • 解迷字母异位词

链接不可点击,访问 https://www.secondstate.io/faas/ 了解更多或者点击阅读原文。

人脸识别 faas 服务

你也来试试吧!

这里的要点是,你可以创建自己的代码执行服务,即在不提供任何基础设施的情况下运行自己的自定义代码。Second State 的 FaaS「允许开发者在不管理服务器的情况下在云中上传和执行代码」。

下一步

这篇文章,我们介绍了 Jamstack 的基本概念,以及如何基于 WasmEdge 根据自己的需求快速开发出一个动态的 API。下一篇,我们将介绍如何在目前大火的 Vercel 中使用 WebAssembly Runtime/WasmEdge 在 Jamstack 应用中使用 Rust 函数来编写 API。

原文链接

What is the jamstack of the current fire? | Develop Paper

作者:Timothy McCallum、Miley Fu 与 Vivian Hu

译者注

我的个人博客: 东风微鸣技术博客 (ewhisper.cn) 已经更新改版,目前就是采用本文提到的 Jamstack 技术架构。后面会详细介绍。

欢迎体验!✨✨✨

相关实践学习
【玩转ComfyUI】基于函数计算一键部署AI生图平台ComfyUI
本次实验将带大家通过使用阿里云产品函数计算FC,快速使用ComfyUI实现更高质量的图像生成。
从 0 入门函数计算
在函数计算的架构中,开发者只需要编写业务代码,并监控业务运行情况就可以了。这将开发者从繁重的运维工作中解放出来,将精力投入到更有意义的开发任务上。
相关文章
|
Oracle 关系型数据库 Windows
Windows环境下在Oracle VM VirtualBOX下克隆虚拟机镜像(克隆和导入)
Windows环境下在Oracle VM VirtualBOX下克隆虚拟机镜像: 注:直接复制一个.vdi 虚拟硬盘再挂上去就可以,但Virtualbox居然提示UUID重复,无法使用。 则,可以通过Vritualbox自带的一个命令行工具解决,UI上没有提供对应的解决方案 : 注:克隆镜像及导入镜像生成虚拟机 1.定位到Vritualbox的安装目录,不能用全路径的方式直
5287 0
|
前端开发 算法 API
构建高性能图像处理Web应用:Next.js与TailwindCSS实践
本文分享了构建在线图像黑白转换工具的技术实践,涵盖技术栈选择、架构设计与性能优化。项目采用Next.js提供优秀的SSR性能和SEO支持,TailwindCSS加速UI开发,WebAssembly实现高性能图像处理算法。通过渐进式处理、WebWorker隔离及内存管理等策略,解决大图像处理性能瓶颈,并确保跨浏览器兼容性和移动设备优化。实际应用案例展示了其即时处理、高质量输出和客户端隐私保护等特点。未来计划引入WebGPU加速、AI增强等功能,进一步提升用户体验。此技术栈为Web图像处理应用提供了高效可行的解决方案。
|
前端开发 JavaScript 安全
探索 JAMstack 架构:现代Web开发的新范式
【10月更文挑战第20天】JAMstack(JavaScript、APIs、Markup)架构是一种现代Web开发方法,通过预构建静态页面、动态功能通过APIs实现和依赖JavaScript,提供高性能、安全和可扩展的Web开发新范式。本文深入探讨其核心理念、优势、工具和最佳实践,帮助开发者理解和应用JAMstack。
|
计算机视觉
ROS2错误排查:解决cv_bridge与opencv版本不匹配问题。
要记住,这只是一种可能的解决方式,你可能还需要针对你的特定问题进行其他操作。如果遇到任何问题,记住,遇到困难不要灰心,继续把问题当作一个冒险,勇敢地前行。
1165 92
|
存储 数据采集 SQL
数据资产和数据仓库如何结合
数据资产和数据仓库如何结合
342 1
|
数据安全/隐私保护 Docker 容器
『MinIO』在Docker中快速部署MinIO
📣读完这篇文章里你能收获到 - 在Docker中快速部署MinIO
7883 5
『MinIO』在Docker中快速部署MinIO
|
人工智能 Unix 人机交互
揭秘操作系统:从命令行到图形界面的演变之旅
【10月更文挑战第3天】本文将带你穿越时空,探索操作系统从简单的命令行界面(CLI)如何进化为今天广泛使用的图形用户界面(GUI)。我们将一探究竟,了解这一变革背后的故事和技术进步,同时通过代码示例,揭示现代操作系统如何实现这一转换。文章不仅回顾了历史,还展望了未来可能的技术革新,旨在激励读者思考操作系统设计的哲学和未来发展方向。
594 4
|
搜索推荐 安全 Windows
Windows10系统 无法更换锁屏图片一直转圈圈(含替换系统默认锁屏壁纸教程)异常处理
Windows10系统 无法更换锁屏图片一直转圈圈(含替换系统默认锁屏壁纸教程)异常处理
3687 0
Windows10系统 无法更换锁屏图片一直转圈圈(含替换系统默认锁屏壁纸教程)异常处理
|
前端开发
【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
866 0