2021 年 Web 应用程序开发的最新趋势：行业期望

这一年已经结束，虽然现在计算 2019 年的结果还为时过早，但现在肯定是展望未来并考虑Web 开发的未来趋势的时候了。 作为一家 Web 开发公司，了解这些内容符合我们的利益。 在本文中，我们列出了趋势技术和方法——新的和旧的——我们相信明年将产生重大影响。 继续阅读以了解它们是什么。

为了清晰和方便，本文分为几个部分：后端、前端、网页设计和杂项。

后端趋势

HTTP/3

HTTP/3 是我们都熟悉的 HTTP 协议的最新版本。 这是 HTTP/2 的重大飞跃，主要是因为 HTTP/3 建立在基于 UDP 的 QUIC 协议（发音为“quick”，代表 Quick UDP Internet Connections）之上，而 HTTP/2 基于 TCP（传输控制协议） . HTTP/2 使用单个连接，这通常不是问题，除非我们谈论的是低质量网络。 在低质量的网络中，HTTP/2 可能会非常慢，因为它需要额外的时间来重新处理丢弃的数据包。

传统的 UDP 连接由于缺乏额外的错误检查机制而存在数据传输可靠性的问题。 当数据包被丢弃时，系统不会重新传输它，因为它没有打开/维护/关闭连接的开销。 QUIC通过多路复用或通过单个通道同时传输多个信号来解决这个问题。 它结合了 TCP 的可靠性和 UDP 的速度。

QUIC 基本上就是它的名字所建议的——一种更快的协议。 它更简单、更轻便、更高效，同时保持可靠性。 难怪它是 Web 开发的未来趋势之一。

图形语言

GraphQL 是一种 API 查询语言，是开发 API 的标准。 它是 Facebook 的一个孩子，甚至还不是那么年轻——它是在 2012 年开发的，并在 2015 年开源。但是现在越来越多的公司采用 GraphQL，这迫使我们将它添加到我们的列表中2021 年网络发展趋势。

在 GraphQL 之前，我们有 REST，其主要问题是它需要多个端点并从中提取太多数据，而不是手头任务所必需的所有数据。 GraphQL 是不同的。 使用 GraphQL，您只能通过单个端点获取您特别要求的数据。 这使得 GraphQL更快更高效。 此外，API 代码更短，因为您不需要为每个请求编写单独的端点。

最后，值得记住的是 GraphQL 是一种开源语言，这意味着它几乎可以被任何人升级。 开源有助于不断发展。 我们将看到 GraphQL 在未来带来哪些新趋势。

机器人和人工智能

现在聊天机器人无处不在，不是吗？ 它们在网络和移动设备上都很流行。 而且他们似乎不会很快停止。 此外，在人工智能驱动的自然语言处理 (NLP) 系统的帮助下，它们变得更智能、更高效。

几年前，聊天机器人只提供严格的预编程对话，可以解决有限范围的问题，而今天，与机器人聊天几乎与与人类支持专家聊天没有区别。

人工智能现在甚至进入了网页设计。 Sketch2Code 等工具可以自动将网站草图转换为 HTML 原型。 AI 提升用户体验，让搜索和推荐更加精准，并提供语音搜索优化。

Nest.js

Nest.js 是一个 Node.js 框架，它允许 Web 开发人员构建可扩展的服务器端应用程序。 由于结合了灵活性和安全性，Nest.js 已经在每个 CTO 明年（甚至更长）需要牢记的 Web 开发趋势中占有一席之地。

使用 TypeScript（JavaScript 的超集）构建，并受到 Angular 的极大启发，Nest.js 更简单、更灵活，并且与大多数其他选项相比，停机时间更少。 它与 Node.js Express 服务器和大多数现有的 JavaScript 库完全兼容。 Nest.js 也有开箱即用的架构解决方案，如果开发人员愿意，它的应用程序不仅可以使用 TypeScript 编写，还可以使用 JavaScript 编写。

前端趋势

WebAssembly (WASM)

