解锁多重处理以实现更流畅的 Web 应用程序

Coaction - 一个高效、灵活的状态管理库，用于构建高性能、多线程 Web 应用程序。

仓库：https://github.com/unadlib/coaction

动机

现代 Web 应用程序变得越来越复杂，突破了浏览器的可能性界限。单线程 JavaScript 虽然功能强大，但通常难以满足复杂的 UI、实时交互和数据密集型计算的需求。此瓶颈会导致性能问题、界面滞后或无响应、请求连接限制，并最终导致用户体验受损。

虽然 Web Workers（或 SharedWorker）提供了一条实现并行性和提高性能的途径，但它们也带来了一系列新的挑战。跨线程管理状态、高效同步数据以及维护一致的应用程序逻辑很快就会成为一项艰巨的任务。现有的状态管理解决方案通常无法满足这些特定需求，要么是与工作线程耦合过于紧密，要么是引入了阻碍开发人员生产力的复杂抽象。

Coaction 的创建是出于对状态管理解决方案的需求，该解决方案真正拥抱现代 Web 应用程序的多线程本质。它认识到性能和开发人员体验不应相互排斥。通过利用 Web Workers 和 Shared Workers 的强大功能，Coaction 允许开发人员从工作线程中卸载计算密集型任务和状态管理逻辑，从而获得响应更快、更流畅的用户界面。

Coaction 不仅仅是性能，它还致力于为复杂的应用程序提供更具可扩展性和可维护性的架构。 该库的直观 API 受 Zustand 启发，可确保平滑的学习曲线和高效的开发工作流程。它对切片、命名空间和计算属性的支持促进了模块化和代码组织，使管理大型和不断发展的代码库变得更加容易。

Coaction 与数据传输的集成将状态同步的灵活性提升到了一个新的水平。通过支持通用传输协议，它为各种通信模式和架构开辟了可能性，满足不同应用程序的独特需求.

本质上，Coaction 使开发人员能够在不牺牲性能、开发人员体验或架构完整性的情况下构建下一代 Web 应用程序。它弥合了 Web 应用程序日益复杂的情况与高效的需求之间的差距。跨线程的、可维护的、高性能的状态管理。它是专为那些致力于在并行性和响应能力不再是可选而是必不可少的世界中创造卓越用户体验的开发人员而设计的工具。它还支持远程同步，使其适合构建任何 CRDT 应用程序。

概念和特点

Coaction 旨在为 Web 应用程序中的多线程环境（例如 Web Workers、Shared Workers，甚至跨进程和设备）共享和同步状态提供安全高效的解决方案。

主要功能包括：

• 多线程同步：支持网页线程和工作线程之间共享状态。通过通用通信的数据传输，开发人员可以避免消息传递和序列化逻辑的复杂性。
• 具有可选可变性的不可变状态：由 Mutative 库提供支持，核心提供了不可变的状态转换过程，同时允许在需要时使用可变实例进行性能优化。
• 基于补丁的更新：通过基于补丁的同步实现高效的增量状态更改，简化其在 CRDT 应用程序中的使用。
• 内置计算：支持基于状态依赖关系的派生属性，使管理和检索核心状态的计算数据变得更加容易。
• 切片模式：轻松地将多个切片组合到具有命名空间的存储中。
• 可扩展中间件：允许中间件增强存储的行为，例如日志记录、时间旅行调试或与第三方工具集成。
• 与第三方库集成：支持 React、Angular、Vue、Svelte 和 Solid 等流行框架，以及 Redux、Zustand 和 MobX 等状态管理库。

操作模式和基本原理

该库以两种主要模式运行：

• 标准模式
  • 在标准网页环境中，商店完全在网页线程内进行管理。默认情况下禁用补丁更新，以确保标准模式下的最佳性能。
• 共享模式
  • 工作线程作为共享状态的主要来源，利用传输进行同步。
  • 网页线程充当客户端，通过存储异步访问和操作状态。

在共享模式下，库根据传输参数自动确定执行上下文，无缝处理同步线程。

您可以在应用程序中轻松使用 Coaction 来支持多个选项卡、多线程或多处理。

