Deferrable Views - New Feature in Angular 17

Decoded Frontend
30 Jan 202415:31

Summary

TLDRThis 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.

Mindmap

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

play00:00

hi today I'm going to show you

play00:01

everything you have to know about the

play00:03

brand new feature from angular 17 called

play00:06

defer views from this video you will

play00:08

learn how to reduce their bundle size

play00:11

for your angular application even

play00:13

further how to improve their user

play00:15

experience for your angular app and also

play00:18

we will a little bit have a look how

play00:20

everything works under the hood my name

play00:22

is m mki and I regularly post different

play00:26

angle tutorials on my YouTube channel

play00:28

and also I create video courses if you

play00:31

want to level up your angular skills

play00:34

links will be in the video description

play00:36

but we are getting started with defer

play00:41

[Music]

play00:43

views before angular 17 we had a couple

play00:47

of ways to reduce bundle size for our

play00:49

applications the first one is a

play00:51

well-known rotor based lazy loading you

play00:54

just take a road and in the load

play00:57

component property you can Define this

play00:59

simple notation which instructs angular

play01:02

that the JavaScript code for this

play01:04

component has to be chunked out from the

play01:07

main application bundle and loaded only

play01:10

when this road is

play01:11

activated however sometimes our apps are

play01:14

designed in such a way so that lazy

play01:17

chunk has to be loaded based on some

play01:19

certain component state or event instead

play01:22

of the angular rotor State and it is

play01:25

also possible even with the older

play01:27

angular version however the solution

play01:29

would be so simple and obvious because

play01:33

it involves some in-depth knowledge like

play01:36

um knowledge about es6 Dynamic Imports

play01:39

Dynamic component creation and it also

play01:41

requires some additional work from our

play01:44

side the simplest solution might look

play01:47

like this one where you can distinguish

play01:50

two faces chunk loading and component

play01:53

activation phase the loading stage would

play01:56

look like the usage of angular Dynamic

play01:58

import which at build time instructs

play02:01

angular bundler that this component has

play02:03

to be chunked out from the main bundle

play02:06

and at run time the same piece of code

play02:09

will load this Chunk from the endpoint

play02:13

and uh from there we can destructure

play02:15

already their component class however it

play02:18

is not enough just to load their

play02:21

component code right we need to

play02:23

dynamically created in order to see it

play02:25

on the page and this is uh something

play02:28

that we do during the second phase which

play02:31

involves also multiple steps like

play02:33

defining the container element uh in the

play02:36

template then we have to get reference

play02:38

to this container and finally we can uh

play02:41

create dynamically the component

play02:44

instance and already now it is uh quite

play02:46

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

play02:49

not even talking about things like

play02:51

showing the loader during the CH

play02:54

clothing or error handling and many

play02:57

other things we have to care about in

play02:59

real use cases so this new defer views

play03:02

feature addresses exactly this use case

play03:06

and starting with angular 17 the same

play03:09

functionality you can Implement by

play03:11

wrapping your heavy component that you

play03:14

want to Lazy load with this brand new

play03:17

defer blog just like that and check this

play03:22

out before and after now you have to

play03:25

write much less code it is declarative

play03:28

and intention of this code is extremely

play03:32

clear if you want to investigate the

play03:34

compiled code of this component with def

play03:37

varable view block you can see that

play03:39

during the compilation phase the angular

play03:42

compiler transforms this notation into a

play03:45

bunch of functions the first function is

play03:48

the defer function which performs all

play03:51

the magic you will see later in this

play03:53

video and one of the arguments you can

play03:55

see here is called defer deps function

play03:58

which actually loads their lazy

play04:01

JavaScript chunk using their Dynamic

play04:03

JavaScript import it is very similar

play04:06

what we have done a minute ago by the

play04:09

way I don't want to dive deeper into the

play04:12

implementation of the defer block it is

play04:15

quite complex things the only thing I

play04:17

will say that there happens something

play04:20

very similar that we did a minute ago

play04:23

but on the lower level using the

play04:26

internal angular API and data structure

play04:29

like T views and L views but let's

play04:32

continue and learn what else bring this

play04:35

feature because the functionality of

play04:37

defer views goes Way Beyond the simple

play04:42

scenario we currently have for example

play04:45

most probably before the lazy component

play04:47

is loaded and activated we would like to

play04:50

show some placeholder to give the user

