diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index e8fe2e7..44469ae 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,24 +1,3 @@ # Contributing -> Thank you for considering contributing to this project. Your help is very much appreciated! - -When contributing, it's better to first explain the challenge/exercice you are thinking about in the issue tab. - -## Getting started - -Please follow those step in order to succesfully make your contribution to this repository. - -1. Fork the project -2. Install **Nx Console**, this will help you work with this repository -3. Run `npm ci` to install all dependencies -4. Generate a new app with Nx Console > Right Click on apps folder > `Nx Generate Application` -5. Copy/Paste **example.README.md** and fill it up. -6. Link the main **README** with your new challenge -7. Few days later, create a PR with your answer. -8. Optional: write a blog post explaining your Challenge and the solution you came up with. - -## Pull Request Process - -1. We follow [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0-beta.4/) - in our commit messages, i.e. `feat(core): improve typing` -2. When you are ready, create Pull Request of your fork into original repository with the title starting with **NEW CHALLENGE** +Learn how to contribute [here](https://angular-challenges.vercel.app/guides/contribute/) diff --git a/apps/performance/memoized/README.md b/apps/performance/memoized/README.md index c3ae1bc..4e250b9 100644 --- a/apps/performance/memoized/README.md +++ b/apps/performance/memoized/README.md @@ -1,32 +1,13 @@ -

memoized function

