Deferrable Views - New Feature in Angular 17

Summary

This video script unveils the powerful 'defer views' feature introduced in Angular 17, aiming to enhance bundle size reduction and user experience for Angular applications. The narrator, M Mki, an Angular tutorial creator, delves into the intricacies of this feature, demonstrating how it streamlines lazy loading of components based on various triggers like viewport visibility, button clicks, and custom logic. The video showcases techniques for improving perceived performance, such as placeholders, loading indicators, and error handling. It also explores advanced capabilities like prefetching components in the background for instant rendering. Overall, the script promises an in-depth exploration of this cutting-edge Angular feature, positioning it as a game-changer for optimizing Angular apps.

Takeaways

• 😎 Angular 17 introduces a new 'defer views' feature that reduces bundle size and improves user experience for lazy-loaded components.
• 🔑 The 'defer' block is used to wrap heavy components that need to be lazy-loaded, simplifying the process compared to previous approaches.
• ⏱️ 'defer views' provides placeholders, error handling, and loading templates to improve the user experience during lazy loading.
• 🎯 Built-in triggers like 'timer', 'viewport', and 'idle' allow controlling when lazy components are loaded and activated based on various conditions.
• 🔭 Custom triggers can be created using the 'when' keyword to define specific logic for loading and activating lazy components.
• 🚀 The 'prefetch' keyword enables preloading lazy components in the background, further improving the user experience.
• 🧩 Custom preloading logic can be implemented by providing a Boolean value to the 'prefetch' keyword.
• 📐 The 'defer views' feature provides a powerful and declarative way to manage lazy loading in Angular applications.
• 🌐 The new feature makes Angular one of the frameworks with the most powerful lazy loading mechanisms on the market.
• 📢 The video encourages viewers to share, subscribe, and check out the author's video courses to level up their Angular skills.

Q & A

What is the new feature introduced in Angular 17?

The new feature introduced in Angular 17 is called 'defer views'. It aims to reduce bundle size, improve user experience, and provide a more efficient way to lazy-load components in Angular applications.

How does the 'defer views' feature differ from the traditional router-based lazy loading?

Unlike router-based lazy loading, which loads components based on the Angular router state, 'defer views' allows lazy loading of components based on certain component states or events, providing more flexibility and control over the loading process.

How does the 'defer views' feature simplify the lazy loading process compared to previous versions of Angular?

The 'defer views' feature simplifies lazy loading by providing a declarative syntax using the 'deferView' block, which wraps the lazy component. This eliminates the need for complex code involving dynamic imports, dynamic component creation, and other low-level Angular APIs, making the process more straightforward and readable.

What are some of the additional features provided by 'defer views' beyond simple lazy loading?

The 'defer views' feature offers additional functionality such as placeholders, error handling, loading indicators, and various triggers (e.g., timer, viewport, custom triggers) to control when and how the lazy component is loaded and activated.

How does the 'placeholder' block in 'defer views' help improve user experience?

The 'placeholder' block in 'defer views' allows you to show a placeholder content before the lazy component is loaded and activated. This helps prevent layout shifts or flickering and provides visual feedback to the user that something is loading.

What is the difference between the 'loading' and 'placeholder' blocks in 'defer views'?

The 'loading' block is used to show content during the phase when the lazy component's JavaScript chunk is being loaded, while the 'placeholder' block is shown before the loading phase starts, providing an initial placeholder until the actual content appears.

What are 'defer view triggers', and how do they help control the lazy loading process?

Defer view triggers are instructions that determine when the lazy chunk should be loaded and activated for the 'defer views' block. Angular provides built-in triggers like 'timer', 'viewport', and the ability to create custom triggers based on specific conditions or events.

What is the purpose of the 'prefetch' keyword in 'defer views'?

The 'prefetch' keyword in 'defer views' allows you to preload the lazy component's JavaScript chunk in the background before it's actually needed, improving the user experience by instantly rendering the component when the trigger condition is met.

