JavaScript 运行时
这一切都始于 Ryan Dahl在 2009 年的一次会议上宣布Node.js。最初是一项将 JavaScript 与浏览器分离并使其在服务器上可用的实验，后来成为 JavaScript 在过去十年中取得成功的最大推动力之一。本质上，Ryan Dahl 在没有浏览器本身的情况下为 Node.js 使用了称为 V8 的 JavaScript 引擎（由 Chrome 实现）。因此，Chrome 浏览器和 Node.js 使用相同的 JavaScript 引擎，但有自己的 JavaScript 运行时（例如浏览器 API 与节点 API）来与之交互。
十年后，Ryan Dahl宣布Deno 成为 Node 的继任者，并承诺为开发人员提供一个更安全、更快速的环境，其中包括类似浏览器 API、TypeScript 和开箱即用的标准库。Deno也运行在 V8 上，不过现在只是众多 JavaScript 运行时中的一种。
在边缘功能的竞争领域，许多云提供商实现了自己的 JavaScript 运行时（例如 Cloudflare Workers），它针对自己的基础设施（例如 Cloudflare）进行了优化。因此，Deno 的商业模式也正在成为一个云提供商，拥有Deno Deploy和他们的即时边缘渲染 SSR 框架（最初作为概念验证），称为Deno Fresh。像Bun （在 JavaScriptCore Engine 上运行并在 Zig 中臭名昭著地实现）这样的独立于云提供商的解决方案最近成为最快 JavaScript 运行时竞赛中的另一个热门话题。
由于不同的运行时，敏锐的头脑会（再一次）看到 JavaScript 领域中的大量碎片。如果事情搞砸了，我们最终会遇到多年来在浏览器中支持零散的 JavaScript 的情况，但这次是在服务器上，当部署在不同的云提供商上时，并不是所有的 JavaScript 都在运行时得到同样的支持。因此，所有利益相关者（例如 Deno、Vercel、Cloudflare）都加入了WinterCG，以就其 JavaScript 运行时之间的 API 互操作性进行协作。
低代码
市场上已经达成了一种新的共识：针对于不同的场景，构建不同的低代码平台。但是呢，我们空间需要怎样的低代码平台？这成了今年的一个新问题。
而对于中小型公司，还面临着一个问题，开发人员响应“热闹驱动开发”开发了低代码平台，而这些低代码平台似乎并没有真正体现价值。对于业务人员而言，这些低代码平台的学习成本太高。
尽管主要原因可能是，开发人员没有考虑普通用户的体验。但是呢，实际上的原因可能是：设计不出适合于业务人员的体验？而这个问题可以换个角度来看，在金融科技公司里，他们更希望招聘的是懂得 Python 的金融工程人才。也因此放到低代码领域来看，这些公司或许需要懂得一些技术的数字化人才。
构建工具
在 React-land 中，create-react-app (CRA) 主导了几年。这在当时是一场小小的革命，因为初学者获得了一个随时可用的 React 入门项目，而无需再使用 React 设置配置自定义 Webpack。然而，在过去的一年里，Webpack 很快就过时了。
Vite是单页应用程序 (SPA) 方面的新手，因为它可以与所有流行的框架（例如 React.js）配合使用来创建入门项目。由 Vue.js 的创建者 Evan You 实现，它将自己定位为下一代前端工具。在引擎盖下，它从esbuild获得了强大的功能，与其他 JavaScript 打包器相比，它是用 Go 编写的，因此打包依赖项的速度比其竞争对手（例如 Webpack）快 10-100 倍。
虽然 Vite 的生态系统随着Vitest（Jest 的测试替代品）等新增功能而蓬勃发展，但 Vercel 的Turbopack等其他竞争对手最近才出现。Turbopack 被称为 Webpack 的继承者，因为它是由 Webpack 的创建者 Tobias Koppers 带头的。由于 Next.js 仍在使用 Webpack，而 Turbopack 是由同一家公司开发的，因此我们可以预期 Next.js 和 Turbopack 在未来可能是绝配。
整合新一代工具
Webpack 成熟稳定，仍然是前端打包的黄金标准，但对于大型项目来说可能非常慢。
我们看到像 Vite 这样的 Webpack 替代品在今年成熟并成为一个真正的选择。我们还看到了 Turbopack 的出现，这是很有前途的，因为它来自 Webpack 的创建者，它声称比其他任何东西都快很多倍，即使与已经非常快的 Vite 相比也是如此。
Turbopack 仍处于 alpha 状态，但在 2023 年，我们预计该项目将保持增长并达到生产就绪状态。其他选项如 Vite 仍将继续巩固作为 Webpack 的重要替代品。
我们分别在1 月和11 月的文章中谈到了 Vite 和 Turbopack。
服务器端渲染（SSR）和页面速度优化
谷歌现在认为服务器端渲染 (SSR) 是 SEO 的重要工具，尤其是在搜索结果中排名靠前的时候。因此，它已成为任何想要在 Google 上取得成功的网站或应用程序的必备功能。
由于其处理 cookie 的方式，服务器端渲染还为前端开发带来了显著的性能优势，例如减少网络延迟和数据安全性。
人们期望快速的体验并迅速放弃加载时间过长的页面。服务器端渲染使现代单页应用程序与服务器渲染的应用程序一样快速和可访问，同时在第一页加载后保持类似应用程序的体验。
我们已经强调了一些技术，例如React Server Components和Selective Hydration。我们可能会在来年看到这种模式的采用增加，并且在 React 中，我们预计lazy也会Suspense变得更加流行。
虽然过去十年（2010 年至 2020 年）一直由具有客户端呈现的单页应用程序 (SPA) 主导(CSR)，从 Knockout.js 和 Ember.js 到 Angular.js、React.js 和 Vue.js，过去几年人们对使用元框架的服务器端渲染 (SSR) 越来越感兴趣。从外部看来，这个周期似乎又要结束了，因为我们在多页面应用程序 (MPA) 中使用 SSR 和 JavaScript（例如 jQuery、MooTools、Dojo.js）已经很长时间了（2005 - 2010 年）。然而，虽然过去 Java（例如 JSP）或后来的 Ruby on Rails 已用于 SSR，但这次不同，因为我们依赖 JavaScript。几年来，Next.js 一直是这一趋势背后的推动力，但是，其他元框架（如 SvelteKit）正在迎头赶上。
SSR 已经与静态站点生成 (SSG) 竞争了很长一段时间以获得完美的性能（请参阅 Next.js 与Gatsby.js），尽管这两种模式用于完全不同的目的。后一种模式用于静态内容（例如博客之类的网站），而前者用于动态内容（例如 Web 应用程序）。如果SEO是相关的，那么 SSR 和 SSG 都有意义。但是，由于需要高度动态的内容或以用户为中心的内容并进行身份验证，开发人员不能选择 SSG（在部署之前构建一次，因此是静态的），而必须在 SSR（根据服务器上的单个数据请求按需构建）之间做出选择或最近的 CSR（在客户端上按需获取个人数据）。
CSR、SSR、SSG 并不是渲染技术的最新趋势。虽然 SSR 和 SSG 在几年前开启了性能优化趋势，但增量静态再生 (ISR) 和流式 SSR 等更细微的渲染技术开始活跃起来。前者推进了 SSG，因为它允许在每个页面的基础上静态重建网站（例如，每 60 秒重建页面 X）而不是重建整个网站。更进一步，按需 ISR，也称为按需重新验证，可用于通过应用程序公开的 API 触发重建（例如，当 CMS 数据更新时）。
另一方面，Streaming SSR 优化了服务器端渲染的单线程瓶颈。普通 SSR 必须在服务器上等待数据将呈现的内容立即发送到客户端，而 Streaming SSR 允许开发人员将应用程序分成块，这些块可以逐步从服务器并行发送到客户端。
在过去几年中，SPA/MPA 中的 SSG 和 SSR 渲染模式非常简单。然而，如今更微妙的版本正在流行。但是，不仅 ISR 和 SSR 流变得更相关，而且部分水化（例如 React 服务器组件）允许仅水化客户端上的某些组件，渐进式水化可以对水化顺序进行更细粒度的控制，Island用于 MPA 中的隔离应用程序或组件的架构（例如Astro ）以及使用可恢复性而不是水合作用（例如Qwik）如今正在成为有效的方法。
框架
单页应用程序 (SPA) 及其各自的框架（例如 React.js、Vue.js、Svelte.js）或多或少经历了炒作周期，并且已经存在多年。然而，随着元框架在这些解决方案之上的兴起，我们可以看到应用程序从客户端 (CSR) 转向服务器端呈现 (SSR) 的明显趋势。如今，在使用 JavaScript 框架时，SSR 无处不在。
最流行的名为Next.js的元框架位于 React.js 之上。React 核心开发人员 Andrew Clark 到目前为止将其称为2022 年的“真正的 React 18 版本”，因为它附带了 React 团队作为较低级别的基本构建块提供的所有电池（例如 Suspense、流式 SSR）图书馆的。Vercel（Next.js 背后的公司）和 React.js 核心团队紧密合作，提供出色的开发人员体验。
虽然许多开发人员以担忧的态度关注 Next.js 和 React.js 之间的密切关系，但 React.js 有替代品，如Remix（最近被 Shopify 收购）。Remix 采用不同的方法将 React.js 转变为元框架（例如，使用 Web 标准作为一等公民），但由于竞争，两个框架之间也有融合的功能（例如嵌套路由）。
尽管 Next.js 已经是现代 SSR 领域的既定竞争者，并将许多前端开发人员自然地转变为全栈开发人员，但其他框架也应该在您的关注列表中：SvelteKit（基于Svelte.js构建）及其最新的 1.0 版本由 Vercel 和SolidStart（基于Solid.js构建）提供支持，与 React.js 相比具有改进的 DX。
PWA
渐进式 Web 应用程序 (PWA) 是一种新的 Web 开发方法。它们结合了 Web 和本机应用程序的优势，以创建适用于所有设备的快速、可靠、引人入胜的体验。使用 PWA，您可以在网站上做比以往更多的事情。它们可以在 App Store 或 Google Play Store 中提供，同时可用于 Web。
除了脱机工作外，PWA 还支持推送通知和后台更新，使用户可以轻松了解您的组织或机构的最新消息。
渐进式 Web 应用程序将在 2023 年继续流行。这些应用程序提供了传统 Web 和平台特定应用程序之间的混合体验，允许用户将它们作为应用程序添加到他们的设备中。它们还提供一些离线体验并支持推送通知和后台更新。
我们可以期待数据获取库（如 React Query 或 SWR）或 Service Workers 继续获得关注，因为它们对于为可安装的 Web 应用程序提供高性能和类似应用程序的动态体验至关重要。
您可能会习惯于在您的设备上使用特定于平台的应用程序。它们出现在主屏幕、停靠栏和任务栏上，并且无论您是否有网络连接都可以正常工作。它们作为独立应用程序启动，不依赖于浏览器或其他应用程序（除此之外，可能与您的核心操作系统无关）。即使在其他应用程序中，您也可以执行拍照、在主屏幕上查看正在播放的歌曲或控制歌曲播放等操作。它们感觉像是您设备不可或缺的一部分。
传统的 Web 应用程序通常感觉更遥远。这是因为它们通常需要互联网访问才能运行，并且它们的速度将取决于您的带宽。
最近的趋势是渐进式 Web 应用程序 (PWA) 的开发，它就像是两者的混合体。开发人员对 Progressive Web Apps 进行编码以与现代 API 一起使用以提供增强的功能和可靠性，同时可以通过单一代码库在任何设备上访问任何人，无论他们身在何处。
PWA 变得如此流行，以至于一些人认为它们将及时完全取代传统的网络应用程序。
PWA 基本上是一个看起来像应用程序的网站。示例包括 Tinder、Pinterest、YouTube Music 和 Trivago Hotel Booking。它们是用一组特定的技术构建的（我们稍后会讨论）并通过网络提供。PWA 旨在在使用符合标准的浏览器的任何平台上工作，无论是台式计算机还是平板电脑。渐进式网络应用可以完成原生应用可以做的大部分事情：
- 他们可以离线操作。
- 他们可以使用硬件功能，例如访问您的相机和麦克风甚至 GPS。
- 它们为所有者可靠地安装，为访客快速加载。
那么，渐进式 Web 应用程序是如何构建的？技术堆栈由 HTML、JS 和 CSS 组成。在技术方面，PWA 由 Service Worker、HTTPS、App Shell、Web App Manifest 和 Push notifications 组成。让我们谈谈他们每个人：
- Service Worker是 PWA 的核心，也是 Web 开发行业的游戏规则改变者。Service Worker 充当网络和后台运行的应用程序之间的代理，使网站能够存储信息，以便用户可以离线访问。
- HTTPS保持高水平的渐进式 Web 应用程序安全性，可防止它们受到网络攻击。
- App Shell充当应用程序页面的框架。之所以称为 shell，是因为它表示没有内容和动态元素的布局。简而言之，这是一个虚拟框架，稍后在应用程序加载它时会填充内容。
- Web App Manifest是一个 JSON 文件，包含应用名称、描述、图标、起始 URL、背景和主题颜色。
- 推送通知只是用户从网站获得的通知。
谷歌的官方介绍称，PWA 速度快——即使在不确定的网络条件下也能立即加载，可靠——以丝般流畅的动画和无卡顿的滚动快速响应用户交互，并且引人入胜——感觉就像设备上的自然应用程序，具有身临其境的用户体验。
Web Components
没有人能预测五年后 JavaScript 框架的流行程度。但是 Web 组件可以广泛用于任何流行的框架甚至纯 JavaScript。
这就是为什么现代应用程序的这些构建块被称为框架无关的。另一个名称是不可知 Web Components。它们促进了 Web 开发并减少了创建应用程序所需的时间和成本。
但是是什么让这个概念在其他 JavaScript 趋势中如此流行，它是如何工作的呢？它基于以下规范：
- 自定义元素允许开发人员创建具有完全可自定义行为的新自治 HTML 标签。
- Shadow DOM使得将 DOM 子树封装到 Web 元素中成为可能。
- ES 模块（使用模块的标准）确定如何包含 JS 模块并在其他 JavaScript 文档中重用它们。
- HTML 模板提供了一种创建标记片段的方法，这些标记片段不会通过在运行时实例化来影响页面加载。
在谈到最新的 JavaScript 趋势时，Web Components 是最受欢迎的。
但为什么会这样？作为 2023 年最值得关注的 JavaScript 趋势之一，让我们发现实现 Web Components 的好处。
Web Components 的优点
- 互操作性和灵活性
Web Components 是一个独立于平台的概念，可以在所有主流浏览器中使用，因为它仅依赖于 HTML、CSS 和 JavaScript。Web Components 得到顶级 JavaScript 库和框架的良好支持。
资料来源：webcomponents.org
- 可重用性和封装
Web 组件依赖于本机浏览器模型实现。这允许在任何 JavaScript 应用程序中重用组件。 - 移动增强
渐进式网络应用程序现在正在获得动力。因此，PWA 开发成为想要有效地与移动客户互动的企业的必备条件。由于它们的小包大小和快速运行时间，这就是 Web 组件可以提供很大帮助的地方。
此外，Codica 的开发人员在开发具有良好用户体验的 PWA 方面拥有丰富的经验。例如，我们最近的一个项目是一款健身应用程序，旨在简化健身教练与其客户之间的沟通。多亏了 PWA，客户和培训师可以从任何设备访问这个解决方案，甚至无需安装它。
Web 3D
随着 5G 技术发展，视频加载速度会非常快，简单的实时渲染会被视频直接替代。复杂的可以通过服务器渲染，将画面传回网页中，只要传输够快，手机的性能就不再是问题。
降低 web 3D 研发成本应该是将来的一个重要发展路线，随着技术门槛的降低，会吸引更多感兴趣的人加入促使其正向发展。所以 Web 3D 可能会朝着平台化的方向发展，能提供简单高效的工具将成为核心竞争力。
WebRTC
WebRTC 是一项实时通讯技术，它为前端打开了信息传递的新世界大门，对于绝大多数前端开发者来说，对于信息的传递还局限于 XMLHttpRequest，升级到全双工大家会用到 WebSocket ，对于能力闭塞的前端来说，WebRTC 无疑拓宽了前端的技术门路。
基于组件的架构
基于组件的体系结构将设计分解为逻辑或功能元素。这些元素包含众所周知的接口，如方法、属性和事件。该体系结构致力于增强组件重用。这些组件是封装功能的可自行部署的二进制单元。
说到最新的 JS 趋势和前端的总体发展，我们不能不谈一个叫做Bit的开源平台。它是用于共享、存储和组织来自任何项目的 Web 组件的绝佳工具。它有助于提高代码的可重用性并在单独的组件上进行协作。
基于组件的架构的优点
- 易于部署
当您需要推出新版本时，无需更换整个系统。与特定组件相关的所有内容都在其类中声明。 - 降低成本
您可以集成第三方组件，还可以将软件成本分摊到不同的应用程序中。 - 易于开发
组件使用有助于不影响应用程序其他部分的接口。问题是，一层架构（大多数情况下是视图）包含逻辑、设计和辅助功能。 - 测试新的 JavaScript 技术
您可以测试新组件与现有应用程序或元素的兼容性。
那么为什么您需要实施基于组件的方法作为最近的 JavaScript 趋势之一呢？选择组件，您可以使用您的团队为另一个项目或整个开源社区开发的部分代码。
