보다 원활한 웹 애플리케이션을 위한 다중 처리 잠금 해제-JS 튜토리얼-php.cn

Coaction - 고성능 멀티스레딩 웹 애플리케이션 구축을 위한 효율적이고 유연한 상태 관리 라이브러리입니다.

저장소: https://github.com/unadlib/coaction

동기 부여

최신 웹 애플리케이션은 점점 더 복잡해지고 있으며 브라우저에서 가능한 기능의 한계를 뛰어넘고 있습니다. 단일 스레드 JavaScript는 강력하기는 하지만 정교한 UI, 실시간 상호 작용 및 데이터 집약적인 계산 요구 사항을 충족하는 데 종종 어려움을 겪습니다. 이러한 병목 현상은 성능 문제, 지연되거나 응답하지 않는 인터페이스, 요청 연결 제한, 그리고 궁극적으로 손상된 사용자 경험으로 이어집니다.

Web Worker(또는 SharedWorker)는 병렬성과 향상된 성능을 향한 길을 제공하지만 새로운 과제도 제시합니다. 스레드 전체에서 상태를 관리하고, 데이터를 효율적으로 동기화하고, 일관된 애플리케이션 논리를 유지하는 것은 금방 어려운 작업이 될 수 있습니다. 기존 상태 관리 솔루션은 작업자 스레드에 너무 긴밀하게 연결되거나 개발자 생산성을 방해하는 복잡한 추상화를 도입하여 이러한 특정 요구 사항을 해결하지 못하는 경우가 많습니다.

Unlocking Multiprocessing for Smoother Web Applications

Coaction은 최신 웹 애플리케이션의 멀티스레딩 특성을 진정으로 수용하는 상태 관리 솔루션에 대한 필요성으로 인해 만들어졌습니다. 성능과 개발자 경험이 상호 배타적이어서는 안 된다는 점을 인식하고 있습니다. Coaction은 웹 작업자와 공유 작업자의 강력한 기능을 활용하여 개발자가 작업자 스레드에서 계산 집약적인 작업과 상태 관리 논리를 오프로드할 수 있도록 하여 응답성이 뛰어나고 유연한 사용자 인터페이스를 제공합니다.

Coaction은 단순한 성능 그 이상으로 복잡한 애플리케이션을 위한 확장성과 유지 관리가 용이한 아키텍처를 구현하는 것입니다. Zustand에서 영감을 받은 라이브러리의 직관적인 API는 원활한 학습 곡선과 생산적인 개발 워크플로를 보장합니다. 슬라이스, 네임스페이스 및 계산된 속성에 대한 지원은 모듈성과 코드 구성을 촉진하여 크고 발전하는 코드베이스를 더 쉽게 관리할 수 있게 해줍니다.

Coaction과 데이터 전송의 통합은 상태 동기화에 새로운 수준의 유연성을 제공합니다. 일반 전송 프로토콜을 지원함으로써 다양한 애플리케이션의 고유한 요구 사항을 충족하는 다양한 통신 패턴 및 아키텍처에 대한 가능성을 열어줍니다. .

본질적으로 Coaction은 개발자가 성능, 개발자 경험 또는 아키텍처 무결성을 희생하지 않고 차세대 웹 애플리케이션을 구축할 수 있도록 지원합니다. 이는 웹 애플리케이션의 복잡성 증가와 효율적인 애플리케이션 요구 사이의 격차를 해소합니다. , 스레드 전반에 걸쳐 유지 관리가 가능하고 성능이 뛰어난 상태 관리. 병렬성과 응답성이 더 이상 선택 사항이 아닌 필수인 세상에서 뛰어난 사용자 경험을 만들기 위해 노력하는 개발자를 위해 설계된 도구입니다. 또한 원격 동기화도 지원하므로 모든 CRDT 애플리케이션 구축에도 적합합니다.

개념과 특징

Coaction은 웹 애플리케이션의 멀티스레딩 환경(예: 웹 작업자, 공유 작업자 또는 프로세스와 장치 전체)에서 상태를 공유하고 동기화하기 위한 안전하고 효율적인 솔루션을 제공하는 것을 목표로 합니다.

주요 기능은 다음과 같습니다.

멀티스레딩 동기화: 웹페이지 스레드와 작업자 스레드 간의 상태 공유를 지원합니다. 일반 통신을 위한 데이터 전송을 통해 개발자는 메시지 전달 및 직렬화 논리의 복잡성을 피할 수 있습니다.
선택적 변경 가능성이 있는 불변 상태: 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 어레이를 업데이트하기 위한 측정(ops/sec)은 클수록 좋습니다(소스 보기).

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/sec에 비해 약 19,910 ops/sec를 달성하여 500배 이상 빠릅니다. 마찬가지로 "init" 테스트에서 Coaction은 Mobx의 42.98 ops/sec에 비해 약 3,524 ops/sec에 도달하여 약 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>
  );
};

로그인 후 복사