Can you provide an example of a custom trigger for 'defer views'?

Yes, a custom trigger can be created using the 'when' keyword followed by a boolean value. For example, 'when' can be set to a boolean property that changes based on a button click, allowing the lazy component to be loaded and activated when the button is clicked.

How does the 'defer views' feature compare to similar lazy loading mechanisms in other frameworks?

According to the speaker, the 'defer views' feature in Angular 17 makes Angular one of the frameworks with the most powerful lazy loading mechanisms on the market, providing a comprehensive set of tools and features for optimizing bundle size and improving user experience.

Outlines

00:00

🚀 Introduction to Deferred Views in Angular 17

The speaker introduces the new 'Deferred Views' feature in Angular 17, which helps reduce bundle size and improve user experience in Angular applications. The speaker explains that this video will cover how Deferred Views work, how to implement them, and how they can benefit application performance.

05:00

🧩 Lazy Loading Before Deferred Views

This paragraph discusses techniques for lazy loading components in Angular versions prior to 17. It covers router-based lazy loading, dynamic imports, and dynamic component creation. The speaker explains that while these techniques worked, they required more code and were less straightforward than the new Deferred Views feature.

10:03

🔍 Exploring Deferred Views and Its Features

The speaker dives into the details of Deferred Views, explaining how it simplifies lazy loading components using a declarative syntax. Various features are covered, including placeholders, error handling, loading indicators, triggers (timer, viewport, custom), and prefetching. The speaker demonstrates how these features can enhance the user experience and provide more control over lazy loading components.

15:05

🎉 Conclusion and Call to Action

The speaker concludes by emphasizing the power and versatility of Deferred Views in Angular 17. They encourage viewers to share the video, subscribe to the channel for more Angular tutorials, and check out video courses offered to level up their Angular skills and career.

Keywords

💡Defer Views

Defer Views is a new feature introduced in Angular 17 that allows developers to lazy load heavy or resource-intensive components. This feature aims to reduce the initial bundle size of Angular applications, improving performance and user experience. By wrapping a component with the `<defer>` block, Angular defers the loading and rendering of that component until a specific trigger is met, such as when the component enters the viewport or after a certain time delay.

💡Lazy Loading

Lazy loading refers to the practice of loading resources or parts of an application only when they are needed, instead of loading everything upfront. In the context of the video, lazy loading is discussed as a technique to reduce the initial bundle size of Angular applications by splitting the application into smaller chunks that can be loaded on-demand. Prior to Angular 17, developers had to rely on router-based lazy loading or employ more complex techniques involving dynamic imports and component creation.

💡Placeholder

A placeholder is a visual element or template that is displayed while the lazy-loaded content is being fetched and rendered. Defer Views provides a dedicated `<placeholder>` block where developers can define the content to be shown during this loading phase. Placeholders help prevent view flickering and provide visual feedback to the user that content is being loaded, enhancing the overall user experience.

💡Loading State

The loading state refers to the period when the lazy-loaded component's JavaScript chunk is being fetched and loaded. Defer Views offers a `<loading>` block where developers can define a template to be displayed during this loading phase. This template can be used to show a loading indicator or any other relevant information to the user, keeping them informed about the ongoing loading process.

💡Error Handling

Error handling is an essential aspect of any application, and Defer Views provides an `<error>` block to handle scenarios where the lazy-loaded chunk fails to load. Developers can define a template within this block to inform users about the error and provide appropriate fallback content or instructions.

💡Defer View Triggers

Defer View Triggers are instructions that determine when the lazy chunk associated with a `<defer>` block should be loaded and activated. Angular provides several built-in triggers, such as `timer`, `viewport`, and `idle`, which allow developers to implement various user experience patterns. Additionally, developers can define custom triggers using the `when` keyword to meet specific application requirements.

💡Prefetching