+# Memoization > Author: Thomas Laforge - +### Run Application -## Information +```bash +npx nx serve performance-memoized +``` -## Statement +### Documentation and Instruction -### Step 1 - -### Step 2 - -### Constraints: - -### Submitting your work - -1. Fork the project -2. clone it -3. npm ci -4. `npx nx serve memoized` -5. _...work on it_ -6. Commit your work -7. Submit a PR with a title beginning with **Answer:35** that I will review and other dev can review. - -memoized -memoized solution author - - - -_You can ask any question on_ twitter +Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular-performance/35-memoize/). diff --git a/docs/src/assets/34/profiler-record.png b/docs/src/assets/angular-performance/34/profiler-record.png similarity index 100% rename from docs/src/assets/34/profiler-record.png rename to docs/src/assets/angular-performance/34/profiler-record.png diff --git a/docs/src/assets/angular-performance/35/memoize-profiler.png b/docs/src/assets/angular-performance/35/memoize-profiler.png new file mode 100644 index 0000000..0520fde Binary files /dev/null and b/docs/src/assets/angular-performance/35/memoize-profiler.png differ diff --git a/docs/src/assets/34/profiler-tab.png b/docs/src/assets/angular-performance/profiler-tab.png similarity index 100% rename from docs/src/assets/34/profiler-tab.png rename to docs/src/assets/angular-performance/profiler-tab.png diff --git a/docs/src/content/docs/challenges/angular-performance/12-scroll-cd.md b/docs/src/content/docs/challenges/angular-performance/12-scroll-cd.md index d6b80c1..60d33c3 100644 --- a/docs/src/content/docs/challenges/angular-performance/12-scroll-cd.md +++ b/docs/src/content/docs/challenges/angular-performance/12-scroll-cd.md @@ -5,32 +5,36 @@ sidebar: order: 12 --- -:::note -WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. -::: -
Challenge #12
## Information -In this challenge, you will need to optimize the change detection cycles run by Angular. +In Angular, there is a library called Zone.js that performs a lot of magic to simplify a developer's life. Zone.js monkey patches all DOM events so that it will recheck and rerender the view when something has changed inside the application. The developer doesn't have to manually trigger change detection. -Zone.js triggers a change detection cycle each time a scroll event is dispatched. However we only want to show or hide a button at a specific scroll position. Therefore, we only want to refresh our application once. +However, sometimes Zone.js triggers a lot more change detection than needed. For example, when you are listening to a scroll event, each scroll event will dispatch a new change detection cycle. -> You can vizualise how many times CD is triggered by installing the [Angular chrome devTool](https://chrome.google.com/webstore/detail/angular-devtools/ienfalfjdbdpebioblfackkekamfmbnh) and starting a new recording on the profiler tab. +In this challenge, we only need to refresh the view at a specific scroll position to display or hide a button. All other cycles are unnecessary. -The following video will explain what is the goal of this challenge. +To have a better visualization of the problem, profile your application with Angular Dev Tools. + +:::note +If you don't know how to use it, read [the performance introduction page](/challenges/angular-performance/) first and come back after. +::: + +You can learn more details about zone pollution and how to resolve it [here](https://angular.io/guide/change-detection-zone-pollution). + +The following video will explain more in-depth the issue of this application. ## Statement -Your goal for this challenge is to avoid all unnecessary change detection cycles and trigger a CD only when needed. +Your goal for this challenge is to avoid all unnecessary change detection cycles and trigger a change detection only when needed. ## Constraint: -You cannot opt-out of zone.js. If this code is part of a large project and you opt out of zone.js, you will break many things within your application. +You cannot opt-out of Zone.js globally. If this code is part of a large project and you opt out of Zone.js, you will break your application without any doubt. --- diff --git a/docs/src/content/docs/challenges/angular-performance/34-default-onpush.md b/docs/src/content/docs/challenges/angular-performance/34-default-onpush.md index 0ab9922..03bc446 100644 --- a/docs/src/content/docs/challenges/angular-performance/34-default-onpush.md +++ b/docs/src/content/docs/challenges/angular-performance/34-default-onpush.md @@ -5,33 +5,37 @@ sidebar: order: 34 --- -:::note -WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. -::: -
Challenge #34
## Information -In this series of challenges, you will learn how to optimize and enhance the performance of your Angular Application. +In this challenge, we will explore the differences and impacts of using `ChangeDetectionStrategy.Default` versus `ChangeDetectionStrategy.OnPush`. -The first step is to download the [Angular DevTools Chrome extention](https://chrome.google.com/webstore/detail/angular-devtools/ienfalfjdbdpebioblfackkekamfmbnh) if you haven't already done so. This extension allows you to profile your application and detect performance issues. +You can read the [Angular documentation](https://angular.io/guide/change-detection-skipping-subtrees) to learn more about the differences between these strategies. -In this challenge, we will explore the differences and impacts of using `ChangeDetectionStrategy.Default` versus `ChangeDetectionStrategy.OnPush`. To provide a clearer demonstration, I have added color enlightment to each component and each row in our application. However, in real-world scenarios, you will not have such visualization. This is where the Angular DevTool profiler comes to the rescue. +In this challenge, all components start with the `Default` strategy. When you type letters inside the input field, you will notice that all components are highlighted in orange. -Start by serving this application by running: `npx nx serve performance-default-onpush` inside your terminal. Then open Chrome DevTool by pressing **F12** and switch to the Angular Tab. From there you can select the Profiler tab as shown below. +:::note +I added color highlighting to each component and each row to provide a better visualization of when a component is rerendered. +::: -![profiler tab](../../../../assets/34/profiler-tab.png 'Profiler tab') +As you can see, each letter triggers a new change detection cycle, and all components are rerendered, causing performance issues. -Start profiling your application and type some letters inside the input field. You will notice that each element of your application will flash at each change detection cycle and the profiler will show you a bar for each change detection cycle. +Let's use the Angular DevTool to profile our application and understand how this tool can help us understand what is happening inside our application. -If you click on one of the bars (indicated by the yellow arrow on the picture below), you can see that `PersonListComponent`, `RandomComponent` and all the `MatListItem` are impacted by the change detection cycle, even when we only interact with the input field. +:::note +If you don't know how to use it, read [the performance introduction page](/challenges/angular-performance/) first and come back after. +::: -![profiler record](../../../../assets/34/profiler-record.png 'Profiler Record') +Now, start profiling your application and type some letters inside the input field to trigger some change detection cycles. + +If you click on one of the bars (indicated by the yellow arrow in the picture below), you can see that `PersonListComponent`, `RandomComponent`, and all the `MatListItem` are impacted by the change detection cycle, even when we only interact with the input field. + +![profiler record](../../../../assets/angular-performance/34/profiler-record.png 'Profiler Record') ## Statement -The goal of this challenge is to improve the clustering of change detection within the application. +The goal of this challenge is to improve the clustering of change detection within the application using the `OnPush` change detection strategy, but not only... ## Hints: diff --git a/docs/src/content/docs/challenges/angular-performance/35-memoize.md b/docs/src/content/docs/challenges/angular-performance/35-memoize.md new file mode 100644 index 0000000..3139be0 --- /dev/null +++ b/docs/src/content/docs/challenges/angular-performance/35-memoize.md @@ -0,0 +1,70 @@ +--- +title: 🟢 Memoization +description: Challenge 35 is about learning +sidebar: + order: 35 +--- + +
Challenge #35
+ +## Information + +In Angular, pure Pipes are very powerful because the value is memoized, which means if the input value doesn't change, the `transform` function of the pipe is not recomputed, and the cached value is outputted. + +You can learn more about pipes in the [Angular documentation](https://angular.io/guide/pipes) and inside this [deep dive article](https://medium.com/ngconf/deep-dive-into-angular-pipes-c040588cd15d). + +In this challenge, we start with a button to load a list of people. Each person is associated with a number, and we will use the Fibonacci calculation to create a heavy computation that will slow down the application. + +Once the list is loaded, try typing some letters inside the input field. You will notice that the application is very slow, even though you are only performing very basic typing. + +:::note +We will not focus on the initial loading of the list in this challenge. +::: + +Let's use the Angular DevTool to profile our application and understand how this tool can help us understand what is happening inside our application. + +:::note +If you don't know how to use it, read [the performance introduction page](/challenges/angular-performance/) first and come back after. +::: + +Now, start profiling your application and type some letters inside the input field. You will see some red bars showing up inside the profiler panel. + +If you click on one of the bars (indicated by the yellow arrow in the picture below), you will see that the change detection cycle is taking more than 3s in `PersonListComponent`. + +![profiler record](../../../../assets/angular-performance/35/memoize-profiler.png 'Profiler Record') + +## Statement + +The goal of this challenge is to understand what is causing this latency and to improve it. + +## Hints: + +
+ Hint 1 + +Use `Pipes` to memoize the Fibonnaci computation. + +
+ +--- + +:::note +Start the project by running: `npx nx serve performance-memoized`. +::: + +:::tip[Reminder] +Your PR title must start with Answer:35. +::: + +
+ + ❖ Community Answers + + + ▶︎ Author Answer + +
diff --git a/docs/src/content/docs/challenges/angular-performance/index.mdx b/docs/src/content/docs/challenges/angular-performance/index.mdx new file mode 100644 index 0000000..58943ac --- /dev/null +++ b/docs/src/content/docs/challenges/angular-performance/index.mdx @@ -0,0 +1,48 @@ +--- +title: Angular Performance +prev: false +next: false +description: Challenge 34 is about learning the difference between Default and OnPush Change Detection Strategy. +sidebar: + order: 1 +--- + +import { LinkCard } from '@astrojs/starlight/components'; + +In this series of challenges about performance, you will learn how to optimize and enhance the performance of your Angular application. + +Before starting to resolve any challenge, I invite you to download the [Angular DevTools Chrome extention](https://chrome.google.com/webstore/detail/angular-devtools/ienfalfjdbdpebioblfackkekamfmbnh) if you haven't already done so. + +This extension allows you to profile your application and detect performance issues, which is very useful for understanding where performance issues can occur. + +## How to use it + +When you serve an Angular application, you can inspect a page by pressing F12, which will open the Chrome developer tools. Then navigate to the Angular tab. From there, you can select the Profiler tab as shown below. + +![profiler tab](../../../../assets/angular-performance/profiler-tab.png 'Profiler tab') + +You can now profile your application by clicking on the record button. You can play with your application and see when change detection is triggered and which components are rerendered. + +:::tip[Learn more] +You can learn more on the [documentation page](https://angular.io/guide/devtools). +::: + +Now that you know how to use the Angular DevTool, you can choose a challenge, profile it, and resolve it. + + + + + + diff --git a/docs/src/content/docs/challenges/angular-performance/32-bug-cd.md b/docs/src/content/docs/challenges/angular/32-bug-cd.md similarity index 96% rename from docs/src/content/docs/challenges/angular-performance/32-bug-cd.md rename to docs/src/content/docs/challenges/angular/32-bug-cd.md index 1632213..4da8d3e 100644 --- a/docs/src/content/docs/challenges/angular-performance/32-bug-cd.md +++ b/docs/src/content/docs/challenges/angular/32-bug-cd.md @@ -11,11 +11,13 @@ WIP: The following documentation will be reviewed and improved. However, you can
Challenge #32
+:::note This challenge is inspired by a real-life example that I simplified to create this nice challenge. +::: ## Information -In this small application, we have a navigation menu to route our application to either `barComponent` or `FooComponent`. However our application is not loading and no errors are displayed inside the console. +In this small application, we have a navigation menu to route our application to either `BarComponent` or `FooComponent`. However our application is not loading and no errors are displayed inside the console. ## Statement diff --git a/docs/src/styles/custom-css.css b/docs/src/styles/custom-css.css index ecf2950..2f365eb 100644 --- a/docs/src/styles/custom-css.css +++ b/docs/src/styles/custom-css.css @@ -94,6 +94,10 @@ b { color: var(--sl-color-accent-high); } +.starlight-aside--tip b { + color: var(--sl-color-asides-text-accent); +} + .main-page-footer { margin-top: 2rem !important; font-size: var(--sl-text-sm); diff --git a/example.README.md b/example.README.md deleted file mode 100644 index 070c246..0000000 --- a/example.README.md +++ /dev/null @@ -1,45 +0,0 @@ - -

{Title of your exercice}

- - - -> Author: {Your name} - - - -## Information - -## Statement - -### Step 1 - -### Step 2 - -### Constraints: - -### Submitting your work - - - -1. Fork the project -2. clone it -3. npm ci - -4. `npx nx serve {project app name}` -5. _...work on it_ -6. Commit your work - -7. Submit a PR with a title beginning with **Answer:{challenge number}** that I will review and other dev can review. - - - -{Project name} - - - - - - diff --git a/package.json b/package.json index 19fcd1d..2087947 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,8 @@ "start": "nx serve", "build": "nx build", "test": "nx test", - "prepare": "husky install" + "prepare": "husky install", + "doc:dev": "cd docs && npm run dev" }, "private": true, "dependencies": {