例如，对于跨多个选项卡共享的 3D 场景，您可以使用 Coaction 轻松处理其状态管理。

https://github.com/user-attachments/assets/9eb9f4f8-8d47-433a-8eb2-85f044d6d8fa

共享模式 - 序列图

sequenceDiagram
    participant Client as Webpage Thread (Client)
    participant Main as Worker Thread (Main)

    activate Client
    Note over Client: Start Worker Thread
    activate Main

    Client ->> Main: Trigger fullSync event after startup
    activate Main
    Main -->> Client: Synchronize data (full state)
    deactivate Main

    Note over Client: User triggers a UI event
    Client ->> Main: Send Store method and parameters
    activate Main
    Main ->> Main: Execute the corresponding method
    Main -->> Client: Synchronize state (patches)
    Note over Client: Render new state

    Main -->> Client: Asynchronously respond with method execution result
    deactivate Main
    deactivate Client

表现

测量（操作/秒）更新 10K 数组，越大越好（查看源代码）。

该表对大型初始化任务上的各种状态管理库进行了基准测试。协同作用引人注目，在某些情况下执行速度至少快数百倍。例如，在“bigInitWithoutRefsWithoutAssign”测试中，Coaction 的速度约为 19,910 次操作/秒，而 Mobx 的速度为 37.5 次操作/秒，快了 500 多倍。同样，在“init”测试中，Coaction 达到约 3,524 次操作/秒，而 Mobx 为 42.98 次操作/秒，大约增加了 80 倍。这些结果凸显了 Coaction 在处理大规模数据初始化方面的卓越效率。

我们还将提供更完整的基准测试。

安装

您可以通过 npm、yarn 或 pnpm 为 React 应用程序安装 @coaction/react。

sequenceDiagram
    participant Client as Webpage Thread (Client)
    participant Main as Worker Thread (Main)

    activate Client
    Note over Client: Start Worker Thread
    activate Main

    Client ->> Main: Trigger fullSync event after startup
    activate Main
    Main -->> Client: Synchronize data (full state)
    deactivate Main

    Note over Client: User triggers a UI event
    Client ->> Main: Send Store method and parameters
    activate Main
    Main ->> Main: Execute the corresponding method
    Main -->> Client: Synchronize state (patches)
    Note over Client: Render new state

    Main -->> Client: Asynchronously respond with method execution result
    deactivate Main
    deactivate Client

如果你想在没有任何框架的情况下使用核心库，可以通过 npm、yarn 或 pnpm 安装 coaction。

npm install coaction @coaction/react

用法

标准模式商店

npm install coaction

共享模式存储

counter.js:

import { create } from '@coaction/react';

const useStore = create((set, get) => ({
  count: 0,
  increment: () => set((state) => state.count++)
}));

const CounterComponent = () => {
  const store = useStore();
  return (
    <div>
      <p>Count: {store.count}</p>
      <button onClick={store.increment}>Increment</button>
    </div>
  );
};

worker.js：

import { create } from '@coaction/react';

export const counter = (set) => ({
  count: 0,
  increment: () => set((state) => state.count++)
});

import { create } from '@coaction/react';
import { counter } from './counter';

const useStore = create(counter);

切片模式和派生数据

import { create } from '@coaction/react';

const worker = new Worker(new URL('./worker.js', import.meta.url));
const useStore = create(counter, { worker });

const CounterComponent = () => {
  const store = useStore();
  return (
    <div>
      <p>Count in Worker: {store.count}</p>
      <button onClick={store.increment}>Increment</button>
    </div>
  );
};

结论

本质上，Coaction 使开发人员能够在不牺牲性能、开发人员体验或架构完整性的情况下构建下一代 Web 应用程序。它弥合了 Web 应用程序日益复杂的情况与高效的需求之间的差距。跨线程的、可维护的、高性能的状态管理。它是专为那些致力于在并行性和响应能力不再是可选而是必不可少的世界中创造卓越用户体验的开发人员而设计的工具。它还支持远程同步，使其适合构建任何 CRDT 应用程序。

仓库：https://github.com/unadlib/coaction

以上是解锁多重处理以实现更流畅的 Web 应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！