🩵 Preloading Strategies in Angular

#angular #preload #preloading #PreloadingStrategy

Angular comes with two built-in preloading strategies:

— NoPreloading (default): Disables preloading entirely. Lazy-loaded modules are only fetched when the user navigates to them.
— PreloadAllModules: Preloads all lazy-loaded modules in the background after the initial app load. This is ideal for smaller applications with limited routes, where preloading everything won’t overwhelm the network.

— Custom Preloading Strategies: Taking Control of Performance

Angular allows you to define custom preloading strategies to preload specific routes based on your app’s requirements. This gives you fine-grained control over which modules should be loaded in the background and under what conditions.

✅ Article link

🌐 Angular: Go Zoneless

#angular #ngZone #zoneless

Why Zoneless?

Well, isn't it clear after those pictures? …In my opinion it might look clear, but this isn't the only advantage, there are others:

— Better performance: ZoneJS uses async task as indicators for change. It doesn't directly know when and where exactly the change has happened. You can imagine that it is a system that always runs and is checking everything, everywhere with some exceptions such as OnPush strategy etc.

— Debugging: We all know the Expression Changed After Checked we've all been there. Now the stack trace and errors will be more straight forward.

— Better feeling from the app: I haven't found the right words, but it just feel better. It feel better that when you change a property with async/await or using .signal(). Then the change appears immediately in the correct spot.

— Zone.js was the reason not to develop an App in Angular: Imagine you were building a snippet that was checking user interaction. For example you wanted to calculate how many times is user performing some event such as clicking, touching or interacting with keyboard -> in such scenario your app would go crazy with Angular and you would have to have a lot of components running out of Zone and manually trigger change detection. Otherwise your app even with OnPush strategy could freeze.

✅ Article link

❤️ OAuth2 Integration with Angular 18

#angular #OAuth2 #guide

OAuth2 is a popular authorization framework that allows third-party services to authenticate users without sharing credentials. It’s a powerful protocol for securing Angular applications by delegating authentication and authorization to a trusted identity provider like Google, Facebook, or your own backend server.

✅ Article link

🚯 Magic of Generators

#js #generators

Generators: Advantages

— Fine-Grained Control: Generators give you the ability to pause and resume function execution at will. This can be a game-changer in scenarios like lazy evaluation, custom iteration logic, or complex control flows.

— Memory Efficiency: Since generators produce values on demand, they are highly memory-efficient, making them perfect for handling large datasets or streams.

— Readable Asynchronous Code: While async/await has largely supplanted many asynchronous handling methods, generators still offer a unique combination of readability and control, making complex asynchronous flows easier to manage.

✅ Article link

🌐 Angular : Best practices after the renaissance #1

#angular #controlFlow

Control flow (from version ≥ 17)

One of the biggest improvements in Angular is the introduction of new syntax for handling HTML. The updated syntax for managing conditions and iterations significantly enhances code clarity and maintainability. Previously, directives like *ngIf and *ngFor were used, but the new syntax offers more streamlined and cleaner ways to handle such scenarios.

🌐 Angular : Best practices after the renaissance #2

#angular #standalone

Using standalone components gives you more control over your components compared to the traditional NgModules approach. It allows you to import components directly into each other without the need to go through modules. Standalone components help reduce the number of modules in your project, which translates to less code to manage.