JavaScript 很棒，但也不是没有缺点。 JavaScript 的一个特殊问题是性能。 对于所有解释性编程语言来说，这都是相同的问题，而 WebAssembly 是解决这个问题的最新方法。

WebAssembly最好的一点是它不是一种全新的语言。 您可以使用您喜欢的语言编写，然后将其编译为 WASM 文件以在浏览器中运行。 WebAssembly 目前支持的语言有 C/C++、Elixir、Rust、Python、Go、C#/.Net 和 Java。

WebAssembly 不是在 2019 年发明的； 它已经上市几年了。 但它正在快速发展并提供越来越多的选择。 默认情况下，所有主要浏览器现在也都支持它，这使得它在您的程序员的腰带下是一件很棒的事情。

渐进式 Web 应用程序 (PWA)

渐进式 Web 应用程序基本上是一个功能接近原生移动应用程序的网页：

• 它可以立即“安装”到设备上——用户只需将页面固定在智能手机的主屏幕上，就可以随时访问它，甚至是离线访问。
• 它是响应式的——它会自动调整到设备的屏幕尺寸和模式。
• 它是安全的——PWA 必须通过 HTTPS 提供服务。
• 它的外观和操作类似于本机应用程序，但占用的空间更少。

当然，PWA 仍然存在局限性，它们无法完全推开原生应用。 （不过，他们需要这样做吗？）特别是，作为本质上的网页，PWA 不能使用大多数硬件功能，如 NFC 和蓝牙。 但是，并非所有应用程序都需要此功能。

PWA 的开发速度更快、更容易、成本更低，这就是为什么它们在今年的 Web 开发中成为趋势，并且在 2021 年肯定会继续保持趋势。

辅助功能 (a11y)

这是 Web 应用程序开发中最重要的趋势之一。 我们相信可访问性应该在每个网站开发人员的列表中排在首位，不仅对于新站点，而且对于旧站点的更新。

可访问性或 a11y 是一个原则，它表示计算机系统应该对所有类型的用户都方便。 网站应该在各种设备上都能很好地工作，是的。 但它们也应该适用于有各种障碍和残疾的用户。 A11y 一般是指软件和硬件的可访问性。

在 Web 开发方面，可访问性可以通过以下方式实现：

• 更大或可定制的字体大小
• 可选的高对比度页面
• 支持语音合成/文本到语音
• 视频中的字幕
• 所有音频文件的转录
• 导航语音识别
• 纯语言文本
• 突出重要部分
• 以尽可能少的步骤进行一致的导航
• 简化授权（但不牺牲数据安全性）
• 使用键盘而不是鼠标/触摸板进行导航
• 语义HTML

名称 a11y 来自这样一个事实，即“accessibility”中有 13 个字母，因此“a”和“y”之间有 11 个字母。 但如果仔细观察，a11y 看起来像是“盟友”这个词——朋友、助手、合作伙伴。

JavaScript 趋势

当然，JavaScript 整体上没有什么新东西，但是有几个新的前端框架打算风靡全球。 让我们稍微谈谈它们。

盖茨比.js

Gatsby 是一个 SSG，或者一个静态站点生成器。 如果您认为静态网站已成为过去，我们有消息要告诉您：它们是最新的技术趋势之一。

Gatsby.js 的最大优点之一是它不需要传统服务器； 它与 BYOC（自带内容）配合使用，可以基于来自 CMS、CSV、API 和 Markdown 文件的数据构建网站。 Gatsby 还使用 GraphQL（我们之前提到的一种高端 API 查询语言）来构建数据层。

掌握 Gatsby.js 确实需要开发人员了解 React Native 和/或 GraphQL，但您不需要立即深入了解 - 您可以同时开始学习这三者。

Gatsby.js 是一个非常适合开发电子商务网站的 SSG。 这个基于 React 的生成器可以帮助您创建可以在眨眼间加载的站点，从字面上看——我们在这里不是在谈论秒，我们在谈论毫秒。 任何电子商务企业主都知道，有时页面加载的瞬间延迟会影响客户是否进行购买。 对于其他类型的网站也是如此，尽管可能程度较小。

