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

本文涉及的产品
函数计算FC,每月15万CU 3个月
简介: 「译文」目前大火的 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 技术架构。后面会详细介绍。

欢迎体验!✨✨✨

相关实践学习
【AI破次元壁合照】少年白马醉春风,函数计算一键部署AI绘画平台
本次实验基于阿里云函数计算产品能力开发AI绘画平台,可让您实现“破次元壁”与角色合照,为角色换背景效果,用AI绘图技术绘出属于自己的少年江湖。
从 0 入门函数计算
在函数计算的架构中,开发者只需要编写业务代码,并监控业务运行情况就可以了。这将开发者从繁重的运维工作中解放出来,将精力投入到更有意义的开发任务上。
相关文章
|
自然语言处理 Python
wordcloud:自定义背景图片,生成词云
wordcloud:自定义背景图片,生成词云
wordcloud:自定义背景图片,生成词云
|
Oracle 关系型数据库 Windows
Windows环境下在Oracle VM VirtualBOX下克隆虚拟机镜像(克隆和导入)
Windows环境下在Oracle VM VirtualBOX下克隆虚拟机镜像: 注:直接复制一个.vdi 虚拟硬盘再挂上去就可以,但Virtualbox居然提示UUID重复,无法使用。 则,可以通过Vritualbox自带的一个命令行工具解决,UI上没有提供对应的解决方案 : 注:克隆镜像及导入镜像生成虚拟机 1.定位到Vritualbox的安装目录,不能用全路径的方式直
5004 0
|
前端开发 JavaScript 安全
探索 JAMstack 架构:现代Web开发的新范式
【10月更文挑战第20天】JAMstack(JavaScript、APIs、Markup)架构是一种现代Web开发方法,通过预构建静态页面、动态功能通过APIs实现和依赖JavaScript,提供高性能、安全和可扩展的Web开发新范式。本文深入探讨其核心理念、优势、工具和最佳实践,帮助开发者理解和应用JAMstack。
|
6月前
|
前端开发 算法 API
构建高性能图像处理Web应用:Next.js与TailwindCSS实践
本文分享了构建在线图像黑白转换工具的技术实践,涵盖技术栈选择、架构设计与性能优化。项目采用Next.js提供优秀的SSR性能和SEO支持,TailwindCSS加速UI开发,WebAssembly实现高性能图像处理算法。通过渐进式处理、WebWorker隔离及内存管理等策略,解决大图像处理性能瓶颈,并确保跨浏览器兼容性和移动设备优化。实际应用案例展示了其即时处理、高质量输出和客户端隐私保护等特点。未来计划引入WebGPU加速、AI增强等功能,进一步提升用户体验。此技术栈为Web图像处理应用提供了高效可行的解决方案。
|
6月前
|
机器学习/深度学习 传感器 人工智能
《告别单一智能:神经符号混合系统驱动推理能力的跨界融合》
神经符号混合系统融合了神经网络与符号推理的优势,旨在赋予智能体大模型媲美人类的推理能力。神经网络擅长从数据中学习特征,但决策过程缺乏可解释性;符号推理基于规则和逻辑,具有高度可解释性,却难以应对复杂不确定性。神经符号混合系统通过结合两者,不仅提升了知识表示、推理决策和泛化能力,还在自动驾驶、金融预测、科学研究、智能教育和工业制造等领域展现出广泛应用前景。尽管当前仍面临模块融合与成本等挑战,但其发展潜力巨大,有望推动人工智能迈向更高水平,助力解决更多复杂现实问题。
254 10
《告别单一智能:神经符号混合系统驱动推理能力的跨界融合》
|
小程序 JavaScript 开发工具
Uniapp 对接抖音短剧播放器 video-player 坑点解决
Uniapp 对接抖音短剧播放器 video-player 坑点解决
634 1
|
JSON Rust 安全
【一起学Rust | 框架篇 | Viz框架】轻量级 Web 框架——Viz
【一起学Rust | 框架篇 | Viz框架】轻量级 Web 框架——Viz
552 0
|
算法 测试技术 AI芯片
CPU反超NPU,llama.cpp生成速度翻5倍!LLM端侧部署新范式T-MAC开源
【9月更文挑战第7天】微软研究院提出了一种名为T-MAC的创新方法,旨在解决大型语言模型在资源受限的边缘设备上高效部署的问题。T-MAC通过查表法在CPU上实现低比特LLM的高效推理,支持混合精度矩阵乘法,无需解量化。其通过位级查表实现统一且可扩展的解决方案,优化数据布局和重用率,显著提升了单线程和多线程下的mpGEMV及mpGEMM性能,并在端到端推理吞吐量和能效方面表现出色。然而,表量化和快速聚合技术可能引入近似和数值误差,影响模型准确性。论文详见:[链接](https://www.arxiv.org/pdf/2407.00088)。
694 10
|
IDE 前端开发 时序数据库
【Docker项目实战】使用Docker部署speedtest-tracker速度测试追踪器
【6月更文挑战第4天】使用Docker部署speedtest-tracker速度测试追踪器
919 1