Prefetching is a technique used to preload lazy-loaded resources in the background before they are needed, reducing the perceived loading time when the content is actually requested. Defer Views supports prefetching through the `prefetch` keyword, allowing developers to specify triggers or conditions under which the lazy chunk should be preloaded. For example, the `idle` trigger instructs Angular to prefetch the chunk when the browser is idle, improving responsiveness when the user eventually requires the content.

💡Bundle Size Reduction

Bundle size reduction is a key goal of the Defer Views feature. By lazy loading components and deferring their loading until specific triggers are met, the initial bundle size of an Angular application can be significantly reduced. This improved performance can lead to faster load times, better user experiences, and more efficient use of resources, especially on mobile devices or slower network connections.

💡User Experience (UX)

User experience (UX) is a critical aspect of web development, and Defer Views aims to enhance the UX of Angular applications. By providing placeholders, loading states, and error handling, as well as allowing for various loading triggers and prefetching, Defer Views gives developers greater control over how content is presented to users, reducing visual disruptions, improving perceived performance, and providing a more polished and responsive experience.

💡Declarative Syntax

Defer Views introduces a declarative syntax for lazy loading components in Angular. Instead of relying on complex imperative code involving dynamic imports and component creation, developers can now use the `<defer>` block and its associated blocks (`<placeholder>`, `<loading>`, `<error>`) to declaratively define lazy-loading behavior. This declarative approach improves code readability, maintainability, and developer productivity.

Highlights

Angular 17 introduces a new feature called 'defer views' that helps reduce bundle size and improve user experience for Angular applications.

Before Angular 17, reducing bundle size involved router-based lazy loading or dynamic imports and component creation, which required more code and complexity.

With 'defer views', you can wrap a heavy component with the 'defer' block, and Angular will automatically handle lazy loading and dynamic creation.

The 'defer' block supports placeholder content to be shown before the lazy component is loaded, preventing layout shifts and flickering.

An error block can be used to display a template when the lazy chunk fails to load.

A loading block can be used to show content during the chunk loading phase.

'Defer view triggers' allow you to control when the lazy chunk should be loaded and activated, based on various conditions such as time, viewport visibility, or custom logic.

The 'timer' trigger can delay the activation of the 'defer' block by a fixed amount of time.

The 'viewport' trigger can load the lazy chunk when the 'defer' block enters the viewport.

Custom triggers can be created using the 'when' keyword, which accepts a Boolean value to determine when the lazy chunk should be loaded.

The 'prefetch' keyword allows you to preload the lazy chunk in the background before it's needed, improving the perceived loading time.

The 'idle' trigger can be used to instruct Angular to prefetch the resource when the browser is idle.

Custom prefetch logic can be implemented by providing a Boolean value to the 'prefetch' keyword.

The 'defer views' feature makes Angular one of the frameworks with the most powerful lazy loading mechanisms on the market.

The speaker encourages viewers to support their channel, subscribe, and check out their video courses for in-depth Angular tutorials and leveling up skills.

Transcripts

hi today I'm going to show you

everything you have to know about the

brand new feature from angular 17 called

defer views from this video you will

learn how to reduce their bundle size

for your angular application even

further how to improve their user

experience for your angular app and also

we will a little bit have a look how

everything works under the hood my name

is m mki and I regularly post different

angle tutorials on my YouTube channel

and also I create video courses if you

want to level up your angular skills

links will be in the video description

but we are getting started with defer

[Music]

views before angular 17 we had a couple

of ways to reduce bundle size for our

applications the first one is a

well-known rotor based lazy loading you

just take a road and in the load

component property you can Define this

simple notation which instructs angular

that the JavaScript code for this

component has to be chunked out from the

main application bundle and loaded only

when this road is

activated however sometimes our apps are

designed in such a way so that lazy

chunk has to be loaded based on some

certain component state or event instead

of the angular rotor State and it is

also possible even with the older

angular version however the solution

would be so simple and obvious because

