【2023】前端趋势前瞻,学起来!(三)

本文涉及的产品
函数计算FC,每月15万CU 3个月
简介: 【2023】前端趋势前瞻,学起来!(三)

迈向微前端架构

受到后端微服务的启发,构建了微前端架构作为单体前端结构的解决方案。它是将整体结构分解为独立的组件,类似于独立的应用程序。 通过单独的组件进行工作,开发团队可以同时在单个代码库的各个组件上协同工作,以开发整个前端。
image.png2020 年前端状况记录显示,24.4%的开发人员从微前端的 Web 应用程序开发中受益,因为它改进了高效无错误开发,可以快速跟踪生产。一个突出的案例可以从 Agorapulse 中获取,它过渡到微前端架构以扩展其应用程序。通过自主团队负责端到端功能架构,应用程序的多线程交付过程见证了更加清晰、快速和卓越的用户体验。采用相同架构来扩展和改进 UI/UX 的其他公司包括 Spotify、宜家、美国运通、星巴克和 SoundCloud。

Monorepos

过去,monorepos 主要用于大型应用程序,其中一个项目在一个版本控制的存储库中包含较小的项目。这些较小的项目中的每一个都可以是从单个应用程序(例如 SPA、MPA)到可重用包(例如功能、组件、服务)的任何东西。合并项目的做法可以追溯到 2000 年初,当时它被称为共享代码库。

然而,如今 monorepos 不仅专用于大型应用程序,而且肯定会从中受益的小型公司和开源项目也是如此。例如,一家公司可以在单一存储库中拥有各种包,包括共享 UI 组件、共享设计系统(例如可重用协作设计)以及各自领域的常用实用程序功能。

这些包可以在各种应用程序中导入:使用所有这些共享包的实际应用程序(例如 app.mywebsite.com 客户端呈现),主页/产品/登陆页面(例如 mywebsite.com 与服务器端呈现或静态站点生成)考虑到 SEO 仅使用共享设计系统包,以及使用共享 UI 组件和共享设计系统包的技术文档页面(例如 docs.mywebsite.com)。

image.pngTurborepo(被 Vercel 收购)再次在 JavaScript/TypeScript 中大肆宣传 monorepo 。Turborepo 允许团队在 monorepo 中为他们所有的应用程序和包创建构建管道。引人注目的是:在本地机器或跨团队的云中的管道内缓存构建。Turborepo 与 npm/yarn/pnpm 工作区(依赖管理)和变更集(版本控制)等其他重要的 monorepo 工具相结合,使该工具链成为今年值得关注的领域。

Turborepo 的竞争对手是NxRushLerna(有一段时间没有维护,后来被 Nx 的公司 Nrwl 收购)。

实用优先的 CSS

开发人员要么喜欢它,要么讨厌它:Tailwind CSS是实用优先 CSS 的典型代表。一方面开发人员讨厌它在 UI 代码中显得冗长,另一方面开发人员喜欢它出色的 DX。作为开发人员,您只需在项目中对其进行一次配置,即可立即在 HTML 中使用其预定义的 CSS。

不过,随着最近服务器端渲染 (SSR) 的兴起,这种关于实用程序优先 CSS 的爱与恨的分歧可能会结束。几年来,像Styled Components (SC) 和Emotion这样的 CSS-in-JS 解决方案一直是现代基于组件的 Web 应用程序样式的主导力量。然而,如果 SSR 世界中的性能是主要目标之一,那么 CSS-in-JS 会带来负面影响:增加包大小(SC 为 12.7kB,Emotion 为 7.9kB),更重要的是由于之前的 CSS 序列化导致的运行时开销将其插入到 DOM 中。

因此,我们可能会看到开发人员转向对 SSR 更友好的解决方案,例如 utility-first-CSS(例如 Tailwind CSS、UnoCSS)与预定义的 UI 组件(例如DaisyUI )配对,其他同样流行的替代方案(例如CSS Modules),或称为零运行时的失败者/compile-time CSS-in-JS(例如vanilla-extractlinariaastroturfcompiled)。

