Déverrouiller le multitraitement pour des applications Web plus fluides-js tutoriel-php.cn

Coaction - Une bibliothèque de gestion d'état efficace et flexible pour créer des applications Web multithread hautes performances.

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

Motivation

Les applications Web modernes deviennent de plus en plus complexes, repoussant les limites de ce qui est possible dans le navigateur. JavaScript monothread, bien que puissant, a souvent du mal à répondre aux exigences des interfaces utilisateur sophistiquées, des interactions en temps réel et des calculs gourmands en données. Ce goulot d'étranglement entraîne des problèmes de performances, des interfaces lentes ou qui ne répondent pas, des limitations dans les connexions de requêtes et, finalement, une expérience utilisateur compromise.

Bien que les Web Workers (ou SharedWorker) offrent une voie vers le parallélisme et des performances améliorées, ils introduisent un nouvel ensemble de défis. La gestion de l'état entre les threads, la synchronisation efficace des données et le maintien d'une logique applicative cohérente peuvent rapidement devenir une tâche ardue. Les solutions de gestion d'état existantes ne parviennent souvent pas à répondre à ces besoins spécifiques, soit en étant trop étroitement couplées au thread de travail, soit en introduisant des abstractions complexes qui entravent la productivité des développeurs.

Unlocking Multiprocessing for Smoother Web Applications

Coaction a été créée pour répondre au besoin d'une solution de gestion d'état qui embrasse véritablement la nature multithread des applications Web modernes. Elle reconnaît que les performances et l'expérience des développeurs ne doivent pas s'exclure mutuellement. En tirant parti de la puissance des Web Workers et des Shared Workers, Coaction permet aux développeurs de décharger les tâches gourmandes en calcul et la logique de gestion des états du thread de travail, ce qui se traduit par une interface utilisateur plus réactive et fluide.

Plus que de simples performances, Coaction vise à permettre une architecture plus évolutive et maintenable pour les applications complexes. L'API intuitive de la bibliothèque, inspirée de Zustand, garantit une courbe d'apprentissage fluide et un flux de développement productif. Sa prise en charge des Slices, des espaces de noms et des propriétés calculées favorise la modularité et l'organisation du code, facilitant ainsi la gestion de bases de code volumineuses et évolutives.

L'intégration de Coaction avec le transport de données ouvre un nouveau niveau de flexibilité dans la synchronisation des états. En prenant en charge les protocoles de transport génériques, elle ouvre des possibilités pour divers modèles et architectures de communication, répondant aux besoins uniques de différentes applications. .

Essentiellement, Coaction permet aux développeurs de créer la prochaine génération d'applications Web sans sacrifier les performances, l'expérience des développeurs ou l'intégrité architecturale. Il comble le fossé entre la complexité croissante des applications Web et le besoin d'une solution efficace. , une gestion d'état maintenable et performante entre les threads. C'est un outil conçu pour les développeurs qui s'efforcent de créer des expériences utilisateur exceptionnelles dans un monde où le parallélisme et la réactivité ne sont plus facultatifs, mais essentiels. Il prend également en charge la synchronisation à distance, ce qui le rend également adapté à la création de n'importe quelle application CRDT.

Concepts et fonctionnalités

Coaction vise à fournir une solution sécurisée et efficace pour le partage et la synchronisation de l'état dans des environnements multithread (tels que les Web Workers, les Shared Workers, ou même entre processus et appareils) dans les applications Web.

Les principales fonctionnalités incluent :

Multithreading Sync : prend en charge le partage de l'état entre le thread de la page Web et le thread de travail. Grâce au transport de données pour la communication générique, les développeurs peuvent éviter les complexités liées à la transmission de messages et à la logique de sérialisation.
État immuable avec mutabilité facultative : alimenté par la bibliothèque Mutative, le noyau fournit un processus de transition d'état immuable tout en permettant l'optimisation des performances avec des instances mutables si nécessaire.
Mises à jour basées sur les correctifs : permet des changements d'état incrémentiels efficaces grâce à une synchronisation basée sur les correctifs, simplifiant ainsi son utilisation dans les applications CRDT.
Calcul intégré : prend en charge les propriétés dérivées basées sur les dépendances d'état, ce qui facilite la gestion et la récupération des données calculées à partir des états principaux.
Modèle de tranches : combinez facilement plusieurs tranches dans un magasin avec un espace de noms.
Middleware extensible : permet au middleware d'améliorer le comportement du magasin, comme la journalisation, le débogage des voyages dans le temps ou l'intégration avec des outils tiers.
Intégration avec des bibliothèques tierces : prend en charge les frameworks populaires tels que React, Angular, Vue, Svelte et Solid, ainsi que les bibliothèques de gestion d'état telles que Redux, Zustand et MobX.

Modes de fonctionnement et principes fondamentaux

Cette bibliothèque fonctionne selon deux modes principaux :

Mode standard
- Dans un environnement de page Web standard, la boutique est entièrement gérée dans le fil de discussion de la page Web. Les mises à jour des correctifs sont désactivées par défaut pour garantir des performances optimales en mode standard.
Mode partagé
- Le thread de travail sert de source principale de l'état partagé, utilisant le transport pour la synchronisation.
- Les threads de pages Web agissent en tant que clients, accédant et manipulant l'état de manière asynchrone via un magasin.

En mode partagé, la bibliothèque détermine automatiquement le contexte d'exécution en fonction des paramètres de transport, gérant ainsi le thread de synchronisation de manière transparente.

Vous pouvez facilement utiliser Coaction dans votre application pour prendre en charge plusieurs onglets, le multithreading ou le multitraitement.

Par exemple, pour une scène 3D partagée sur plusieurs onglets, vous pouvez gérer sans effort leur gestion d'état grâce à Coaction.

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

Mode partagé - Diagramme de séquence

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

Copier après la connexion

Performance

Mesurez (ops/sec) pour mettre à jour les tableaux 10K, plus c'est gros, mieux c'est (voir la source).

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

Ce tableau compare diverses bibliothèques de gestion d'état sur de grandes tâches d'initialisation. La coaction se démarque considérablement, fonctionnant au moins des centaines de fois plus rapidement dans certains scénarios. Par exemple, dans le test « bigInitWithoutRefsWithoutAssign », Coaction atteint environ 19 910 opérations/s par rapport aux 37,5 opérations/s de Mobx, soit plus de 500 fois plus rapide. De même, dans le test « init », Coaction atteint environ 3 524 opérations/s contre 42,98 opérations/s pour Mobx, soit une augmentation d'environ 80 fois. Ces résultats mettent en évidence l'efficacité exceptionnelle de Coaction dans la gestion de l'initialisation de données à grande échelle.

Nous fournirons également une analyse comparative plus complète.

Installation

Vous pouvez installer @coaction/react pour l'application React via npm, Yarn ou pnpm.

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

Copier après la connexion

Si vous souhaitez utiliser la bibliothèque principale sans aucun framework, vous pouvez installer coaction via npm, Yarn ou pnpm.

npm install coaction @coaction/react

Copier après la connexion

Usage

Magasin en mode standard

npm install coaction

Copier après la connexion

Magasin en mode partagé

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

Copier après la connexion

worker.js :

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

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

Copier après la connexion

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

const useStore = create(counter);

Copier après la connexion

Modèle de tranches et données dérivées

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

Copier après la connexion