it involves some in-depth knowledge like

um knowledge about es6 Dynamic Imports

Dynamic component creation and it also

requires some additional work from our

side the simplest solution might look

like this one where you can distinguish

two faces chunk loading and component

activation phase the loading stage would

look like the usage of angular Dynamic

import which at build time instructs

angular bundler that this component has

to be chunked out from the main bundle

and at run time the same piece of code

will load this Chunk from the endpoint

and uh from there we can destructure

already their component class however it

is not enough just to load their

component code right we need to

dynamically created in order to see it

on the page and this is uh something

that we do during the second phase which

involves also multiple steps like

defining the container element uh in the

template then we have to get reference

to this container and finally we can uh

create dynamically the component

instance and already now it is uh quite

a lot of code I would say and here I'm

not even talking about things like

showing the loader during the CH

clothing or error handling and many

other things we have to care about in

real use cases so this new defer views

feature addresses exactly this use case

and starting with angular 17 the same

functionality you can Implement by

wrapping your heavy component that you

want to Lazy load with this brand new

defer blog just like that and check this

out before and after now you have to

write much less code it is declarative

and intention of this code is extremely

clear if you want to investigate the

compiled code of this component with def

varable view block you can see that

during the compilation phase the angular

compiler transforms this notation into a

bunch of functions the first function is

the defer function which performs all

the magic you will see later in this

video and one of the arguments you can

see here is called defer deps function

which actually loads their lazy

JavaScript chunk using their Dynamic

JavaScript import it is very similar

what we have done a minute ago by the

way I don't want to dive deeper into the

implementation of the defer block it is

quite complex things the only thing I

will say that there happens something

very similar that we did a minute ago

but on the lower level using the

internal angular API and data structure

like T views and L views but let's

continue and learn what else bring this

feature because the functionality of

defer views goes Way Beyond the simple

scenario we currently have for example

most probably before the lazy component

is loaded and activated we would like to

show some placeholder to give the user

some visual feedback that something is

going on right and it is very

straightforward to achieve with the

dedicated placeholder block the content

defined inside this blog will be shown

before the lazy content is activated in

my case everything happens quite fast

but if I go to the network Tab and

emulate a slow Network then you might

notice that before the component is

activated I see this placeholder right

here another scenario when the

placeholder is useful is PR preventing

their view from flickering because when

the lazy component appears it can cause

their page layout shift right and it

might be quite irritating for your users

and the placeholder can prefill the

space until the actual content appears

in a similar way you can handle a use

case when the lazy chunk couldn't be

loaded in this case you can show user

the template that uh you can Define

inside the error block right there and

to test this Behavior you can disable

the network during the chunk loading and

then the user will see this cor

corresponding uh

template sometimes you want to notify

users

specifically about the Chun loading for

that there is another blog called

loading that works very similar to

previous blogs just the content defined

inside the curly braces will be shown

during this phase and by the way the

content defined in those secondary

blocks they are eagerly loaded and will

be bundled into the main bundle so keep

in mind that but I can predict your

another confusion regarding loading

versus placeholder blocks well the

difference between them indeed sometimes

can be confusing because when you Lo

load and activate the defer block

simultaneously as I currently do then

the loading State immediately overlaps

the placeholder and you might think that

those two states are interchangeable

however those are two different stages

and the chunk loading stage is a part of

the defer block activation stage which

might not happen immediately but with

some delay and before we trigger the

loading we have to show the placeholder

and this is how we slowly move to the

concept like defer view triggers defer

view triggers are instructions for the

defer block of when the lazy chunks have

to be loaded and activated out of the

box angular offers a special syntax and

bench of the buil-in triggers those

triggers allow you to implement most

popular us user experience patterns for

your angular apps for example you can

delay the activation of the defer block

by some fixed amount of time using that

timer trigger then you can see if you go

to the browser and check you can see

that now I have a 5 Seconds delay during