Serverless

SSR 和 SSG 等渲染技术与边缘无服务器的趋势高度相关,因为它们都是由性能驱动的,目的是在浏览器中提供无缝的用户体验。从本质上讲,为用户提供更快的网站和 Web 应用程序服务的冲动激发了对边缘无服务器的兴趣。

但让我们从头开始:无服务器,也称为无服务器功能、无服务器计算(例如 AWS Lambda)或云功能(例如 Google/Firebase Cloud Functions)多年来一直是云计算的大趋势。虽然无服务器仍然意味着拥有一个正在运行的(远程)服务器,但开发人员不必管理服务器及其相关任务(例如基础设施按需扩展)。相反,必须将单个功能部署为无服务器功能,由云提供商负责。

无服务器功能解锁了另一个优势,因为不是将您的应用程序服务器部署到一个(或几个)数据中心,而是在世界各地可能有数十个。因此,在一个完美的世界中,无服务器功能将尽可能靠近用户运行,因为这意味着最短的客户端-服务器往返,从而改善用户体验。尽可能靠近用户部署无服务器功能创造了边缘计算和边缘功能这两个术语。

许多云提供商(例如 Cloudflare 和 Cloudflare Workers、Vercel 及其边缘网络、Deno 和 Deno Deploy)都在这个领域竞争,每个人都在为他们的最终用户优化最佳交互时间 (TTI) 体验。边缘功能不仅可以更快地提供 SSG/SSR 内容(因为连接到最终用户的线路更短),而且还可以将其结果缓存到离用户更近的地方。

但不仅性能很重要,即使它是主要驱动因素,其他好处(如降低成本)也伴随着边缘计算。例如,通常并非客户端和服务器之间发送的所有数据(此处为边缘功能)都需要由主数据中心计算。在物联网中,有许多不相关的数据(例如,每帧没有变化的视频记录)发送到主数据中心,而这些数据中心可以简单地在边缘进行过滤。毕竟,边缘功能只是一个开始......

增强用户体验的 AR x VR

Statista 预测,到 2024 年,AR、VR 和 MR 的全球市场将从 307 亿美元增长到 3000 亿美元,毕竟它已经深入我们的生活。想一想您在 Instagram 和 Snapchat 上看到的所有滤镜和可爱面具。增强现实 (AR) 使它们成为可能。

制造、旅游、建筑和美容行业的企业主可以从这些技术中受益,这些技术可以增强客户体验并帮助与产品或服务建立情感纽带。以宜家为例:该技术让您可以将真实比例的 3D 模型虚拟地放置在您自己的空间中。或者 Wanna Kicks,它可以让您虚拟地穿上您选择的鞋子。这些是移动应用程序,但该技术可以实施到您的网站中。

Headless CMS 架构

Insight Partners预测,从 2020 年到 2027 年,无头 CMS 软件市场将以 22.6% 的复合年增长率增长。随着在线应用程序用户群的增加,公司正在慢慢转变其内容管理策略,采用混合方法来提供一致性和统一性跨越不同的平台。原则上,Headless CMS是一个集中式内容存储库,它在后台独立运行,使用 Web 服务 API 将内容推送到多个设备。该方法提供了可扩展的机会,同时降低了大型团队的维护和生产成本。

image.png由于 Headless CMS 提供的灵活性和可扩展性,它们已成为构建易于管理的网站的首选方法。

传统的 CMS 是“抬头”内容管理系统,其中内容存储库或“主体”连接到表示层或“头部”,而无头 CMS 允许您在一个位置存储和管理内容,然后部署它跨越任何你喜欢的前端。这使您能够通过全渠道 CMS 提供的 API 将内容集成到任何系统、软件或网站中。

在内容交付方面,Headless CMS 使其变得简单快速,因此内容创建者无需熟悉代码。

image.png使用无头 CMS,前端和后端是独立(解耦)的系统:一个系统处理内容创建和存储,而另一个处理演示。使用 API,Headless CMS 在内容创建后即交付内容,使其在任何设备上看起来都不错。

Mobile-First 开发将继续流行