play04:53

some visual feedback that something is

play04:55

going on right and it is very

play04:58

straightforward to achieve with the

play05:00

dedicated placeholder block the content

play05:03

defined inside this blog will be shown

play05:06

before the lazy content is activated in

play05:09

my case everything happens quite fast

play05:12

but if I go to the network Tab and

play05:15

emulate a slow Network then you might

play05:18

notice that before the component is

play05:21

activated I see this placeholder right

play05:24

here another scenario when the

play05:27

placeholder is useful is PR preventing

play05:30

their view from flickering because when

play05:33

the lazy component appears it can cause

play05:36

their page layout shift right and it

play05:40

might be quite irritating for your users

play05:43

and the placeholder can prefill the

play05:45

space until the actual content appears

play05:49

in a similar way you can handle a use

play05:51

case when the lazy chunk couldn't be

play05:54

loaded in this case you can show user

play05:57

the template that uh you can Define

play06:00

inside the error block right there and

play06:03

to test this Behavior you can disable

play06:07

the network during the chunk loading and

play06:10

then the user will see this cor

play06:13

corresponding uh

play06:14

template sometimes you want to notify

play06:17

users

play06:18

specifically about the Chun loading for

play06:21

that there is another blog called

play06:23

loading that works very similar to

play06:27

previous blogs just the content defined

play06:30

inside the curly braces will be shown

play06:33

during this phase and by the way the

play06:35

content defined in those secondary

play06:38

blocks they are eagerly loaded and will

play06:42

be bundled into the main bundle so keep

play06:45

in mind that but I can predict your

play06:48

another confusion regarding loading

play06:51

versus placeholder blocks well the

play06:54

difference between them indeed sometimes

play06:57

can be confusing because when you Lo

play06:59

load and activate the defer block

play07:02

simultaneously as I currently do then

play07:05

the loading State immediately overlaps

play07:08

the placeholder and you might think that

play07:11

those two states are interchangeable

play07:14

however those are two different stages

play07:17

and the chunk loading stage is a part of

play07:20

the defer block activation stage which

play07:24

might not happen immediately but with

play07:26

some delay and before we trigger the

play07:29

loading we have to show the placeholder

play07:32

and this is how we slowly move to the

play07:35

concept like defer view triggers defer

play07:39

view triggers are instructions for the

play07:41

defer block of when the lazy chunks have

play07:45

to be loaded and activated out of the

play07:49

box angular offers a special syntax and

play07:52

bench of the buil-in triggers those

play07:55

triggers allow you to implement most

play07:58

popular us user experience patterns for

play08:01

your angular apps for example you can

play08:04

delay the activation of the defer block

play08:06

by some fixed amount of time using that

play08:10

timer trigger then you can see if you go

play08:13

to the browser and check you can see

play08:15

that now I have a 5 Seconds delay during

play08:19

this 5 seconds I see the placeholder and

play08:21

only when we start to loading this lazy

play08:24

chunk I see the loading template and

play08:28

then the lazy uh component has been

play08:30

activated and rendered on the page uh by

play08:33

the way sometimes loading of the bundle

play08:36

happens too fast which might be again

play08:40

cause of some uh flickering to solve

play08:43

this issue you can use the additional uh

play08:45

parameters for the loading block like

play08:48

after and minimum for example using the

play08:51

parameter minimum you can define a

play08:55

minimum amount of time uh while the

play08:58

loading placeholder has to be visible

play09:01

even though the corresponding JavaScript

play09:04

chunk has been already loaded also using

play09:07

the after parameter you can handle a

play09:10

slightly different but still very useful

play09:13

use case and you can show their loading

play09:16

template only when request takes really

play09:21

some significant amount of time and you

play09:23

can notify the user that yes the loading

play09:27

is processing it takes a bit more time

play09:29

that we expected but we still loading

play09:33

and there you can kindly ask them to be

play09:36

patient and wait another couple of

play09:39

seconds another very useful trigger is

play09:42

called viewport and it handles one of

play09:46

the most like popular use case for defer

play09:49

use features it is when you have some

play09:52

very heavy component that during the

play09:55

initial page loading located outside the

play09:59

fault and is not visible on the initial

play10:02

screen and in this case you can intract

play10:05

angular to activate the defer block only

play10:09

when it enters the viewport okay and for

play10:14

that as I said you can use the viewport

play10:17

