解鎖多重處理以實現更流暢的 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中文網其他相關文章！