截至 2022 年 8 月,59.4% 的网络流量来自手机。因此,许多开发人员现在开始创建考虑到移动设备限制的网站也就不足为奇了。

与台式机相比,人们更喜欢智能手机和平板电脑,统计数据也显示了这一点。到2022年,所有网站访问量中有58% 以上来自移动设备,而且这一数字还将继续增长。

在 Mobile-First 中,另一个将在 2023 年流行的术语是 AMP。

Google 的开源加速移动页面 (AMP) 计划致力于提高移动用户网站的性能。2016 年,谷歌在一篇博文中将这一举措描述为“加速动画、视频和图形等丰富内容与智能广告相结合,并让它们立即加载”的一种方式。

“轻量级”AMP 使用精简版 HTML 和轻量级 CSS。

开发人员必须牢记的一些最近的响应式 Web 开发趋势包括需要关注垂直方向而不是计算机上使用的更传统的水平屏幕,需要有元视口标签来帮助浏览器重新缩放网站,CSS查询以根据设备功能更改内容,并使用 Flexbox 等方法制作易于调整的布局

Jamstack

image.pngJamstack 是一种架构,其中动态生成的内容显示在静态交付的网站上,例如从静态托管或 CDN(内容交付网络)提供 HTML。首字母缩略词 JAM 代表网页的组件:JavaScript、API 和标记。

这三个元素的结合为开发人员提供了一个更简单、更快、更便宜的生态系统。此外,基于 Jamstack 的网站更安全,因为不需要数据库或服务器保护。它们也是可扩展的。如果网站病毒式传播,内容分发网络 (CDN) 将会发生变化。

Jamstack 是一个 Web 开发解决方案堆栈,使用户能够创建快速且安全的应用程序。Jamstack 由 Netlify 创造,远远超出了 JAM。它现在指的是一种使用许多库和方法制作网站的广泛架构方法。

Jamstack社区调查发现,47% 的 Jamstack 开发人员在边缘动态网站上工作。此外,这些平台吸引了数百万用户。

image.png充分利用 Jamstack 的最突出例子是Louis VuittonVictoria Beckham Beauty和其他网站。

Jamstack 的优势

  • 可以根据需要进行定制,因此更改需要更少的代码。
  • 标记和资产通过 CDN(内容交付网络)交付,确保更好的性能。
  • 如果您的项目遇到峰值或预计流量增长或扩展,CDN 还可以平滑项目的扩展。
  • Jamstack 使开发人员能够使用微服务方法来构建网站。因此,该应用程序变得更易于维护。
  • Jamstack 页面又快又轻。这些措施通过Core Web Vitals将您的项目排名更高,其中加载速度是标准之一。
  • 服务器端呈现模式有助于在用户请求页面时为高度动态的网站生成内容。
  • Jamstack 网站与敏感信息没有直接联系。因此它们不会受到黑客的攻击。

Jamstack 缺点

  • 这些解决方案可以使用第三方 API,例如天气表单或用户身份验证。因此,请确保您有一个支持代码,可以防止您的网站因第三方 API 故障而宕机。
  • Jamstack 在许多情况下需要编码。它不是完全插件友好的。因此,如果您的项目未连接到 CMS(内容管理系统),您可能需要进行更改。
  • 您需要在进行更改后“创建”每个页面。这个过程在有很多页面的网站的情况下是不方便的。

但 Jamstack 工程师努力解决这些问题。凭借其所有功能,Jamstack 有望在 2023 年保持潮流。

GraphQL

image.pngGraphQL 是 Facebook 于 2015 年发布的一种查询语言。它可用于为您的 JS 应用程序提供动力。

此数据管理工具提供灵活的语法,用于从后端和前端查询数据。如今,许多流行的公司都在使用它,例如 GitHub、Pinterest、Coursera、Shopify 等等。

如今,有各种流行的 JavaScript 框架和库可以充分利用数据管理。此外,所有互联网使用的很大一部分来自移动设备,这使得高效的数据加载成为必须。

创建 GraphQL 的原因是 Facebook 需要提高其应用程序中数据调用的性能。GraphQL 做得很好。