trigger so let me open my browser in the

play10:20

network Tab and there you will not see

play10:23

their lazy chunk right now because this

play10:26

component is not located on the initial

play10:29

loading page but when I start to scroll

play10:33

and the Deferred block enters the

play10:35

viewport then you can see that the lazy

play10:38

chunk is loaded and successfully

play10:40

rendered on the page alternatively you

play10:43

can uh activate the Deferred block when

play10:46

some another uh Dome element enters the

play10:50

viewport and then you can just take any

play10:53

Dome element you need if it is already

play10:55

exist or create if this element doesn't

play10:58

is not created yet and then you can

play11:00

Define on this Dome element their

play11:02

template reference and then simply

play11:05

provide it as an argument for the

play11:07

viewport trigger just as simple as that

play11:11

and now when this element enters the

play11:13

viewport it will be it will instruct

play11:16

angular to load chunk that is created

play11:19

for exactly this defer block and as I

play11:22

said there are much more built-in

play11:25

triggers you can just go to the brand

play11:28

new and GL recommendation and g.de and

play11:32

check it out I will leave the link in

play11:34

the video description so you can easily

play11:36

find it but what if you read the

play11:40

Commendation and you don't see the

play11:43

trigger that corresponds your needs in

play11:46

this case if you encounter this

play11:47

situation you can create your own and

play11:51

the custom trigger is represented by the

play11:55

keyword when and the value for the this

play11:59

keyword has to be just a Boolean value

play12:02

true or false for example you could have

play12:06

something like button clicking on which

play12:09

one we change the state of some property

play12:12

from false to true and when we change

play12:16

the value for the when keyword to true

play12:19

it instructs angular that this defer

play12:22

block has to be loaded so now you see

play12:27

that nothing happens until I click the

play12:30

button and only after that I see that

play12:34

the lazy content has been successfully

play12:38

loaded that's already so cool but def

play12:41

varable views allow you to go one step

play12:45

further to improve the user experience

play12:48

of your angular applications for example

play12:52

sometimes we have a scenario when lazy

play12:55

loaded featur and component is not

play12:58

needed immedi immediately but it is very

play13:01

likely that the user will need it very

play13:05

soon in this case we can preload this

play13:09

feature in the background and activate

play13:12

when we need it when some trigger will

play13:14

be fired right and to achieve that you

play13:18

can use the prefetch keyword and

play13:20

instruct angular when exactly

play13:23

prefetching has to be started the

play13:26

builtin trigger for uh this this is Idle

play13:30

browser uh State this state means that

play13:33

uh browser will start to prefetch the

play13:36

resource as soon as possible when it has

play13:40

no tasks to handle so it means that when

play13:44

comes time for lazy component activation

play13:47

the loading stage will be obviously

play13:50

skipped because it happens in the

play13:52

background and the component will appear

play13:54

on the page instantly because JavaScript

play13:57

code for this l C feature is already

play14:00

preloaded and ready for usage or again

play14:04

if it is not an option for you and you

play14:07

have some custom logic or you want to

play14:09

have some custom Logic for Source

play14:11

preloading likewise with triggers you

play14:14

can always write your own custom

play14:18

preloader so to say and again likewise

play14:21

with triggers you provide just a true or

play14:24

false value and when it's true their

play14:27

preloading will be

play14:29

started so as you can see the defer

play14:32

views is very powerful and makes angular

play14:36

the framework with one of the most

play14:38

powerful lazy loading mechanism on the

play14:41

market all right guys thanks for

play14:42

watching and if you enjoyed this video

play14:44

please support my channel by sharing

play14:47

this video in your social media share it

play14:50

with your colleagues and friends in the

play14:51

working chats And subscribe yeah

play14:54

subscribe to this channel because I

play14:56

constantly publish angular tutorial many

play14:59

of them are really unique and in depth

play15:02

so it is definitely worth it also check

play15:04

out my video courses about UL they

play15:07

really helped hundreds of people already

play15:10

to level up their NBL skills and level

play15:14

up their career as well otherwise I wish

play15:17

you productive we ahead stay safe and

play15:19

see you in the next

play15:26

[Music]

play15:27

video

Rate This

5.0 / 5 (0 votes)

Related Tags
AngularTutorialsWeb DevelopmentOptimizationUser ExperienceLazy LoadingPerformanceFront-EndCodingInstructional