SPA 框架

您可能已经注意到，对于大多数网站，所有或大多数页面都有相同的基本界面。 尽管如此，当您转到网站内的不同页面时，整个页面都会重新加载，包括那些相同的元素。 这就是多页 Web 应用程序发生的情况。

SPA 或单页应用程序是 Web 应用程序，当用户在部分之间单击时，页面不会完全重新加载； 它只提取必要的数据，而不是请求对 HTML 进行完整更新。 这缩短了加载时间。 它还需要更少的带宽。

今天，SPA 可以使用三个主要框架来实现：React、Vue 和 Angular。 React 拥有最大的市场份额，而 Vue 作为新来的孩子，拥有最小的市场份额。 然而，Vue.js 可能是最适合与 SPA 一起工作的最佳选择——它非常小但可扩展、灵活，并提供顶级集成选项。 我们预计它明年将成为有影响力的参与者。

视图 3

2019 年 6 月下旬，Evan You 和 Vue.js 背后的团队发布了关于框架的新迭代 Vue 3 的 RFC（征求意见），这在社区中遭到了相当多的负面影响。 但事实证明，这种消极情绪是响亮的，但并不是那么大。 此外，正如经常发生的那样，它源于许多误解。

一些 Web 开发人员的内裤扭曲的原因是因为 Vue.js 突然有了一个基于函数的组件 API 来取代熟悉的基于对象的 API 。 然而，这并不完全正确。 新的基于函数的组件 API 是一种补充，如果您愿意，可以与传统的基于对象的 API 一起使用。

Vue 3 Composition API 中的新语法具有更好的逻辑性并有助于更好地构建代码。 一些开发人员甚至说它稍微缩短了代码。 在撰写本文时，Vue 3 框架可用作使用 Vue 组合库的 Vue 2 插件。

Svelte.js

Rich Harris 在 JSConf EU 2019 上介绍，Svelte 与 Vue 既相似又不同。 它的相似之处在于它也是一个组件框架。 然而，与 Vue 不同的是，Svelte 是一个在构建时运行的组件编译器。 这使得仅加载显示应用程序所需的组件成为可能。 使用Svelte 时不使用虚拟 DOM 。

Svelte 具有简单的语法，使开发人员能够从标记访问变量，而不是使用针对不同框架而不同的状态包装器。 这使得 Svelte 成为 Web 开发新手的近乎完美的框架。 对于更有经验的开发人员来说，Svelte 意味着可以更快地编写代码并因此获得性能更高的网站。

自推出以来的一年中，Svelte 经历了重大改进和更新，使其成为当今许多开发人员所说的最简单、最漂亮的框架之一。

打字稿

TypeScript 是 JavaScript 的超集，尽管（或可能是由于）它并不是全新的，但它越来越受欢迎。 几年来，它一直是 Web 编程趋势之一，并且是开源的，它不断被开发和升级。

TypeScript 的优点包括可选的静态类型。 它还使 JavaScript 的新特性向后兼容——可以使用编译器将 ES6 和 ES7 转换为 ES5 及更低版本。 这意味着为最新浏览器编写的代码仍然适用于旧浏览器。

TypeScript 更具可读性，在重构方面更灵活，更易于测试，并且为开发人员提供了许多一流的文档。 许多人认为它是 JavaScript 的未来。

CSS 框架

框架使一切变得更简单，其中包括备受诟病的 CSS。 让我们看看今年 CSS 的流行趋势。

胡迪尼 CSS

Houdini（如著名的魔术师 Harry Houdini）是最新 Web 开发趋势中非常独特的框架。 基本上，Houdini 是一组 API，可让开发人员访问 CSS 对象模型。 这意味着，如果您需要 CSS 中尚不可用的样式，则无需使用 JavaScript 覆盖 CSS。 使用 Houdini CSS 框架，您可以编写将被浏览器视为 CSS 并按其解析的代码。

