WTF是Jamstack:构建内容网站的最佳方法吗?
#javascript #网络开发人员 #编程 #jamstack

近年来,客户端服务器体系结构通过使构建者能够使用数据库存储内容和客户端从服务器请求数据,从而使网络开发世界陷入困境。随着反应,角度和vue的发展,诸如虚拟DOM,JSX,重新启动,双向绑定和其他此类主题等概念成为该行业的行话。

这些概念通过许多技术和工具与数据库和服务器集成在一起,使Web应用程序更强大。

以及创建Web应用程序的过程变得更加具有挑战性,因为开发人员必须安装和配置许多工具。所有这些都需要大量的开发工作,延迟了产品的推出。

拥有一系列最佳实践和行业标准的体系结构可以简化过程,这导致了现代有见识的建筑的增长,称为Jamstack。

诸如Next.js,Gatsby和Hugo之类的框架很好地利用了此架构,并将新想法带到了餐桌上,包括incremental site regeneration,打字稿支持,智能捆绑和路线预取。

探索jamstack-现代的网络架构

由于Jekyll和其他相关技术,

静态网站在2015年开始受到欢迎。同年,Netlify的Mathias Biilmann和Chris Bach提出了“ Jamstack”一词。

现在,什么是jamstack?

根据Mathias Biilmann(Netlify的首席执行官兼联合创始人),JAMSTACK是一种基于客户端JavaScript,可重复使用的API和预构建标记的现代网络开发体系结构(Netlify的首席执行官兼联合创始人)。

)。

简而言之,Jamstack处理JavaScript,API和Markup。

您可能在JavaScript,API和Markup的帮助下建立了许多网站,因此在技术方面,它并不是什么新的;相反,这是我们如何结合使用它们的新方法。

jamstack与React&Angular不同,因为它不是一个框架,而是一种将Web体验层与数据和业务逻辑分解的架构方法。它允许通过使用API​​轻松添加自定义逻辑和第三方集成。

了解jamstack的技术

Jamstack

让我们在引擎盖下看一看,以了解力量jamstack的技术:

javascript

这是构建Jamstack网站的第一个元素。

如果您是Web开发人员,您可能会意识到JavaScript用于为网站提供动态行为和逻辑,从而提供出色的用户体验。 Jamstack也是如此。

jamstack将所有内容分解,允许完全自由,与传统的架构与数据库和服务器绑定的传统体系结构相比。

Jamstack中的J代表JavaScript,但是您可以使用任何JavaScript框架,甚至可以使用Python或Go。

,因此,在您可能使用的前端技术方面,Jamstack更加灵活。

api

连接客户端和服务器的通用技术是应用程序编程接口(API)。我们可以通过grpc,graphql甚至休息。

您可以将其视为传递客户端请求和服务器响应的方便渠道。

让我们举一个例子。

Client-Server Communication

当用户询问该书的数据时,服务器会使用JSON数据响应,如上图所示。

服务器端操作被抽象成可重复使用的API,并可以通过HTTPS使用JavaScript访问,就像API在Jamstack中的功能一样。为此,您可以使用自己的自定义功能或第三方的服务。

这就是为什么服务器不再需要执行繁重的工作的原因;现在,一切都在客户端处理。而且,随着API变得越来越广泛,它们可能被用作微服务轻松集成和链接以提供各种功能。

标记

jamstack的第三个要素是标记。

用户通常将内容请求发送到服务器。服务器遵循一个长序列以找到适当的信息然后响应。用户不必等待那么长时间。

这是标记发挥作用的地方。

jamstack采用预构建标记,而不是依靠服务器来为每个请求构建内容。让我们深入挖一点。

静态站点生成器将数据或信息作为输入,对其进行评估,然后生成预构建的HTML。这些预制的标记或HTML页面托管在CDN上,使访问者易于获取所需的内容。

300 static site generators可以选择。

jamstack与传统建筑有何不同?

在引入HTML,CSS和JavaScript之前,网站仅是静态的。但是,在他们首次亮相后,开发人员开始创建动态网页,然后由服务器提供。

本质上,当用户想要信息时,客户端向服务器询问内容,服务器检索指定的内容,应用一些逻辑,然后提供内容。

但是,随着网络开发变得越来越复杂,一些评论模式和体系结构出现了。

从那里开始,Jamstack一词诞生了。

在这里,开发人员使用JavaScript或其他JavaScript框架编写代码,然后将其推到Git之类的源存储库。从那里,文件将自动发送到内容交付网络(CDN),使我们可以访问Jamstack的预渲染功能。

可以将CDN视为一组在世界范围内定位的服务器,以快速有效地加载网站。

jamstack的好处

1。静态站点

首先,Jamstack不仅用于创建静态网站;您还可以开发动态网站,但它们将显示为静态页面。这将Jamstack与其他Web开发框架区分开。

由于静态网站是在构建时间构建的,因此它们更快且友好。

2。更快的性能

静态站点发生器接收一组内容或模板作为输入,然后提供结果,该结果本质上是预构建的标记,该标记分布在CDN中。

结果,当用户请求信息时,可以立即传递来自CDN的页面的输出,从而更轻松,更快。

CDN将网站内容分配给许多服务器组,以便当有人请求内容时,它是从最近的服务器发送的,可以更快地进行通信。

3。成本效益,经济

Jamstack网站和Web应用程序未托管在原始服务器上;相反,它们是通过CDN直接提供的,这大大降低了成本。

通常自动化升级网站或Web应用程序的过程,这大大简化了工作过程。

即使像CloudFlare这样的CDN也提供了慷慨的免费试验,并且使用GitHub提供了CI/CD管道的支持。这使jamstack具有成本效益和便宜。

4。更安全

传统的服务器端应用程序容易受到各种攻击的影响,因为它们使用许多API将内容传输到原始服务器。

因为CDN包含仅读取文件而没有主动连接,因此被黑客利用的可能性要低得多。

5。可扩展

我们在jamstack中没有物理服务器,甚至更新网站的主要是自动化的,这就是为什么我们只需基于我们使用的技术堆栈更新网站的原因。

没有复杂的逻辑可以缓存,因为网页保存在CDN中,消除了运行服务器并使用自动部署的需求,很容易扩展这些网站。

您应该考虑下一个项目的jamstack吗?

虽然Jamstack带来的所有好处,它可能是您内容丰富的项目的理想选择。由于可以使用许多技术(包括框架和API)开发Jamstack,因此学习曲线很浅。

实际上,如果您熟悉React和GraphQL,则可以使用Jamstack开始。即使您熟悉其他一些技术,也可以按照相同的步骤进行合并。

最后,jamstack使您的网站运行良好,加载迅速,使其安全并可扩展。

使用jamstack的两个突出框架是盖茨比和下一步。您可以使用Locofy.ai插件直接从FigmaAdobe XD设计直接从FigmaAdobe XD设计的这两个框架中生成Perfect和高度扩展代码。

使用插件,您可以将设计分解为期望道具的组件,从而使您可以轻松插入您选择的CMS并构建Jamstack应用程序。

希望您喜欢它。

谢谢。