Webワーカーを使用して角度アプリケーションを過充電

Zama Khanモハメッド
UIのブロックは過去のものです!


オリジナル📷 によって


https://angularprojects.com
あなたがUIの計算の多くを行うアプリケーションを構築している場合は、CADドキュメントを作成するような、重い幾何学的計算を行う、または重いデータテーブル操作をして、あなたは、UIが時々ラグまたはヤニになることを観察している可能性があります.
これはJavaScriptがメインスレッド上で動作する唯一のものではないためですが、ピクセル、スタイル計算、および他の多くの絵画のような他のものもそれに実行されます.我々はブラウザ上で重く長時間実行しているJavaScriptを実行すると、時には我々は素晴らしいフレームの経験を提供していないフレームが欠落していることがわかります.
我々は、Web作業者は、そのような問題に対する有望な解決策の一つであると聞いたことがありますが、我々は角度のCLIを使用して私たちの角度アプリケーションにそれを導入することはとても簡単だったことを知っていた.
角度CLI v 8.0 - betaあなたがどんな新しい構成も加えなければならないことなく、ウェブ労働者のための11の改善された束化支持を加えました.この記事では、600以上の数字のリストが素数であるかどうかをチェックする重い計算を実行するアプリケーションを作成します.
V 8を使用して新しい角度CLIアプリケーションを作成しましょう.0 - beta11 NPXコマンドで.

> npx -p @angular/cli@next ng new prime-numbers

Web作業員の追加は、コンポーネント、サービスなどを生成するのと同じくらい簡単です ng generate コマンド.

> ng generate worker prime-calculations
CREATE src/tsconfig.worker.json (209 bytes)
CREATE src/tsconfig.json (131 bytes)
CREATE src/app/prime-calculations.worker.ts (121 bytes)
UPDATE tsconfig.app.json (232 bytes)
UPDATE angular.json (3558 bytes)

これはprime-calculations.worker.ts Webワーカーのセットアップ(一度だけ)に必要な他の変更と一緒にアプリケーションのフォルダで.
ワーカーズファイルを持っているので、まずパッケージをインストールしましょう prime-number それは数が素数であるかどうか確認することができますまた、600 +素数のリストがあります.

> npm install prime-number

JavaScriptスレッドとWebワーカーで実行する操作は以下の通りです primeNumberList そして、それらが素数であるかどうかチェックする isPrimeNumber

import isPrimeNumber from 'prime-number';
import primeNumberList from 'prime-number/list';
const arePrimeList = primeNumberList.map((prime) => {
    return isPrimeNumber(prime);
});

つのボタン、労働者のロジックを実行する1つ、メインスレッドの別の1つを追加しましょう.

<button (click)=”runWorker()”>Web Worker</button>
<button (click)=”runThread()”>JavaScript Thread</button>

それでは、AppComponentクラスに両方のメソッドを追加しましょう.

import isPrimeNumber from 'prime-number';
import primeNumberList from 'prime-number/list';
...
export class AppComponent {
    title = 'web-worker';
    runWorker() {
       const worker = new Worker('./prime-calculations.worker', { 
           type: 'module' 
       });
       worker.onmessage = ({ data }) => {
           console.log('From Web Worker:', data);
       };
       worker.postMessage({});
    }
    runThread() {
        const arePrimeList = primeNumberList.map((prime) => {
            return isPrimeNumber(prime);
        });
        console.log('From Javascript Thread', arePrimeList);
    }
}

The runThread メソッドはちょうどメソッドの計算を行うだけですがrunWorker , 私たちは新しい労働者をつくっているonmessage , を使ってメッセージを投稿するworker.postMessage()今、我々の労働者を更新しましょうprime-calculations.worker.ts 同じ論理で

import isPrimeNumber from 'prime-number';
import primeNumberList from 'prime-number/list';
addEventListener('message', ({ data }) => {
    const arePrimeList = primeNumberList.map((prime) => {
        return isPrimeNumber(prime);
    });
    postMessage(arePrimeList);
});

ここでは、メッセージを聞き、JavaScriptスレッドで行った同じプライム計算を実行します.
今、両方のメソッドは、同じ計算を行っている、どのように我々のアプリは、ユーザーが各ボタンをクリックすると反応を参照してみましょう.

ここでは、JavaScriptのスレッドボタンがクリックされたとき、明らかに遅れを見ます.我々がウェブワーカーボタンをクリックするとき、我々は少しの遅れも見ませんでした.これはWebワーカーが別々のスレッドで動作し、メインスレッドをブロックしないためです.

まとめ

角度は単なるフレームワークではなく、プラットフォームです.角のツール、特に角のCLIは例外的です、そして、それは発展している角度アプリを非常により簡単にするものです.
👋 こんにちは!私はZamaカーンモハメッドです.私の仕事Tekzenit ソフトウェアアーキテクトとして.私は積極的にプロジェクト“アングルプロジェクト”を書くと一緒に角度、反応と無制限の技術を使用してプロジェクトに取り組んでいます.
より角度の良さのために、2010年の最新のエピソードをチェックしてくださいThe Angular Show podcast .

ng conf :信頼できるウェブサミットのために我々に加わってください

コミュニティメンバーとリーダーから信頼性の高いWebアプリケーションを構築し、品質のコードを書く、スケーラブルなアーキテクチャを選択し、効果的な自動テストを作成する最良の方法から学ぶ.NG - confによって供給されて、我々は2014年8月26日と27日に信頼できるウェブサミットに参加します.
https://reliablewebsummit.com/