Membuka kunci Pemprosesan Berbilang untuk Aplikasi Web yang Lebih Lancar

Coaction - Perpustakaan pengurusan negeri yang cekap dan fleksibel untuk membina aplikasi web berbilang benang berprestasi tinggi.

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

Motivasi

Aplikasi web moden menjadi semakin kompleks, menolak sempadan perkara yang mungkin dalam penyemak imbas. JavaScript berutas tunggal, walaupun berkuasa, sering bergelut untuk bersaing dengan permintaan UI yang canggih, interaksi masa nyata dan pengiraan intensif data. Kesesakan ini membawa kepada isu prestasi, antara muka yang lambat atau tidak responsif, pengehadan dalam sambungan permintaan dan akhirnya, pengalaman pengguna yang terjejas.

Walaupun Pekerja Web (atau SharedWorker) menawarkan laluan ke arah keselarian dan prestasi yang lebih baik, mereka memperkenalkan satu set cabaran baharu. Menguruskan keadaan merentas urutan, menyegerakkan data dengan cekap dan mengekalkan logik aplikasi yang koheren dengan cepat boleh menjadi tugas yang menakutkan. Penyelesaian pengurusan negeri yang sedia ada sering gagal dalam menangani keperluan khusus ini, sama ada dengan terlalu ketat digabungkan dengan benang pekerja atau dengan memperkenalkan abstraksi kompleks yang menghalang produktiviti pembangun.

Coaction dicipta kerana memerlukan penyelesaian pengurusan negeri yang benar-benar merangkumi sifat multithreading aplikasi web moden. Ia mengiktiraf bahawa prestasi dan pengalaman pembangun tidak seharusnya saling eksklusif. Dengan memanfaatkan kuasa Pekerja Web dan Pekerja Kongsi, Coaction membenarkan pembangun memuatkan tugas intensif secara pengiraan dan logik pengurusan negeri daripada urutan pekerja, menghasilkan antara muka pengguna yang lebih responsif dan lancar.

Lebih daripada prestasi, Coaction adalah tentang membolehkan seni bina yang lebih berskala dan boleh diselenggara untuk aplikasi yang kompleks. API intuitif perpustakaan, yang diilhamkan oleh Zustand, memastikan keluk pembelajaran yang lancar dan aliran kerja pembangunan yang produktif. Sokongannya untuk Slices, ruang nama dan sifat yang dikira mempromosikan modulariti dan organisasi kod, menjadikannya lebih mudah untuk mengurus pangkalan kod yang besar dan berkembang.

Integrasi Coaction dengan pengangkutan data membuka tahap fleksibiliti baharu dalam penyegerakan keadaan. Dengan menyokong protokol pengangkutan generik, ia membuka kemungkinan untuk pelbagai corak komunikasi dan seni bina, memenuhi keperluan unik aplikasi yang berbeza .

Pada dasarnya, Coaction memperkasakan pembangun untuk membina aplikasi web generasi seterusnya tanpa mengorbankan prestasi, pengalaman pembangun atau integriti seni bina. Ia merapatkan jurang antara peningkatan kerumitan aplikasi web dan keperluan untuk cekap , pengurusan keadaan boleh diselenggara dan berprestasi merentas rangkaian. Ia adalah alat yang direka untuk pembangun yang berusaha untuk mencipta pengalaman pengguna yang luar biasa dalam dunia di mana keselarian dan responsif tidak lagi menjadi pilihan, tetapi penting. Ia juga menyokong penyegerakan jauh, menjadikannya sesuai untuk membina sebarang aplikasi CRDT juga.

Konsep dan Ciri

Coaction bertujuan untuk menyediakan penyelesaian yang selamat dan cekap untuk perkongsian dan keadaan penyegerakan dalam persekitaran multithreading (seperti Pekerja Web, Pekerja Kongsi, atau bahkan merentas proses dan peranti) dalam aplikasi web.

Ciri utama termasuk:

• Penyegerakan Multithreading: Menyokong keadaan perkongsian antara urutan halaman web dan urutan pekerja. Dengan pengangkutan data untuk komunikasi generik, pembangun boleh mengelakkan kerumitan penghantaran mesej dan logik bersiri.
• Keadaan Tidak Berubah dengan Kebolehubahan Pilihan: Dikuasakan oleh perpustakaan Mutatif, teras menyediakan proses peralihan keadaan tidak berubah sambil membenarkan pengoptimuman prestasi dengan kejadian boleh berubah apabila diperlukan.
• Kemas Kini Berasaskan Patch: Mendayakan perubahan keadaan tambahan yang cekap melalui penyegerakan berasaskan tampalan, memudahkan penggunaannya dalam aplikasi CRDT.
• Terbina Dalam Dikira: Menyokong sifat terbitan berdasarkan kebergantungan keadaan, menjadikannya lebih mudah untuk mengurus dan mendapatkan semula data yang dikira daripada keadaan teras.
• Corak Slices: Gabungkan berbilang kepingan ke dalam kedai dengan mudah dengan ruang nama.
• Perisian Tengah Boleh Diperluas: Membenarkan perisian tengah meningkatkan gelagat kedai, seperti pengelogan, penyahpepijatan perjalanan masa atau penyepaduan dengan alatan pihak ketiga.
• Integrasi dengan Perpustakaan Pihak Ketiga: Menyokong rangka kerja popular seperti React, Angular, Vue, Svelte dan Solid, serta perpustakaan pengurusan negeri seperti Redux, Zustand dan MobX.

Mod Operasi dan Asas

Pustaka ini beroperasi dalam dua mod utama:

• Mod Standard
  • Dalam persekitaran halaman web standard, kedai diurus sepenuhnya dalam urutan halaman web. Kemas kini tampalan dilumpuhkan secara lalai untuk memastikan prestasi optimum dalam mod standard.
• Mod Dikongsi
  • Urut pekerja berfungsi sebagai sumber utama keadaan dikongsi, menggunakan pengangkutan untuk penyegerakan.
  • Benang halaman web bertindak sebagai pelanggan, mengakses dan memanipulasi keadaan secara tidak segerak melalui kedai.

Dalam mod kongsi, pustaka secara automatik menentukan konteks pelaksanaan berdasarkan parameter pengangkutan, mengendalikan urutan penyegerakan dengan lancar.

Anda boleh menggunakan Coaction dengan mudah dalam aplikasi anda untuk menyokong berbilang tab, multithreading atau multiprocessing.

Sebagai contoh, untuk pemandangan 3D yang dikongsi merentas beberapa tab, anda boleh mengendalikan pengurusan keadaan mereka dengan mudah menggunakan Coaction.

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

Mod Kongsi - Rajah Jujukan

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

Prestasi

Ukur(ops/sec) untuk mengemas kini 10K tatasusunan, lebih besar adalah lebih baik(lihat sumber).

Jadual ini menanda aras pelbagai pustaka pengurusan negeri pada tugas permulaan yang besar. Coaction menonjol secara dramatik, berprestasi sekurang-kurangnya ratusan kali lebih pantas dalam senario tertentu. Contohnya, dalam ujian "bigInitWithoutRefsWithoutAssign", Coaction mencapai kira-kira 19,910 ops/saat berbanding dengan 37.5 ops/saat Mobx—lebih 500 kali lebih pantas. Begitu juga, dalam ujian "init", Coaction mencapai sekitar 3,524 ops/saat berbanding 42.98 ops/saat Mobx—peningkatan kira-kira 80 kali ganda. Keputusan ini menyerlahkan kecekapan luar biasa Coaction dalam mengendalikan pemulaan data berskala besar.

Kami juga akan menyediakan penanda aras yang lebih lengkap.

Pemasangan

Anda boleh memasang @coaction/react untuk aplikasi React melalui npm, yarn atau 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

Jika anda ingin menggunakan perpustakaan teras tanpa sebarang rangka kerja, anda boleh memasang gabungan melalui npm, benang atau pnpm.

npm install coaction @coaction/react

Penggunaan

Kedai Mod Standard

npm install coaction

Kedai Mod Kongsi

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

Corak Slices Dan Data Terbitan

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

Kesimpulan

Pada dasarnya, Coaction memperkasakan pembangun untuk membina aplikasi web generasi seterusnya tanpa mengorbankan prestasi, pengalaman pembangun atau integriti seni bina. Ia merapatkan jurang antara peningkatan kerumitan aplikasi web dan keperluan untuk cekap , pengurusan keadaan boleh diselenggara dan berprestasi merentas rangkaian. Ia adalah alat yang direka untuk pembangun yang berusaha untuk mencipta pengalaman pengguna yang luar biasa dalam dunia di mana keselarian dan responsif tidak lagi menjadi pilihan, tetapi penting. Ia juga menyokong penyegerakan jauh, menjadikannya sesuai untuk membina sebarang aplikasi CRDT juga.

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

Atas ialah kandungan terperinci Membuka kunci Pemprosesan Berbilang untuk Aplikasi Web yang Lebih Lancar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!