vcgit-forge/angular-challenges
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/angular-challenges.git synced 2026-02-10 12:53:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into forms-control-value-accessor

Browse Source
This commit is contained in:
Laforge Thomas
2023-12-11 21:15:18 +01:00
committed by GitHub
parent b2ec79239c 671c7bf8c3
commit 941346e618
22 changed files with 648 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/src/content/docs/challenges/angular/39-injection-token.md
View File

@@ -6,7 +6,6 @@ challengeNumber: 39
command: angular-injection-token
sidebar:
order: 118
badge: New
---
## Information

32
docs/src/content/docs/challenges/performance/40-christmas-web-worker.md Normal file
View File

@@ -0,0 +1,32 @@
---
title: 🟠 Web workers
description: Challenge 40 is about learning how to create and use a web worker
author: Thomas Laforge
challengeNumber: 40
command: performance-christmas-web-worker
sidebar:
order: 119
badge: New
---
## Information
This challenge has been created for Angular Advent Calendar 2023.
This application is basic. We click on the **Discover** button to reveal the surprise hidden behind the black screen. However, the current application provides an awful user experience. When we click on the button, the page freezes, and after a while, it reveals the secret all at once without a smooth animation.
> Note: To create the application freeze, the loader is based on a very heavy computation function. We could have used a basic timer, but that's not the point of this challenge.
Since JavaScript is single-threaded, when we perform a heavy task, the browser cannot update the UI or respond to mouse clicks or any events. To free the main thread, the goal is to isolate the heavy computation into a different thread. To do so, we will need to use web workers. Web workers can run any scripts in the background, in isolation from the main thread, allowing the browser to still provide your user with a good experience.
In Angular, this technology is often underused, however, it's straightforward to create one. There is a schematic that you can find here.
## Statement
The goal of this challenge is to create a smooth animation by isolating the heavy computation function into a web worker.
First, create a web worker using the schematics, then move the issuing function. Finally, the animation should be smooth and provide an awesome user experience.
### Note
Since we are inside an Nx workspace, simply replace the `ng` command with `nx` when running the schematic.