this 5 seconds I see the placeholder and

only when we start to loading this lazy

chunk I see the loading template and

then the lazy uh component has been

activated and rendered on the page uh by

the way sometimes loading of the bundle

happens too fast which might be again

cause of some uh flickering to solve

this issue you can use the additional uh

parameters for the loading block like

after and minimum for example using the

parameter minimum you can define a

minimum amount of time uh while the

loading placeholder has to be visible

even though the corresponding JavaScript

chunk has been already loaded also using

the after parameter you can handle a

slightly different but still very useful

use case and you can show their loading

template only when request takes really

some significant amount of time and you

can notify the user that yes the loading

is processing it takes a bit more time

that we expected but we still loading

and there you can kindly ask them to be

patient and wait another couple of

seconds another very useful trigger is

called viewport and it handles one of

the most like popular use case for defer

use features it is when you have some

very heavy component that during the

initial page loading located outside the

fault and is not visible on the initial

screen and in this case you can intract

angular to activate the defer block only

when it enters the viewport okay and for

that as I said you can use the viewport

trigger so let me open my browser in the

network Tab and there you will not see

their lazy chunk right now because this

component is not located on the initial

loading page but when I start to scroll

and the Deferred block enters the

viewport then you can see that the lazy

chunk is loaded and successfully

rendered on the page alternatively you

can uh activate the Deferred block when

some another uh Dome element enters the

viewport and then you can just take any

Dome element you need if it is already

exist or create if this element doesn't

is not created yet and then you can

Define on this Dome element their

template reference and then simply

provide it as an argument for the

viewport trigger just as simple as that

and now when this element enters the

viewport it will be it will instruct

angular to load chunk that is created

for exactly this defer block and as I

said there are much more built-in

triggers you can just go to the brand

new and GL recommendation and g.de and

check it out I will leave the link in

the video description so you can easily

find it but what if you read the

Commendation and you don't see the

trigger that corresponds your needs in

this case if you encounter this

situation you can create your own and

the custom trigger is represented by the

keyword when and the value for the this

keyword has to be just a Boolean value

true or false for example you could have

something like button clicking on which

one we change the state of some property

from false to true and when we change

the value for the when keyword to true

it instructs angular that this defer

block has to be loaded so now you see

that nothing happens until I click the

button and only after that I see that

the lazy content has been successfully

loaded that's already so cool but def

varable views allow you to go one step

further to improve the user experience

of your angular applications for example

sometimes we have a scenario when lazy

loaded featur and component is not

needed immedi immediately but it is very

likely that the user will need it very

soon in this case we can preload this

feature in the background and activate

when we need it when some trigger will

be fired right and to achieve that you

can use the prefetch keyword and

instruct angular when exactly

prefetching has to be started the

builtin trigger for uh this this is Idle

browser uh State this state means that

uh browser will start to prefetch the

resource as soon as possible when it has

no tasks to handle so it means that when

comes time for lazy component activation

the loading stage will be obviously

skipped because it happens in the

background and the component will appear

on the page instantly because JavaScript

code for this l C feature is already

preloaded and ready for usage or again

if it is not an option for you and you

have some custom logic or you want to

have some custom Logic for Source

preloading likewise with triggers you

can always write your own custom

preloader so to say and again likewise

with triggers you provide just a true or

false value and when it's true their

preloading will be

started so as you can see the defer

views is very powerful and makes angular

the framework with one of the most

powerful lazy loading mechanism on the

market all right guys thanks for

watching and if you enjoyed this video

please support my channel by sharing

this video in your social media share it

with your colleagues and friends in the

working chats And subscribe yeah

subscribe to this channel because I

constantly publish angular tutorial many

of them are really unique and in depth

so it is definitely worth it also check

out my video courses about UL they

really helped hundreds of people already

to level up their NBL skills and level

up their career as well otherwise I wish

you productive we ahead stay safe and

see you in the next

[Music]

video