보다 원활한 웹 애플리케이션을 위한 다중 처리 잠금 해제
- Patricia Arquette원래의
- 2024-12-19 06:47:09957검색
Coaction - 고성능 멀티스레딩 웹 애플리케이션 구축을 위한 효율적이고 유연한 상태 관리 라이브러리입니다.
저장소: https://github.com/unadlib/coaction
동기 부여
최신 웹 애플리케이션은 점점 더 복잡해지고 있으며 브라우저에서 가능한 기능의 한계를 뛰어넘고 있습니다. 단일 스레드 JavaScript는 강력하기는 하지만 정교한 UI, 실시간 상호 작용 및 데이터 집약적인 계산 요구 사항을 충족하는 데 종종 어려움을 겪습니다. 이러한 병목 현상은 성능 문제, 지연되거나 응답하지 않는 인터페이스, 요청 연결 제한, 그리고 궁극적으로 손상된 사용자 경험으로 이어집니다.
Web Worker(또는 SharedWorker)는 병렬성과 향상된 성능을 향한 길을 제공하지만 새로운 과제도 제시합니다. 스레드 전체에서 상태를 관리하고, 데이터를 효율적으로 동기화하고, 일관된 애플리케이션 논리를 유지하는 것은 금방 어려운 작업이 될 수 있습니다. 기존 상태 관리 솔루션은 작업자 스레드에 너무 긴밀하게 연결되거나 개발자 생산성을 방해하는 복잡한 추상화를 도입하여 이러한 특정 요구 사항을 해결하지 못하는 경우가 많습니다.
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>
);
};
결론
본질적으로 Coaction은 개발자가 성능, 개발자 경험 또는 아키텍처 무결성을 희생하지 않고 차세대 웹 애플리케이션을 구축할 수 있도록 지원합니다. 이는 웹 애플리케이션의 복잡성 증가와 효율적인 애플리케이션 요구 사이의 격차를 해소합니다. , 스레드 전반에 걸쳐 유지 관리가 가능하고 성능이 뛰어난 상태 관리. 병렬성과 응답성이 더 이상 선택 사항이 아닌 필수인 세상에서 뛰어난 사용자 경험을 만들기 위해 노력하는 개발자를 위해 설계된 도구입니다. 또한 원격 동기화도 지원하므로 모든 CRDT 애플리케이션 구축에도 적합합니다.
저장소: https://github.com/unadlib/coaction
위 내용은 보다 원활한 웹 애플리케이션을 위한 다중 처리 잠금 해제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!