cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: web worker translations (#313)

Browse Source 
Co-authored-by: Alejandro Lora <alejandrofpo@gmail.com>
Co-authored-by: Michael Prentice <splaktar@gmail.com>
This commit is contained in:
Pato 2021-01-08 00:33:38 -05:00 committed by GitHub
parent e10a578603
commit 77832458c9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 73 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
aio/content/guide/web-worker.en.md Normal file
View File

@ -0,0 +1,58 @@
# Background processing using web workers
[Web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) allow you to run CPU-intensive computations in a background thread,
freeing the main thread to update the user interface.
If you find your application performs a lot of computations, such as generating CAD drawings or doing heavy geometrical calculations, using web workers can help increase your application's performance.
<div class="alert is-helpful">
The CLI does not support running Angular itself in a web worker.
</div>
## Adding a web worker
To add a web worker to an existing project, use the Angular CLI `ng generate` command.
`ng generate web-worker` *location*
You can add a web worker anywhere in your application.
For example, to add a web worker to the root component, `src/app/app.component.ts`, run the following command.
`ng generate web-worker app`
The command performs the following actions.
- Configures your project to use web workers, if it isn't already.
- Adds the following scaffold code to `src/app/app.worker.ts` to receive messages.
<code-example language="typescript" header="src/app/app.worker.ts">
addEventListener('message', ({ data }) => {
const response = `worker response to ${data}`;
postMessage(response);
});
</code-example>
- Adds the following scaffold code to `src/app/app.component.ts` to use the worker.
<code-example language="typescript" header="src/app/app.component.ts">
if (typeof Worker !== 'undefined') {
// Create a new
const worker = new Worker('./app.worker', { type: 'module' });
worker.onmessage = ({ data }) => {
console.log(`page got message: ${data}`);
};
worker.postMessage('hello');
} else {
// Web workers are not supported in this environment.
// You should add a fallback so that your program still executes correctly.
}
</code-example>
After you generate this initial scaffold, you must refactor your code to use the web worker by sending messages to and from the worker.
<div class="alert is-important">
Some environments or platforms, such as `@angular/platform-server` used in [Server-side Rendering](guide/universal), don't support web workers. To ensure that your application will work in these environments, you must provide a fallback mechanism to perform the computations that the worker would otherwise perform.
</div>

30
aio/content/guide/web-worker.md
View File

@ -1,30 +1,30 @@
# Background processing using web workers
# Procesamiento en segundo plano utilizando web workers
[Web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) allow you to run CPU-intensive computations in a background thread,
freeing the main thread to update the user interface.
If you find your application performs a lot of computations, such as generating CAD drawings or doing heavy geometrical calculations, using web workers can help increase your application's performance.
[Web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) te permiten ejecutar cálculos intensivos de CPU en un subproceso en segundo plano,
liberando el hilo principal para actualizar la interfaz de usuario.
Si encuentra que la aplicación realiza una gran cantidad de cálculos, como generar dibujos CAD o realizar cálculos geométricos pesados, el uso de web workers puede ayudar a aumentar el rendimiento de la aplicación.
<div class="alert is-helpful">
The CLI does not support running Angular itself in a web worker.
La CLI no admite la ejecución de Angular en un web worker.
</div>
## Adding a web worker
## Agregando un web worker
To add a web worker to an existing project, use the Angular CLI `ng generate` command.
Para agregar un web worker a un proyecto existente, utilice el comando de Angular `ng generate` de la CLI.
`ng generate web-worker` *location*
You can add a web worker anywhere in your application.
For example, to add a web worker to the root component, `src/app/app.component.ts`, run the following command.
Puede agregar un trabajador web en cualquier lugar de la aplicación.
Por ejemplo, para agregar un web worker al componente raíz, `src/app/app.component.ts`, ejecute el siguiente comando.
`ng generate web-worker app`
The command performs the following actions.
El comando realiza las siguientes acciones.
- Configures your project to use web workers, if it isn't already.
- Adds the following scaffold code to `src/app/app.worker.ts` to receive messages.
- Configura el proyecto para que use web workers, si aún no lo está.
- Agrega el siguiente código a `src/app/app.worker.ts` para recibir mensajes.
<code-example language="typescript" header="src/app/app.worker.ts">
addEventListener('message', ({ data }) => {
@ -33,7 +33,7 @@ The command performs the following actions.
});
</code-example>
- Adds the following scaffold code to `src/app/app.component.ts` to use the worker.
- Agrega el siguiente código `src/app/app.component.ts` para usar el worker.
<code-example language="typescript" header="src/app/app.component.ts">
if (typeof Worker !== 'undefined') {
@ -49,10 +49,10 @@ The command performs the following actions.
}
</code-example>
After you generate this initial scaffold, you must refactor your code to use the web worker by sending messages to and from the worker.
Después de generar este scaffolding inicial, debe refactorizar el código para usar el web worker enviando mensajes desde y hacia el worker.
<div class="alert is-important">
Some environments or platforms, such as `@angular/platform-server` used in [Server-side Rendering](guide/universal), don't support web workers. To ensure that your application will work in these environments, you must provide a fallback mechanism to perform the computations that the worker would otherwise perform.
Algunos entornos o plataformas, como `@angular/platform-server` utilizado en [Renderizado del lado del servidor](guide/universal), no admiten web workers. Para asegurarse de que la aplicación funcionará en estos entornos, debes proporcionar un mecanismo de reserva para realizar los cálculos que el worker realizaría de otro modo.
</div>