结果是解析花费的时间更少，开发人员不需要等待浏览器提供商扩展 CSS，并且设计可以变得更加个性化和独特。

不过，仍然存在一个问题：Houdini 尚未得到所有主要浏览器的支持。 但是这个过程已经启动，我们正在等待我们使用 CSS 的方式完全改变。

布尔玛

布尔玛是最现代的行业趋势之一。 它是使用 Sass（Syntactically Awesome Style Sheets）扩展构建的，并基于 CSS 弹性框布局模块，或简称 Flexbox。 Flexbox 是一个经常用于构建响应式网站的模块。

Bulma 是一个免费的开源 CSS 框架，它提供了一系列社区创建的主题，样式尽可能少。 由于 Sass 构建，它易于实现并且可以自定义。 由于 Bulma 的 CSS 代码简单，用它构建的网站通常与所有浏览器兼容，几乎没有问题。 目前，它是开发人员中最流行的 CSS 框架之一，看起来明年也会保持这一地位。

顺风

Tailwind CSS 框架已经存在一段时间了，但在最近几个月里流行度有所上升。

Tailwind 的独特之处在于它不是 UI Kit，这将它与其他 CSS 框架区分开来。 它没有内置的 UI 组件。 相反，Tailwind 提供了一组小部件，用于使用Atomic CSS 实用程序类进行快速 UI 开发。 这意味着您将能够完全按照您需要的方式从头开始构建，而不受其他 CSS 框架提供的主题和样式的限制。

不过，您需要熟悉 Atomic CSS，这使得 Tailwind 与其竞争对手相比有点挑战。 从好的方面来说，它将为您提供最自定义的外观和感觉。

动效UI设计

Motion UI 是网页设计和开发中最大的新趋势。 简而言之，Motion UI 顾名思义就是为您的网站页面添加操作。 它不仅包括视觉效果。 微交互和动画一样是 Motion UI 的一部分。 响应式手势可以帮助您的访问者理解元素背后的含义——例如，通过在光标悬停在元素上时简单地展开解释。

向您网站的界面添加动效可以实现许多目标：

• 帮助用户轻松浏览网站
• 将注意力吸引到您网站的重要部分
• 在用户等待从一个屏幕过渡到另一个屏幕时娱乐并分散他们的注意力
• 增强您的品牌形象

Motion 可以帮助网站所有者用很少的文字讲述一个故事。 或者根本没有字。 关键是要做得恰到好处——不要太多也不要太少。

其他网络应用技术趋势

我们想指出几个与前端、后端或设计不完全相关的趋势。 这些都是简单的事情，随着时间的推移和技术的发展，这些事情变得越来越重要。

数据安全和隐私

今天，我们在新的数据泄漏丑闻之间的休息时间越来越短。 但是有人试图修补漏洞仍然需要泄漏。 在物理世界和在线世界中都是一样的。 为此，不断开发新的高端安全协议： SSL证书、安全检查、 DDoS攻击防护等等。

2018 年 5 月，欧盟发布了通用数据保护条例（GDPR）。 根据 GDPR，网站应该告知访问者将收集关于他们的哪些信息（通过 cookie 或通过提供电子邮件地址并填写个人资料）以及这些信息将如何使用。 因此，我们看到对网络安全的投资大幅增加。 既然我们在互联网上管理我们的身份和财务，人们就要求在线安全。

数据安全不再是未来的趋势。 这是今天的趋势，它只会随着时间的推移变得更大。 因此，如果您是网站所有者，则需要睁大眼睛。

加载速度

如果您完整地阅读了这篇文章，您可能已经注意到后端和前端技术的数量，它们专注于更快的页面加载、更快的任务完成、更快的一切。 我们总是很匆忙，当页面加载太慢时，我们会放弃它并寻找替代方案。 毕竟，有很多。 加载速度过去、现在和未来几年都将成为 Web 开发的趋势，Web 开发人员需要关注所有旨在加快网站速度的新技术。

这是我们对明年有望大肆宣传的网络技术的看法。

由 Svitlana Varaksina 和 Artem Chervichnik 撰写