Erschließen Sie Multiprocessing für reibungslosere Webanwendungen

Coaction – Eine effiziente und flexible Zustandsverwaltungsbibliothek zum Erstellen leistungsstarker Multithreading-Webanwendungen.

Repo: https://github.com/unadlib/coaction

Motivation

Moderne Webanwendungen werden immer komplexer und verschieben die Grenzen dessen, was im Browser möglich ist. Single-Threaded-JavaScript ist zwar leistungsstark, hat aber oft Schwierigkeiten, mit den Anforderungen anspruchsvoller Benutzeroberflächen, Echtzeitinteraktionen und datenintensiver Berechnungen Schritt zu halten. Dieser Engpass führt zu Leistungsproblemen, verzögerten oder nicht reagierenden Schnittstellen, Einschränkungen bei Anforderungsverbindungen und letztendlich zu einer beeinträchtigten Benutzererfahrung.

Während Web Worker (oder SharedWorker) einen Weg zu Parallelität und verbesserter Leistung bieten, bringen sie eine Reihe neuer Herausforderungen mit sich. Die Verwaltung des Zustands über Threads hinweg, die effiziente Synchronisierung von Daten und die Aufrechterhaltung einer kohärenten Anwendungslogik können schnell zu einer entmutigenden Aufgabe werden. Bestehende Zustandsverwaltungslösungen können diese spezifischen Anforderungen oft nicht erfüllen, entweder weil sie zu eng an den Worker-Thread gekoppelt sind oder weil sie komplexe Abstraktionen einführen, die die Entwicklerproduktivität behindern.

Coaction entstand aus dem Bedarf an einer Zustandsverwaltungslösung, die den Multithreading-Charakter moderner Webanwendungen wirklich berücksichtigt. Es erkennt an, dass Leistung und Entwicklererfahrung sich nicht gegenseitig ausschließen sollten. Durch die Nutzung der Leistungsfähigkeit von Web Workern und Shared Workern ermöglicht Coaction Entwicklern, rechenintensive Aufgaben und Statusverwaltungslogik vom Worker-Thread zu entlasten, was zu einer reaktionsschnelleren und flüssigeren Benutzeroberfläche führt.

Mehr als nur Leistung geht es bei Coaction darum, eine besser skalierbare und wartbare Architektur für komplexe Anwendungen zu ermöglichen. Die intuitive API der Bibliothek, inspiriert von Zustand, sorgt für eine reibungslose Lernkurve und einen produktiven Entwicklungsworkflow. Seine Unterstützung für Slices, Namespaces und berechnete Eigenschaften fördert die Modularität und Codeorganisation und erleichtert die Verwaltung großer und sich weiterentwickelnder Codebasen.

Die Integration von Coaction in den Datentransport eröffnet ein neues Maß an Flexibilität bei der Zustandssynchronisierung. Durch die Unterstützung generischer Transportprotokolle eröffnet es Möglichkeiten für verschiedene Kommunikationsmuster und -architekturen, die den individuellen Anforderungen verschiedener Anwendungen gerecht werden .

Im Wesentlichen ermöglicht Coaction Entwicklern, die nächste Generation von Webanwendungen zu erstellen, ohne dabei Leistung, Entwicklererfahrung oder Architekturintegrität zu opfern. Es schließt die Lücke zwischen der zunehmenden Komplexität von Webanwendungen und dem Bedarf an Effizienz , wartbares und performantes Zustandsmanagement über Threads hinweg. Es handelt sich um ein Tool für Entwickler, die außergewöhnliche Benutzererlebnisse in einer Welt schaffen möchten, in der Parallelität und Reaktionsfähigkeit nicht mehr optional, sondern unerlässlich sind. Es unterstützt auch die Remote-Synchronisierung und eignet sich daher auch zum Erstellen jeder CRDTs-Anwendung.

Konzepte und Funktionen

Coaction zielt darauf ab, eine sichere und effiziente Lösung für die gemeinsame Nutzung und Synchronisierung des Status in Multithreading-Umgebungen (wie Web Workers, Shared Workers oder sogar prozess- und geräteübergreifend) in Webanwendungen bereitzustellen.

Zu den wichtigsten Funktionen gehören:

• Multithreading-Synchronisierung: Unterstützt die Statusfreigabe zwischen dem Webseiten-Thread und dem Worker-Thread. Mit dem Datentransport für generische Kommunikation können Entwickler die Komplexität der Nachrichtenübermittlung und Serialisierungslogik vermeiden.
• Unveränderlicher Zustand mit optionaler Veränderlichkeit: Angetrieben durch die Mutative-Bibliothek bietet der Kern einen unveränderlichen Zustandsübergangsprozess und ermöglicht bei Bedarf eine Leistungsoptimierung mit veränderlichen Instanzen.
• Patch-basierte Updates: Ermöglicht effiziente inkrementelle Statusänderungen durch Patch-basierte Synchronisierung und vereinfacht so die Verwendung in CRDTs-Anwendungen.
• Integrierte Berechnung: Unterstützt abgeleitete Eigenschaften basierend auf Zustandsabhängigkeiten, wodurch es einfacher wird, berechnete Daten aus Kernzuständen zu verwalten und abzurufen.
• Slices-Muster: Kombinieren Sie ganz einfach mehrere Slices zu einem Shop mit Namensraum.
• Erweiterbare Middleware: Ermöglicht Middleware zur Verbesserung des Geschäftsverhaltens, z. B. Protokollierung, Zeitreise-Debugging oder Integration mit Tools von Drittanbietern.
• Integration mit Bibliotheken von Drittanbietern: Unterstützt beliebte Frameworks wie React, Angular, Vue, Svelte und Solid sowie Zustandsverwaltungsbibliotheken wie Redux, Zustand und MobX.

Betriebsarten und Grundlagen

Diese Bibliothek arbeitet in zwei Hauptmodi:

• Standardmodus
  • In einer Standard-Webseitenumgebung wird der Shop vollständig innerhalb des Webseiten-Threads verwaltet. Patch-Updates sind standardmäßig deaktiviert, um eine optimale Leistung im Standardmodus zu gewährleisten.
• Geteilter Modus
  • Der Worker-Thread dient als primäre Quelle des freigegebenen Status und nutzt den Transport zur Synchronisierung.
  • Webseiten-Threads fungieren als Clients, die über einen Store asynchron auf den Status zugreifen und ihn bearbeiten.

Im gemeinsam genutzten Modus bestimmt die Bibliothek automatisch den Ausführungskontext basierend auf den Transportparametern und verarbeitet den Synchronisierungsthread nahtlos.

Sie können Coaction problemlos in Ihrer Anwendung verwenden, um mehrere Registerkarten, Multithreading oder Multiprocessing zu unterstützen.

Zum Beispiel können Sie für eine 3D-Szene, die über mehrere Registerkarten geteilt wird, deren Zustandsverwaltung mühelos mit Coaction verwalten.

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

Gemeinsamer Modus – Sequenzdiagramm

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

Leistung

Messung (ops/s) zum Aktualisieren von 10K-Arrays, größer ist besser (Quelle anzeigen).

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

In dieser Tabelle werden verschiedene Zustandsverwaltungsbibliotheken für große Initialisierungsaufgaben verglichen. Coaction sticht deutlich hervor und ist in bestimmten Szenarien mindestens hundertmal schneller. Beispielsweise erreicht Coaction im „bigInitWithoutRefsWithoutAssign“-Test etwa 19.910 Operationen/Sek. im Vergleich zu 37,5 Operationen/Sek. von Mobx – über 500-mal schneller. In ähnlicher Weise erreicht Coaction im „init“-Test etwa 3.524 Operationen/Sek. gegenüber 42,98 Operationen/Sek. von Mobx – eine Steigerung um etwa das 80-fache. Diese Ergebnisse unterstreichen die außergewöhnliche Effizienz von Coaction bei der Abwicklung umfangreicher Dateninitialisierungen.

Wir werden auch ein umfassenderes Benchmarking anbieten.

Installation

Sie können @coaction/react für die React-Anwendung über npm, Yarn oder Pnpm installieren.

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

Wenn Sie die Kernbibliothek ohne Framework verwenden möchten, können Sie Coaction über npm, Yarn oder Pnpm installieren.

npm install coaction @coaction/react

Verwendung

Standardmodus-Speicher

npm install coaction

Shared-Mode-Store

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);

Schnittmuster und abgeleitete Daten

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>
  );
};

Abschluss

Im Wesentlichen ermöglicht Coaction Entwicklern, die nächste Generation von Webanwendungen zu erstellen, ohne dabei Leistung, Entwicklererfahrung oder Architekturintegrität zu opfern. Es schließt die Lücke zwischen der zunehmenden Komplexität von Webanwendungen und dem Bedarf an Effizienz , wartbares und performantes Zustandsmanagement über Threads hinweg. Es handelt sich um ein Tool für Entwickler, die außergewöhnliche Benutzererlebnisse in einer Welt schaffen möchten, in der Parallelität und Reaktionsfähigkeit nicht mehr optional, sondern unerlässlich sind. Es unterstützt auch die Remote-Synchronisierung und eignet sich daher auch zum Erstellen jeder CRDTs-Anwendung.

Repo: https://github.com/unadlib/coaction

Das obige ist der detaillierte Inhalt vonErschließen Sie Multiprocessing für reibungslosere Webanwendungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!