作为 2023 年最重要的 JavaScript 趋势之一,让我们讨论一下这种语言带来的好处。

GraphQL 的优点

  • 快速数据检索
    这种语言在单个端点下收集数据。因此,要检索所需的数据,程序员只需执行一个 API 调用。
  • 提高查询效率
    该语言的名称表明它使用图形来定义服务器上的数据。这种基于图形的方案允许以包的形式传递数据,而不是通过多个 API 调用。
  • 自定义请求
    该语言支持每个字段和嵌套对象的参数,包括标量字段。这种强类型特性来自于抽象原则。通过这种方式,我们降低了复杂性并专注于基本信息。

所有这些好处都可以使 GraphQL 成为 2023 年最重要的 JavaScript 趋势之一。

WebAssembly 和 the Edge

WebAssembly 支持Rust,但它也支持 C、C++、C#、Go;COBOL之类的东西可以写入WebAssembly,”Gardner 说。“所以真正的沙盒环境对客户端浏览器来说是很棒的东西,对 WebAssembly 来说是完美的。它是跨平台的,启动速度非常快,体积小且与平台无关。因此,我们将在明年看到 WebAssembly 在前端的总体增长。

当存在需要快速运行和启动的高性能应用程序时,WebAssembly 才开始真正投入使用。Vercel 已经在前端利用 WebAssembly生成社交媒体卡片。

与 JavaScript 相比,WebAssembly 可以成为生成这些图像的更快的解决方案。

可以做什么?

WebAssembly 将与 JavaScript 一起工作,而不是取代它。如果您不知道 WebAssembly 使用的一种语言——它充当编译器——Rust 可能是一个很好的学习语言,因为它是新的。

另一条路线:将JavaScript 与 WebAssembly混合。

从 Rust 到 WebAssembly 是最成熟的路径之一,因为社区之间有很多重叠,很多人同时对 Rust 和 WebAssembly 感兴趣,此外,可以将 WebAssembly 与 JavaScript 混合,因此这不一定是非此即彼的情况。

Web 开发新趋势?

