マルチプロセッシングのロックを解除して Web アプリケーションをよりスムーズに-jsチュートリアル-php.cn

Coaction - 高性能のマルチスレッド Web アプリケーションを構築するための効率的で柔軟な状態管理ライブラリです。

リポジトリ: https://github.com/unadlib/coaction

モチベーション

最新の Web アプリケーションはますます複雑になり、ブラウザーでできることの限界を押し広げています。シングルスレッドの JavaScript は強力ではありますが、洗練された UI、リアルタイムの対話、データ集約型の計算の要求に応えるのに苦労することがよくあります。このボトルネックは、パフォーマンスの問題、インターフェイスの遅延や応答の鈍さ、リクエスト接続の制限、そして最終的にはユーザーエクスペリエンスの低下につながります。

Web Worker (または SharedWorker) は、並列処理とパフォーマンスの向上への道を提供しますが、新たな一連の課題ももたらします。スレッド全体の状態を管理し、データを効率的に同期し、一貫したアプリケーションロジックを維持することは、すぐに困難な作業になる可能性があります。既存の状態管理ソリューションは、ワーカースレッドとの結合が強すぎたり、開発者の生産性を妨げる複雑な抽象化を導入したりすることにより、これらの特定のニーズに対応できないことがよくあります。

Unlocking Multiprocessing for Smoother Web Applications

Coaction は、最新の Web アプリケーションのマルチスレッドの性質を真に受け入れる状態管理ソリューションの必要性から作成されました。 Coaction は、パフォーマンスと開発者のエクスペリエンスが相互に排他的であるべきではないことを認識しています。 Web ワーカーと共有ワーカーの機能を活用することで、Coaction を使用すると、開発者は計算集約型のタスクと状態管理ロジックをワーカースレッドからオフロードできるようになり、その結果、より応答性が高く流動的なユーザーインターフェイスが実現します。

Coaction は単なるパフォーマンスではなく、複雑なアプリケーションに対してよりスケーラブルで保守可能なアーキテクチャを実現することを目的としています。 Zustand からインスピレーションを得たライブラリの直感的な API により、スムーズな学習曲線と生産的な開発ワークフローが保証されます。スライス、名前空間、計算されたプロパティのサポートにより、モジュール性とコード構成が促進され、大規模で進化するコードベースの管理が容易になります。

Coaction とデータトランスポートの統合により、状態同期の新たなレベルの柔軟性が解放されます。 汎用トランスポートプロトコルをサポートすることで、さまざまな通信パターンとアーキテクチャの可能性が広がり、さまざまなアプリケーションの固有のニーズに対応します.

本質的に、Coaction は、開発者がパフォーマンス、開発者のエクスペリエンス、アーキテクチャの整合性を犠牲にすることなく、次世代の Web アプリケーションを構築できるようにします。これは、Web アプリケーションの複雑さの増大と、効率的なアプリケーションのニーズとの間のギャップを埋めます。、保守可能でパフォーマンスの高いスレッド間での状態管理。これは、並列処理と応答性がもはやオプションではなく必須となっている世界で、優れたユーザーエクスペリエンスを作成しようと努めている開発者向けに設計されたツールです。リモート同期もサポートしているため、CRDT アプリケーションの構築にも適しています。

コンセプトと特徴

Coaction は、Web アプリケーションのマルチスレッド環境 (Web ワーカー、共有ワーカー、さらにはプロセスやデバイス間) で状態を共有および同期するための安全で効率的なソリューションを提供することを目的としています。

主な機能は次のとおりです:

マルチスレッド同期: Web ページスレッドとワーカースレッド間の状態の共有をサポートします。汎用通信用のデータトランスポートを使用すると、開発者はメッセージパッシングとシリアル化ロジックの複雑さを回避できます。
オプションの可変性を備えた不変状態: Mutative ライブラリを利用したコアは、必要に応じて可変インスタンスによるパフォーマンスの最適化を可能にしながら、不変状態の遷移プロセスを提供します。
パッチベースの更新: パッチベースの同期を通じて効率的な段階的な状態変更を可能にし、CRDT アプリケーションでの使用を簡素化します。
組み込み計算: 状態の依存関係に基づいた派生プロパティをサポートし、コア状態からの計算データの管理と取得を容易にします。
スライスパターン: 複数のスライスを名前空間を使用して 1 つのストアに簡単に結合します。
拡張ミドルウェア: ログ記録、タイムトラベルデバッグ、サードパーティツールとの統合など、ストアの動作を強化するミドルウェアを許可します。
サードパーティライブラリとの統合: React、Angular、Vue、Svelte、Solid などの一般的なフレームワークと、Redux、Zustand、MobX などの状態管理ライブラリをサポートします。

動作モードと基本

このライブラリは 2 つの主なモードで動作します:

標準モード
- 標準的な Web ページ環境では、ストアは完全に Web ページスレッド内で管理されます。標準モードで最適なパフォーマンスを確保するために、パッチの更新はデフォルトで無効になっています。
共有モード
- ワーカースレッドは、同期のためにトランスポートを利用し、共有状態のプライマリソースとして機能します。
- Web ページのスレッドはクライアントとして機能し、ストアを通じて非同期に状態にアクセスして操作します。

共有モードでは、ライブラリはトランスポートパラメータに基づいて実行コンテキストを自動的に決定し、同期スレッドをシームレスに処理します。

アプリケーションで 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 配列を更新するために (ops/秒) を測定します。大きいほど良いです (ソースを表示)。

Library	Test Name	Ops/sec
@coaction/mobx	bigInitWithoutRefsWithoutAssign	37.07
mobx	bigInitWithoutRefsWithoutAssign	37.50
coaction	bigInitWithoutRefsWithoutAssign	19,910
mobx-keystone	bigInitWithoutRefsWithoutAssign	7.88
@coaction/mobx	bigInitWithoutRefsWithAssign	1.53
mobx	bigInitWithoutRefsWithAssign	10.77
coaction	bigInitWithoutRefsWithAssign	3.01
mobx-keystone	bigInitWithoutRefsWithAssign	0.13
@coaction/mobx	bigInitWithRefsWithoutAssign	14.66
mobx	bigInitWithRefsWithoutAssign	16.11
coaction	bigInitWithRefsWithoutAssign	152
mobx-keystone	bigInitWithRefsWithoutAssign	2.44
@coaction/mobx	bigInitWithRefsWithAssign	0.98
mobx	bigInitWithRefsWithAssign	8.81
coaction	bigInitWithRefsWithAssign	3.83
mobx-keystone	bigInitWithRefsWithAssign	0.11
@coaction/mobx	init	37.34
mobx	init	42.98
coaction	init	3,524
mobx-keystone	init	40.48

この表は、大規模な初期化タスクに関するさまざまな状態管理ライブラリのベンチマークを示しています。 Coaction は劇的に際立っており、特定のシナリオでは少なくとも数百倍高速に実行されます。たとえば、「bigInitWithoutRefsWithoutAssign」テストでは、Coaction は Mobx の 37.5 ops/秒と比較して、約 19,910 ops/秒を達成しており、500 倍以上高速です。同様に、「init」テストでは、Coaction は約 3,524 ops/秒に達するのに対し、Mobx の 42.98 ops/秒は約 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>
  );
};

ログイン後にコピー