Web 开发的最新趋势是 WebAssembly,这是一种在现代 Web 浏览器中运行的新型代码。它为其他语言(例如 C/C++、C# 和 Rust)提供了一种在网站上有效运行的方法,但它与 JavaScript 一起工作而不是取代它。WebAssembly 提供了一种以接近本机的速度在网络上运行以多种语言编写的代码的方法。

它正在通过 W3C WebAssembly 工作组和社区组开发为 Web 标准,所有主要浏览器供应商现在都支持该技术。

WebAssembly 特别有利于性能密集型用途,例如游戏、音乐流、视频编辑和 CAD 应用程序。它已经被 Google Earth 和协作绘图和图表应用程序 Figma 等网络服务/应用程序使用。

人工智能驱动开发

人工智能最终会取代开发人员的工作吗?这个问题还没有答案,但是,AI 驱动的开发在 2022 年成为了现实。随着GitHub Copilot的发布,开发人员能够在他们最喜欢的 IDE 中与 AI 程序员配对。它就像编写代码一样简单(或编写说明您要编码的内容的评论),GitHub Copilot 将自动完成实现细节以达到最佳理解。

但这并不止于此:OpenAI的 ChatGPT 是一种更通用的语言模型,它也负责编程任务。虽然您可以向 ChatGPT 提出自由形式的问题,但它也能够执行编码任务。许多开发人员已经发现自己正在使用 ChatGPT 作为 StackOverflow 的替代品。在许多情况下,当用作搜索引擎替代品时,ChatGPT 会提供有用的答案(尽管并不总是完美无缺)。因为后者必须处理大量的 SEO 垃圾邮件(不仅用于开发相关内容),ChatGPT 目前被视为可行的替代方案。

不过,“此刻”是这里的重要术语。从鸟瞰的角度来看,人工智能创建的内容也可以(并且将会)危害万维网。以前手动创建的 SEO 内容已经是一个问题,没有人阻止有人使用 ChatGPT 生成更多自动生成的 SEO 内容。ChatGPT 最终会训练自己生成的内容吗?

有一些我不想忘记的值得注意的提及,但它们并没有进入列出的趋势:Tauri作为 Electron 的替代品用于由 JavaScript/CSS/HTML 实现的桌面应用程序,Playwright作为 Cypress 的 E2E 替代品测试,WarpFig作为下一代终端,CSS 容器查询作为响应式设计的 CSS 媒体查询替代方案,最后但并非最不重要的是htmx作为丰富的 HTML,用于在没有 JavaScript 的情况下创建交互式用户界面。由于我在这里只给出了一个小总结,我鼓励你自己检查一下!

无论如何,希望我能够为您提供 Web 开发生态系统现状的一个很好的概述。如果您喜欢这篇文章,请随时在下方订阅我的时事通讯。今年我还打算写更多关于其中一些技术的文章,所以如果你正在为其中一项工作,请联系我,我们也许可以就此展开合作。

聊天机器人

人工智能在每一天都变得更加聪明,而这种不断增强的能力使与聊天机器人的互动成为客户和客户的愉快、有趣的体验。人工智能驱动的聊天机器人还通过收集数据和从与客户的互动中学习来为企业服务。他们甚至拥有 24/7 全天候解决问题的能力,这可以为公司节省聘请支持经理的成本。(这并不意味着要替换其中的大部分,而只是意味着支持团队可以处理更复杂的问题。)

有两种类型的聊天机器人。基于文本的和支持语音的。顾名思义,基于文本的聊天机器人是通过文本消息与用户交互的聊天机器人。他们能够了解客户的需求并为他们提供解决方案,收集反馈并保持客户参与。但是,它们需要打字,这比使用语音需要更多的时间和精力。这就是支持语音的帮助越来越受欢迎的原因。

谈到支持语音的帮助,您可能会想到美国人几乎每天都在移动设备、平板电脑、笔记本电脑、智能手表或汽车中使用的 Siri 或 Alexa。这些聊天机器人可以使用语音输入和输出进行交流。然而,企业也采用使用语音搜索和识别、语音合成和自然语言处理 (NLP) 的语音应用解决方案和服务。为什么?以下是支持语音的聊天机器人为公司提供的一些好处:

  1. 他们创造了个性化的品牌体验。
  2. 他们以类似人类的方式与您的客户沟通,这使您的公司能够与客户建立情感纽带。理解人类语言是一个复杂而持续的过程,聊天机器人不仅应该理解语言,还应该是好的倾听者。人工智能能够“训练”聊天机器人成为优秀的倾听者。
  3. 他们处理各种难度不等的任务。

想了解更多关于聊天机器人的信息,请阅读这篇关于各种类型以及如何从头开始构建它们的文章。

深色模式体验

当我们讨论了 Web 开发的几乎所有方面时,我们不要让 UI UX 缺席。而这一领域最流行的趋势之一就是——深色模式。包括苹果和安卓在内的许多科技巨头都将深色模式集成到他们的产品中,深色模式正迅速受到智能手机用户的欢迎。深色模式在深色背景上使用浅色文本,以减少眼睛疲劳,尤其是在黑暗环境中。

许多网络和应用程序用户更喜欢使用深色模式浏览和使用他们的设备——至少在晚上——发现这样对他们的眼睛来说更舒服。最新版本的 Android 和 iOS 提供深色模式,用户只需轻按一下按钮即可在深色模式和“浅色”模式之间切换。他们还提供“夜间模式”,它会在晚上的特定时间自动打开暗模式,并在早上再次关闭。此外,许多主要网站和应用程序,包括所有主要社交应用程序,现在都提供深色模式皮肤。

用户特别喜欢移动设备上的深色模式的另一个原因是它有助于减少电池消耗。

此外,一些网络应用程序已将此模式设为可选,允许网络用户通过设备屏幕、菜单或应用程序设置中的切换图标在明暗模式之间切换。尽管如此,它在未来几年仍会流行。

Facebook、Twitter、Instagram、Google 和 Reddit 已经采用深色模式,95% 的 Polar 用户即使在白天也更喜欢深色模式。为什么?深色模式具有以下主要优势:

  • 它减少了蓝光。
  • 它可以节省电池寿命。
  • 它使每个人都可以访问和阅读 UI 内容。
  • 即使在光线不足的情况下,它也能限制眼睛疲劳的风险。

动态用户界面(Motion UI)

image.png专业设计和实现的动态 UI 可以提供真正吸引用户注意力的视觉吸引力。这是因为一系列动画元素比文本、说明和其他静态信息更容易、更快速地查看。

Motion UI 传达数字产品的序列、转换、下一步或操作,从而使导航更容易。它还将用户的注意力引导到网页上的层次结构区域,因为它在整个过程中引导用户的注意力。

如果经过专业设计和实施,这项技术的结果可以提供真正吸引用户注意力的视觉吸引力。更重要的是,动态 UI 有助于传达数字产品的顺序、下一步、过渡或操作,从而使导航更加容易。在此过程中,它将用户的注意力引导到网页上层次结构的确切区域。查看一系列动画元素比阅读文本、说明和其他静态信息更容易、更快捷。

运动 UI 的其他用例包括:

  • 欢迎广大用户。您还记得诺基亚手机上两只手加入徽标的标志性动画吗?您可以将类似的集成到您的网站。
  • 令人耳目一新的内容。运动元素可以让您的用户在短时间内保持参与,让他们知道网站正在加载或处理信息。
  • 有趣的元素还有助于保持用户的注意力并使您的网站有别于竞争对手。

增强现实和虚拟现实

到 2024 年,AR、VR 和 MR 的全球市场预计将达到3000 亿美元。这些技术突破已经渗透到我们的日常生活中——想想你在 Instagram 和 Snapchat 上看到的所有滤镜和有趣的面具。由于增强现实 (AR),它们成为可能。

AR 的应用不仅限于社交平台的相机滤镜;电子商务、建筑、制造、旅游业和美容行业都可以从这些创新中受益,这些创新有可能增强客户体验并帮助将消费者与产品或服务联系起来。

以宜家为例,您可以在您自己的空间中放置一个沙发的三维模型,该模型是真实比例的。您还可以使用 Wanna Kicks 虚拟穿上您最喜欢的鞋子,这款应用程序可以让您虚拟地穿上您最喜欢的鞋子。这些是移动应用程序的示例,但该技术也可以用在您的网站上。

web 性能

网站越先进,用户的带宽越快,人们对加载缓慢的网站就越不耐烦。人们期望快速的体验并迅速放弃加载时间过长的网站。研究表明,人们希望网站在短短两秒钟内加载完毕,而人们在等待三秒钟后就开始离开。谷歌几年前就意识到了这一点,并开始将页面速度作为其排名功能之一,对加载缓慢的网页进行惩罚,尤其是在他们的移动搜索引擎中。

随着我们接近 2023 年,Web 开发人员用来优化页面速度的一些主要方法包括压缩图像、压缩 HTML、CSS 和 JavaScript 代码,以及使用内容分发网络。

视差滚动(Parallax Scrolling)

视差滚动越来越受欢迎。在这里,当有人滚动页面时,网页部分的背景内容(通常是图像)以不同的速度移动到前景。

不幸的是,它与移动优先开发有些不一致,因为这种效果通常在移动屏幕上不起作用。但是,开发人员可以使用网站 CSS 中的媒体查询为移动用户关闭效果。

语音搜索

Z 世代尤其喜欢使用 Siri 和 Alexa 等语音助手来搜索信息。根据2022 年 10 月《We Are Social Report》中报告的最新 GWI 数据,年龄在 16 至 64 岁之间的互联网用户中有 22.5% 每周使用语音助手。这甚至还不包括阿尔法一代,他们使用它的次数可能比他们的哥哥姐姐和父母还要多。有趣的是,17.0% 的 55-64 岁男性和 16.3% 的该年龄段女性已经转而使用语音搜索,因此不只是年轻人不想打字。

虽然 Siri 和 Alexa 几乎适用于任何网站,但网络开发人员正在通过考虑语音搜索来优化他们的网站,从而使他们更容易使用。通过这样做,他们还让听力和视力受损的人更容易访问他们的网站。

语音搜索具有使用户和企业主都受益的优势:

  • 这很省时。
  • 它允许额外的时间在网页上冲浪。
  • 它收集有关客户行为模式的信息。

渐变色 和 玻璃纹理(Glass Texture)

色彩设计和图案在互联网上流行,就像在其他生活中一样。目前,渐变仍然受到青睐,领先于简单乏味的平面颜色。网页设计师通过使用颜色渐变来玩弄不同的外观,通常会创造出引人注目的组合。颜色为您的设计带来乐趣、创造力和个性。

玻璃纹理,又名玻璃形态,为网页设计添加深度和纹理。您将模糊效果与透明度相结合,像素呈现出一种略微不透明的磨砂玻璃效果。Glassmorphism 不会试图欺骗任何人认为你在看玻璃。相反,它只是唤起它的感觉。

Apple 自 2020 年以来一直在其设计中使用玻璃纹理,并且最近出现在 Windows 11 中。它特别受欢迎,因为交互元素(例如按钮、导航选项、滑块和其他 UI 元素)在清晰的线条中脱颖而出在玻璃状模糊之上。

JAMstack

image.pngJAMstack 是构建静态网页的独特概念。不是为内容生成实施后端解决方案,而是使用 API。最终结果是网站速度更快,而且从开发人员的角度来看也更易于管理。

JAMstack 的定义:

  • J for JavaScript - 用于编写前端函数的语言。
  • A用于 API - 从第三方服务请求内容(数据)。
  • M表示标记 - 构建网页上的内容。

至于stack,它是您正在使用的工具的组合。只要遵循 JAM 结构,JAMstack 就可以与任何框架和服务组合一起使用。

了解更多信息:  Jamstack.org or WTF 是 Jamstack?

更多

  • 区块链技术
  • 渐进式网络应用程序 (PWA)
  • 物联网 (IoT)
  • 加速移动页面 (AMP)
  • 语音搜索优化
  • API优先开发
  • 人工智能驱动的聊天机器人
  • 通知推送
  • 通过机器学习实现内容个性化
  • Motion UI
  • 数据安全
  • 多重体验
  • 网络安全
  • 微前端
  • 虚拟现实
  • 无服务器架构(serverless)
  • 云计算
  • 单页应用程序 (SPA)
  • JavaScript 框架
  • 自动化测试
  • 响应式网站
  • 深色模式
  • WebAssembly
  • 无代码/低代码开发
  • 增强现实
  • 移动友好的 Web 开发
  • 核心网络生命力
  • WordPress开发
  • ...


相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
相关文章
|
监控 JavaScript 前端开发
【2023】前端趋势前瞻,学起来!(四)
【2023】前端趋势前瞻,学起来!(四)
|
Web App开发 存储 前端开发
【2023】前端趋势前瞻,学起来!(二)
【2023】前端趋势前瞻,学起来!(二)
|
移动开发 Rust JavaScript
【2023】前端趋势前瞻,学起来!(一)
【2023】前端趋势前瞻,学起来!(一)
|
Web App开发 缓存 Rust
前端技术未来三年前瞻性思考
从业务场景、用户体验、研发速度、维护成本四个维度来看框架等前端技术,分享对未来三年前瞻性的思考。
10219 0
前端技术未来三年前瞻性思考
|
Web App开发 人工智能 前端开发
大前端2020年前瞻:有哪些你不能错过的技术趋势?
“学不动”的大前端,在 2020 年有哪些你不能错过的技术趋势?又有哪些你将面临的挑战?
2955 0
大前端2020年前瞻:有哪些你不能错过的技术趋势?
|
1月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
133 2
|
1月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
41 0
|
1月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
|
1月前
|
存储 弹性计算 算法
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。
|
1月前
|
机器学习/深度学习 弹性计算 自然语言处理
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。