Up next in 10
Join us in this Angular Virtual Conference as speakers from across the globe come together to share some of the best practices and tips in the Angular Development.
This is the first half of the conference.
AGENDA
All Time Slots Below Are In EST
07:30 am - 07:45 am
Welcome Note - Mahesh Chand
07:45 am - 08:30 am
Pankaj Parkar - Power of Angular Forms
08:30 am - 09:15 am
Siddharth Ajmera - The Present and the Future of Angular with Ivy
09:15 am - 10:00 am
Santosh Yadav - Let's Optimize an Angular App
10:00 am - 10:45 am
Show More Show Less View Video Transcript
0:02
[Music]
0:14
do
0:16
do
0:16
do [Music]
0:42
[Music]
0:42
[Music] so
0:44
so
0:44
so [Applause]
1:10
so
1:13
so
1:13
so [Music]
2:38
[Music]
2:38
[Music] hi everyone my name is stephan simon and
2:40
hi everyone my name is stephan simon and
2:40
hi everyone my name is stephan simon and welcome to c-sharp corner presents
2:42
welcome to c-sharp corner presents
2:42
welcome to c-sharp corner presents angular virtual conference
2:44
angular virtual conference
2:44
angular virtual conference thank you so much everyone for joining
2:46
thank you so much everyone for joining
2:46
thank you so much everyone for joining today it's going to be an
2:47
today it's going to be an
2:47
today it's going to be an exciting 10 hours conference joined by
2:50
exciting 10 hours conference joined by
2:50
exciting 10 hours conference joined by the speakers from across the globe i'm
2:53
the speakers from across the globe i'm
2:53
the speakers from across the globe i'm your host stephen simon
2:54
your host stephen simon
2:54
your host stephen simon as always and i'll be there with you for
2:56
as always and i'll be there with you for
2:56
as always and i'll be there with you for next 10
2:57
next 10
2:58
next 10 hours i'm really excited and looking
3:00
hours i'm really excited and looking
3:00
hours i'm really excited and looking forward for this conference as
3:02
forward for this conference as
3:02
forward for this conference as we do conferences and live show maybe
3:05
we do conferences and live show maybe
3:05
we do conferences and live show maybe every weekend and
3:07
every weekend and
3:07
every weekend and and every weekend we do live on every
3:09
and every weekend we do live on every
3:09
and every weekend we do live on every weekdays we do live show
3:11
weekdays we do live show
3:11
weekdays we do live show and every weekend we do virtual
3:12
and every weekend we do virtual
3:12
and every weekend we do virtual conferences so in this conference we are
3:15
conferences so in this conference we are
3:15
conferences so in this conference we are actually going to talk about angler and
3:17
actually going to talk about angler and
3:17
actually going to talk about angler and the leaders the features of angular 10
3:19
the leaders the features of angular 10
3:19
the leaders the features of angular 10 that have come
3:20
that have come
3:20
that have come not particularly my subject but you're
3:22
not particularly my subject but you're
3:22
not particularly my subject but you're going to learn a lot about
3:23
going to learn a lot about
3:23
going to learn a lot about this new features from our speakers
3:25
this new features from our speakers
3:26
this new features from our speakers joining us today
3:27
joining us today
3:27
joining us today and before i go and even bring
3:30
and before i go and even bring
3:30
and before i go and even bring the speakers and the welcome note uh let
3:33
the speakers and the welcome note uh let
3:33
the speakers and the welcome note uh let me go ahead and introduce
3:34
me go ahead and introduce
3:34
me go ahead and introduce and talk a little about the c-sharp
3:37
and talk a little about the c-sharp
3:37
and talk a little about the c-sharp corner so c-sharp corner is a global
3:39
corner so c-sharp corner is a global
3:39
corner so c-sharp corner is a global community of software developers and i.t
3:41
community of software developers and i.t
3:41
community of software developers and i.t professionals
3:42
professionals
3:42
professionals that was founded in december 1999 by
3:44
that was founded in december 1999 by
3:44
that was founded in december 1999 by mahesh
3:45
mahesh
3:46
mahesh we are one of the largest members
3:47
we are one of the largest members
3:47
we are one of the largest members contribution based community for
3:49
contribution based community for
3:49
contribution based community for developers
3:50
developers
3:50
developers and we have over 50 plus local user
3:53
and we have over 50 plus local user
3:53
and we have over 50 plus local user chapters
3:54
chapters
3:54
chapters if you go to c sharp corner platform we
3:57
if you go to c sharp corner platform we
3:57
if you go to c sharp corner platform we not only have
3:58
not only have
3:58
not only have content related to c sharp programming
4:00
content related to c sharp programming
4:00
content related to c sharp programming language but
4:01
language but
4:01
language but over 160 different technologies and
4:04
over 160 different technologies and
4:04
over 160 different technologies and uh for for some stats we rank around
4:07
uh for for some stats we rank around
4:07
uh for for some stats we rank around 2500 in the world
4:09
2500 in the world
4:09
2500 in the world in the year 2019 we served over 24
4:12
in the year 2019 we served over 24
4:12
in the year 2019 we served over 24 million visitors
4:13
million visitors
4:14
million visitors and we our top five countries are india
4:17
and we our top five countries are india
4:17
and we our top five countries are india usa uk and germany i suggest go to c
4:20
usa uk and germany i suggest go to c
4:20
usa uk and germany i suggest go to c sharp corner platform you can get
4:22
sharp corner platform you can get
4:22
sharp corner platform you can get articles videos
4:23
articles videos
4:23
articles videos good snippets free ebook and a lot more
4:27
good snippets free ebook and a lot more
4:27
good snippets free ebook and a lot more all this for community and free of cost
4:29
all this for community and free of cost
4:29
all this for community and free of cost and now let me call upon
4:31
and now let me call upon
4:31
and now let me call upon uh nishu and santosh for the welcome
4:34
uh nishu and santosh for the welcome
4:34
uh nishu and santosh for the welcome keynote for this angular virtual
4:37
keynote for this angular virtual
4:37
keynote for this angular virtual [Music]
4:40
[Music]
4:40
[Music] conference
4:48
[Music]
5:18
[Music]
5:22
so
5:24
so
5:24
so [Music]
5:36
so
5:40
[Music]
5:50
uh
5:53
uh
5:53
uh [Music]
5:58
[Music]
5:58
[Music] hi nishi hi santosh welcome to the
6:00
hi nishi hi santosh welcome to the
6:00
hi nishi hi santosh welcome to the conference
6:01
conference
6:01
conference hey simon uh thanks for uh sorry stefan
6:03
hey simon uh thanks for uh sorry stefan
6:03
hey simon uh thanks for uh sorry stefan thanks for having us
6:06
thanks for having us
6:06
thanks for having us yeah yeah i think you can call me simon
6:09
yeah yeah i think you can call me simon
6:09
yeah yeah i think you can call me simon thanks for having us okay that's great i
6:12
thanks for having us okay that's great i
6:12
thanks for having us okay that's great i really like to thank you both for
6:13
really like to thank you both for
6:13
really like to thank you both for joining us today for the welcome note
6:15
joining us today for the welcome note
6:15
joining us today for the welcome note and also for the session that you both
6:17
and also for the session that you both
6:17
and also for the session that you both have
6:18
have
6:18
have i think your birth session is in the
6:20
i think your birth session is in the
6:20
i think your birth session is in the first half
6:21
first half
6:21
first half right so i think it's going to be really
6:24
right so i think it's going to be really
6:24
right so i think it's going to be really exciting confidence
6:25
exciting confidence
6:25
exciting confidence why don't you go ahead and talk a little
6:27
why don't you go ahead and talk a little
6:27
why don't you go ahead and talk a little about what we are going to cover today
6:28
about what we are going to cover today
6:28
about what we are going to cover today starting from a little bit about the
6:30
starting from a little bit about the
6:30
starting from a little bit about the introduction
6:31
introduction
6:31
introduction of the issue for you first
6:35
of the issue for you first
6:35
of the issue for you first um yeah sure so first of all really
6:37
um yeah sure so first of all really
6:37
um yeah sure so first of all really thank you to all of you for joining the
6:40
thank you to all of you for joining the
6:40
thank you to all of you for joining the uh conference today i'm sure you love
6:42
uh conference today i'm sure you love
6:42
uh conference today i'm sure you love angular because
6:43
angular because
6:43
angular because um you are here right and i'm sure
6:45
um you are here right and i'm sure
6:45
um you are here right and i'm sure you're as
6:46
you're as
6:46
you're as excited as me to be learning new things
6:48
excited as me to be learning new things
6:48
excited as me to be learning new things today be it zones be it our experience
6:51
today be it zones be it our experience
6:51
today be it zones be it our experience be it reactive forms be creating
6:54
be it reactive forms be creating
6:54
be it reactive forms be creating libraries
6:55
libraries
6:55
libraries optimizing your angular applications
6:57
optimizing your angular applications
6:57
optimizing your angular applications right so
6:58
right so
6:58
right so with angular 10 out there i'm sure you
7:01
with angular 10 out there i'm sure you
7:01
with angular 10 out there i'm sure you have you might
7:01
have you might
7:02
have you might have you know a lot of questions then
7:03
have you know a lot of questions then
7:03
have you know a lot of questions then you might want to ask a lot of questions
7:05
you might want to ask a lot of questions
7:05
you might want to ask a lot of questions and trust me this is the place this is
7:07
and trust me this is the place this is
7:07
and trust me this is the place this is the conference that we are doing and
7:09
the conference that we are doing and
7:09
the conference that we are doing and all of us be the gdes be the google
7:12
all of us be the gdes be the google
7:12
all of us be the gdes be the google developer experts or be it uh somebody
7:14
developer experts or be it uh somebody
7:14
developer experts or be it uh somebody from the google team who's working on
7:16
from the google team who's working on
7:16
from the google team who's working on angular
7:17
angular
7:17
angular all of us are here this is the place
7:19
all of us are here this is the place
7:19
all of us are here this is the place have any questions
7:20
have any questions
7:20
have any questions do ask strike them out and you know it's
7:23
do ask strike them out and you know it's
7:23
do ask strike them out and you know it's the best place
7:24
the best place
7:24
the best place so yeah santosh you can take it from
7:27
so yeah santosh you can take it from
7:27
so yeah santosh you can take it from here
7:27
here
7:27
here yes uh thank you so i may i mean yes uh
7:30
yes uh thank you so i may i mean yes uh
7:30
yes uh thank you so i may i mean yes uh i agree with nishu but before let me
7:31
i agree with nishu but before let me
7:31
i agree with nishu but before let me just introduce myself my name is santosh
7:33
just introduce myself my name is santosh
7:33
just introduce myself my name is santosh yadav
7:33
yadav
7:33
yadav and i'm one of the google developer
7:35
and i'm one of the google developer
7:35
and i'm one of the google developer expert from india for angular from india
7:37
expert from india for angular from india
7:37
expert from india for angular from india and uh yes i'm really excited to
7:40
and uh yes i'm really excited to
7:40
and uh yes i'm really excited to actually uh because we just got
7:41
actually uh because we just got
7:41
actually uh because we just got angular 10 released and people do have a
7:43
angular 10 released and people do have a
7:43
angular 10 released and people do have a lot of questions uh in the community and
7:46
lot of questions uh in the community and
7:46
lot of questions uh in the community and then this is the platform where you can
7:47
then this is the platform where you can
7:47
then this is the platform where you can actually ask those questions we have
7:49
actually ask those questions we have
7:49
actually ask those questions we have minko
7:49
minko
7:49
minko from the angular team who will be
7:51
from the angular team who will be
7:51
from the angular team who will be talking about the state of angular
7:53
talking about the state of angular
7:53
talking about the state of angular so what's gonna come or what's happening
7:55
so what's gonna come or what's happening
7:55
so what's gonna come or what's happening in within the angular team if you have
7:56
in within the angular team if you have
7:56
in within the angular team if you have any questions feel free to ask
7:58
any questions feel free to ask
7:58
any questions feel free to ask a lot of developers uh struggle with rx
8:01
a lot of developers uh struggle with rx
8:01
a lot of developers uh struggle with rx here so we have two core members from
8:03
here so we have two core members from
8:03
here so we have two core members from rxjs talking about
8:04
rxjs talking about
8:04
rxjs talking about uh different topics but of course you
8:06
uh different topics but of course you
8:06
uh different topics but of course you can connect with them anytime and then
8:08
can connect with them anytime and then
8:08
can connect with them anytime and then you can ask questions related to rxjs
8:10
you can ask questions related to rxjs
8:10
you can ask questions related to rxjs because
8:11
because
8:11
because this is the best way actually to create
8:14
this is the best way actually to create
8:14
this is the best way actually to create to
8:15
to
8:15
to know the community members or the core
8:16
know the community members or the core
8:16
know the community members or the core team who are available
8:18
team who are available
8:18
team who are available and how to connect with them of course
8:20
and how to connect with them of course
8:20
and how to connect with them of course at the end of the session they will be
8:21
at the end of the session they will be
8:21
at the end of the session they will be sharing their details
8:22
sharing their details
8:22
sharing their details you can always reach out to them i have
8:24
you can always reach out to them i have
8:24
you can always reach out to them i have seen for example if i
8:26
seen for example if i
8:26
seen for example if i have any question related to rxjs jan
8:28
have any question related to rxjs jan
8:28
have any question related to rxjs jan nicholas watman and
8:29
nicholas watman and
8:30
nicholas watman and michael haldaki they are all always
8:32
michael haldaki they are all always
8:32
michael haldaki they are all always reachable similarly all other members
8:34
reachable similarly all other members
8:34
reachable similarly all other members like
8:34
like
8:34
like we have nishu we have siddha talking
8:37
we have nishu we have siddha talking
8:37
we have nishu we have siddha talking about
8:37
about
8:38
about iv so a lot of great community members
8:40
iv so a lot of great community members
8:40
iv so a lot of great community members talking about different topics and this
8:42
talking about different topics and this
8:42
talking about different topics and this is the this is the platform to actually
8:43
is the this is the platform to actually
8:43
is the this is the platform to actually connect with them
8:44
connect with them
8:44
connect with them in case you you have any questions in
8:46
in case you you have any questions in
8:46
in case you you have any questions in future also it's not like
8:48
future also it's not like
8:48
future also it's not like once conference is over you won't be
8:49
once conference is over you won't be
8:49
once conference is over you won't be able to ask the questions in future also
8:51
able to ask the questions in future also
8:51
able to ask the questions in future also you will be
8:52
you will be
8:52
you will be you can keep in touch and you can ask
8:54
you can keep in touch and you can ask
8:54
you can keep in touch and you can ask questions so
8:55
questions so
8:55
questions so i'm really excited about it stephen
8:59
i'm really excited about it stephen
9:00
i'm really excited about it stephen yeah yeah since this is just the start
9:02
yeah yeah since this is just the start
9:02
yeah yeah since this is just the start of the conference right
9:03
of the conference right
9:03
of the conference right uh i'm really curious to ask all of you
9:05
uh i'm really curious to ask all of you
9:05
uh i'm really curious to ask all of you who are attending the session today
9:07
who are attending the session today
9:07
who are attending the session today to put in um the purpose of you
9:09
to put in um the purpose of you
9:10
to put in um the purpose of you attending the conference i mean
9:11
attending the conference i mean
9:11
attending the conference i mean why do you attend conferences and what
9:13
why do you attend conferences and what
9:13
why do you attend conferences and what is the um
9:14
is the um
9:14
is the um you know what motivates you to attend
9:16
you know what motivates you to attend
9:16
you know what motivates you to attend even the virtual conferences though they
9:18
even the virtual conferences though they
9:18
even the virtual conferences though they are not
9:18
are not
9:18
are not in-person events you're not actually
9:21
in-person events you're not actually
9:21
in-person events you're not actually meeting the person
9:22
meeting the person
9:22
meeting the person but then you're still motivated enough
9:23
but then you're still motivated enough
9:23
but then you're still motivated enough to join a conference so we would really
9:25
to join a conference so we would really
9:25
to join a conference so we would really like like to know in the chat section
9:27
like like to know in the chat section
9:27
like like to know in the chat section but why you know what motivates you
9:30
but why you know what motivates you
9:30
but why you know what motivates you yeah that's really interesting right so
9:32
yeah that's really interesting right so
9:32
yeah that's really interesting right so we have moved from the offline
9:33
we have moved from the offline
9:34
we have moved from the offline conferences to the online one
9:36
conferences to the online one
9:36
conferences to the online one and and this gives an uh a platform to
9:38
and and this gives an uh a platform to
9:38
and and this gives an uh a platform to reach a lot more a new audience
9:41
reach a lot more a new audience
9:41
reach a lot more a new audience and reaching a better uh the ecosystem
9:43
and reaching a better uh the ecosystem
9:43
and reaching a better uh the ecosystem that we have so
9:44
that we have so
9:44
that we have so that that's really interesting that if
9:46
that that's really interesting that if
9:46
that that's really interesting that if you are joining us today let us know
9:47
you are joining us today let us know
9:47
you are joining us today let us know what makes you join and let us also know
9:49
what makes you join and let us also know
9:49
what makes you join and let us also know we are joining from
9:50
we are joining from
9:50
we are joining from i see people joining from usa brazil so
9:53
i see people joining from usa brazil so
9:53
i see people joining from usa brazil so quite a good
9:54
quite a good
9:54
quite a good fact about this virtual conferences and
9:57
fact about this virtual conferences and
9:57
fact about this virtual conferences and talking about the conference that we
9:58
talking about the conference that we
9:58
talking about the conference that we have today so we have divided this
10:00
have today so we have divided this
10:00
have today so we have divided this conference into
10:01
conference into
10:01
conference into two halves uh the one that you're
10:03
two halves uh the one that you're
10:03
two halves uh the one that you're watching right now is the first half
10:06
watching right now is the first half
10:06
watching right now is the first half that will be
10:06
that will be
10:06
that will be taken by pankaj siddharth santosh minko
10:10
taken by pankaj siddharth santosh minko
10:10
taken by pankaj siddharth santosh minko and nishu
10:11
and nishu
10:11
and nishu and after that we are going to have 15
10:12
and after that we are going to have 15
10:12
and after that we are going to have 15 minutes break and
10:14
minutes break and
10:14
minutes break and you guys can go and grab a coffee or a
10:17
you guys can go and grab a coffee or a
10:17
you guys can go and grab a coffee or a tea
10:17
tea
10:17
tea and then we're going to come back with
10:19
and then we're going to come back with
10:20
and then we're going to come back with the second half
10:21
the second half
10:21
the second half with natalia swishy devices
10:24
with natalia swishy devices
10:24
with natalia swishy devices michael and alex my goodness it's going
10:26
michael and alex my goodness it's going
10:26
michael and alex my goodness it's going to be a really really long day
10:27
to be a really really long day
10:28
to be a really really long day and i'm really excited for this so
10:31
and i'm really excited for this so
10:31
and i'm really excited for this so uh let let me uh and if i'm not wrong
10:34
uh let let me uh and if i'm not wrong
10:34
uh let let me uh and if i'm not wrong nishwa and santosh we have
10:35
nishwa and santosh we have
10:35
nishwa and santosh we have almost like seven gde two guys from
10:38
almost like seven gde two guys from
10:38
almost like seven gde two guys from google
10:39
google
10:39
google white one from rsjx i don't know what
10:41
white one from rsjx i don't know what
10:41
white one from rsjx i don't know what does that mean but yeah
10:43
does that mean but yeah
10:43
does that mean but yeah and so uh some c chapman mps so how does
10:46
and so uh some c chapman mps so how does
10:46
and so uh some c chapman mps so how does it feel like you're sitting back at your
10:47
it feel like you're sitting back at your
10:47
it feel like you're sitting back at your home and
10:48
home and
10:48
home and connecting uh to people from your
10:50
connecting uh to people from your
10:50
connecting uh to people from your community across the globe
10:53
community across the globe
10:53
community across the globe yeah uh yeah uh so uh of course this is
10:55
yeah uh yeah uh so uh of course this is
10:55
yeah uh yeah uh so uh of course this is that's what i said right
10:56
that's what i said right
10:56
that's what i said right it is a great opportunity to connect
10:58
it is a great opportunity to connect
10:58
it is a great opportunity to connect with the community members out there
11:00
with the community members out there
11:00
with the community members out there yeah as i said jan is from rxjs core
11:02
yeah as i said jan is from rxjs core
11:02
yeah as i said jan is from rxjs core team where a lot of people struggle with
11:04
team where a lot of people struggle with
11:04
team where a lot of people struggle with then we have a lot of gds talking about
11:06
then we have a lot of gds talking about
11:06
then we have a lot of gds talking about different topics
11:07
different topics
11:07
different topics and in case you have any questions you
11:08
and in case you have any questions you
11:08
and in case you have any questions you know how to reach them in future right
11:10
know how to reach them in future right
11:10
know how to reach them in future right an issue or to you yeah it's like you
11:13
an issue or to you yeah it's like you
11:14
an issue or to you yeah it's like you know it's like the
11:15
know it's like the
11:15
know it's like the place for getting your questions
11:16
place for getting your questions
11:16
place for getting your questions answered for enhancing and upskilling
11:19
answered for enhancing and upskilling
11:19
answered for enhancing and upskilling yourself enhancing your knowledge
11:20
yourself enhancing your knowledge
11:20
yourself enhancing your knowledge and then i mean there should be no
11:22
and then i mean there should be no
11:22
and then i mean there should be no questions that you're left with just you
11:24
questions that you're left with just you
11:24
questions that you're left with just you know put in all the questions that you
11:26
know put in all the questions that you
11:26
know put in all the questions that you have
11:26
have
11:26
have it should be a target that okay i have
11:28
it should be a target that okay i have
11:28
it should be a target that okay i have these many questions that i'm confused
11:29
these many questions that i'm confused
11:29
these many questions that i'm confused about or i'm doubtful about
11:31
about or i'm doubtful about
11:31
about or i'm doubtful about and my agenda is to get all those
11:33
and my agenda is to get all those
11:33
and my agenda is to get all those answers i'm not leaving the conference
11:35
answers i'm not leaving the conference
11:35
answers i'm not leaving the conference without getting all those answers so
11:37
without getting all those answers so
11:37
without getting all those answers so that should be your agenda
11:38
that should be your agenda
11:38
that should be your agenda and it's like the place and you you know
11:41
and it's like the place and you you know
11:41
and it's like the place and you you know make the best out of it
11:43
make the best out of it
11:43
make the best out of it yeah and i think we have we have started
11:45
yeah and i think we have we have started
11:45
yeah and i think we have we have started getting some of the answers from the
11:46
getting some of the answers from the
11:46
getting some of the answers from the viewers
11:47
viewers
11:47
viewers uh uh rather christian says i want to
11:50
uh uh rather christian says i want to
11:50
uh uh rather christian says i want to attend the virtual conference to stay
11:52
attend the virtual conference to stay
11:52
attend the virtual conference to stay updated
11:53
updated
11:53
updated and connected with authors and to
11:55
and connected with authors and to
11:55
and connected with authors and to understand best practice for our next
11:57
understand best practice for our next
11:57
understand best practice for our next project
11:58
project
11:58
project and i think this is this is core to many
12:00
and i think this is this is core to many
12:00
and i think this is this is core to many of the viewers right we all come from
12:02
of the viewers right we all come from
12:02
of the viewers right we all come from the development background right
12:03
the development background right
12:03
the development background right we all have those documentation
12:05
we all have those documentation
12:05
we all have those documentation available for all libraries but
12:07
available for all libraries but
12:07
available for all libraries but one of the best practices that you
12:09
one of the best practices that you
12:09
one of the best practices that you should follow when you work on the
12:11
should follow when you work on the
12:11
should follow when you work on the project
12:11
project
12:11
project i think this is very cool to everyone
12:14
i think this is very cool to everyone
12:14
i think this is very cool to everyone right because uh i think uh
12:15
right because uh i think uh
12:15
right because uh i think uh coding is not done right syntax is
12:17
coding is not done right syntax is
12:17
coding is not done right syntax is available you have to just go ahead
12:20
available you have to just go ahead
12:20
available you have to just go ahead all right but but the best practices
12:21
all right but but the best practices
12:21
all right but but the best practices like this practices
12:23
like this practices
12:23
like this practices i think but that's the best part uh and
12:25
i think but that's the best part uh and
12:25
i think but that's the best part uh and i think that
12:26
i think that
12:26
i think that there's one more coming from san andreas
12:29
there's one more coming from san andreas
12:29
there's one more coming from san andreas he says it's your name in the speaker
12:32
he says it's your name in the speaker
12:32
he says it's your name in the speaker list issue motivated me to enter your
12:34
list issue motivated me to enter your
12:34
list issue motivated me to enter your contribution
12:35
contribution
12:35
contribution on angular training and sharing content
12:37
on angular training and sharing content
12:37
on angular training and sharing content and not at least my interest towards
12:39
and not at least my interest towards
12:39
and not at least my interest towards angularjs so what an amazing uh
12:42
angularjs so what an amazing uh
12:42
angularjs so what an amazing uh appreciation at the very beginning of
12:44
appreciation at the very beginning of
12:44
appreciation at the very beginning of the conference
12:46
the conference
12:46
the conference um that's great so we have many exciting
12:49
um that's great so we have many exciting
12:49
um that's great so we have many exciting topics and i'm sure you would um
12:51
topics and i'm sure you would um
12:51
topics and i'm sure you would um you know you would convert into an
12:53
you know you would convert into an
12:53
you know you would convert into an angular lover after attending this
12:54
angular lover after attending this
12:54
angular lover after attending this conference and
12:55
conference and
12:55
conference and then you know your next comment would be
12:57
then you know your next comment would be
12:57
then you know your next comment would be that it's total interest towards angular
12:59
that it's total interest towards angular
12:59
that it's total interest towards angular that made you attend one
13:00
that made you attend one
13:00
that made you attend one and you know you turn into an angular
13:02
and you know you turn into an angular
13:02
and you know you turn into an angular coder
13:03
coder
13:03
coder yeah yeah exactly and uh uh
13:07
yeah yeah exactly and uh uh
13:07
yeah yeah exactly and uh uh initial session is towards the first
13:10
initial session is towards the first
13:10
initial session is towards the first half
13:11
half
13:11
half like around 10 45 to 11 30 years timing
13:14
like around 10 45 to 11 30 years timing
13:14
like around 10 45 to 11 30 years timing so
13:14
so
13:14
so uh we really appreciate you so you stay
13:16
uh we really appreciate you so you stay
13:16
uh we really appreciate you so you stay till up till there
13:18
till up till there
13:18
till up till there right yeah four to five sessions after
13:20
right yeah four to five sessions after
13:20
right yeah four to five sessions after this so stick tight put on your seatbelt
13:22
this so stick tight put on your seatbelt
13:22
this so stick tight put on your seatbelt so i think
13:23
so i think
13:23
so i think we would love to see you even till that
13:25
we would love to see you even till that
13:25
we would love to see you even till that session um
13:27
session um
13:27
session um and i think uh you know guys saying
13:29
and i think uh you know guys saying
13:29
and i think uh you know guys saying anushka says the best thing about
13:30
anushka says the best thing about
13:30
anushka says the best thing about virtual conferences
13:32
virtual conferences
13:32
virtual conferences you can wherever you are despite on any
13:35
you can wherever you are despite on any
13:35
you can wherever you are despite on any place
13:35
place
13:35
place exactly i mean right now i'm sitting in
13:38
exactly i mean right now i'm sitting in
13:38
exactly i mean right now i'm sitting in my home
13:38
my home
13:38
my home issues at her comfort place asantoj has
13:41
issues at her comfort place asantoj has
13:41
issues at her comfort place asantoj has a
13:42
a
13:42
a very nice background with the green
13:43
very nice background with the green
13:43
very nice background with the green screen good guy
13:46
screen good guy
13:46
screen good guy i think he's the only one who's actually
13:48
i think he's the only one who's actually
13:48
i think he's the only one who's actually at the conference
13:50
at the conference
13:50
at the conference but santosh is at the conference yeah
13:52
but santosh is at the conference yeah
13:52
but santosh is at the conference yeah exactly
13:54
exactly
13:54
exactly i think he does a lot of live shows
13:58
rock star in the angle so let's go ahead
14:01
rock star in the angle so let's go ahead
14:01
rock star in the angle so let's go ahead and
14:01
and
14:02
and invite the first speaker of
14:05
invite the first speaker of
14:05
invite the first speaker of the conference he is a pankaj parker
14:08
the conference he is a pankaj parker
14:08
the conference he is a pankaj parker pankaj is a senior software engineer
14:10
pankaj is a senior software engineer
14:10
pankaj is a senior software engineer working at taskera
14:12
working at taskera
14:12
working at taskera he has a total of seven years of
14:14
he has a total of seven years of
14:14
he has a total of seven years of experience in various front-end
14:15
experience in various front-end
14:15
experience in various front-end technology
14:16
technology
14:16
technology has also been rewarded with microsoft
14:19
has also been rewarded with microsoft
14:19
has also been rewarded with microsoft mvp and google gde
14:21
mvp and google gde
14:21
mvp and google gde so let us welcome pankaj
14:24
so let us welcome pankaj
14:24
so let us welcome pankaj the first speaker of our conference
14:31
the first speaker of our conference
14:31
the first speaker of our conference [Music]
15:09
hello hey
15:14
where you are joining us from today from
15:17
where you are joining us from today from
15:17
where you are joining us from today from singapore
15:18
singapore
15:18
singapore from singapore right so what what's time
15:20
from singapore right so what what's time
15:20
from singapore right so what what's time over there it's like 6 30 or something
15:23
over there it's like 6 30 or something
15:23
over there it's like 6 30 or something 7 7 p.m yeah that that's that's not
15:27
7 7 p.m yeah that that's that's not
15:27
7 7 p.m yeah that that's that's not tough right so we have some guys running
15:28
tough right so we have some guys running
15:28
tough right so we have some guys running at the midnight so
15:30
at the midnight so
15:30
at the midnight so you're you're at this safe place
15:33
you're you're at this safe place
15:33
you're you're at this safe place so how's there how this life in
15:35
so how's there how this life in
15:35
so how's there how this life in singapore how is all this pandemic
15:38
singapore how is all this pandemic
15:38
singapore how is all this pandemic uh pandemic situation is now in
15:41
uh pandemic situation is now in
15:41
uh pandemic situation is now in controllable situation
15:43
controllable situation
15:43
controllable situation so in community uh you can say community
15:46
so in community uh you can say community
15:46
so in community uh you can say community spread only
15:47
spread only
15:47
spread only 10 members are there but you know
15:51
10 members are there but you know
15:51
10 members are there but you know there is one more there are two
15:52
there is one more there are two
15:52
there is one more there are two basically there are two sections so
15:54
basically there are two sections so
15:54
basically there are two sections so other section
15:55
other section
15:55
other section which is uh dormitories worker there the
15:58
which is uh dormitories worker there the
15:58
which is uh dormitories worker there the uh the number is great like 200 to 300
16:02
uh the number is great like 200 to 300
16:02
uh the number is great like 200 to 300 each day
16:03
each day
16:03
each day so yeah let's see yeah if you stay safe
16:07
so yeah let's see yeah if you stay safe
16:07
so yeah let's see yeah if you stay safe we have somehow managed santos initially
16:09
we have somehow managed santos initially
16:09
we have somehow managed santos initially we have somehow managed to stay safe at
16:11
we have somehow managed to stay safe at
16:11
we have somehow managed to stay safe at our place in india
16:12
our place in india
16:12
our place in india right the cases are increasing a lot
16:15
right the cases are increasing a lot
16:15
right the cases are increasing a lot here
16:15
here
16:16
here so for uh i think you can go ahead and
16:18
so for uh i think you can go ahead and
16:18
so for uh i think you can go ahead and share your screen
16:19
share your screen
16:19
share your screen right and i'll leave you for next 40 45
16:21
right and i'll leave you for next 40 45
16:22
right and i'll leave you for next 40 45 minutes with your session
16:23
minutes with your session
16:23
minutes with your session yeah sure thank you thank you santos
16:26
yeah sure thank you thank you santos
16:26
yeah sure thank you thank you santos i'll see you
16:27
i'll see you
16:27
i'll see you both once again in your sessions thank
16:29
both once again in your sessions thank
16:29
both once again in your sessions thank you thank you
16:30
you thank you
16:30
you thank you hi my name
16:35
so can you guys is my screen yeah i need
16:37
so can you guys is my screen yeah i need
16:37
so can you guys is my screen yeah i need to put it on the stream now
16:39
to put it on the stream now
16:39
to put it on the stream now i see visual studio one of your favorite
16:41
i see visual studio one of your favorite
16:41
i see visual studio one of your favorite editor right
16:42
editor right
16:42
editor right and pancakes from now it's all you thank
16:44
and pancakes from now it's all you thank
16:44
and pancakes from now it's all you thank you
16:45
you
16:45
you yes so hello everyone this is pankaj
16:49
yes so hello everyone this is pankaj
16:50
yes so hello everyone this is pankaj and i'm going to talk about the power of
16:53
and i'm going to talk about the power of
16:53
and i'm going to talk about the power of angular forms
16:55
angular forms
16:55
angular forms so everyone know that angular is like
16:57
so everyone know that angular is like
16:57
so everyone know that angular is like when angular have a
16:58
when angular have a
16:58
when angular have a few best things like the its own
17:01
few best things like the its own
17:01
few best things like the its own compiler then you can say its own
17:04
compiler then you can say its own
17:04
compiler then you can say its own translation then
17:06
translation then
17:06
translation then um you know forms and binding and other
17:09
um you know forms and binding and other
17:09
um you know forms and binding and other things so out of which
17:10
things so out of which
17:10
things so out of which one of the core feature is form so we
17:12
one of the core feature is form so we
17:12
one of the core feature is form so we are going to take a look at
17:15
are going to take a look at
17:15
are going to take a look at what are the features that are being you
17:17
what are the features that are being you
17:18
what are the features that are being you know used
17:18
know used
17:18
know used that are being used by most of the
17:20
that are being used by most of the
17:20
that are being used by most of the developer and how you can use
17:21
developer and how you can use
17:22
developer and how you can use the the those feature efficiently so
17:24
the the those feature efficiently so
17:24
the the those feature efficiently so little a little bit about myself as
17:26
little a little bit about myself as
17:26
little a little bit about myself as simon mentioned
17:27
simon mentioned
17:27
simon mentioned so i'm senior software engineer working
17:29
so i'm senior software engineer working
17:29
so i'm senior software engineer working at desk era and also i am mvpngb
17:32
at desk era and also i am mvpngb
17:32
at desk era and also i am mvpngb so if you want to follow me anywhere you
17:34
so if you want to follow me anywhere you
17:34
so if you want to follow me anywhere you can just
17:35
can just
17:35
can just type in pankajparkar handle and you can
17:37
type in pankajparkar handle and you can
17:37
type in pankajparkar handle and you can find me on all this platform github
17:39
find me on all this platform github
17:39
find me on all this platform github twitter facebook
17:42
twitter facebook
17:42
twitter facebook so let's begin with the session so in
17:46
so let's begin with the session so in
17:46
so let's begin with the session so in this session
17:46
this session
17:46
this session i am going to have a simple form like
17:48
i am going to have a simple form like
17:48
i am going to have a simple form like this and this form is very simple which
17:51
this and this form is very simple which
17:51
this and this form is very simple which have
17:53
have
17:53
have you know some fields like uh like which
17:56
you know some fields like uh like which
17:56
you know some fields like uh like which are
17:56
are
17:56
are related to user only and i i have called
17:59
related to user only and i i have called
17:59
related to user only and i i have called this as a profile from user profile form
18:01
this as a profile from user profile form
18:01
this as a profile from user profile form so in this you can see that there is a
18:03
so in this you can see that there is a
18:03
so in this you can see that there is a first name last name
18:04
first name last name
18:04
first name last name and it seems like email is going to be
18:07
and it seems like email is going to be
18:07
and it seems like email is going to be optional and
18:08
optional and
18:08
optional and not optional based on this switch button
18:11
not optional based on this switch button
18:12
not optional based on this switch button then there is a current address field
18:13
then there is a current address field
18:13
then there is a current address field and there is a languages
18:15
and there is a languages
18:15
and there is a languages what languages does this user knows he
18:17
what languages does this user knows he
18:17
what languages does this user knows he can add on
18:18
can add on
18:18
can add on whatever he required so there could be i
18:21
whatever he required so there could be i
18:21
whatever he required so there could be i don't know i added this three language
18:24
don't know i added this three language
18:24
don't know i added this three language so let's build this form in in angular
18:27
so let's build this form in in angular
18:27
so let's build this form in in angular form api right now this form is
18:29
form api right now this form is
18:29
form api right now this form is completely in html form only okay
18:32
completely in html form only okay
18:32
completely in html form only okay and what we are going to see in this
18:36
and what we are going to see in this
18:36
and what we are going to see in this complete session this basic one was very
18:39
complete session this basic one was very
18:39
complete session this basic one was very basic form without any
18:41
basic form without any
18:41
basic form without any form api feature we are going to write a
18:44
form api feature we are going to write a
18:44
form api feature we are going to write a template driven form
18:45
template driven form
18:45
template driven form then model driven form and maybe if time
18:48
then model driven form and maybe if time
18:48
then model driven form and maybe if time uh you know time allows us then we can
18:50
uh you know time allows us then we can
18:50
uh you know time allows us then we can we can take a look at how
18:52
we can take a look at how
18:52
we can take a look at how type forms can be created i am not going
18:54
type forms can be created i am not going
18:54
type forms can be created i am not going to go into the depth of it but i will
18:56
to go into the depth of it but i will
18:56
to go into the depth of it but i will just give you a clue how you can do that
18:58
just give you a clue how you can do that
18:58
just give you a clue how you can do that right now this feature is missing in
19:00
right now this feature is missing in
19:00
right now this feature is missing in angular form um
19:02
angular form um
19:02
angular form um so let's try we start with the
19:05
so let's try we start with the
19:05
so let's try we start with the template driven form so before going to
19:07
template driven form so before going to
19:07
template driven form so before going to that i will let you know like
19:09
that i will let you know like
19:09
that i will let you know like there are two kinds of forms exist in
19:11
there are two kinds of forms exist in
19:11
there are two kinds of forms exist in angular
19:12
angular
19:12
angular one is templatery one and other one is
19:14
one is templatery one and other one is
19:14
one is templatery one and other one is model ribbon
19:16
model ribbon
19:16
model ribbon so these two are like exactly opposite
19:18
so these two are like exactly opposite
19:18
so these two are like exactly opposite of each other in template driven
19:20
of each other in template driven
19:20
of each other in template driven the way of writing is mostly on template
19:23
the way of writing is mostly on template
19:23
the way of writing is mostly on template so you will be adding directives and
19:25
so you will be adding directives and
19:25
so you will be adding directives and adding the features on top of that
19:27
adding the features on top of that
19:27
adding the features on top of that particular form field
19:29
particular form field
19:29
particular form field but in case of model 31 you will see
19:31
but in case of model 31 you will see
19:31
but in case of model 31 you will see that you will be
19:32
that you will be
19:32
that you will be enhancing the behavior of your field
19:34
enhancing the behavior of your field
19:34
enhancing the behavior of your field from your ts file or you can say the
19:36
from your ts file or you can say the
19:36
from your ts file or you can say the model side
19:38
model side
19:38
model side so we will begin with the template
19:40
so we will begin with the template
19:40
so we will begin with the template driven form
19:41
driven form
19:41
driven form so i just copied the html code from
19:45
so i just copied the html code from
19:45
so i just copied the html code from you know whatever we have seen from the
19:46
you know whatever we have seen from the
19:46
you know whatever we have seen from the basic page to here
19:48
basic page to here
19:48
basic page to here and you will see that this whole page is
19:51
and you will see that this whole page is
19:51
and you will see that this whole page is html only so let's look at the html side
19:53
html only so let's look at the html side
19:53
html only so let's look at the html side of it
19:55
of it
19:55
of it i'm going to close this thing so this
19:58
i'm going to close this thing so this
19:58
i'm going to close this thing so this complete project i have created
20:00
complete project i have created
20:00
complete project i have created with uh with the cli
20:03
with uh with the cli
20:03
with uh with the cli and this is uh i i will going to provide
20:06
and this is uh i i will going to provide
20:06
and this is uh i i will going to provide this
20:07
this
20:07
this particular repo url at the end and i'm
20:10
particular repo url at the end and i'm
20:10
particular repo url at the end and i'm going i'm using angular 10 version okay
20:12
going i'm using angular 10 version okay
20:12
going i'm using angular 10 version okay so most of the thing will be
20:14
so most of the thing will be
20:14
so most of the thing will be um will be based on i can say typescript
20:17
um will be based on i can say typescript
20:17
um will be based on i can say typescript is more strict here
20:18
is more strict here
20:18
is more strict here so we will see so as i did
20:22
so we will see so as i did
20:22
so we will see so as i did open the template driven route
20:25
open the template driven route
20:25
open the template driven route let me see template run route so i have
20:27
let me see template run route so i have
20:27
let me see template run route so i have configured the template given controller
20:28
configured the template given controller
20:28
configured the template given controller here
20:30
here
20:30
here component here so this is the template
20:32
component here so this is the template
20:32
component here so this is the template driven component
20:34
driven component
20:34
driven component uh this file let me let me see
20:37
uh this file let me let me see
20:37
uh this file let me let me see one thing if i can remove everything
20:41
one thing if i can remove everything
20:41
one thing if i can remove everything okay wait
20:45
so it should
20:52
i was trying something and that's okay
20:55
i was trying something and that's okay
20:55
i was trying something and that's okay let's begin and let's do this things
20:58
let's begin and let's do this things
20:58
let's begin and let's do this things so i'm going to open the template driven
21:02
so i'm going to open the template driven
21:02
so i'm going to open the template driven html
21:03
html
21:03
html i will increase the font of course it is
21:05
i will increase the font of course it is
21:05
i will increase the font of course it is if it is not visible
21:07
if it is not visible
21:07
if it is not visible i believe this should be fine
21:13
okay i think this should be fine so
21:16
okay i think this should be fine so
21:16
okay i think this should be fine so someone is this visible properly
21:23
okay having proceed yeah
21:26
okay having proceed yeah
21:26
okay having proceed yeah so this is simple form and inform i have
21:29
so this is simple form and inform i have
21:29
so this is simple form and inform i have i'm i have used
21:30
i'm i have used
21:30
i'm i have used angular material so you will see mat
21:32
angular material so you will see mat
21:32
angular material so you will see mat form mat directives
21:34
form mat directives
21:34
form mat directives so there is one input which is first
21:35
so there is one input which is first
21:36
so there is one input which is first name last name then
21:37
name last name then
21:37
name last name then email current address fields like
21:39
email current address fields like
21:39
email current address fields like address one
21:40
address one
21:40
address one two state city postal code and there is
21:42
two state city postal code and there is
21:42
two state city postal code and there is one language array which is
21:44
one language array which is
21:44
one language array which is repeating over something and putting
21:47
repeating over something and putting
21:47
repeating over something and putting showing some languages that user profile
21:50
showing some languages that user profile
21:50
showing some languages that user profile has added
21:51
has added
21:51
has added okay so i am going to commit this out
21:54
okay so i am going to commit this out
21:54
okay so i am going to commit this out this language thing
21:55
this language thing
21:55
this language thing for now we will look at it sometime
21:58
for now we will look at it sometime
21:58
for now we will look at it sometime later
21:59
later
21:59
later in the session and let's try to
22:02
in the session and let's try to
22:02
in the session and let's try to convert this simple html into
22:05
convert this simple html into
22:05
convert this simple html into angular template driven form okay so how
22:08
angular template driven form okay so how
22:08
angular template driven form okay so how to do that
22:09
to do that
22:09
to do that so do you know there is one directive
22:11
so do you know there is one directive
22:11
so do you know there is one directive known as ng model
22:13
known as ng model
22:13
known as ng model and that ng model directive helps us to
22:15
and that ng model directive helps us to
22:15
and that ng model directive helps us to implement the two-way binding behavior
22:18
implement the two-way binding behavior
22:18
implement the two-way binding behavior okay so i think
22:21
okay so i think
22:21
okay so i think we can use ng model directive in here so
22:24
we can use ng model directive in here so
22:24
we can use ng model directive in here so that we can make each field of our form
22:28
that we can make each field of our form
22:28
that we can make each field of our form as in
22:29
as in
22:29
as in uh you know a two-way binding driven so
22:32
uh you know a two-way binding driven so
22:32
uh you know a two-way binding driven so i'm going to say add one
22:34
i'm going to say add one
22:34
i'm going to say add one one field just one field with ng model
22:36
one field just one field with ng model
22:36
one field just one field with ng model variable as in first name
22:39
variable as in first name
22:40
variable as in first name and i just saved it and let's see what
22:41
and i just saved it and let's see what
22:41
and i just saved it and let's see what happens so as soon as i saved it it will
22:44
happens so as soon as i saved it it will
22:44
happens so as soon as i saved it it will automatically refresh
22:45
automatically refresh
22:45
automatically refresh and it said that the first name does not
22:48
and it said that the first name does not
22:48
and it said that the first name does not exist
22:49
exist
22:49
exist which is first thing so we will what we
22:51
which is first thing so we will what we
22:51
which is first thing so we will what we will do is we we'll quickly add this
22:54
will do is we we'll quickly add this
22:54
will do is we we'll quickly add this first name variable on
22:55
first name variable on
22:55
first name variable on our inside our component because this is
22:58
our inside our component because this is
22:58
our inside our component because this is basically binding
22:59
basically binding
22:59
basically binding with respect to your component to a
23:01
with respect to your component to a
23:01
with respect to your component to a template so it tries to evaluate the
23:03
template so it tries to evaluate the
23:03
template so it tries to evaluate the first name variable with respect to
23:04
first name variable with respect to
23:04
first name variable with respect to component
23:05
component
23:05
component and it did not find it so that's right
23:07
and it did not find it so that's right
23:07
and it did not find it so that's right throw and throw an error
23:09
throw and throw an error
23:09
throw and throw an error and let's see what happens now let me
23:12
and let's see what happens now let me
23:12
and let's see what happens now let me replace this page
23:15
and everything is not fine so there is a
23:19
and everything is not fine so there is a
23:19
and everything is not fine so there is a problem with this
23:20
problem with this
23:20
problem with this so it said that you cannot define a
23:22
so it said that you cannot define a
23:22
so it said that you cannot define a control without a name
23:24
control without a name
23:24
control without a name at least it should have a name or just
23:26
at least it should have a name or just
23:26
at least it should have a name or just say standalone so i'm going to also add
23:27
say standalone so i'm going to also add
23:28
say standalone so i'm going to also add a name
23:29
a name
23:29
a name property on top of it
23:33
name and then this will be first name
23:37
name and then this will be first name
23:37
name and then this will be first name and let's see what happens
23:43
should it work yes it should correct
23:46
should it work yes it should correct
23:46
should it work yes it should correct yeah it should work
23:47
yeah it should work
23:47
yeah it should work so when you use any form api you should
23:49
so when you use any form api you should
23:49
so when you use any form api you should make sure that you are also using also
23:51
make sure that you are also using also
23:51
make sure that you are also using also importing
23:54
the two modules in your app module
23:56
the two modules in your app module
23:56
the two modules in your app module import so one is
23:57
import so one is
23:57
import so one is forms module and then the reactive forms
23:59
forms module and then the reactive forms
23:59
forms module and then the reactive forms model without that it won't work it will
24:02
model without that it won't work it will
24:02
model without that it won't work it will throw an error
24:03
throw an error
24:03
throw an error because you are using some directives
24:04
because you are using some directives
24:04
because you are using some directives that exist in the
24:06
that exist in the
24:06
that exist in the in the those particular modules okay
24:10
in the those particular modules okay
24:10
in the those particular modules okay so let's go ahead and do the same thing
24:13
so let's go ahead and do the same thing
24:13
so let's go ahead and do the same thing in
24:14
in
24:14
in for other fields like first name then
24:17
for other fields like first name then
24:17
for other fields like first name then last name
24:18
last name
24:18
last name then email then addresses
24:22
then email then addresses
24:22
then email then addresses i'm going to remove this for now
24:27
addresses then i'm going to rename the
24:30
addresses then i'm going to rename the
24:30
addresses then i'm going to rename the name attribute afterwards
24:32
name attribute afterwards
24:32
name attribute afterwards but right now i'm just pasting it so
24:34
but right now i'm just pasting it so
24:34
but right now i'm just pasting it so that i can do it faster
24:38
state and then this one
24:44
okay and let's go ahead and rename
24:48
okay and let's go ahead and rename
24:48
okay and let's go ahead and rename [Music]
24:52
then this one is email
24:57
what this is first name which is address
25:04
this is address 2 and same way
25:08
this is address 2 and same way
25:08
this is address 2 and same way we have other field which is state and
25:10
we have other field which is state and
25:10
we have other field which is state and then city
25:22
so and and you know like before we got
25:25
so and and you know like before we got
25:25
so and and you know like before we got an error like first name is defined here
25:27
an error like first name is defined here
25:27
an error like first name is defined here but
25:28
but
25:28
but it is not defined inside the typescript
25:30
it is not defined inside the typescript
25:30
it is not defined inside the typescript so we have to define this all variable
25:32
so we have to define this all variable
25:32
so we have to define this all variable inside our
25:34
inside our
25:34
inside our ah this thing in template file otherwise
25:36
ah this thing in template file otherwise
25:36
ah this thing in template file otherwise you will get an error see this there are
25:38
you will get an error see this there are
25:38
you will get an error see this there are errors
25:38
errors
25:38
errors because it is saying address 2 is not
25:40
because it is saying address 2 is not
25:40
because it is saying address 2 is not defining the component
25:42
defining the component
25:42
defining the component so quickly i will define these things
25:44
so quickly i will define these things
25:44
so quickly i will define these things here
25:47
email
25:50
postal code i think first
25:54
postal code i think first
25:54
postal code i think first address
25:57
address
25:57
address address one
26:00
state and anything else remaining let's
26:04
state and anything else remaining let's
26:04
state and anything else remaining let's save it and see
26:08
i'll just save them with everything and
26:11
i'll just save them with everything and
26:11
i'll just save them with everything and we'll refresh the page
26:15
okay something is remaining bring an
26:17
okay something is remaining bring an
26:17
okay something is remaining bring an address to an address
26:20
address to an address
26:20
address to an address address is here address one address to
26:23
address is here address one address to
26:23
address is here address one address to email is their address address to
26:27
email is their address address to
26:27
email is their address address to okay this is missing city
26:43
just going to refresh the page after
26:48
am i doing the changes in correct file
26:49
am i doing the changes in correct file
26:49
am i doing the changes in correct file okay component.ds
26:51
okay component.ds
26:51
okay component.ds driven template okay so what's the
26:55
driven template okay so what's the
26:55
driven template okay so what's the problem address 2
26:56
problem address 2
26:56
problem address 2 does not do you mean address
27:01
does not do you mean address
27:01
does not do you mean address address 2 okay address will have a
27:03
address 2 okay address will have a
27:03
address 2 okay address will have a problem let's see
27:05
problem let's see
27:05
problem let's see what is that what's the problem with
27:06
what is that what's the problem with
27:06
what is that what's the problem with that
27:08
that
27:08
that this is and then address and address
27:11
this is and then address and address
27:12
this is and then address and address should be existing here
27:14
should be existing here
27:14
should be existing here that's that's there so what's the
27:16
that's that's there so what's the
27:16
that's that's there so what's the problem
27:19
save it
27:26
there's a problem with postal code as
27:27
there's a problem with postal code as
27:28
there's a problem with postal code as well okay i understood
27:31
well okay i understood
27:31
well okay i understood this is conflicting this must be
27:46
and what else is remaining at this
27:49
and what else is remaining at this
27:49
and what else is remaining at this for now i will pankaj i think some of
27:52
for now i will pankaj i think some of
27:52
for now i will pankaj i think some of the guys have uh helped you in the
27:53
the guys have uh helped you in the
27:53
the guys have uh helped you in the commentating i think you missed to
27:55
commentating i think you missed to
27:55
commentating i think you missed to rename one of the input maybe address
27:57
rename one of the input maybe address
27:57
rename one of the input maybe address two
27:59
two
27:59
two okay address
28:05
that's fine i think right yeah that's
28:07
that's fine i think right yeah that's
28:07
that's fine i think right yeah that's fine i think so i will comment out
28:09
fine i think so i will comment out
28:09
fine i think so i will comment out this thing and then we'll see yeah
28:11
this thing and then we'll see yeah
28:11
this thing and then we'll see yeah exactly that will work
28:13
exactly that will work
28:13
exactly that will work and then i can figure out later okay
28:16
and then i can figure out later okay
28:16
and then i can figure out later okay we'll see first first block is working
28:18
we'll see first first block is working
28:18
we'll see first first block is working fine or not
28:21
yeah this is working fine so that means
28:23
yeah this is working fine so that means
28:23
yeah this is working fine so that means there is no problem i will quickly
28:24
there is no problem i will quickly
28:24
there is no problem i will quickly figure it out
28:25
figure it out
28:25
figure it out what's going wrong here
28:30
what's going wrong here
28:30
what's going wrong here and then address is fine address 2
28:33
and then address is fine address 2
28:34
and then address is fine address 2 is also fine matt input my input okay
28:37
is also fine matt input my input okay
28:37
is also fine matt input my input okay that is also fine might include this
28:41
that is also fine might include this
28:41
that is also fine might include this i'll just remove this i think so there
28:44
i'll just remove this i think so there
28:44
i'll just remove this i think so there is a problem with
28:47
is a problem with
28:47
is a problem with this guys
28:59
this guys
28:59
this guys i will refresh this quickly
29:03
there is a problem with address address
29:05
there is a problem with address address
29:05
there is a problem with address address to address too and it is saying that
29:08
to address too and it is saying that
29:08
to address too and it is saying that it does not exist in my template on
29:10
it does not exist in my template on
29:10
it does not exist in my template on component.html
29:25
address to okay now it should work
29:30
yeah now what i'm going to do is i'm
29:32
yeah now what i'm going to do is i'm
29:32
yeah now what i'm going to do is i'm going to
29:33
going to
29:33
going to see like this is now everything is in
29:36
see like this is now everything is in
29:36
see like this is now everything is in single form only
29:37
single form only
29:37
single form only what that means is we have a form
29:41
what that means is we have a form
29:41
what that means is we have a form and inside that there are multiple
29:43
and inside that there are multiple
29:43
and inside that there are multiple element exist so each
29:44
element exist so each
29:44
element exist so each form field is generally known as form
29:47
form field is generally known as form
29:47
form field is generally known as form control or
29:48
control or
29:48
control or form field so right now they are they
29:51
form field so right now they are they
29:51
form field so right now they are they are
29:51
are
29:51
are bounded using the ng model variable so
29:54
bounded using the ng model variable so
29:54
bounded using the ng model variable so let's
29:55
let's
29:55
let's quickly click if they are changing
29:56
quickly click if they are changing
29:56
quickly click if they are changing correctly or not
29:58
correctly or not
29:58
correctly or not okay and i will quickly add some value
30:01
okay and i will quickly add some value
30:01
okay and i will quickly add some value once it is
30:03
once it is
30:03
once it is you can see the see the value here
30:08
you can see the see the value here
30:08
you can see the see the value here so as you can see that so that means it
30:09
so as you can see that so that means it
30:09
so as you can see that so that means it is happening but now
30:11
is happening but now
30:11
is happening but now we we want to represent this form
30:13
we we want to represent this form
30:13
we we want to represent this form collectively correct it should be a
30:14
collectively correct it should be a
30:14
collectively correct it should be a single object which is
30:15
single object which is
30:16
single object which is going to represent the form so how to do
30:17
going to represent the form so how to do
30:17
going to represent the form so how to do that in angular so to do that
30:20
that in angular so to do that
30:20
that in angular so to do that you can use uh a particular
30:23
you can use uh a particular
30:23
you can use uh a particular directive known as ng form and this
30:27
directive known as ng form and this
30:27
directive known as ng form and this form directly is exportable milling you
30:29
form directly is exportable milling you
30:29
form directly is exportable milling you can get the value of this form
30:31
can get the value of this form
30:31
can get the value of this form uh this ng form directory which is going
30:33
uh this ng form directory which is going
30:33
uh this ng form directory which is going to be this uh the collective value of
30:36
to be this uh the collective value of
30:36
to be this uh the collective value of your form
30:37
your form
30:37
your form controls which is first name last name
30:39
controls which is first name last name
30:39
controls which is first name last name and other controls
30:40
and other controls
30:40
and other controls and put it inside some variable merit
30:42
and put it inside some variable merit
30:42
and put it inside some variable merit profile and
30:44
profile and
30:44
profile and that way you can get hold of it so now
30:47
that way you can get hold of it so now
30:47
that way you can get hold of it so now what you have is
30:48
what you have is
30:48
what you have is now if you do profile form dot
30:52
now if you do profile form dot
30:52
now if you do profile form dot value you will see that everything that
30:55
value you will see that everything that
30:55
value you will see that everything that is included inside the form
30:56
is included inside the form
30:56
is included inside the form it is going to be you are going to have
30:59
it is going to be you are going to have
30:59
it is going to be you are going to have it inside the profile form eventually
31:01
it inside the profile form eventually
31:01
it inside the profile form eventually and let's see that so now you will see
31:05
and let's see that so now you will see
31:05
and let's see that so now you will see that
31:07
that
31:07
that you have this value in two places
31:09
you have this value in two places
31:09
you have this value in two places basically one is inside your model
31:12
basically one is inside your model
31:12
basically one is inside your model which is which is first name last name
31:15
which is which is first name last name
31:15
which is which is first name last name email
31:15
email
31:15
email and the other place where you are
31:17
and the other place where you are
31:17
and the other place where you are maintaining the form
31:19
maintaining the form
31:19
maintaining the form uh form uh form uh total form which is
31:22
uh form uh form uh total form which is
31:22
uh form uh form uh total form which is ng form
31:23
ng form
31:23
ng form so you might ask me like okay why would
31:25
so you might ask me like okay why would
31:25
so you might ask me like okay why would they the
31:26
they the
31:26
they the name i mean same attribute name this
31:29
name i mean same attribute name this
31:29
name i mean same attribute name this first name and then we said ng model is
31:31
first name and then we said ng model is
31:31
first name and then we said ng model is there a shorter way of doing that or
31:33
there a shorter way of doing that or
31:33
there a shorter way of doing that or what if
31:34
what if
31:34
what if i change the name attribute to see what
31:36
i change the name attribute to see what
31:36
i change the name attribute to see what happens
31:37
happens
31:37
happens so you will see that you have saved that
31:39
so you will see that you have saved that
31:39
so you will see that you have saved that i just changed the name attribute
31:41
i just changed the name attribute
31:41
i just changed the name attribute and you what you are saying over here i
31:43
and you what you are saying over here i
31:43
and you what you are saying over here i have two-way binding variable which is
31:45
have two-way binding variable which is
31:45
have two-way binding variable which is first name which exists inside a model
31:47
first name which exists inside a model
31:47
first name which exists inside a model and inside a form the form will hold and
31:50
and inside a form the form will hold and
31:50
and inside a form the form will hold and value of
31:51
value of
31:51
value of this first name one which will be the
31:54
this first name one which will be the
31:54
this first name one which will be the value of first name so let's see what
31:56
value of first name so let's see what
31:56
value of first name so let's see what happens
31:57
happens
31:57
happens so as soon as you do that you will see
31:59
so as soon as you do that you will see
31:59
so as soon as you do that you will see that the name attribute reflects inside
32:01
that the name attribute reflects inside
32:01
that the name attribute reflects inside the
32:02
the
32:02
the ng form and the the ng model will stay
32:05
ng form and the the ng model will stay
32:05
ng form and the the ng model will stay as this
32:06
as this
32:06
as this okay so this is one of the good thing
32:08
okay so this is one of the good thing
32:08
okay so this is one of the good thing about
32:09
about
32:09
about angular form and what else we can do
32:12
angular form and what else we can do
32:12
angular form and what else we can do is so you have seen that like
32:15
is so you have seen that like
32:15
is so you have seen that like this is very simple way but generally
32:17
this is very simple way but generally
32:17
this is very simple way but generally when we retrieve a value from the server
32:19
when we retrieve a value from the server
32:19
when we retrieve a value from the server for
32:19
for
32:19
for particular entity like in this case we
32:21
particular entity like in this case we
32:21
particular entity like in this case we have a profile form correct
32:23
have a profile form correct
32:23
have a profile form correct so when we retrieve the information for
32:25
so when we retrieve the information for
32:25
so when we retrieve the information for this it will come as in single object
32:27
this it will come as in single object
32:27
this it will come as in single object so what you will find that when you are
32:30
so what you will find that when you are
32:30
so what you will find that when you are going to assign a value for
32:31
going to assign a value for
32:31
going to assign a value for each of this con each of this value you
32:34
each of this con each of this value you
32:34
each of this con each of this value you will
32:34
will
32:34
will you have to explicitly bind this value
32:36
you have to explicitly bind this value
32:36
you have to explicitly bind this value correct so rather
32:38
correct so rather
32:38
correct so rather you can have something like this you can
32:40
you can have something like this you can
32:40
you can have something like this you can have a model correct
32:41
have a model correct
32:41
have a model correct and then for that model you can assign a
32:43
and then for that model you can assign a
32:43
and then for that model you can assign a value
32:43
value
32:43
value [Music]
32:45
[Music]
32:45
[Music] like this so
32:48
like this so
32:48
like this so suppose after some time
32:55
i just presume that this is an ajax call
32:58
i just presume that this is an ajax call
32:58
i just presume that this is an ajax call i'm just going to use set timeout
33:00
i'm just going to use set timeout
33:00
i'm just going to use set timeout maybe five seconds and after five
33:03
maybe five seconds and after five
33:03
maybe five seconds and after five seconds you
33:04
seconds you
33:04
seconds you you are going to receive a value of
33:06
you are going to receive a value of
33:06
you are going to receive a value of model and that model value can be
33:10
model and that model value can be
33:10
model and that model value can be the same first name
33:17
similar way there could be
33:20
similar way there could be
33:20
similar way there could be last name then email
33:35
and then state
33:41
[Music]
33:44
and you have to you will get this
33:46
and you have to you will get this
33:46
and you have to you will get this retrieve this value from the server and
33:48
retrieve this value from the server and
33:48
retrieve this value from the server and you will bind it to the your model
33:50
you will bind it to the your model
33:50
you will bind it to the your model correct
33:50
correct
33:50
correct generally this case will happen so in
33:52
generally this case will happen so in
33:52
generally this case will happen so in this case what you can easily do is
33:54
this case what you can easily do is
33:54
this case what you can easily do is you can easily use this
33:57
you can easily use this
33:57
you can easily use this replace this uh particular
34:00
replace this uh particular
34:00
replace this uh particular this thing what i can say models correct
34:04
this thing what i can say models correct
34:04
this thing what i can say models correct ng model to model dot correct
34:07
ng model to model dot correct
34:07
ng model to model dot correct so let me do that quickly so this will
34:10
so let me do that quickly so this will
34:10
so let me do that quickly so this will make sure that
34:11
make sure that
34:12
make sure that whatever you are getting a value from
34:14
whatever you are getting a value from
34:14
whatever you are getting a value from the
34:15
the
34:15
the server it will reflect correct name one
34:18
server it will reflect correct name one
34:18
server it will reflect correct name one one
34:30
[Music]
34:32
[Music]
34:32
[Music] let's see what happens here
34:36
all right as our error postal code one
34:39
all right as our error postal code one
34:39
all right as our error postal code one two three
34:42
what's the problem now oh wait
34:45
what's the problem now oh wait
34:45
what's the problem now oh wait sorry this is now this is angular 10 so
34:48
sorry this is now this is angular 10 so
34:48
sorry this is now this is angular 10 so it is very strictly type
34:50
it is very strictly type
34:50
it is very strictly type so it should be i should specify any so
34:52
so it should be i should specify any so
34:52
so it should be i should specify any so that it will work
34:54
that it will work
34:54
that it will work because right now the by default the
34:57
because right now the by default the
34:57
because right now the by default the object
34:57
object
34:57
object type will be inferred as an object model
34:59
type will be inferred as an object model
34:59
type will be inferred as an object model type will be instead of the object so it
35:01
type will be instead of the object so it
35:01
type will be instead of the object so it was not
35:02
was not
35:02
was not allowed me to add on those property so
35:04
allowed me to add on those property so
35:04
allowed me to add on those property so now it will work
35:07
okay so you will see two things the form
35:10
okay so you will see two things the form
35:10
okay so you will see two things the form will hold
35:11
will hold
35:11
will hold its own form value and you are what i
35:14
its own form value and you are what i
35:14
its own form value and you are what i can say you are
35:14
can say you are
35:14
can say you are this thing you are
35:19
this thing you are
35:19
this thing you are what i can say your ng model will have
35:22
what i can say your ng model will have
35:22
what i can say your ng model will have its own value like this
35:28
if you if you see the model also you you
35:30
if you if you see the model also you you
35:30
if you if you see the model also you you will see that there is the same value
35:31
will see that there is the same value
35:31
will see that there is the same value only the difference is you are saying
35:33
only the difference is you are saying
35:33
only the difference is you are saying that when it goes to the form
35:34
that when it goes to the form
35:34
that when it goes to the form uh so suppose you want some mapping like
35:37
uh so suppose you want some mapping like
35:37
uh so suppose you want some mapping like first name will be like this but while
35:38
first name will be like this but while
35:38
first name will be like this but while sending it in the
35:40
sending it in the
35:40
sending it in the well while form value you supposed to
35:42
well while form value you supposed to
35:42
well while form value you supposed to send it should change so you can
35:43
send it should change so you can
35:44
send it should change so you can directly change the name mapping here
35:45
directly change the name mapping here
35:45
directly change the name mapping here okay
35:46
okay
35:46
okay so that way it can be good so
35:49
so that way it can be good so
35:49
so that way it can be good so let's see
35:53
both places you are seeing some changes
35:56
both places you are seeing some changes
35:56
both places you are seeing some changes and what are the objects
35:57
and what are the objects
35:57
and what are the objects so this way it is very nice so let's
36:00
so this way it is very nice so let's
36:00
so this way it is very nice so let's look at how you can add the validation
36:02
look at how you can add the validation
36:02
look at how you can add the validation over your
36:03
over your
36:04
over your uh url template driven form so as i say
36:07
uh url template driven form so as i say
36:07
uh url template driven form so as i say template driven form is mostly
36:09
template driven form is mostly
36:09
template driven form is mostly a place where you will be writing most
36:12
a place where you will be writing most
36:12
a place where you will be writing most of the code or declaratively when i say
36:13
of the code or declaratively when i say
36:13
of the code or declaratively when i say declarative way
36:15
declarative way
36:15
declarative way you would be using some directives or
36:16
you would be using some directives or
36:16
you would be using some directives or some html form only to
36:18
some html form only to
36:18
some html form only to to to say something to the form so
36:21
to to say something to the form so
36:21
to to say something to the form so suppose in case i want a required
36:23
suppose in case i want a required
36:23
suppose in case i want a required i want to make this first name field
36:25
i want to make this first name field
36:25
i want to make this first name field again required
36:27
again required
36:27
again required so i have to write a required attribute
36:29
so i have to write a required attribute
36:29
so i have to write a required attribute so that it will make sure that this
36:31
so that it will make sure that this
36:31
so that it will make sure that this this first name is the first name should
36:33
this first name is the first name should
36:34
this first name is the first name should be passed to make this form as invalid
36:36
be passed to make this form as invalid
36:36
be passed to make this form as invalid also i can mention some max length as
36:38
also i can mention some max length as
36:38
also i can mention some max length as well so this way you can easily add the
36:41
well so this way you can easily add the
36:41
well so this way you can easily add the validation
36:42
validation
36:42
validation on your fields okay so let's see
36:45
on your fields okay so let's see
36:45
on your fields okay so let's see what happens if i do that for for now
36:48
what happens if i do that for for now
36:48
what happens if i do that for for now i'm going to just
36:49
i'm going to just
36:49
i'm going to just comment out this model or i just want to
36:52
comment out this model or i just want to
36:52
comment out this model or i just want to remove it
36:53
remove it
36:53
remove it and we'll see what happens okay
36:56
and we'll see what happens okay
36:56
and we'll see what happens okay i change that and see if i try to add
37:00
i change that and see if i try to add
37:00
i change that and see if i try to add uh if i try to not pass this first name
37:03
uh if i try to not pass this first name
37:03
uh if i try to not pass this first name field
37:04
field
37:04
field after five seconds
37:10
or if i exceed the value 10 okay max
37:12
or if i exceed the value 10 okay max
37:12
or if i exceed the value 10 okay max length meaning you cannot
37:13
length meaning you cannot
37:13
length meaning you cannot go beyond that so that's a good thing
37:15
go beyond that so that's a good thing
37:15
go beyond that so that's a good thing but
37:17
but
37:17
but if you if you if you not pass any value
37:21
if you if you if you not pass any value
37:21
if you if you if you not pass any value it is saying that the form has a problem
37:22
it is saying that the form has a problem
37:22
it is saying that the form has a problem which is
37:24
which is
37:24
which is which is you know it is required so
37:26
which is you know it is required so
37:26
which is you know it is required so basically you know in this case
37:28
basically you know in this case
37:28
basically you know in this case we just don't want to highlight that
37:30
we just don't want to highlight that
37:30
we just don't want to highlight that field as in red
37:31
field as in red
37:31
field as in red we should suppose to provide some
37:33
we should suppose to provide some
37:33
we should suppose to provide some information to user like what what went
37:35
information to user like what what went
37:35
information to user like what what went wrong correct
37:36
wrong correct
37:36
wrong correct so in such cases what you can do is you
37:38
so in such cases what you can do is you
37:38
so in such cases what you can do is you can just
37:40
can just
37:40
can just show that error to the user based on
37:42
show that error to the user based on
37:42
show that error to the user based on some things
37:43
some things
37:43
some things so over here i am going to use mat error
37:47
so over here i am going to use mat error
37:47
so over here i am going to use mat error directive this helps us to show the
37:49
directive this helps us to show the
37:49
directive this helps us to show the error on the
37:51
error on the
37:51
error on the page and this error should be shown when
37:54
page and this error should be shown when
37:54
page and this error should be shown when when it should return to do that suppose
37:58
when it should return to do that suppose
37:58
when it should return to do that suppose you want to get an information of first
38:00
you want to get an information of first
38:00
you want to get an information of first name field in terms of form control i
38:02
name field in terms of form control i
38:02
name field in terms of form control i mean
38:02
mean
38:02
mean in terms of form so you can just write
38:07
in terms of form so you can just write
38:07
in terms of form so you can just write first name control
38:11
as in template variable like what we did
38:13
as in template variable like what we did
38:13
as in template variable like what we did over here
38:14
over here
38:14
over here so as as the ng form is exportable
38:17
so as as the ng form is exportable
38:17
so as as the ng form is exportable meaning you can get the value of ng form
38:19
meaning you can get the value of ng form
38:19
meaning you can get the value of ng form and stored in the
38:19
and stored in the
38:20
and stored in the template variable same way you can
38:22
template variable same way you can
38:22
template variable same way you can export the value of ng model
38:24
export the value of ng model
38:24
export the value of ng model so in here i am going to say take a
38:26
so in here i am going to say take a
38:26
so in here i am going to say take a value of ng model this is going to be a
38:28
value of ng model this is going to be a
38:28
value of ng model this is going to be a control value
38:29
control value
38:29
control value and let's see what what's what's there
38:32
and let's see what what's what's there
38:32
and let's see what what's what's there inside
38:33
inside
38:33
inside this first name control value
38:36
this first name control value
38:36
this first name control value so you will see that
38:40
let me quickly go over the ui and
38:43
let me quickly go over the ui and
38:43
let me quickly go over the ui and this is value okay so what ideally it
38:46
this is value okay so what ideally it
38:46
this is value okay so what ideally it should do
38:46
should do
38:46
should do it should it should show the value of
38:51
it should it should show the value of
38:51
it should it should show the value of uh where is it
38:55
uh where is it
38:55
uh where is it at error first name control dot value
38:58
at error first name control dot value
38:58
at error first name control dot value correct
39:00
correct
39:00
correct did i save it again
39:03
so whenever whenever error happens
39:11
it should ideally show this wait a
39:13
it should ideally show this wait a
39:13
it should ideally show this wait a minute i'm just going to do something
39:15
minute i'm just going to do something
39:15
minute i'm just going to do something with it so whenever you whenever you
39:18
with it so whenever you whenever you
39:18
with it so whenever you whenever you want to show this
39:19
want to show this
39:19
want to show this let's look at the error directly and
39:21
let's look at the error directly and
39:21
let's look at the error directly and then we can see what happens
39:23
then we can see what happens
39:23
then we can see what happens what is there inside the error obviously
39:25
what is there inside the error obviously
39:25
what is there inside the error obviously like a value there will be errors
39:27
like a value there will be errors
39:27
like a value there will be errors then there will be values pristine or
39:31
then there will be values pristine or
39:31
then there will be values pristine or touched those kind of attributes will be
39:33
touched those kind of attributes will be
39:33
touched those kind of attributes will be present on this
39:34
present on this
39:34
present on this first name form control okay
39:37
first name form control okay
39:37
first name form control okay let's see what happens
39:40
let's see what happens
39:40
let's see what happens on the ui why it is not appearing that
39:44
on the ui why it is not appearing that
39:44
on the ui why it is not appearing that the error thing which i just
39:47
the error thing which i just
39:47
the error thing which i just added
39:52
so whenever is error whenever error is
39:54
so whenever is error whenever error is
39:54
so whenever is error whenever error is going to be there it will show that okay
39:56
going to be there it will show that okay
39:56
going to be there it will show that okay as soon as so it says that i just try to
39:59
as soon as so it says that i just try to
39:59
as soon as so it says that i just try to print what value
40:00
print what value
40:00
print what value errors value so see similarly it have a
40:03
errors value so see similarly it have a
40:03
errors value so see similarly it have a different thing like
40:04
different thing like
40:04
different thing like value is the field is pristine or not
40:07
value is the field is pristine or not
40:07
value is the field is pristine or not question meaning it is touched or not
40:10
question meaning it is touched or not
40:10
question meaning it is touched or not also touched first time i mean it is
40:13
also touched first time i mean it is
40:13
also touched first time i mean it is clear or not i mean even if
40:14
clear or not i mean even if
40:14
clear or not i mean even if it is first time touched or not so let's
40:16
it is first time touched or not so let's
40:16
it is first time touched or not so let's see what it shows here
40:19
see what it shows here
40:19
see what it shows here in case of error so of course the
40:21
in case of error so of course the
40:21
in case of error so of course the pristine is going to be false because we
40:23
pristine is going to be false because we
40:23
pristine is going to be false because we have already touched it
40:30
so see true true that means uh
40:35
so see true true that means uh
40:35
so see true true that means uh the value is this one is true this one
40:37
the value is this one is true this one
40:37
the value is this one is true this one is true and this will not
40:38
is true and this will not
40:38
is true and this will not be show anything because it is undefined
40:40
be show anything because it is undefined
40:40
be show anything because it is undefined so it won't show any value okay so this
40:43
so it won't show any value okay so this
40:43
so it won't show any value okay so this way we can add
40:44
way we can add
40:44
way we can add your errors here so in this case
40:48
your errors here so in this case
40:48
your errors here so in this case what we want to do is we want to show an
40:49
what we want to do is we want to show an
40:50
what we want to do is we want to show an error when the field is required
40:52
error when the field is required
40:52
error when the field is required in that case we have to intimate user
40:55
in that case we have to intimate user
40:55
in that case we have to intimate user for that case what you can see
40:56
for that case what you can see
40:56
for that case what you can see is there is one method exist on
41:00
is there is one method exist on
41:00
is there is one method exist on your form control has error and inside
41:03
your form control has error and inside
41:03
your form control has error and inside has a resistance required
41:06
has a resistance required
41:06
has a resistance required inside that you can say first name
41:11
inside that you can say first name
41:11
inside that you can say first name is why
41:16
and that was a long way and the
41:19
and that was a long way and the
41:20
and that was a long way and the i mean that is the shorter way where you
41:21
i mean that is the shorter way where you
41:21
i mean that is the shorter way where you can call the hash error method on the
41:24
can call the hash error method on the
41:24
can call the hash error method on the control and directly pass what kind of
41:27
control and directly pass what kind of
41:27
control and directly pass what kind of error you are looking for
41:28
error you are looking for
41:28
error you are looking for and there is other way also so i will
41:30
and there is other way also so i will
41:30
and there is other way also so i will show that other way as well
41:32
show that other way as well
41:32
show that other way as well see first name is required error coming
41:34
see first name is required error coming
41:34
see first name is required error coming so the other way
41:35
so the other way
41:35
so the other way is you can directly say that
41:39
is you can directly say that
41:39
is you can directly say that if first name control dot errors
41:42
if first name control dot errors
41:42
if first name control dot errors dot required is true then
41:46
dot required is true then
41:46
dot required is true then just show this in this way you can add
41:48
just show this in this way you can add
41:48
just show this in this way you can add on multiple error things like
41:51
on multiple error things like
41:51
on multiple error things like we also have a max length and also there
41:53
we also have a max length and also there
41:53
we also have a max length and also there are there could be different
41:55
are there could be different
41:55
are there could be different things so this way you can easily add
41:57
things so this way you can easily add
41:57
things so this way you can easily add the errors and let's see what happens
41:59
the errors and let's see what happens
41:59
the errors and let's see what happens if i change this
42:07
so this this has you know eventually
42:09
so this this has you know eventually
42:09
so this this has you know eventually shown that
42:11
shown that
42:11
shown that the first name is required correct okay
42:14
the first name is required correct okay
42:14
the first name is required correct okay uh let me uh move on to the next part
42:17
uh let me uh move on to the next part
42:17
uh let me uh move on to the next part where
42:18
where
42:18
where where suppose uh what you want to do is
42:21
where suppose uh what you want to do is
42:21
where suppose uh what you want to do is you want to dynamically change the
42:23
you want to dynamically change the
42:23
you want to dynamically change the validation of the fields like suppose uh
42:26
validation of the fields like suppose uh
42:26
validation of the fields like suppose uh for now i'm just considering one option
42:28
for now i'm just considering one option
42:28
for now i'm just considering one option where
42:30
where
42:30
where the there are field exist on the form
42:32
the there are field exist on the form
42:32
the there are field exist on the form and you want to make all this field
42:34
and you want to make all this field
42:34
and you want to make all this field accountability sizing required right now
42:36
accountability sizing required right now
42:36
accountability sizing required right now only the first name is required i don't
42:39
only the first name is required i don't
42:39
only the first name is required i don't know why this
42:40
know why this
42:40
know why this thing is happening let me quickly clear
42:42
thing is happening let me quickly clear
42:42
thing is happening let me quickly clear this out
42:47
i'm just commenting the same time
42:57
required okay that was because of uh
43:01
required okay that was because of uh
43:01
required okay that was because of uh because of this if errors are not there
43:03
because of this if errors are not there
43:03
because of this if errors are not there so errors can be null correct sometimes
43:05
so errors can be null correct sometimes
43:05
so errors can be null correct sometimes so i use the navigation operator so that
43:08
so i use the navigation operator so that
43:08
so i use the navigation operator so that this scenario will be handled properly
43:21
so you will see that right now only the
43:24
so you will see that right now only the
43:24
so you will see that right now only the first name field is
43:27
first name field is
43:27
first name field is this thing required otherwise another
43:30
this thing required otherwise another
43:30
this thing required otherwise another case we won't see an error
43:31
case we won't see an error
43:31
case we won't see an error so what we want to do is we want to
43:33
so what we want to do is we want to
43:33
so what we want to do is we want to dynamically change the validation of
43:35
dynamically change the validation of
43:35
dynamically change the validation of your form
43:36
your form
43:36
your form in in this case so on click of this it
43:39
in in this case so on click of this it
43:39
in in this case so on click of this it should
43:39
should
43:39
should make mark all this field as in required
43:41
make mark all this field as in required
43:42
make mark all this field as in required so how can we do that
43:43
so how can we do that
43:43
so how can we do that so to do that in template driven form
43:46
so to do that in template driven form
43:46
so to do that in template driven form mostly
43:47
mostly
43:47
mostly you can pass an attribute to your
43:51
you can pass an attribute to your
43:51
you can pass an attribute to your form field like in this case if you pass
43:54
form field like in this case if you pass
43:54
form field like in this case if you pass directly a required attribute
43:56
directly a required attribute
43:56
directly a required attribute it will say that this is going to be
43:58
it will say that this is going to be
43:58
it will say that this is going to be true but you can also pass something
44:00
true but you can also pass something
44:00
true but you can also pass something like this
44:01
like this
44:01
like this you can pass a binding with some value
44:04
you can pass a binding with some value
44:04
you can pass a binding with some value if it is true then it will apply
44:05
if it is true then it will apply
44:05
if it is true then it will apply required validation otherwise
44:07
required validation otherwise
44:07
required validation otherwise it will it will based on false it will
44:10
it will it will based on false it will
44:10
it will it will based on false it will remove the required attribute okay
44:13
remove the required attribute okay
44:13
remove the required attribute okay so i just mentioned one required
44:15
so i just mentioned one required
44:15
so i just mentioned one required attribute in here and i'm going to paste
44:17
attribute in here and i'm going to paste
44:17
attribute in here and i'm going to paste it everywhere
44:19
it everywhere
44:19
it everywhere copy this and
44:22
copy this and
44:22
copy this and i will place it on each input field okay
44:33
so this way
44:40
and let's see what happens i i did not
44:43
and let's see what happens i i did not
44:43
and let's see what happens i i did not do anything so because
44:45
do anything so because
44:45
do anything so because it will go an error because of this
44:47
it will go an error because of this
44:47
it will go an error because of this thickness i will define
44:52
and for now all the required are false
44:56
and for now all the required are false
44:56
and for now all the required are false okay initially and as soon as you click
44:58
okay initially and as soon as you click
44:58
okay initially and as soon as you click on the button
44:59
on the button
44:59
on the button which is on top we will be adding one
45:02
which is on top we will be adding one
45:02
which is on top we will be adding one event
45:03
event
45:03
event on the click of it that event can be
45:06
on the click of it that event can be
45:06
on the click of it that event can be marked
45:07
marked
45:07
marked all required
45:11
all required
45:11
all required and i will write this method in here at
45:15
and i will write this method in here at
45:15
and i will write this method in here at the top
45:18
the top
45:18
the top okay and this method what that this
45:21
okay and this method what that this
45:21
okay and this method what that this method will do is this method will say
45:23
method will do is this method will say
45:23
method will do is this method will say required is equal to true that's it
45:26
required is equal to true that's it
45:26
required is equal to true that's it this is very simple operation by this
45:28
this is very simple operation by this
45:28
this is very simple operation by this way you can understand that
45:29
way you can understand that
45:29
way you can understand that you know you can also add other
45:31
you know you can also add other
45:31
you know you can also add other validation as min max
45:33
validation as min max
45:33
validation as min max and other things so let's see
45:39
so for now let it get refreshed
45:45
yeah so so let's the formula
45:49
yeah so so let's the formula
45:49
yeah so so let's the formula with the values okay now you can see
45:52
with the values okay now you can see
45:52
with the values okay now you can see that as soon as i do the mark
45:54
that as soon as i do the mark
45:54
that as soon as i do the mark field as a required uh
45:57
field as a required uh
45:57
field as a required uh yeah one thing is happening because by
45:59
yeah one thing is happening because by
45:59
yeah one thing is happening because by default it read that once the field is
46:01
default it read that once the field is
46:01
default it read that once the field is touched or form is submitted then show
46:03
touched or form is submitted then show
46:03
touched or form is submitted then show the validation
46:04
the validation
46:04
the validation so i am going to add a button at the
46:06
so i am going to add a button at the
46:06
so i am going to add a button at the bottom which is
46:09
bottom which is
46:09
bottom which is going to say form submit button
46:13
going to say form submit button
46:13
going to say form submit button by default button type is submit so no
46:15
by default button type is submit so no
46:15
by default button type is submit so no need to do anything
46:20
and let's see what happens
46:23
and let's see what happens
46:23
and let's see what happens and i will also reduce down this time to
46:27
and i will also reduce down this time to
46:27
and i will also reduce down this time to some milliseconds
46:30
okay with that i'm going to say mark all
46:34
okay with that i'm going to say mark all
46:34
okay with that i'm going to say mark all field as
46:34
field as
46:34
field as a as required
46:38
a as required
46:38
a as required so when i try to submit this one so for
46:41
so when i try to submit this one so for
46:41
so when i try to submit this one so for this button is appearing like this
46:42
this button is appearing like this
46:42
this button is appearing like this because i just see
46:44
because i just see
46:44
because i just see button it should be matte button
46:49
you have seen that like when i click on
46:51
you have seen that like when i click on
46:51
you have seen that like when i click on that it will show
46:52
that it will show
46:52
that it will show the validation everywhere and you can
46:54
the validation everywhere and you can
46:54
the validation everywhere and you can add a message using mat error and the
46:56
add a message using mat error and the
46:56
add a message using mat error and the nge
46:57
nge
46:57
nge thing uh to show what is basically
47:00
thing uh to show what is basically
47:00
thing uh to show what is basically required to be done by user like last
47:02
required to be done by user like last
47:02
required to be done by user like last name
47:03
name
47:03
name it is required and so on so we will move
47:05
it is required and so on so we will move
47:06
it is required and so on so we will move on to the next thing where you know you
47:07
on to the next thing where you know you
47:07
on to the next thing where you know you can just
47:08
can just
47:08
can just um you can you have the other section
47:11
um you can you have the other section
47:11
um you can you have the other section which was
47:11
which was
47:11
which was what was that languages so i'm going to
47:15
what was that languages so i'm going to
47:15
what was that languages so i'm going to just comment out
47:16
just comment out
47:16
just comment out this bottom part which earlier we have
47:20
this bottom part which earlier we have
47:20
this bottom part which earlier we have it but
47:21
it but
47:21
it but then i commented it so you will see that
47:23
then i commented it so you will see that
47:23
then i commented it so you will see that user can add multiple languages if he
47:25
user can add multiple languages if he
47:25
user can add multiple languages if he wants to
47:27
wants to
47:27
wants to add it
47:34
okay and one more thing before going
47:37
okay and one more thing before going
47:37
okay and one more thing before going towards that
47:38
towards that
47:38
towards that you know basically what we want is we
47:40
you know basically what we want is we
47:40
you know basically what we want is we want when user press submit
47:42
want when user press submit
47:42
want when user press submit on click of click of submit we want to
47:44
on click of click of submit we want to
47:44
on click of click of submit we want to pass on this
47:45
pass on this
47:45
pass on this complete object to the server correct so
47:48
complete object to the server correct so
47:48
complete object to the server correct so somehow i have to pass this
47:50
somehow i have to pass this
47:50
somehow i have to pass this from here to the to the method
47:53
from here to the to the method
47:53
from here to the to the method so how to do that to do that
47:58
you have to write one method which is
48:00
you have to write one method which is
48:00
you have to write one method which is going to be ng submit
48:02
going to be ng submit
48:02
going to be ng submit so internally angular you know hijack
48:04
so internally angular you know hijack
48:04
so internally angular you know hijack the submit action and
48:06
the submit action and
48:06
the submit action and fire the submit event on the form oh
48:08
fire the submit event on the form oh
48:08
fire the submit event on the form oh sorry not here on the contact
48:14
and you you can call a submit method
48:16
and you you can call a submit method
48:16
and you you can call a submit method okay and submit method what you can pass
48:18
okay and submit method what you can pass
48:18
okay and submit method what you can pass on is
48:19
on is
48:19
on is maybe complete form or if you just want
48:22
maybe complete form or if you just want
48:22
maybe complete form or if you just want to pass on the value then that will be
48:24
to pass on the value then that will be
48:24
to pass on the value then that will be great
48:24
great
48:24
great so generally keep a practice of passing
48:26
so generally keep a practice of passing
48:26
so generally keep a practice of passing form so that
48:28
form so that
48:28
form so that you can also do a lot of thing in there
48:30
you can also do a lot of thing in there
48:30
you can also do a lot of thing in there so i will show you
48:31
so i will show you
48:31
so i will show you just wrote a submit method in here and
48:34
just wrote a submit method in here and
48:34
just wrote a submit method in here and i'm going to write a submit method over
48:36
i'm going to write a submit method over
48:36
i'm going to write a submit method over here as well
48:38
here as well
48:38
here as well and we will also console the form and to
48:40
and we will also console the form and to
48:40
and we will also console the form and to get a little get a feel of it what
48:42
get a little get a feel of it what
48:42
get a little get a feel of it what exactly we have
48:43
exactly we have
48:44
exactly we have so i'm going to have profile in here
48:48
so i'm going to have profile in here
48:48
so i'm going to have profile in here which is passed from the method correct
48:51
which is passed from the method correct
48:51
which is passed from the method correct let's see what happens
48:57
so i just save the save the file it will
48:59
so i just save the save the file it will
48:59
so i just save the save the file it will refresh automatically
49:00
refresh automatically
49:00
refresh automatically and
49:04
we'll see when i try to submit
49:08
we'll see when i try to submit
49:08
we'll see when i try to submit the form you got something which is ng
49:10
the form you got something which is ng
49:10
the form you got something which is ng form object
49:11
form object
49:11
form object and you will you will eventually see
49:13
and you will you will eventually see
49:13
and you will you will eventually see that it has a different thing
49:15
that it has a different thing
49:16
that it has a different thing where one of the thing is value and
49:17
where one of the thing is value and
49:17
where one of the thing is value and inside the value you will see that
49:19
inside the value you will see that
49:19
inside the value you will see that the this values are exist and why i said
49:22
the this values are exist and why i said
49:22
the this values are exist and why i said that you should pass
49:23
that you should pass
49:23
that you should pass the object because eventually this form
49:26
the object because eventually this form
49:26
the object because eventually this form can be invalid correct if suppose the
49:28
can be invalid correct if suppose the
49:28
can be invalid correct if suppose the first name is not being passed
49:30
first name is not being passed
49:30
first name is not being passed or or you know something like this is
49:33
or or you know something like this is
49:33
or or you know something like this is there and i can pass on the object i
49:35
there and i can pass on the object i
49:35
there and i can pass on the object i just click on submit and i just
49:36
just click on submit and i just
49:36
just click on submit and i just got an updated object where you can see
49:39
got an updated object where you can see
49:39
got an updated object where you can see that since this is not
49:40
that since this is not
49:40
that since this is not valid form you can easily check invalid
49:44
valid form you can easily check invalid
49:44
valid form you can easily check invalid flag which is going to be true and the
49:45
flag which is going to be true and the
49:45
flag which is going to be true and the fla
49:45
fla
49:46
fla if the flag is invalid you don't have to
49:48
if the flag is invalid you don't have to
49:48
if the flag is invalid you don't have to make a call
49:49
make a call
49:49
make a call to the server and if it is valid
49:52
to the server and if it is valid
49:52
to the server and if it is valid you can check either of this flag
49:54
you can check either of this flag
49:54
you can check either of this flag invalid or valid and based on that you
49:55
invalid or valid and based on that you
49:55
invalid or valid and based on that you can
49:56
can
49:56
can you can decide whether to make an exact
49:57
you can decide whether to make an exact
49:57
you can decide whether to make an exact small or not like
49:59
small or not like
49:59
small or not like in here so
50:02
in here so
50:02
in here so similarly so the way i say
50:05
similarly so the way i say
50:05
similarly so the way i say if it means value then
50:10
make ajax post to server
50:15
make ajax post to server
50:15
make ajax post to server and otherwise if you want to show some
50:17
and otherwise if you want to show some
50:17
and otherwise if you want to show some error then do that
50:21
okay okay nice correct so one thing
50:24
okay okay nice correct so one thing
50:24
okay okay nice correct so one thing which you will observe is when you are
50:25
which you will observe is when you are
50:25
which you will observe is when you are writing
50:26
writing
50:26
writing um more template driven form most of the
50:28
um more template driven form most of the
50:28
um more template driven form most of the things have been done on the
50:30
things have been done on the
50:30
things have been done on the template so that's why the name is
50:32
template so that's why the name is
50:32
template so that's why the name is template driven form even though the
50:33
template driven form even though the
50:33
template driven form even though the if you check about the validation then
50:37
if you check about the validation then
50:37
if you check about the validation then also you will see that
50:38
also you will see that
50:38
also you will see that we are adding the validation by i
50:40
we are adding the validation by i
50:40
we are adding the validation by i attribute and suppose you have any
50:42
attribute and suppose you have any
50:42
attribute and suppose you have any complex validation
50:43
complex validation
50:43
complex validation kind of you know asynchronous validation
50:45
kind of you know asynchronous validation
50:45
kind of you know asynchronous validation like if you have a username
50:47
like if you have a username
50:47
like if you have a username somewhere here and on type of it you
50:50
somewhere here and on type of it you
50:50
somewhere here and on type of it you want to check that username already
50:51
want to check that username already
50:51
want to check that username already exist or not
50:52
exist or not
50:52
exist or not so this kind of validator can be also
50:54
so this kind of validator can be also
50:54
so this kind of validator can be also written but
50:56
written but
50:56
written but for that you have to write a explicit
50:58
for that you have to write a explicit
50:58
for that you have to write a explicit directive
50:59
directive
50:59
directive with validator class implemented in it
51:02
with validator class implemented in it
51:02
with validator class implemented in it and you have to extend the ng validator
51:04
and you have to extend the ng validator
51:04
and you have to extend the ng validator service with multi true and that way you
51:07
service with multi true and that way you
51:07
service with multi true and that way you can do that so i'm not going to cover
51:08
can do that so i'm not going to cover
51:08
can do that so i'm not going to cover that
51:08
that
51:08
that because we i have a lot to cover in here
51:12
because we i have a lot to cover in here
51:12
because we i have a lot to cover in here so what else you can do is we were
51:14
so what else you can do is we were
51:14
so what else you can do is we were coming back to the point where i was
51:16
coming back to the point where i was
51:16
coming back to the point where i was talking about the languages so what is
51:19
talking about the languages so what is
51:19
talking about the languages so what is the languages basically you can add a
51:21
the languages basically you can add a
51:21
the languages basically you can add a language is what you want
51:22
language is what you want
51:22
language is what you want right now it is hardcoded so i'm going
51:25
right now it is hardcoded so i'm going
51:25
right now it is hardcoded so i'm going to
51:26
to
51:26
to clear out this one too and we'll change
51:29
clear out this one too and we'll change
51:29
clear out this one too and we'll change it to model.
51:31
it to model.
51:31
it to model. languages okay
51:35
languages okay
51:35
languages okay and this way you can you know similarly
51:39
and this way you can you know similarly
51:39
and this way you can you know similarly by having a languages in the
51:41
by having a languages in the
51:41
by having a languages in the this thing in the model you can easily
51:43
this thing in the model you can easily
51:43
this thing in the model you can easily look over it
51:46
look over it
51:46
look over it languages
51:49
easily loop over this languages and then
51:51
easily loop over this languages and then
51:51
easily loop over this languages and then you can
51:52
you can
51:52
you can you know have a similar kind of controls
51:55
you know have a similar kind of controls
51:55
you know have a similar kind of controls in here and you can play around it
51:58
in here and you can play around it
51:58
in here and you can play around it and that will directly reflect inside
52:00
and that will directly reflect inside
52:00
and that will directly reflect inside the model of here model of this
52:03
the model of here model of this
52:03
the model of here model of this javascript object and same signal
52:07
javascript object and same signal
52:07
javascript object and same signal similarly sorry
52:18
similarly sorry
52:18
similarly sorry similarly inside your model as well as
52:21
similarly inside your model as well as
52:21
similarly inside your model as well as in similar way inside your form correct
52:23
in similar way inside your form correct
52:23
in similar way inside your form correct so let's jump jump on to the model
52:25
so let's jump jump on to the model
52:25
so let's jump jump on to the model driven part okay
52:27
driven part okay
52:28
driven part okay so i'm just going to
52:31
so i'm just going to
52:31
so i'm just going to have con going to convert use or you
52:33
have con going to convert use or you
52:33
have con going to convert use or you know convert the same form in the
52:35
know convert the same form in the
52:35
know convert the same form in the template-driven way or a model-driven
52:37
template-driven way or a model-driven
52:37
template-driven way or a model-driven way so i'm just going to jump on the
52:38
way so i'm just going to jump on the
52:38
way so i'm just going to jump on the main page
52:39
main page
52:39
main page and i'm going to click on model driven
52:41
and i'm going to click on model driven
52:41
and i'm going to click on model driven and this is same form
52:42
and this is same form
52:42
and this is same form i'm going to convert this form in model
52:44
i'm going to convert this form in model
52:44
i'm going to convert this form in model v1
52:45
v1
52:46
v1 okay i'm going to close this html so
52:48
okay i'm going to close this html so
52:48
okay i'm going to close this html so that was the template driven because i
52:49
that was the template driven because i
52:49
that was the template driven because i think i have 15 minutes only and i have
52:51
think i have 15 minutes only and i have
52:51
think i have 15 minutes only and i have to cover model driven also
52:53
to cover model driven also
52:53
to cover model driven also so i'm going to open the model 31 html
52:56
so i'm going to open the model 31 html
52:56
so i'm going to open the model 31 html and component
52:57
and component
52:57
and component this is similar i'm going to wipe out
53:00
this is similar i'm going to wipe out
53:00
this is similar i'm going to wipe out everything
53:04
okay uh just to mention
53:08
okay uh just to mention
53:08
okay uh just to mention in model 31 it is like different way you
53:11
in model 31 it is like different way you
53:11
in model 31 it is like different way you won't be
53:12
won't be
53:12
won't be mentioning much things on the ui side
53:14
mentioning much things on the ui side
53:14
mentioning much things on the ui side maybe one or two directive not much
53:16
maybe one or two directive not much
53:16
maybe one or two directive not much and most of the thing will be controlled
53:19
and most of the thing will be controlled
53:19
and most of the thing will be controlled by a model model is nothing but
53:21
by a model model is nothing but
53:21
by a model model is nothing but your component class that will be taking
53:23
your component class that will be taking
53:24
your component class that will be taking care of your validation or whatever
53:26
care of your validation or whatever
53:26
care of your validation or whatever dynamic means you want so in here if you
53:29
dynamic means you want so in here if you
53:29
dynamic means you want so in here if you look at the html
53:31
look at the html
53:32
look at the html okay you will see that you will see that
53:35
okay you will see that you will see that
53:35
okay you will see that you will see that this is similar now we have to
53:36
this is similar now we have to
53:36
this is similar now we have to convert this into a model driven form
53:40
convert this into a model driven form
53:40
convert this into a model driven form so there are three things exist inside
53:42
so there are three things exist inside
53:42
so there are three things exist inside the model driven form three classes one
53:44
the model driven form three classes one
53:44
the model driven form three classes one is form control
53:45
is form control
53:45
is form control then form group and form array okay
53:48
then form group and form array okay
53:48
then form group and form array okay so if you look at this form each
53:51
so if you look at this form each
53:51
so if you look at this form each as i said earlier each form is known as
53:54
as i said earlier each form is known as
53:54
as i said earlier each form is known as a form controller form field
53:56
a form controller form field
53:56
a form controller form field so whenever you want to create this
53:58
so whenever you want to create this
53:58
so whenever you want to create this field you will be going to using
54:00
field you will be going to using
54:00
field you will be going to using or use form control okay in some
54:03
or use form control okay in some
54:03
or use form control okay in some suppose like if you have a you know
54:06
suppose like if you have a you know
54:06
suppose like if you have a you know bunch of form fields or form control
54:08
bunch of form fields or form control
54:08
bunch of form fields or form control that are going to stay together so in
54:11
that are going to stay together so in
54:11
that are going to stay together so in this case
54:11
this case
54:11
this case we have this all the fields which are uh
54:14
we have this all the fields which are uh
54:14
we have this all the fields which are uh you know which are
54:15
you know which are
54:15
you know which are uh basically mentioning or representing
54:18
uh basically mentioning or representing
54:18
uh basically mentioning or representing a model of
54:19
a model of
54:19
a model of profile form so this whole thing can be
54:22
profile form so this whole thing can be
54:22
profile form so this whole thing can be considered as a
54:23
considered as a
54:23
considered as a form group and in case of languages you
54:26
form group and in case of languages you
54:26
form group and in case of languages you will see that as soon as i click on add
54:28
will see that as soon as i click on add
54:28
will see that as soon as i click on add one language is going to be added
54:30
one language is going to be added
54:30
one language is going to be added and this language will have two controls
54:33
and this language will have two controls
54:33
and this language will have two controls each
54:34
each
54:34
each so internally this language control is
54:36
so internally this language control is
54:36
so internally this language control is can be a form control
54:38
can be a form control
54:38
can be a form control then these two controls together will be
54:39
then these two controls together will be
54:40
then these two controls together will be form group
54:41
form group
54:41
form group and when we are click on add we are
54:43
and when we are click on add we are
54:43
and when we are click on add we are going to append one more form group at
54:45
going to append one more form group at
54:45
going to append one more form group at the bottom that means it is going to be
54:47
the bottom that means it is going to be
54:47
the bottom that means it is going to be form array
54:48
form array
54:48
form array so basically we have to create a form
54:50
so basically we have to create a form
54:50
so basically we have to create a form group which consists of all of this
54:52
group which consists of all of this
54:52
group which consists of all of this so let's do that so to do that what you
54:55
so let's do that so to do that what you
54:55
so let's do that so to do that what you have to do is you have to import a first
54:57
have to do is you have to import a first
54:57
have to do is you have to import a first thing
54:57
thing
54:57
thing which can help you to create create a
54:59
which can help you to create create a
54:59
which can help you to create create a form group form area from
55:01
form group form area from
55:01
form group form area from from group or format so this is going to
55:03
from group or format so this is going to
55:03
from group or format so this is going to be form builder okay
55:05
be form builder okay
55:05
be form builder okay and you are going to create a form group
55:08
and you are going to create a form group
55:08
and you are going to create a form group so that's why i defined one variable
55:09
so that's why i defined one variable
55:09
so that's why i defined one variable from
55:10
from
55:10
from profile form which is your form group so
55:13
profile form which is your form group so
55:13
profile form which is your form group so in here i am going to say profile form
55:15
in here i am going to say profile form
55:15
in here i am going to say profile form which is going to be a form group so
55:18
which is going to be a form group so
55:18
which is going to be a form group so there are multiple ways to do that so
55:19
there are multiple ways to do that so
55:20
there are multiple ways to do that so i'm going to use this way
55:22
i'm going to use this way
55:22
i'm going to use this way new form group so i'm going to create a
55:24
new form group so i'm going to create a
55:24
new form group so i'm going to create a form group
55:25
form group
55:25
form group which will have various controls
55:29
which will have various controls
55:29
which will have various controls what are those controls i'm just for for
55:31
what are those controls i'm just for for
55:31
what are those controls i'm just for for a quick thing i will just copy that from
55:35
a quick thing i will just copy that from
55:35
a quick thing i will just copy that from thing from template driven to here
55:44
okay so
55:47
okay so
55:47
okay so you just have to mention a json format
55:49
you just have to mention a json format
55:49
you just have to mention a json format where you can mention your all of these
55:51
where you can mention your all of these
55:51
where you can mention your all of these okay
55:53
okay
55:53
okay so in here what you did is
55:57
so in here what you did is
55:57
so in here what you did is you just mentioned first name last name
55:59
you just mentioned first name last name
55:59
you just mentioned first name last name and everything
56:01
and everything
56:01
and everything so what is each field represent it is
56:04
so what is each field represent it is
56:04
so what is each field represent it is form control correct because
56:05
form control correct because
56:05
form control correct because form group is a collection of form
56:07
form group is a collection of form
56:08
form group is a collection of form control
56:09
control
56:09
control so mention the default value of it i am
56:12
so mention the default value of it i am
56:12
so mention the default value of it i am going to say
56:13
going to say
56:13
going to say just say blank value
56:16
just say blank value
56:16
just say blank value similarly i am going to have it for
56:18
similarly i am going to have it for
56:18
similarly i am going to have it for other things as well
56:24
and we are going to look at this
56:26
and we are going to look at this
56:26
and we are going to look at this languages phenomenon at the end
56:28
languages phenomenon at the end
56:28
languages phenomenon at the end so for now just have this like
56:31
so for now just have this like
56:31
so for now just have this like have it like this and on html we haven't
56:34
have it like this and on html we haven't
56:34
have it like this and on html we haven't did anything as of now
56:36
did anything as of now
56:36
did anything as of now so what we have to do is we have to use
56:38
so what we have to do is we have to use
56:38
so what we have to do is we have to use this form group on the
56:40
this form group on the
56:40
this form group on the model driven form so what you have to do
56:42
model driven form so what you have to do
56:42
model driven form so what you have to do like wherever you have mentioned the
56:44
like wherever you have mentioned the
56:44
like wherever you have mentioned the format
56:45
format
56:45
format form element just go there and just say
56:49
group directive and what else you
56:51
group directive and what else you
56:52
group directive and what else you mentioned is
56:53
mentioned is
56:53
mentioned is the profile form object that you have
56:55
the profile form object that you have
56:55
the profile form object that you have created in here
56:56
created in here
56:56
created in here so basically it has multiple controls so
56:58
so basically it has multiple controls so
56:58
so basically it has multiple controls so i just did that
57:00
i just did that
57:00
i just did that and then you have to say there are
57:02
and then you have to say there are
57:02
and then you have to say there are elements from elements or from
57:04
elements from elements or from
57:04
elements from elements or from control that are present in here too to
57:07
control that are present in here too to
57:07
control that are present in here too to locate them you can use form control
57:09
locate them you can use form control
57:09
locate them you can use form control name directly
57:10
name directly
57:10
name directly directly which will make sure that
57:13
directly which will make sure that
57:13
directly which will make sure that they will be used correctly
57:17
they will be used correctly
57:17
they will be used correctly from the form control i can say so i'm
57:20
from the form control i can say so i'm
57:20
from the form control i can say so i'm going to paste it on each field
57:36
there are so many fields and i'm going
57:38
there are so many fields and i'm going
57:38
there are so many fields and i'm going to comment out this languages part so
57:40
to comment out this languages part so
57:40
to comment out this languages part so that it will cover it at the end
57:47
first name then last name
57:50
first name then last name
57:50
first name then last name then email what else
57:54
then email what else
57:54
then email what else address
57:58
this one or two i think one so one
58:03
cd state
58:07
cd state
58:07
cd state and postal code
58:13
so i'm just i just went on to the
58:16
so i'm just i just went on to the
58:16
so i'm just i just went on to the application and i'm saying that
58:18
application and i'm saying that
58:18
application and i'm saying that changes are getting reflected or not i
58:19
changes are getting reflected or not i
58:20
changes are getting reflected or not i hope there should not be any error
58:22
hope there should not be any error
58:22
hope there should not be any error the problem is with postal code i did
58:24
the problem is with postal code i did
58:24
the problem is with postal code i did not mention code here
58:26
not mention code here
58:26
not mention code here because internally we have defined
58:29
because internally we have defined
58:29
because internally we have defined postal code name and
58:31
postal code name and
58:31
postal code name and i just use the wrong name
58:34
okay there is anything missing from
58:37
okay there is anything missing from
58:37
okay there is anything missing from field must contain
58:40
field must contain
58:40
field must contain a form control where is it happening let
58:42
a form control where is it happening let
58:42
a form control where is it happening let me see
58:44
me see
58:44
me see a form field must control mat input
58:50
a form field must control mat input
58:50
a form field must control mat input somewhere somewhere somewhere oh this is
58:52
somewhere somewhere somewhere oh this is
58:52
somewhere somewhere somewhere oh this is wrong somehow
58:54
wrong somehow
58:54
wrong somehow that just the key was missing in the
58:56
that just the key was missing in the
58:56
that just the key was missing in the email i don't know how
58:58
email i don't know how
58:58
email i don't know how so it looks for when form field is there
59:00
so it looks for when form field is there
59:00
so it looks for when form field is there it should have at least matte input so
59:02
it should have at least matte input so
59:02
it should have at least matte input so that
59:03
that
59:03
that it will consider it as a form group
59:06
it will consider it as a form group
59:06
it will consider it as a form group yeah everything is working fine as of
59:07
yeah everything is working fine as of
59:07
yeah everything is working fine as of now so let's
59:09
now so let's
59:09
now so let's see what happening i think it is way
59:12
see what happening i think it is way
59:12
see what happening i think it is way simpler than the
59:13
simpler than the
59:13
simpler than the template driven contract we have to
59:15
template driven contract we have to
59:15
template driven contract we have to mention less thing let's see what's in
59:17
mention less thing let's see what's in
59:17
mention less thing let's see what's in what exactly is there inside the formula
59:21
what exactly is there inside the formula
59:21
what exactly is there inside the formula so the same way i mean internally
59:23
so the same way i mean internally
59:23
so the same way i mean internally whatever form you use either it is my
59:25
whatever form you use either it is my
59:25
whatever form you use either it is my template driven or model given
59:27
template driven or model given
59:27
template driven or model given they internally look similar there is no
59:29
they internally look similar there is no
59:29
they internally look similar there is no different section in terms of
59:31
different section in terms of
59:31
different section in terms of object of their each control
59:34
object of their each control
59:34
object of their each control so if you look at this you will see that
59:38
so if you look at this you will see that
59:38
so if you look at this you will see that you have succeeded with that with very
59:41
you have succeeded with that with very
59:41
you have succeeded with that with very little effort okay and what if you want
59:43
little effort okay and what if you want
59:43
little effort okay and what if you want to add a validation over it so
59:46
to add a validation over it so
59:46
to add a validation over it so it is pretty simple you don't have to do
59:48
it is pretty simple you don't have to do
59:48
it is pretty simple you don't have to do any changes like required attribute and
59:50
any changes like required attribute and
59:50
any changes like required attribute and all on
59:51
all on
59:51
all on the html side you will be doing the
59:52
the html side you will be doing the
59:52
the html side you will be doing the changes on the
59:54
changes on the
59:54
changes on the model side so if you want to add like
59:58
model side so if you want to add like
59:58
model side so if you want to add like this first name disbursement should be
1:00:00
this first name disbursement should be
1:00:00
this first name disbursement should be required then just mention
1:00:03
required then just mention
1:00:03
required then just mention what your form control what is the
1:00:04
what your form control what is the
1:00:04
what your form control what is the default value of suppose default value
1:00:06
default value of suppose default value
1:00:06
default value of suppose default value of it is concrete
1:00:07
of it is concrete
1:00:08
of it is concrete and what is the next parameter will be
1:00:09
and what is the next parameter will be
1:00:09
and what is the next parameter will be array and that array will be
1:00:11
array and that array will be
1:00:11
array and that array will be uh array of validators okay and there is
1:00:14
uh array of validators okay and there is
1:00:14
uh array of validators okay and there is one also the third option which is
1:00:16
one also the third option which is
1:00:16
one also the third option which is asynchronous validator where
1:00:18
asynchronous validator where
1:00:18
asynchronous validator where you can mention the validator which will
1:00:20
you can mention the validator which will
1:00:20
you can mention the validator which will be making an
1:00:21
be making an
1:00:21
be making an ajax call and depend on the response of
1:00:23
ajax call and depend on the response of
1:00:23
ajax call and depend on the response of that it will decide either the field is
1:00:25
that it will decide either the field is
1:00:25
that it will decide either the field is valid or not
1:00:26
valid or not
1:00:26
valid or not okay so as soon as i added the required
1:00:29
okay so as soon as i added the required
1:00:29
okay so as soon as i added the required value detail
1:00:30
value detail
1:00:30
value detail data in here you will see that
1:00:35
i should suppose to get an error for
1:00:37
i should suppose to get an error for
1:00:37
i should suppose to get an error for last name value when i submit the form
1:00:40
last name value when i submit the form
1:00:40
last name value when i submit the form let it get replaced did i save it okay
1:00:45
yeah so as soon as i submit thing
1:00:49
yeah so as soon as i submit thing
1:00:49
yeah so as soon as i submit thing you you will see an error as in last
1:00:51
you you will see an error as in last
1:00:51
you you will see an error as in last name is not
1:00:52
name is not
1:00:52
name is not uh is that required and which is not
1:00:56
uh is that required and which is not
1:00:56
uh is that required and which is not valid
1:00:57
valid
1:00:57
valid so similar way we can cover one more
1:01:00
so similar way we can cover one more
1:01:00
so similar way we can cover one more scenario in here so this is
1:01:02
scenario in here so this is
1:01:02
scenario in here so this is way of how to add a validation when you
1:01:04
way of how to add a validation when you
1:01:04
way of how to add a validation when you create a form
1:01:05
create a form
1:01:05
create a form so there can be situation where you want
1:01:07
so there can be situation where you want
1:01:07
so there can be situation where you want to add a validation dynamically correct
1:01:10
to add a validation dynamically correct
1:01:10
to add a validation dynamically correct so take an example of this only so on
1:01:13
so take an example of this only so on
1:01:13
so take an example of this only so on top there could be a button and that
1:01:14
top there could be a button and that
1:01:14
top there could be a button and that button
1:01:15
button
1:01:15
button you have to mark all the field as in
1:01:17
you have to mark all the field as in
1:01:17
you have to mark all the field as in required so i am going to copy that
1:01:19
required so i am going to copy that
1:01:19
required so i am going to copy that button from
1:01:20
button from
1:01:20
button from the earlier html okay
1:01:23
the earlier html okay
1:01:23
the earlier html okay and i'm going to paste it here okay that
1:01:25
and i'm going to paste it here okay that
1:01:25
and i'm going to paste it here okay that was there
1:01:28
and i can say
1:01:31
and i can say
1:01:31
and i can say call this mark all required method in
1:01:36
here
1:01:38
here
1:01:38
here and i want to make sure that all field
1:01:40
and i want to make sure that all field
1:01:40
and i want to make sure that all field becomes required so what i have okay i
1:01:42
becomes required so what i have okay i
1:01:42
becomes required so what i have okay i can do that is
1:01:44
can do that is
1:01:44
can do that is i have to loop over all the form field
1:01:46
i have to loop over all the form field
1:01:46
i have to loop over all the form field method
1:01:48
method
1:01:48
method but just by saying font
1:01:51
but just by saying font
1:01:51
but just by saying font control and to get all the controls of
1:01:55
control and to get all the controls of
1:01:55
control and to get all the controls of your form
1:01:56
your form
1:01:56
your form you can use a property
1:01:59
you can use a property
1:01:59
you can use a property inside it which is control so control
1:02:01
inside it which is control so control
1:02:01
inside it which is control so control will have all the form controls okay
1:02:04
will have all the form controls okay
1:02:04
will have all the form controls okay and you can easily look over this form
1:02:06
and you can easily look over this form
1:02:06
and you can easily look over this form control
1:02:07
control
1:02:07
control so basically you are going to look over
1:02:09
so basically you are going to look over
1:02:09
so basically you are going to look over it using
1:02:10
it using
1:02:10
it using orange and what you will get is
1:02:14
orange and what you will get is
1:02:14
orange and what you will get is you will be having control in it and for
1:02:17
you will be having control in it and for
1:02:17
you will be having control in it and for each control
1:02:18
each control
1:02:18
each control you will be doing something okay
1:02:21
you will be doing something okay
1:02:21
you will be doing something okay what will what that will do so this is
1:02:23
what will what that will do so this is
1:02:23
what will what that will do so this is going to be
1:02:25
going to be
1:02:25
going to be on control you what you will do is you
1:02:28
on control you what you will do is you
1:02:28
on control you what you will do is you will just
1:02:29
will just
1:02:29
will just say i want to
1:02:32
say i want to
1:02:32
say i want to add some validator so in here you can
1:02:35
add some validator so in here you can
1:02:35
add some validator so in here you can pause to get a method which is set
1:02:37
pause to get a method which is set
1:02:37
pause to get a method which is set validator so what is state validator
1:02:39
validator so what is state validator
1:02:39
validator so what is state validator it is saying validator so that means it
1:02:41
it is saying validator so that means it
1:02:41
it is saying validator so that means it is the same array as that of what you
1:02:43
is the same array as that of what you
1:02:43
is the same array as that of what you are mentioning while defining it
1:02:45
are mentioning while defining it
1:02:45
are mentioning while defining it okay so over here also you have to
1:02:46
okay so over here also you have to
1:02:46
okay so over here also you have to mention an array
1:02:48
mention an array
1:02:48
mention an array which is going to be validators not
1:02:51
which is going to be validators not
1:02:51
which is going to be validators not required we want to make all the trains
1:02:52
required we want to make all the trains
1:02:52
required we want to make all the trains required correct why this is
1:02:56
required correct why this is
1:02:56
required correct why this is happening like this i just have to say
1:02:58
happening like this i just have to say
1:02:58
happening like this i just have to say why the police is not working because
1:03:02
why the police is not working because
1:03:02
why the police is not working because abstract control has no
1:03:07
okay what does that mean
1:03:12
oh sorry let me see what happens
1:03:15
oh sorry let me see what happens
1:03:15
oh sorry let me see what happens i think it is because of price with only
1:03:17
i think it is because of price with only
1:03:18
i think it is because of price with only let me see
1:03:21
has no signature call signature okay
1:03:24
has no signature call signature okay
1:03:24
has no signature call signature okay um group dot controls okay
1:03:39
okay so i will just do it in this way
1:03:42
okay so i will just do it in this way
1:03:42
okay so i will just do it in this way now then
1:03:42
now then
1:03:42
now then if
1:03:54
okay so i will just try to show you i
1:03:56
okay so i will just try to show you i
1:03:56
okay so i will just try to show you i don't know why typescript is not
1:03:57
don't know why typescript is not
1:03:57
don't know why typescript is not allowing me to do that but quickly you
1:03:59
allowing me to do that but quickly you
1:03:59
allowing me to do that but quickly you can just add
1:04:00
can just add
1:04:00
can just add suppose i want to add the validator to
1:04:02
suppose i want to add the validator to
1:04:02
suppose i want to add the validator to the last three so what i will do is
1:04:05
the last three so what i will do is
1:04:05
the last three so what i will do is i can get access to the last name field
1:04:09
i can get access to the last name field
1:04:09
i can get access to the last name field just by saying dot
1:04:10
just by saying dot
1:04:10
just by saying dot date then what what will you want to
1:04:12
date then what what will you want to
1:04:12
date then what what will you want to access and then i can set the validators
1:04:14
access and then i can set the validators
1:04:14
access and then i can set the validators over it
1:04:15
over it
1:04:15
over it and suppose i just said uh
1:04:18
and suppose i just said uh
1:04:18
and suppose i just said uh this field should be required so i can
1:04:20
this field should be required so i can
1:04:20
this field should be required so i can directly do that using
1:04:22
directly do that using
1:04:22
directly do that using like this over here what i want to do is
1:04:25
like this over here what i want to do is
1:04:25
like this over here what i want to do is i was looking over all the control and
1:04:27
i was looking over all the control and
1:04:27
i was looking over all the control and going to set validators over it i will
1:04:28
going to set validators over it i will
1:04:28
going to set validators over it i will see why it is not working
1:04:31
see why it is not working
1:04:31
see why it is not working so for now just say like this i just
1:04:33
so for now just say like this i just
1:04:33
so for now just say like this i just saved the
1:04:36
thing let it get refreshed
1:04:42
okay and as soon as i say this and i try
1:04:46
okay and as soon as i say this and i try
1:04:46
okay and as soon as i say this and i try to submit the pharmacy
1:04:47
to submit the pharmacy
1:04:47
to submit the pharmacy this last name is required and if i
1:04:51
this last name is required and if i
1:04:51
this last name is required and if i if i if i try to do a submit
1:04:55
if i if i try to do a submit
1:04:55
if i if i try to do a submit okay it is required anyways why because
1:04:58
okay it is required anyways why because
1:04:58
okay it is required anyways why because i know mystically
1:05:01
i know mystically
1:05:01
i know mystically required okay did i see required in here
1:05:05
required okay did i see required in here
1:05:05
required okay did i see required in here somewhere oh sorry
1:05:07
somewhere oh sorry
1:05:07
somewhere oh sorry this should not be here because we are
1:05:09
this should not be here because we are
1:05:09
this should not be here because we are dynamically adding it
1:05:10
dynamically adding it
1:05:10
dynamically adding it so just to take
1:05:18
so simon how much how much time i have
1:05:20
so simon how much how much time i have
1:05:20
so simon how much how much time i have cement
1:05:21
cement
1:05:21
cement uh the package of here already six
1:05:24
uh the package of here already six
1:05:24
uh the package of here already six minutes uh
1:05:25
minutes uh
1:05:25
minutes uh okay so but it's totally fine
1:05:28
okay so but it's totally fine
1:05:28
okay so but it's totally fine yeah i will i will just wrap it in two
1:05:30
yeah i will i will just wrap it in two
1:05:30
yeah i will i will just wrap it in two minutes okay
1:05:33
yeah so you can see that when i click on
1:05:36
yeah so you can see that when i click on
1:05:36
yeah so you can see that when i click on submit
1:05:37
submit
1:05:37
submit initially don't provide any validation
1:05:39
initially don't provide any validation
1:05:39
initially don't provide any validation but
1:05:40
but
1:05:40
but you can click on this and you will see
1:05:42
you can click on this and you will see
1:05:42
you can click on this and you will see that okay
1:05:45
mark all field is it getting called
1:05:49
mark all field is it getting called
1:05:49
mark all field is it getting called uh what is it what else
1:05:52
uh what is it what else
1:05:52
uh what is it what else [Music]
1:05:54
[Music]
1:05:54
[Music] okay yeah and one more thing which is
1:05:55
okay yeah and one more thing which is
1:05:55
okay yeah and one more thing which is catch once you do such kind of thing
1:05:58
catch once you do such kind of thing
1:05:58
catch once you do such kind of thing you have to make sure that you are
1:06:00
you have to make sure that you are
1:06:00
you have to make sure that you are updating the validity of form so this
1:06:03
updating the validity of form so this
1:06:03
updating the validity of form so this dot profile form dot update value or
1:06:06
dot profile form dot update value or
1:06:06
dot profile form dot update value or validity either update the value or
1:06:07
validity either update the value or
1:06:08
validity either update the value or validity of particular field
1:06:10
validity of particular field
1:06:10
validity of particular field or form should do so what it makes sure
1:06:14
or form should do so what it makes sure
1:06:14
or form should do so what it makes sure is once you
1:06:15
is once you
1:06:15
is once you do any kind of dynamic changes in the
1:06:17
do any kind of dynamic changes in the
1:06:17
do any kind of dynamic changes in the form it does not reflect directly
1:06:19
form it does not reflect directly
1:06:19
form it does not reflect directly we have to explicitly say that so this
1:06:21
we have to explicitly say that so this
1:06:21
we have to explicitly say that so this method helps in that situations
1:06:24
method helps in that situations
1:06:24
method helps in that situations so just it got just refreshed and
1:06:27
so just it got just refreshed and
1:06:27
so just it got just refreshed and once you say
1:06:31
that should this reflected on this okay
1:06:34
that should this reflected on this okay
1:06:34
that should this reflected on this okay let me do
1:06:34
let me do
1:06:34
let me do the explicit way
1:06:49
okay submit it then check okay see
1:06:52
okay submit it then check okay see
1:06:52
okay submit it then check okay see this is directly uh so you have to make
1:06:55
this is directly uh so you have to make
1:06:55
this is directly uh so you have to make sure that
1:06:56
sure that
1:06:56
sure that whatever field you are modifying that
1:06:57
whatever field you are modifying that
1:06:58
whatever field you are modifying that that should that should update the
1:06:59
that should that should update the
1:06:59
that should that should update the validity of it not the form level
1:07:01
validity of it not the form level
1:07:01
validity of it not the form level because it won't flow
1:07:03
because it won't flow
1:07:03
because it won't flow at the bottom of the child component
1:07:06
at the bottom of the child component
1:07:06
at the bottom of the child component country
1:07:07
country
1:07:07
country child form control so this way it will
1:07:09
child form control so this way it will
1:07:09
child form control so this way it will do
1:07:10
do
1:07:10
do and one more thing which is because of
1:07:12
and one more thing which is because of
1:07:12
and one more thing which is because of time i could not cover
1:07:14
time i could not cover
1:07:14
time i could not cover the the other part of this particular
1:07:16
the the other part of this particular
1:07:16
the the other part of this particular html was
1:07:17
html was
1:07:17
html was uh this languages this can be form
1:07:22
uh this languages this can be form
1:07:22
uh this languages this can be form control
1:07:23
control
1:07:23
control and you can go in that way
1:07:26
and you can go in that way
1:07:26
and you can go in that way so perhaps what i can do is i quickly
1:07:30
so perhaps what i can do is i quickly
1:07:30
so perhaps what i can do is i quickly you got my all the changes
1:07:36
and you can see that that form from
1:07:38
and you can see that that form from
1:07:38
and you can see that that form from group is also here
1:07:41
group is also here
1:07:41
group is also here okay let it get refreshed so basically
1:07:43
okay let it get refreshed so basically
1:07:43
okay let it get refreshed so basically this can be considered as a form group
1:07:45
this can be considered as a form group
1:07:45
this can be considered as a form group and you can also uh you know dynamically
1:07:48
and you can also uh you know dynamically
1:07:48
and you can also uh you know dynamically add form
1:07:49
add form
1:07:49
add form group in the form group array uh
1:07:51
group in the form group array uh
1:07:52
group in the form group array uh dynamically and
1:07:53
dynamically and
1:07:53
dynamically and that way also angular shines a little
1:07:55
that way also angular shines a little
1:07:55
that way also angular shines a little bit there so
1:07:57
bit there so
1:07:57
bit there so there are and i know you must be
1:07:59
there are and i know you must be
1:07:59
there are and i know you must be confused like what should use template 1
1:08:01
confused like what should use template 1
1:08:01
confused like what should use template 1 or model 2 and basically it depends on
1:08:02
or model 2 and basically it depends on
1:08:02
or model 2 and basically it depends on case by case so personally i love model
1:08:04
case by case so personally i love model
1:08:04
case by case so personally i love model driven because most of the things i do
1:08:07
driven because most of the things i do
1:08:07
driven because most of the things i do that are on the ts side and i can easily
1:08:09
that are on the ts side and i can easily
1:08:09
that are on the ts side and i can easily test them out without
1:08:11
test them out without
1:08:11
test them out without including the html part of it okay and
1:08:13
including the html part of it okay and
1:08:14
including the html part of it okay and last thing
1:08:14
last thing
1:08:14
last thing which is only one minute i will attach
1:08:17
which is only one minute i will attach
1:08:17
which is only one minute i will attach so
1:08:17
so
1:08:17
so the one of the current challenges with
1:08:20
the one of the current challenges with
1:08:20
the one of the current challenges with with
1:08:20
with
1:08:20
with angular forms you cannot have a types
1:08:22
angular forms you cannot have a types
1:08:22
angular forms you cannot have a types with it so there is one library
1:08:25
with it so there is one library
1:08:25
with it so there is one library made by nathanael bessel so he have
1:08:28
made by nathanael bessel so he have
1:08:28
made by nathanael bessel so he have created one library which is
1:08:31
created one library which is
1:08:31
created one library which is which name is ng knit form
1:08:34
which name is ng knit form
1:08:34
which name is ng knit form reactive forms so and he has also
1:08:37
reactive forms so and he has also
1:08:38
reactive forms so and he has also written some schematics like
1:08:39
written some schematics like
1:08:39
written some schematics like just by installing it and just by
1:08:41
just by installing it and just by
1:08:42
just by installing it and just by running one command
1:08:43
running one command
1:08:43
running one command most of your form will be migrated to
1:08:46
most of your form will be migrated to
1:08:46
most of your form will be migrated to type form
1:08:47
type form
1:08:47
type form where you you would be doing less
1:08:49
where you you would be doing less
1:08:50
where you you would be doing less mistake like you know
1:08:51
mistake like you know
1:08:51
mistake like you know what types they provide us to do is uh
1:08:53
what types they provide us to do is uh
1:08:53
what types they provide us to do is uh when you
1:08:54
when you
1:08:54
when you when you want to access any form level
1:08:56
when you want to access any form level
1:08:56
when you want to access any form level item uh you
1:08:58
item uh you
1:08:58
item uh you you might end up writing a wrong scale
1:09:00
you might end up writing a wrong scale
1:09:00
you might end up writing a wrong scale when you accessing the form
1:09:02
when you accessing the form
1:09:02
when you accessing the form values so in here you can you know what
1:09:04
values so in here you can you know what
1:09:04
values so in here you can you know what you can do is you can just
1:09:06
you can do is you can just
1:09:06
you can do is you can just provide an interface while you are
1:09:08
provide an interface while you are
1:09:08
provide an interface while you are declaring the form group
1:09:09
declaring the form group
1:09:09
declaring the form group and when you are accessing it you will
1:09:12
and when you are accessing it you will
1:09:12
and when you are accessing it you will see that
1:09:13
see that
1:09:13
see that uh typescript will catch an error at the
1:09:15
uh typescript will catch an error at the
1:09:15
uh typescript will catch an error at the runtime
1:09:17
runtime
1:09:17
runtime at the compiled and only you don't have
1:09:19
at the compiled and only you don't have
1:09:19
at the compiled and only you don't have to
1:09:21
to
1:09:21
to you know go with uh just by you know
1:09:23
you know go with uh just by you know
1:09:23
you know go with uh just by you know checking the name here and there
1:09:25
checking the name here and there
1:09:25
checking the name here and there in the component so yeah that's all what
1:09:28
in the component so yeah that's all what
1:09:28
in the component so yeah that's all what i have
1:09:29
i have
1:09:29
i have i will share this repository and all the
1:09:32
i will share this repository and all the
1:09:32
i will share this repository and all the gita bar with
1:09:34
gita bar with
1:09:34
gita bar with give that to you yeah that that was an
1:09:37
give that to you yeah that that was an
1:09:37
give that to you yeah that that was an amazing session
1:09:38
amazing session
1:09:38
amazing session i think it lasts for 45-15 minutes so
1:09:40
i think it lasts for 45-15 minutes so
1:09:40
i think it lasts for 45-15 minutes so you are someone who started with the
1:09:42
you are someone who started with the
1:09:42
you are someone who started with the first episode
1:09:43
first episode
1:09:43
first episode and it was all good no presentation i
1:09:45
and it was all good no presentation i
1:09:45
and it was all good no presentation i think that this is what the uh
1:09:47
think that this is what the uh
1:09:47
think that this is what the uh developers really need and expect from
1:09:49
developers really need and expect from
1:09:49
developers really need and expect from these virtual conferences
1:09:51
these virtual conferences
1:09:51
these virtual conferences uh you are you are a true community guy
1:09:53
uh you are you are a true community guy
1:09:53
uh you are you are a true community guy right
1:09:54
right
1:09:54
right and all that good i think that that's
1:09:56
and all that good i think that that's
1:09:56
and all that good i think that that's amazing i should put all together
1:09:58
amazing i should put all together
1:09:58
amazing i should put all together upon culture it was really nice to have
1:10:00
upon culture it was really nice to have
1:10:00
upon culture it was really nice to have you
1:10:01
you
1:10:01
you and thank you thank you so much for your
1:10:02
and thank you thank you so much for your
1:10:02
and thank you thank you so much for your time thank you so much
1:10:07
all right so uh the next session that we
1:10:09
all right so uh the next session that we
1:10:09
all right so uh the next session that we have is from uh siddharth
1:10:11
have is from uh siddharth
1:10:12
have is from uh siddharth mehra so a quick introduction about
1:10:14
mehra so a quick introduction about
1:10:14
mehra so a quick introduction about siddhartha siddharth is a google
1:10:16
siddhartha siddharth is a google
1:10:16
siddhartha siddharth is a google developer expert in
1:10:17
developer expert in
1:10:17
developer expert in angular and web technology currently
1:10:20
angular and web technology currently
1:10:20
angular and web technology currently based out
1:10:21
based out
1:10:21
based out in sydney and as a senior full-stack
1:10:23
in sydney and as a senior full-stack
1:10:23
in sydney and as a senior full-stack javascript developer he works on digital
1:10:26
javascript developer he works on digital
1:10:26
javascript developer he works on digital transformation
1:10:27
transformation
1:10:27
transformation engagement for his organization apart
1:10:29
engagement for his organization apart
1:10:29
engagement for his organization apart from his regular nine-to-five job he is
1:10:31
from his regular nine-to-five job he is
1:10:31
from his regular nine-to-five job he is an angular instructor on udemy
1:10:33
an angular instructor on udemy
1:10:33
an angular instructor on udemy and impact pub he writes articles and
1:10:36
and impact pub he writes articles and
1:10:36
and impact pub he writes articles and creates video content
1:10:38
creates video content
1:10:38
creates video content you can find almost anywhere on the web
1:10:40
you can find almost anywhere on the web
1:10:40
you can find almost anywhere on the web if you just search for
1:10:42
if you just search for
1:10:42
if you just search for sid at let us now go ahead and invite
1:10:45
sid at let us now go ahead and invite
1:10:45
sid at let us now go ahead and invite our next speaker
1:10:47
our next speaker
1:10:47
our next speaker [Music]
1:10:56
siddharth
1:11:02
[Music]
1:11:21
welcome to the live show thank you so
1:11:23
welcome to the live show thank you so
1:11:23
welcome to the live show thank you so much stephen for this
1:11:25
much stephen for this
1:11:25
much stephen for this uh amazing introduction that was great
1:11:28
uh amazing introduction that was great
1:11:28
uh amazing introduction that was great i said that tell me where you're joining
1:11:30
i said that tell me where you're joining
1:11:30
i said that tell me where you're joining us from today
1:11:31
us from today
1:11:31
us from today and uh what's time in your location now
1:11:34
and uh what's time in your location now
1:11:34
and uh what's time in your location now actually
1:11:34
actually
1:11:34
actually i should ask that right it's 10 42
1:11:38
i should ask that right it's 10 42
1:11:38
i should ask that right it's 10 42 uh p.m right now yeah you're in here
1:11:41
uh p.m right now yeah you're in here
1:11:41
uh p.m right now yeah you're in here right now in sydney yep yeah so i think
1:11:44
right now in sydney yep yeah so i think
1:11:44
right now in sydney yep yeah so i think it's a little too late for you right
1:11:47
it's a little too late for you right
1:11:47
it's a little too late for you right and but i really appreciate that that
1:11:48
and but i really appreciate that that
1:11:48
and but i really appreciate that that you have taken your time
1:11:50
you have taken your time
1:11:50
you have taken your time and given for this virtual conference i
1:11:52
and given for this virtual conference i
1:11:52
and given for this virtual conference i think everyone uh watching us today
1:11:54
think everyone uh watching us today
1:11:54
think everyone uh watching us today would really
1:11:55
would really
1:11:55
would really love to have your session so next around
1:11:58
love to have your session so next around
1:11:58
love to have your session so next around i think we'll have to
1:11:59
i think we'll have to
1:11:59
i think we'll have to trim your time right maybe around some
1:12:01
trim your time right maybe around some
1:12:01
trim your time right maybe around some 35 to 40 minutes maybe 35 minutes
1:12:03
35 to 40 minutes maybe 35 minutes
1:12:04
35 to 40 minutes maybe 35 minutes it's it's all yours you can go ahead and
1:12:07
it's it's all yours you can go ahead and
1:12:07
it's it's all yours you can go ahead and maybe start sharing your screen
1:12:09
maybe start sharing your screen
1:12:09
maybe start sharing your screen okay sure thing
1:12:17
all right yep okay
1:12:20
all right yep okay
1:12:20
all right yep okay uh great then i guess i'll just
1:12:23
uh great then i guess i'll just
1:12:23
uh great then i guess i'll just start all right uh let me also start my
1:12:27
start all right uh let me also start my
1:12:27
start all right uh let me also start my stopwatch perfect okay so hello everyone
1:12:31
stopwatch perfect okay so hello everyone
1:12:31
stopwatch perfect okay so hello everyone uh thank you so much for
1:12:32
uh thank you so much for
1:12:32
uh thank you so much for joining in and listening to this talk um
1:12:35
joining in and listening to this talk um
1:12:35
joining in and listening to this talk um as you can see here
1:12:36
as you can see here
1:12:36
as you can see here i'm going to talk about the present and
1:12:37
i'm going to talk about the present and
1:12:37
i'm going to talk about the present and the future of angular with iv
1:12:39
the future of angular with iv
1:12:39
the future of angular with iv now a lot of you might not know what iv
1:12:42
now a lot of you might not know what iv
1:12:42
now a lot of you might not know what iv is
1:12:43
is
1:12:43
is a lot of you might already know what it
1:12:44
a lot of you might already know what it
1:12:44
a lot of you might already know what it is all about but
1:12:46
is all about but
1:12:46
is all about but throughout this talk i'll be touching
1:12:49
throughout this talk i'll be touching
1:12:49
throughout this talk i'll be touching upon a few
1:12:50
upon a few
1:12:50
upon a few major intricacies about iv and so that
1:12:53
major intricacies about iv and so that
1:12:53
major intricacies about iv and so that by the end of this talk hopefully you
1:12:54
by the end of this talk hopefully you
1:12:54
by the end of this talk hopefully you will be able to uh
1:12:56
will be able to uh
1:12:56
will be able to uh better appreciate what the whole angular
1:12:59
better appreciate what the whole angular
1:12:59
better appreciate what the whole angular team has done for us for the past
1:13:01
team has done for us for the past
1:13:01
team has done for us for the past uh two to three years or so so
1:13:05
uh two to three years or so so
1:13:05
uh two to three years or so so let's let's first address the elephant
1:13:07
let's let's first address the elephant
1:13:07
let's let's first address the elephant in the room what exactly is
1:13:09
in the room what exactly is
1:13:09
in the room what exactly is iv so iv is the third generation of
1:13:12
iv so iv is the third generation of
1:13:12
iv so iv is the third generation of angular compilation and rendering
1:13:13
angular compilation and rendering
1:13:13
angular compilation and rendering pipeline the first generation was called
1:13:16
pipeline the first generation was called
1:13:16
pipeline the first generation was called the template compiler and the second
1:13:17
the template compiler and the second
1:13:17
the template compiler and the second generation was called the view engine
1:13:19
generation was called the view engine
1:13:19
generation was called the view engine and there were some issues with both the
1:13:21
and there were some issues with both the
1:13:21
and there were some issues with both the template compiler and the view engine
1:13:23
template compiler and the view engine
1:13:23
template compiler and the view engine and that's why
1:13:24
and that's why
1:13:24
and that's why the angular team started to like make
1:13:27
the angular team started to like make
1:13:27
the angular team started to like make this whole
1:13:28
this whole
1:13:28
this whole uh journey of rewriting the whole
1:13:31
uh journey of rewriting the whole
1:13:31
uh journey of rewriting the whole compilation and rendering pipeline
1:13:33
compilation and rendering pipeline
1:13:33
compilation and rendering pipeline under the hood without even disrupting
1:13:35
under the hood without even disrupting
1:13:35
under the hood without even disrupting the whole developer experience
1:13:37
the whole developer experience
1:13:37
the whole developer experience and so now uh that iv is out there
1:13:40
and so now uh that iv is out there
1:13:40
and so now uh that iv is out there you still write the exact same code that
1:13:42
you still write the exact same code that
1:13:42
you still write the exact same code that you use to write
1:13:44
you use to write
1:13:44
you use to write in let's say angular six or seven or
1:13:46
in let's say angular six or seven or
1:13:46
in let's say angular six or seven or eight but you still
1:13:47
eight but you still
1:13:48
eight but you still get quite a lot of things out of iv so
1:13:51
get quite a lot of things out of iv so
1:13:51
get quite a lot of things out of iv so uh i did mention something related to
1:13:53
uh i did mention something related to
1:13:53
uh i did mention something related to the compilation and rendering pipeline
1:13:55
the compilation and rendering pipeline
1:13:55
the compilation and rendering pipeline so what exactly is this pipeline all
1:13:57
so what exactly is this pipeline all
1:13:57
so what exactly is this pipeline all about
1:13:58
about
1:13:58
about well uh you can think of the angular
1:14:00
well uh you can think of the angular
1:14:00
well uh you can think of the angular part of your whole application
1:14:02
part of your whole application
1:14:02
part of your whole application uh as something that can be broken down
1:14:04
uh as something that can be broken down
1:14:04
uh as something that can be broken down into
1:14:05
into
1:14:05
into two major segments so there's this ngc
1:14:09
two major segments so there's this ngc
1:14:09
two major segments so there's this ngc that is that is uh some sort of a
1:14:11
that is that is uh some sort of a
1:14:11
that is that is uh some sort of a command that triggers the angular
1:14:12
command that triggers the angular
1:14:12
command that triggers the angular compiler and the angular compiler
1:14:15
compiler and the angular compiler
1:14:15
compiler and the angular compiler compiles your
1:14:16
compiles your
1:14:16
compiles your source files into some sort of a
1:14:18
source files into some sort of a
1:14:18
source files into some sort of a javascript
1:14:19
javascript
1:14:19
javascript that can eventually be rendered onto the
1:14:22
that can eventually be rendered onto the
1:14:22
that can eventually be rendered onto the browser
1:14:23
browser
1:14:23
browser but this cannot really independently run
1:14:26
but this cannot really independently run
1:14:26
but this cannot really independently run on the browser because it depends
1:14:28
on the browser because it depends
1:14:28
on the browser because it depends on quite a lot of things that angular
1:14:29
on quite a lot of things that angular
1:14:29
on quite a lot of things that angular has to offer to us as well in the form
1:14:31
has to offer to us as well in the form
1:14:32
has to offer to us as well in the form of these
1:14:32
of these
1:14:32
of these uh libraries that we use from uh
1:14:36
uh libraries that we use from uh
1:14:36
uh libraries that we use from uh angular like the angular core and
1:14:37
angular like the angular core and
1:14:38
angular like the angular core and angular platform browser and
1:14:39
angular platform browser and
1:14:39
angular platform browser and other stuff like that so these libraries
1:14:42
other stuff like that so these libraries
1:14:42
other stuff like that so these libraries are the things that are called
1:14:43
are the things that are called
1:14:43
are the things that are called the runtime right and so this is the
1:14:46
the runtime right and so this is the
1:14:46
the runtime right and so this is the whole
1:14:46
whole
1:14:46
whole uh pipeline that i'm talking about now i
1:14:49
uh pipeline that i'm talking about now i
1:14:49
uh pipeline that i'm talking about now i in in case of iv the whole compiler as
1:14:52
in in case of iv the whole compiler as
1:14:52
in in case of iv the whole compiler as well as the runtime has been rewritten
1:14:54
well as the runtime has been rewritten
1:14:54
well as the runtime has been rewritten at the background right so
1:14:57
at the background right so
1:14:57
at the background right so uh the pipeline is responsible for doing
1:15:00
uh the pipeline is responsible for doing
1:15:00
uh the pipeline is responsible for doing quite a lot of things for us as
1:15:01
quite a lot of things for us as
1:15:02
quite a lot of things for us as developers so that we don't have to take
1:15:03
developers so that we don't have to take
1:15:03
developers so that we don't have to take care of all these things on our own
1:15:05
care of all these things on our own
1:15:05
care of all these things on our own and these are a few things like
1:15:07
and these are a few things like
1:15:07
and these are a few things like transformation of angular abstractions
1:15:09
transformation of angular abstractions
1:15:09
transformation of angular abstractions because we as
1:15:09
because we as
1:15:10
because we as angular developers are used to writing
1:15:12
angular developers are used to writing
1:15:12
angular developers are used to writing angular code
1:15:13
angular code
1:15:13
angular code like we generally write typescript
1:15:16
like we generally write typescript
1:15:16
like we generally write typescript classes
1:15:17
classes
1:15:17
classes uh that are already decorated with these
1:15:19
uh that are already decorated with these
1:15:19
uh that are already decorated with these decorators like the ng module decorator
1:15:21
decorators like the ng module decorator
1:15:21
decorators like the ng module decorator the component decorator and stuff like
1:15:23
the component decorator and stuff like
1:15:23
the component decorator and stuff like that
1:15:24
that
1:15:24
that but this is something that is not really
1:15:26
but this is something that is not really
1:15:26
but this is something that is not really uh
1:15:27
uh
1:15:27
uh running in the browser for us right what
1:15:29
running in the browser for us right what
1:15:29
running in the browser for us right what the browser actually runs is javascript
1:15:32
the browser actually runs is javascript
1:15:32
the browser actually runs is javascript right so this whole compilation and
1:15:35
right so this whole compilation and
1:15:35
right so this whole compilation and rendering pipeline is responsible for
1:15:37
rendering pipeline is responsible for
1:15:37
rendering pipeline is responsible for doing that so it does things like
1:15:38
doing that so it does things like
1:15:38
doing that so it does things like creating and manipulating the dom
1:15:40
creating and manipulating the dom
1:15:40
creating and manipulating the dom it is responsible for data binding and
1:15:42
it is responsible for data binding and
1:15:42
it is responsible for data binding and change detection
1:15:43
change detection
1:15:43
change detection and it is also responsible for creating
1:15:45
and it is also responsible for creating
1:15:45
and it is also responsible for creating css
1:15:46
css
1:15:46
css and animations amongst other things
1:15:49
and animations amongst other things
1:15:50
and animations amongst other things now iv is also an enabler and
1:15:53
now iv is also an enabler and
1:15:53
now iv is also an enabler and you might have heard quite a lot about
1:15:54
you might have heard quite a lot about
1:15:54
you might have heard quite a lot about this particular statement
1:15:56
this particular statement
1:15:56
this particular statement uh in the past from from a lot of
1:15:59
uh in the past from from a lot of
1:15:59
uh in the past from from a lot of the community members who are like
1:16:02
the community members who are like
1:16:02
the community members who are like really active in terms of angular
1:16:04
really active in terms of angular
1:16:04
really active in terms of angular so when the angular team started to work
1:16:06
so when the angular team started to work
1:16:06
so when the angular team started to work on iv they had quite a lot of design
1:16:08
on iv they had quite a lot of design
1:16:08
on iv they had quite a lot of design goals in mind
1:16:09
goals in mind
1:16:09
goals in mind and it everything revolved around three
1:16:11
and it everything revolved around three
1:16:11
and it everything revolved around three major aspects
1:16:13
major aspects
1:16:13
major aspects it was all about optimizability
1:16:16
it was all about optimizability
1:16:16
it was all about optimizability incrementality and flexibility
1:16:18
incrementality and flexibility
1:16:18
incrementality and flexibility now as we already see that uh from the
1:16:21
now as we already see that uh from the
1:16:21
now as we already see that uh from the examples that we see out there
1:16:23
examples that we see out there
1:16:23
examples that we see out there a lot of people have also shared their
1:16:25
a lot of people have also shared their
1:16:25
a lot of people have also shared their uh
1:16:26
uh
1:16:26
uh their the things that they have noticed
1:16:28
their the things that they have noticed
1:16:28
their the things that they have noticed after they have migrated to angular 10
1:16:30
after they have migrated to angular 10
1:16:30
after they have migrated to angular 10 or angular 9 for instance
1:16:32
or angular 9 for instance
1:16:32
or angular 9 for instance that their bundle size has now shrunk
1:16:36
that their bundle size has now shrunk
1:16:36
that their bundle size has now shrunk quite a bit right and so there are quite
1:16:38
quite a bit right and so there are quite
1:16:38
quite a bit right and so there are quite a lot of reasons for that
1:16:39
a lot of reasons for that
1:16:39
a lot of reasons for that one such reason is that let's say for
1:16:42
one such reason is that let's say for
1:16:42
one such reason is that let's say for instance that
1:16:43
instance that
1:16:43
instance that this is somehow a visualization of what
1:16:47
this is somehow a visualization of what
1:16:47
this is somehow a visualization of what the rendering
1:16:47
the rendering
1:16:47
the rendering engine used to look like in the second
1:16:50
engine used to look like in the second
1:16:50
engine used to look like in the second generation of the compilation and
1:16:51
generation of the compilation and
1:16:51
generation of the compilation and rendering pipeline that is the view
1:16:53
rendering pipeline that is the view
1:16:53
rendering pipeline that is the view engine
1:16:53
engine
1:16:53
engine now the view engine uh looked like this
1:16:56
now the view engine uh looked like this
1:16:56
now the view engine uh looked like this one giant
1:16:57
one giant
1:16:57
one giant big switch statement that used to
1:16:59
big switch statement that used to
1:16:59
big switch statement that used to traverse through
1:17:01
traverse through
1:17:01
traverse through the data structure that was generated by
1:17:03
the data structure that was generated by
1:17:03
the data structure that was generated by the compiler at that time
1:17:05
the compiler at that time
1:17:05
the compiler at that time and then it had basically everything
1:17:09
and then it had basically everything
1:17:09
and then it had basically everything so all the all the framework code that
1:17:11
so all the all the framework code that
1:17:11
so all the all the framework code that was
1:17:12
was
1:17:12
was supported by angular was all present in
1:17:14
supported by angular was all present in
1:17:14
supported by angular was all present in here
1:17:15
here
1:17:15
here but the way it was uh the the way it was
1:17:18
but the way it was uh the the way it was
1:17:18
but the way it was uh the the way it was created
1:17:18
created
1:17:18
created it was responsible for taking everything
1:17:21
it was responsible for taking everything
1:17:21
it was responsible for taking everything that was thrown to it
1:17:22
that was thrown to it
1:17:22
that was thrown to it and then it had to somehow make sense of
1:17:24
and then it had to somehow make sense of
1:17:24
and then it had to somehow make sense of it and then render things to the dom
1:17:26
it and then render things to the dom
1:17:26
it and then render things to the dom but how it has changed is that now this
1:17:29
but how it has changed is that now this
1:17:29
but how it has changed is that now this whole
1:17:30
whole
1:17:30
whole big giant switch statement has now been
1:17:32
big giant switch statement has now been
1:17:32
big giant switch statement has now been broken down into smaller more granular
1:17:34
broken down into smaller more granular
1:17:34
broken down into smaller more granular and more focused
1:17:36
and more focused
1:17:36
and more focused sets of functions that your compiled
1:17:38
sets of functions that your compiled
1:17:38
sets of functions that your compiled code calls
1:17:39
code calls
1:17:39
code calls so all these smaller functions are
1:17:41
so all these smaller functions are
1:17:41
so all these smaller functions are grouped into some things that are called
1:17:43
grouped into some things that are called
1:17:43
grouped into some things that are called the iv instruction
1:17:44
the iv instruction
1:17:44
the iv instruction so how that works is that this is the
1:17:47
so how that works is that this is the
1:17:47
so how that works is that this is the this is the template code for instance
1:17:49
this is the template code for instance
1:17:49
this is the template code for instance right so this is the code that gets
1:17:50
right so this is the code that gets
1:17:50
right so this is the code that gets generated by the compiler
1:17:52
generated by the compiler
1:17:52
generated by the compiler now as you can see this is not something
1:17:54
now as you can see this is not something
1:17:54
now as you can see this is not something that you write this is something
1:17:56
that you write this is something
1:17:56
that you write this is something that the compiler makes sense out of the
1:17:58
that the compiler makes sense out of the
1:17:58
that the compiler makes sense out of the template or
1:17:59
template or
1:17:59
template or the component that that you have written
1:18:01
the component that that you have written
1:18:01
the component that that you have written and it translates it into something that
1:18:03
and it translates it into something that
1:18:03
and it translates it into something that looks like this
1:18:04
looks like this
1:18:04
looks like this and you can see here that it makes calls
1:18:07
and you can see here that it makes calls
1:18:07
and you can see here that it makes calls to
1:18:07
to
1:18:07
to a few functions that are prefixed with
1:18:10
a few functions that are prefixed with
1:18:10
a few functions that are prefixed with this theta theta symbol
1:18:12
this theta theta symbol
1:18:12
this theta theta symbol now all these functions are these iv
1:18:15
now all these functions are these iv
1:18:15
now all these functions are these iv instructions or these functions
1:18:17
instructions or these functions
1:18:17
instructions or these functions these iv functions that i'm talking
1:18:18
these iv functions that i'm talking
1:18:18
these iv functions that i'm talking about so the whole framework itself has
1:18:20
about so the whole framework itself has
1:18:20
about so the whole framework itself has now been broken down into smaller and
1:18:22
now been broken down into smaller and
1:18:22
now been broken down into smaller and more granular iv
1:18:23
more granular iv
1:18:23
more granular iv instructions like these now what it
1:18:26
instructions like these now what it
1:18:26
instructions like these now what it enables us to do is
1:18:28
enables us to do is
1:18:28
enables us to do is uh our code gets compiled and that
1:18:31
uh our code gets compiled and that
1:18:31
uh our code gets compiled and that it gets compiled into something that
1:18:33
it gets compiled into something that
1:18:33
it gets compiled into something that looks like this and then
1:18:35
looks like this and then
1:18:35
looks like this and then whatever functions that the compiled
1:18:37
whatever functions that the compiled
1:18:37
whatever functions that the compiled code has
1:18:38
code has
1:18:38
code has that it is calling from the framework
1:18:41
that it is calling from the framework
1:18:41
that it is calling from the framework are only retained as a part of the final
1:18:43
are only retained as a part of the final
1:18:44
are only retained as a part of the final production bundle
1:18:45
production bundle
1:18:45
production bundle that gets generated while the rest of
1:18:47
that gets generated while the rest of
1:18:47
that gets generated while the rest of the framework code gets
1:18:48
the framework code gets
1:18:48
the framework code gets easily shaked away this
1:18:51
easily shaked away this
1:18:51
easily shaked away this is like a major breakthrough because now
1:18:53
is like a major breakthrough because now
1:18:53
is like a major breakthrough because now the now the framework code itself can
1:18:56
the now the framework code itself can
1:18:56
the now the framework code itself can now be tree shaken away
1:18:58
now be tree shaken away
1:18:58
now be tree shaken away and this results uh this is one of the
1:19:00
and this results uh this is one of the
1:19:00
and this results uh this is one of the factors which
1:19:01
factors which
1:19:01
factors which eventually results in smaller bundle
1:19:03
eventually results in smaller bundle
1:19:03
eventually results in smaller bundle sizes uh and these are all these iv
1:19:05
sizes uh and these are all these iv
1:19:05
sizes uh and these are all these iv instructions that i was talking about so
1:19:07
instructions that i was talking about so
1:19:07
instructions that i was talking about so every specific feature that we have in
1:19:09
every specific feature that we have in
1:19:09
every specific feature that we have in angular
1:19:09
angular
1:19:09
angular let's say if it is about svgs or content
1:19:12
let's say if it is about svgs or content
1:19:12
let's say if it is about svgs or content projection or change detection or
1:19:14
projection or change detection or
1:19:14
projection or change detection or dependency injection
1:19:16
dependency injection
1:19:16
dependency injection all these things are now represented by
1:19:18
all these things are now represented by
1:19:18
all these things are now represented by all these smaller and granular
1:19:21
all these smaller and granular
1:19:21
all these smaller and granular pieces of functions that are called the
1:19:22
pieces of functions that are called the
1:19:22
pieces of functions that are called the ib instructions
1:19:24
ib instructions
1:19:24
ib instructions okay this is one part the second part is
1:19:27
okay this is one part the second part is
1:19:27
okay this is one part the second part is that with iv
1:19:29
that with iv
1:19:29
that with iv a lot of metadata files that used to get
1:19:31
a lot of metadata files that used to get
1:19:31
a lot of metadata files that used to get generated before
1:19:32
generated before
1:19:32
generated before iv that is in in case of the view engine
1:19:35
iv that is in in case of the view engine
1:19:35
iv that is in in case of the view engine are now
1:19:36
are now
1:19:36
are now not really required so this is like
1:19:40
not really required so this is like
1:19:40
not really required so this is like some sort of an experiment wherein i'm
1:19:43
some sort of an experiment wherein i'm
1:19:43
some sort of an experiment wherein i'm running the ngc which is the angular
1:19:45
running the ngc which is the angular
1:19:45
running the ngc which is the angular compiler and i'm giving it the ds config
1:19:47
compiler and i'm giving it the ds config
1:19:47
compiler and i'm giving it the ds config so it generated it used to generate
1:19:49
so it generated it used to generate
1:19:50
so it generated it used to generate quite a lot of metadata files like as
1:19:51
quite a lot of metadata files like as
1:19:51
quite a lot of metadata files like as you can see here it generates
1:19:53
you can see here it generates
1:19:53
you can see here it generates for the child component for instance it
1:19:55
for the child component for instance it
1:19:55
for the child component for instance it is generating the metadata.json the ansi
1:19:58
is generating the metadata.json the ansi
1:19:58
is generating the metadata.json the ansi factory file the ng factory map file
1:20:00
factory file the ng factory map file
1:20:00
factory file the ng factory map file the nz summary file and all these
1:20:02
the nz summary file and all these
1:20:02
the nz summary file and all these different files of sorts
1:20:04
different files of sorts
1:20:04
different files of sorts but with iv uh everything that
1:20:08
but with iv uh everything that
1:20:08
but with iv uh everything that the that the comp that the runtime needs
1:20:10
the that the comp that the runtime needs
1:20:10
the that the comp that the runtime needs in order to render a component and
1:20:12
in order to render a component and
1:20:12
in order to render a component and detect changes on that component at
1:20:14
detect changes on that component at
1:20:14
detect changes on that component at runtime
1:20:15
runtime
1:20:15
runtime are all present in one in just one file
1:20:18
are all present in one in just one file
1:20:18
are all present in one in just one file and so we don't really need all these
1:20:20
and so we don't really need all these
1:20:20
and so we don't really need all these additional files of sorts
1:20:21
additional files of sorts
1:20:22
additional files of sorts so this is the this is how it looks like
1:20:24
so this is the this is how it looks like
1:20:24
so this is the this is how it looks like when you
1:20:26
when you
1:20:26
when you run the ngc command in case of ib so
1:20:29
run the ngc command in case of ib so
1:20:29
run the ngc command in case of ib so this can be considered as the exact same
1:20:31
this can be considered as the exact same
1:20:31
this can be considered as the exact same project but with
1:20:32
project but with
1:20:32
project but with enable iv set to true so iv is enabled
1:20:35
enable iv set to true so iv is enabled
1:20:35
enable iv set to true so iv is enabled in this case and when
1:20:36
in this case and when
1:20:36
in this case and when in this case when you run ngc which is
1:20:38
in this case when you run ngc which is
1:20:38
in this case when you run ngc which is the angular compiler
1:20:40
the angular compiler
1:20:40
the angular compiler then it just generates two files which
1:20:42
then it just generates two files which
1:20:42
then it just generates two files which is the component.js file and the
1:20:44
is the component.js file and the
1:20:44
is the component.js file and the component.js.map file
1:20:46
component.js.map file
1:20:46
component.js.map file and the component.js file has everything
1:20:48
and the component.js file has everything
1:20:48
and the component.js file has everything related to
1:20:50
related to
1:20:50
related to the change detection as well as
1:20:51
the change detection as well as
1:20:52
the change detection as well as rendering of this component that
1:20:53
rendering of this component that
1:20:54
rendering of this component that the angular runtime actually needs in
1:20:56
the angular runtime actually needs in
1:20:56
the angular runtime actually needs in order to render that
1:20:58
order to render that
1:20:58
order to render that this is great because now uh since we
1:21:01
this is great because now uh since we
1:21:01
this is great because now uh since we don't really have all these metadata
1:21:02
don't really have all these metadata
1:21:02
don't really have all these metadata files
1:21:03
files
1:21:04
files and the framework code itself can now be
1:21:06
and the framework code itself can now be
1:21:06
and the framework code itself can now be shaken away it
1:21:07
shaken away it
1:21:07
shaken away it eventually results in smaller bundles
1:21:09
eventually results in smaller bundles
1:21:09
eventually results in smaller bundles which is great right
1:21:10
which is great right
1:21:10
which is great right so uh i'm not making this up this is
1:21:13
so uh i'm not making this up this is
1:21:13
so uh i'm not making this up this is something that
1:21:14
something that
1:21:14
something that is actually true and here here is
1:21:17
is actually true and here here is
1:21:17
is actually true and here here is an example of a source map explorer uh
1:21:21
an example of a source map explorer uh
1:21:21
an example of a source map explorer uh view that you are seeing here which is
1:21:23
view that you are seeing here which is
1:21:23
view that you are seeing here which is like a tree map size
1:21:25
like a tree map size
1:21:25
like a tree map size so what we have done here is this this
1:21:28
so what we have done here is this this
1:21:28
so what we have done here is this this that you see here was taken uh when the
1:21:31
that you see here was taken uh when the
1:21:31
that you see here was taken uh when the code was when an application which was
1:21:34
code was when an application which was
1:21:34
code was when an application which was running angular 7 was compiled
1:21:36
running angular 7 was compiled
1:21:36
running angular 7 was compiled and so the resultant bundle was of 3.42
1:21:39
and so the resultant bundle was of 3.42
1:21:39
and so the resultant bundle was of 3.42 mb's
1:21:40
mb's
1:21:40
mb's right but we migrated to angular 10
1:21:44
right but we migrated to angular 10
1:21:44
right but we migrated to angular 10 and then we created that bundle again
1:21:47
and then we created that bundle again
1:21:47
and then we created that bundle again and then that bundle now resultant was
1:21:49
and then that bundle now resultant was
1:21:49
and then that bundle now resultant was of 2.4 mbs
1:21:51
of 2.4 mbs
1:21:51
of 2.4 mbs right so this is like uh more than one
1:21:54
right so this is like uh more than one
1:21:54
right so this is like uh more than one mbs of
1:21:56
mbs of
1:21:56
mbs of 1 mbs of bundle size that has been that
1:21:59
1 mbs of bundle size that has been that
1:21:59
1 mbs of bundle size that has been that has been
1:21:59
has been
1:21:59
has been removed away right which is great right
1:22:02
removed away right which is great right
1:22:02
removed away right which is great right because
1:22:04
because
1:22:04
because it eventually leads to smaller bundles
1:22:06
it eventually leads to smaller bundles
1:22:06
it eventually leads to smaller bundles and then your application loads faster
1:22:08
and then your application loads faster
1:22:08
and then your application loads faster it requires less bandwidth and
1:22:10
it requires less bandwidth and
1:22:10
it requires less bandwidth and it offers a great user experience as
1:22:13
it offers a great user experience as
1:22:13
it offers a great user experience as such as well
1:22:14
such as well
1:22:14
such as well right other thing is that now
1:22:18
right other thing is that now
1:22:18
right other thing is that now the locality that was initially
1:22:21
the locality that was initially
1:22:21
the locality that was initially implemented in a different way has now
1:22:23
implemented in a different way has now
1:22:23
implemented in a different way has now been changed as well
1:22:24
been changed as well
1:22:24
been changed as well so this is like a code that was compiled
1:22:28
so this is like a code that was compiled
1:22:28
so this is like a code that was compiled in terms of the temp in terms of the
1:22:30
in terms of the temp in terms of the
1:22:30
in terms of the temp in terms of the view engine and here
1:22:32
view engine and here
1:22:32
view engine and here it is of an of a component that uses
1:22:35
it is of an of a component that uses
1:22:35
it is of an of a component that uses ng if structural directive and with
1:22:38
ng if structural directive and with
1:22:38
ng if structural directive and with wherever we are referencing ng if you'll
1:22:40
wherever we are referencing ng if you'll
1:22:40
wherever we are referencing ng if you'll also see references to things like the
1:22:42
also see references to things like the
1:22:42
also see references to things like the view container ref and the template ref
1:22:45
view container ref and the template ref
1:22:45
view container ref and the template ref now the view container ref and template
1:22:46
now the view container ref and template
1:22:46
now the view container ref and template ref are the dependencies of ngfs so ng
1:22:49
ref are the dependencies of ngfs so ng
1:22:49
ref are the dependencies of ngfs so ng if
1:22:50
if
1:22:50
if requires the view container f and
1:22:52
requires the view container f and
1:22:52
requires the view container f and template ref in order to generate itself
1:22:55
template ref in order to generate itself
1:22:55
template ref in order to generate itself now what you see here is that
1:22:58
now what you see here is that
1:22:58
now what you see here is that the template that is using ngef also has
1:23:01
the template that is using ngef also has
1:23:01
the template that is using ngef also has uh some sort of an implementation detail
1:23:04
uh some sort of an implementation detail
1:23:04
uh some sort of an implementation detail leakage of ngif
1:23:05
leakage of ngif
1:23:05
leakage of ngif right so it it still somehow references
1:23:08
right so it it still somehow references
1:23:08
right so it it still somehow references the view container f and template ref
1:23:10
the view container f and template ref
1:23:10
the view container f and template ref which is this is not so good because now
1:23:12
which is this is not so good because now
1:23:12
which is this is not so good because now if something changes in the app
1:23:14
if something changes in the app
1:23:14
if something changes in the app component
1:23:15
component
1:23:15
component even though something doesn't really
1:23:17
even though something doesn't really
1:23:17
even though something doesn't really change in the ng if structural directive
1:23:20
change in the ng if structural directive
1:23:20
change in the ng if structural directive the angular compiler will still have to
1:23:22
the angular compiler will still have to
1:23:22
the angular compiler will still have to compile or
1:23:23
compile or
1:23:23
compile or recompile that sort of uh that sort of
1:23:26
recompile that sort of uh that sort of
1:23:26
recompile that sort of uh that sort of files
1:23:27
files
1:23:27
files uh that might that might
1:23:30
uh that might that might
1:23:30
uh that might that might have changed right so it doesn't really
1:23:32
have changed right so it doesn't really
1:23:32
have changed right so it doesn't really have that sort of a guarantee that those
1:23:34
have that sort of a guarantee that those
1:23:34
have that sort of a guarantee that those files won't really change
1:23:35
files won't really change
1:23:35
files won't really change because here uh since we have this
1:23:38
because here uh since we have this
1:23:38
because here uh since we have this implementation detail leakage we cannot
1:23:40
implementation detail leakage we cannot
1:23:40
implementation detail leakage we cannot really be certain at this point that
1:23:42
really be certain at this point that
1:23:42
really be certain at this point that nothing might have changed in
1:23:43
nothing might have changed in
1:23:43
nothing might have changed in ngf so whenever anything used to change
1:23:46
ngf so whenever anything used to change
1:23:46
ngf so whenever anything used to change in
1:23:47
in
1:23:47
in in a component that used ng if for
1:23:50
in a component that used ng if for
1:23:50
in a component that used ng if for instance
1:23:50
instance
1:23:50
instance it used to trigger some sort of a global
1:23:53
it used to trigger some sort of a global
1:23:53
it used to trigger some sort of a global compilation in order to make sure that
1:23:54
compilation in order to make sure that
1:23:54
compilation in order to make sure that all things are there in place
1:23:57
all things are there in place
1:23:57
all things are there in place that's not really the case with iv
1:23:59
that's not really the case with iv
1:23:59
that's not really the case with iv because now with iv
1:24:00
because now with iv
1:24:00
because now with iv if if we compile the same component then
1:24:02
if if we compile the same component then
1:24:02
if if we compile the same component then it produces
1:24:03
it produces
1:24:03
it produces a file that looks something like this
1:24:05
a file that looks something like this
1:24:05
a file that looks something like this here as well we are using ngif
1:24:07
here as well we are using ngif
1:24:07
here as well we are using ngif but here we are not seeing those
1:24:09
but here we are not seeing those
1:24:09
but here we are not seeing those references to the view container ref or
1:24:11
references to the view container ref or
1:24:11
references to the view container ref or template ref
1:24:12
template ref
1:24:12
template ref right and now we only refer to any
1:24:16
right and now we only refer to any
1:24:16
right and now we only refer to any external dependency like
1:24:18
external dependency like
1:24:18
external dependency like ng if for example in this case uh via
1:24:21
ng if for example in this case uh via
1:24:21
ng if for example in this case uh via a very clean public api so what it means
1:24:24
a very clean public api so what it means
1:24:24
a very clean public api so what it means is if the public api of ng if doesn't
1:24:27
is if the public api of ng if doesn't
1:24:27
is if the public api of ng if doesn't really change
1:24:28
really change
1:24:28
really change the public api here can be considered as
1:24:30
the public api here can be considered as
1:24:30
the public api here can be considered as that d dot ts file
1:24:32
that d dot ts file
1:24:32
that d dot ts file uh if if you think about it from a
1:24:34
uh if if you think about it from a
1:24:34
uh if if you think about it from a typescript sort of perspective
1:24:36
typescript sort of perspective
1:24:36
typescript sort of perspective so if that dot ts file doesn't really
1:24:38
so if that dot ts file doesn't really
1:24:38
so if that dot ts file doesn't really change then
1:24:40
change then
1:24:40
change then we can be sure that that the specific
1:24:43
we can be sure that that the specific
1:24:43
we can be sure that that the specific building block in
1:24:44
building block in
1:24:44
building block in angular might have not changed and so it
1:24:46
angular might have not changed and so it
1:24:46
angular might have not changed and so it doesn't really need to recompile that
1:24:48
doesn't really need to recompile that
1:24:48
doesn't really need to recompile that that specific thing
1:24:49
that specific thing
1:24:49
that specific thing and so if something changes in in the
1:24:51
and so if something changes in in the
1:24:51
and so if something changes in in the app component then we
1:24:53
app component then we
1:24:53
app component then we only need to recompile or rebuild the
1:24:55
only need to recompile or rebuild the
1:24:55
only need to recompile or rebuild the app component and the rest of the things
1:24:56
app component and the rest of the things
1:24:56
app component and the rest of the things can be
1:24:57
can be
1:24:57
can be taken care of by the previous
1:25:00
taken care of by the previous
1:25:00
taken care of by the previous compilation results that we have
1:25:02
compilation results that we have
1:25:02
compilation results that we have so it results in in faster
1:25:05
so it results in in faster
1:25:05
so it results in in faster compilations faster bundle sizes and
1:25:06
compilations faster bundle sizes and
1:25:06
compilations faster bundle sizes and faster test execution
1:25:08
faster test execution
1:25:08
faster test execution as well and all of this happens because
1:25:10
as well and all of this happens because
1:25:10
as well and all of this happens because of these static fields that gets
1:25:12
of these static fields that gets
1:25:12
of these static fields that gets generated
1:25:13
generated
1:25:13
generated to the to the component because
1:25:17
to the to the component because
1:25:17
to the to the component because like this uh when we compile the app
1:25:20
like this uh when we compile the app
1:25:20
like this uh when we compile the app component for instance it
1:25:21
component for instance it
1:25:21
component for instance it attaches this theta cmp static field
1:25:23
attaches this theta cmp static field
1:25:23
attaches this theta cmp static field onto it right
1:25:24
onto it right
1:25:24
onto it right and so this is great because now for
1:25:27
and so this is great because now for
1:25:27
and so this is great because now for every specific building block that we
1:25:28
every specific building block that we
1:25:28
every specific building block that we have in an angular application
1:25:30
have in an angular application
1:25:30
have in an angular application whenever we compile that specific
1:25:32
whenever we compile that specific
1:25:32
whenever we compile that specific building block then it results in
1:25:34
building block then it results in
1:25:34
building block then it results in attaching one sort of a static field
1:25:36
attaching one sort of a static field
1:25:36
attaching one sort of a static field that basically defines everything that
1:25:39
that basically defines everything that
1:25:39
that basically defines everything that the runtime needs in order to for
1:25:41
the runtime needs in order to for
1:25:42
the runtime needs in order to for instance in case of a component
1:25:43
instance in case of a component
1:25:43
instance in case of a component render that component and detect changes
1:25:45
render that component and detect changes
1:25:45
render that component and detect changes on that component at runtime
1:25:48
on that component at runtime
1:25:48
on that component at runtime now all of this is great i tried to
1:25:50
now all of this is great i tried to
1:25:50
now all of this is great i tried to cover most of the things that i wanted
1:25:52
cover most of the things that i wanted
1:25:52
cover most of the things that i wanted to talk about in case of
1:25:54
to talk about in case of
1:25:54
to talk about in case of why iv was rewritten like why the whole
1:25:57
why iv was rewritten like why the whole
1:25:57
why iv was rewritten like why the whole template uh while why the whole
1:26:01
template uh while why the whole
1:26:01
template uh while why the whole compilation and rendering pipeline was
1:26:03
compilation and rendering pipeline was
1:26:03
compilation and rendering pipeline was rewritten
1:26:04
rewritten
1:26:04
rewritten but i i'm pretty sure that i walked
1:26:07
but i i'm pretty sure that i walked
1:26:07
but i i'm pretty sure that i walked through
1:26:07
through
1:26:08
through a lot of that quickly but i'm talking a
1:26:10
a lot of that quickly but i'm talking a
1:26:10
a lot of that quickly but i'm talking a lot about that
1:26:12
lot about that
1:26:12
lot about that in one of a session tomorrow so please
1:26:14
in one of a session tomorrow so please
1:26:14
in one of a session tomorrow so please do check that out
1:26:15
do check that out
1:26:15
do check that out i'll be sharing the slide and the link
1:26:17
i'll be sharing the slide and the link
1:26:17
i'll be sharing the slide and the link to that event is right here
1:26:19
to that event is right here
1:26:19
to that event is right here so please do check that out now coming
1:26:21
so please do check that out now coming
1:26:21
so please do check that out now coming back to the design goals i've
1:26:23
back to the design goals i've
1:26:24
back to the design goals i've quickly talked about the optimizability
1:26:25
quickly talked about the optimizability
1:26:25
quickly talked about the optimizability and incrementality part of it
1:26:27
and incrementality part of it
1:26:27
and incrementality part of it but this talk is mainly about the
1:26:29
but this talk is mainly about the
1:26:29
but this talk is mainly about the flexibility part of it
1:26:30
flexibility part of it
1:26:30
flexibility part of it as to what iv brings to the table for us
1:26:34
as to what iv brings to the table for us
1:26:34
as to what iv brings to the table for us right now and what it will be able to
1:26:36
right now and what it will be able to
1:26:36
right now and what it will be able to give us
1:26:37
give us
1:26:37
give us in the near future so let's talk about
1:26:39
in the near future so let's talk about
1:26:39
in the near future so let's talk about that now but before that let me shortly
1:26:41
that now but before that let me shortly
1:26:41
that now but before that let me shortly introduce myself my name is
1:26:43
introduce myself my name is
1:26:43
introduce myself my name is mera and i'm a full stack javascript
1:26:45
mera and i'm a full stack javascript
1:26:45
mera and i'm a full stack javascript developer based out in sydney australia
1:26:47
developer based out in sydney australia
1:26:47
developer based out in sydney australia i'm also a google developer expert for
1:26:49
i'm also a google developer expert for
1:26:49
i'm also a google developer expert for angular i write tech articles from time
1:26:52
angular i write tech articles from time
1:26:52
angular i write tech articles from time to time on
1:26:53
to time on
1:26:53
to time on publications like in-depth.dev and i'm
1:26:55
publications like in-depth.dev and i'm
1:26:55
publications like in-depth.dev and i'm an instructor of
1:26:56
an instructor of
1:26:56
an instructor of angular and firebase on platforms like
1:26:59
angular and firebase on platforms like
1:26:59
angular and firebase on platforms like packpub and udemy
1:27:01
packpub and udemy
1:27:01
packpub and udemy and just in case you might want to reach
1:27:02
and just in case you might want to reach
1:27:02
and just in case you might want to reach out to me here's my twitter handle right
1:27:04
out to me here's my twitter handle right
1:27:04
out to me here's my twitter handle right here
1:27:05
here
1:27:05
here so yeah come say hi all right
1:27:08
so yeah come say hi all right
1:27:08
so yeah come say hi all right now i have broken down this whole talk
1:27:10
now i have broken down this whole talk
1:27:10
now i have broken down this whole talk into two major segments one talks about
1:27:12
into two major segments one talks about
1:27:12
into two major segments one talks about the present and one talks about the
1:27:13
the present and one talks about the
1:27:13
the present and one talks about the future
1:27:14
future
1:27:14
future now i don't really have a lot of time
1:27:15
now i don't really have a lot of time
1:27:16
now i don't really have a lot of time right now so i'll probably be focusing
1:27:18
right now so i'll probably be focusing
1:27:18
right now so i'll probably be focusing more towards the future side
1:27:19
more towards the future side
1:27:19
more towards the future side and i'll just be uh representing the one
1:27:23
and i'll just be uh representing the one
1:27:23
and i'll just be uh representing the one one of the aspects about the present of
1:27:25
one of the aspects about the present of
1:27:25
one of the aspects about the present of what iv brings to the table
1:27:27
what iv brings to the table
1:27:27
what iv brings to the table so i'll be doing this with the help of
1:27:29
so i'll be doing this with the help of
1:27:29
so i'll be doing this with the help of an example
1:27:30
an example
1:27:30
an example that is lazily loading uh components so
1:27:33
that is lazily loading uh components so
1:27:33
that is lazily loading uh components so before iv came into the picture we could
1:27:36
before iv came into the picture we could
1:27:36
before iv came into the picture we could only
1:27:37
only
1:27:37
only lazily load modules right so whatever we
1:27:40
lazily load modules right so whatever we
1:27:40
lazily load modules right so whatever we wanted to
1:27:41
wanted to
1:27:41
wanted to load lazily on demand as a separate
1:27:43
load lazily on demand as a separate
1:27:43
load lazily on demand as a separate chunk we used to
1:27:44
chunk we used to
1:27:44
chunk we used to uh use the load children and then uh
1:27:48
uh use the load children and then uh
1:27:48
uh use the load children and then uh use routing somehow in order to load
1:27:51
use routing somehow in order to load
1:27:51
use routing somehow in order to load that specific thing lazily
1:27:53
that specific thing lazily
1:27:53
that specific thing lazily but that was eventually a module right
1:27:55
but that was eventually a module right
1:27:55
but that was eventually a module right what if
1:27:56
what if
1:27:56
what if what if i just wanted to load a
1:27:58
what if i just wanted to load a
1:27:58
what if i just wanted to load a component lazily
1:27:59
component lazily
1:27:59
component lazily well that is something that is now
1:28:00
well that is something that is now
1:28:00
well that is something that is now possible so let's see how that can
1:28:02
possible so let's see how that can
1:28:02
possible so let's see how that can happen
1:28:03
happen
1:28:03
happen so i have a very simple application out
1:28:05
so i have a very simple application out
1:28:05
so i have a very simple application out here and
1:28:06
here and
1:28:06
here and in this application i'm just going to
1:28:08
in this application i'm just going to
1:28:08
in this application i'm just going to lazily load a gif component that i have
1:28:10
lazily load a gif component that i have
1:28:10
lazily load a gif component that i have here
1:28:11
here
1:28:11
here now how this is going to be lazily
1:28:13
now how this is going to be lazily
1:28:13
now how this is going to be lazily loaded is that
1:28:15
loaded is that
1:28:15
loaded is that if you see the app module i don't really
1:28:17
if you see the app module i don't really
1:28:17
if you see the app module i don't really have that gif component added to the
1:28:19
have that gif component added to the
1:28:19
have that gif component added to the declarations array
1:28:20
declarations array
1:28:20
declarations array so it means that this particular
1:28:22
so it means that this particular
1:28:22
so it means that this particular component is not registered on the app
1:28:24
component is not registered on the app
1:28:24
component is not registered on the app module
1:28:25
module
1:28:25
module so the app module doesn't really have
1:28:27
so the app module doesn't really have
1:28:27
so the app module doesn't really have any prior
1:28:29
any prior
1:28:29
any prior meaning of the gif component as such
1:28:31
meaning of the gif component as such
1:28:31
meaning of the gif component as such right so how exactly
1:28:33
right so how exactly
1:28:33
right so how exactly do i load it dynamically and on demand
1:28:35
do i load it dynamically and on demand
1:28:36
do i load it dynamically and on demand so i just have a button over here
1:28:38
so i just have a button over here
1:28:38
so i just have a button over here and i've bind it to the click event on
1:28:40
and i've bind it to the click event on
1:28:40
and i've bind it to the click event on that button
1:28:41
that button
1:28:41
that button and it calls a method called load gif
1:28:43
and it calls a method called load gif
1:28:43
and it calls a method called load gif lazy
1:28:44
lazy
1:28:44
lazy and then there is also a div here this
1:28:46
and then there is also a div here this
1:28:46
and then there is also a div here this div acts as
1:28:47
div acts as
1:28:47
div acts as a host for the component that is going
1:28:50
a host for the component that is going
1:28:50
a host for the component that is going to be loaded dynamically
1:28:52
to be loaded dynamically
1:28:52
to be loaded dynamically so i have a template variable here
1:28:54
so i have a template variable here
1:28:54
so i have a template variable here that's called
1:28:55
that's called
1:28:55
that's called host for lazy component and then i'm
1:28:57
host for lazy component and then i'm
1:28:57
host for lazy component and then i'm referring to this div
1:28:59
referring to this div
1:28:59
referring to this div via this template variable
1:29:02
via this template variable
1:29:02
via this template variable using the view child decorator so that's
1:29:05
using the view child decorator so that's
1:29:05
using the view child decorator so that's the view child decorator right here
1:29:07
the view child decorator right here
1:29:08
the view child decorator right here and here is that name of the template
1:29:09
and here is that name of the template
1:29:09
and here is that name of the template variable and
1:29:11
variable and
1:29:11
variable and uh for the view child i can also pass in
1:29:13
uh for the view child i can also pass in
1:29:13
uh for the view child i can also pass in an optional
1:29:14
an optional
1:29:14
an optional second argument which is this
1:29:16
second argument which is this
1:29:16
second argument which is this configuration object that we have here
1:29:18
configuration object that we have here
1:29:18
configuration object that we have here here i'm passing the read property as
1:29:20
here i'm passing the read property as
1:29:20
here i'm passing the read property as view container ref because
1:29:22
view container ref because
1:29:22
view container ref because from this uh from this
1:29:25
from this uh from this
1:29:25
from this uh from this template variable i want to read the
1:29:28
template variable i want to read the
1:29:28
template variable i want to read the view container ref
1:29:29
view container ref
1:29:29
view container ref now i need the view container f because
1:29:31
now i need the view container f because
1:29:31
now i need the view container f because i'll be using it to
1:29:33
i'll be using it to
1:29:33
i'll be using it to dynamically load the component and then
1:29:35
dynamically load the component and then
1:29:35
dynamically load the component and then i'm also using a static of true because
1:29:37
i'm also using a static of true because
1:29:37
i'm also using a static of true because that's something that you use
1:29:38
that's something that you use
1:29:38
that's something that you use if you want to work with some things
1:29:41
if you want to work with some things
1:29:41
if you want to work with some things that
1:29:42
that
1:29:42
that you want to get evaluated at runtime
1:29:45
you want to get evaluated at runtime
1:29:45
you want to get evaluated at runtime right so this is what we do we refer to
1:29:48
right so this is what we do we refer to
1:29:48
right so this is what we do we refer to that host element using the view
1:29:50
that host element using the view
1:29:50
that host element using the view container ref
1:29:51
container ref
1:29:51
container ref we read the view container f and then we
1:29:54
we read the view container f and then we
1:29:54
we read the view container f and then we we set it to a property on my app
1:29:56
we set it to a property on my app
1:29:56
we set it to a property on my app component
1:29:57
component
1:29:57
component the name of that property is vcref great
1:30:01
the name of that property is vcref great
1:30:01
the name of that property is vcref great now let's see what's happening once the
1:30:03
now let's see what's happening once the
1:30:04
now let's see what's happening once the user clicks on the button so once the
1:30:05
user clicks on the button so once the
1:30:05
user clicks on the button so once the user clicks on the button it calls the
1:30:07
user clicks on the button it calls the
1:30:07
user clicks on the button it calls the load jiff lazily method
1:30:08
load jiff lazily method
1:30:08
load jiff lazily method let me just open this side by side so
1:30:11
let me just open this side by side so
1:30:11
let me just open this side by side so that it's a bit more
1:30:12
that it's a bit more
1:30:12
that it's a bit more understandable okay so what i'm doing
1:30:16
understandable okay so what i'm doing
1:30:16
understandable okay so what i'm doing here is
1:30:16
here is
1:30:16
here is in the load gif lazily method right here
1:30:20
in the load gif lazily method right here
1:30:20
in the load gif lazily method right here it is an async method because
1:30:22
it is an async method because
1:30:22
it is an async method because inside i'm calling a dynamic import
1:30:25
inside i'm calling a dynamic import
1:30:25
inside i'm calling a dynamic import statement
1:30:26
statement
1:30:26
statement to the gif component now the gif
1:30:27
to the gif component now the gif
1:30:28
to the gif component now the gif component is present right here
1:30:30
component is present right here
1:30:30
component is present right here on the exact same parallel path
1:30:33
on the exact same parallel path
1:30:33
on the exact same parallel path which is this so i will be
1:30:36
which is this so i will be
1:30:36
which is this so i will be using the dynamic import statement which
1:30:38
using the dynamic import statement which
1:30:38
using the dynamic import statement which is going to return to me a promise
1:30:40
is going to return to me a promise
1:30:40
is going to return to me a promise right now in order to unwrap that
1:30:42
right now in order to unwrap that
1:30:42
right now in order to unwrap that promise i'm using the await syntax and
1:30:45
promise i'm using the await syntax and
1:30:45
promise i'm using the await syntax and that's why i had to
1:30:47
that's why i had to
1:30:47
that's why i had to specify the method as an async method
1:30:50
specify the method as an async method
1:30:50
specify the method as an async method great so this is going to return to me
1:30:53
great so this is going to return to me
1:30:53
great so this is going to return to me the javascript module for the gif
1:30:56
the javascript module for the gif
1:30:56
the javascript module for the gif component
1:30:56
component
1:30:56
component out of which i'm destructuring out the
1:30:59
out of which i'm destructuring out the
1:30:59
out of which i'm destructuring out the gif component
1:31:00
gif component
1:31:00
gif component and once i have the drift component then
1:31:01
and once i have the drift component then
1:31:02
and once i have the drift component then i can pass it to
1:31:03
i can pass it to
1:31:03
i can pass it to uh the resolve component factory method
1:31:06
uh the resolve component factory method
1:31:06
uh the resolve component factory method of the component factory resolver
1:31:08
of the component factory resolver
1:31:08
of the component factory resolver now the component factory resolver is
1:31:10
now the component factory resolver is
1:31:10
now the component factory resolver is something that i have here
1:31:11
something that i have here
1:31:12
something that i have here injected as a dependency inside the
1:31:14
injected as a dependency inside the
1:31:14
injected as a dependency inside the constructor
1:31:15
constructor
1:31:15
constructor so i have the component factory resolver
1:31:17
so i have the component factory resolver
1:31:17
so i have the component factory resolver here and
1:31:19
here and
1:31:19
here and i'm calling the resolve component
1:31:20
i'm calling the resolve component
1:31:20
i'm calling the resolve component factory on it and passing it the gif
1:31:22
factory on it and passing it the gif
1:31:22
factory on it and passing it the gif component
1:31:23
component
1:31:23
component this gives me the component factory so
1:31:25
this gives me the component factory so
1:31:26
this gives me the component factory so this is
1:31:26
this is
1:31:26
this is the factory that i receive now this
1:31:30
the factory that i receive now this
1:31:30
the factory that i receive now this factory something that i will be passing
1:31:31
factory something that i will be passing
1:31:31
factory something that i will be passing to the view container refs
1:31:35
to the view container refs
1:31:35
to the view container refs create component method so we can call
1:31:38
create component method so we can call
1:31:38
create component method so we can call the create component method on the view
1:31:40
the create component method on the view
1:31:40
the create component method on the view container ref and then pass it a factory
1:31:42
container ref and then pass it a factory
1:31:42
container ref and then pass it a factory and that eventually is going to return
1:31:44
and that eventually is going to return
1:31:44
and that eventually is going to return to us an object
1:31:45
to us an object
1:31:45
to us an object inside which we will have a property
1:31:47
inside which we will have a property
1:31:47
inside which we will have a property named instance
1:31:48
named instance
1:31:48
named instance which will refer to that component
1:31:51
which will refer to that component
1:31:51
which will refer to that component instance that it has created
1:31:52
instance that it has created
1:31:52
instance that it has created and i'm aliasing that component instance
1:31:55
and i'm aliasing that component instance
1:31:55
and i'm aliasing that component instance to a
1:31:55
to a
1:31:56
to a property named component instance and
1:31:58
property named component instance and
1:31:58
property named component instance and then on that
1:31:59
then on that
1:31:59
then on that i can supply the gif source as an input
1:32:02
i can supply the gif source as an input
1:32:02
i can supply the gif source as an input property because this gif component
1:32:04
property because this gif component
1:32:04
property because this gif component right here
1:32:04
right here
1:32:04
right here also has this input property which is
1:32:07
also has this input property which is
1:32:08
also has this input property which is drift source so this is the app
1:32:10
drift source so this is the app
1:32:10
drift source so this is the app component
1:32:11
component
1:32:11
component i'm supplying the gif source to it once
1:32:14
i'm supplying the gif source to it once
1:32:14
i'm supplying the gif source to it once i have the component instance
1:32:16
i have the component instance
1:32:16
i have the component instance and with that let's see what happens so
1:32:20
and with that let's see what happens so
1:32:20
and with that let's see what happens so let me just open this
1:32:26
let me just open this
1:32:26
let me just open this um okay
1:32:30
um okay
1:32:30
um okay yeah i was here okay great so let me
1:32:34
yeah i was here okay great so let me
1:32:34
yeah i was here okay great so let me just reload this
1:32:35
just reload this
1:32:35
just reload this application and since i'll be loading
1:32:38
application and since i'll be loading
1:32:38
application and since i'll be loading this
1:32:38
this
1:32:38
this application this particular component on
1:32:40
application this particular component on
1:32:40
application this particular component on demand and lazily
1:32:42
demand and lazily
1:32:42
demand and lazily it shouldn't be a part of my main bundle
1:32:44
it shouldn't be a part of my main bundle
1:32:44
it shouldn't be a part of my main bundle anyways right because i have not
1:32:46
anyways right because i have not
1:32:46
anyways right because i have not uh specified it or registered it on my
1:32:49
uh specified it or registered it on my
1:32:49
uh specified it or registered it on my app module
1:32:50
app module
1:32:50
app module i have not specified it as a part of the
1:32:53
i have not specified it as a part of the
1:32:53
i have not specified it as a part of the declarations array anyways
1:32:54
declarations array anyways
1:32:54
declarations array anyways so that's why right so since i'm using a
1:32:57
so that's why right so since i'm using a
1:32:57
so that's why right so since i'm using a dynamic import statement
1:32:59
dynamic import statement
1:32:59
dynamic import statement this will be uh this will be
1:33:02
this will be uh this will be
1:33:02
this will be uh this will be uh created as a separate chunk by
1:33:05
uh created as a separate chunk by
1:33:05
uh created as a separate chunk by by webpack so uh
1:33:08
by webpack so uh
1:33:08
by webpack so uh this is something that will then be
1:33:10
this is something that will then be
1:33:10
this is something that will then be loaded by the
1:33:11
loaded by the
1:33:11
loaded by the via this dynamic import statement that i
1:33:14
via this dynamic import statement that i
1:33:14
via this dynamic import statement that i have here
1:33:15
have here
1:33:15
have here and so you will be seeing a network call
1:33:17
and so you will be seeing a network call
1:33:17
and so you will be seeing a network call that
1:33:18
that
1:33:18
that that goes on as soon as i click on the
1:33:20
that goes on as soon as i click on the
1:33:20
that goes on as soon as i click on the button so
1:33:21
button so
1:33:22
button so let's click on the button you will see a
1:33:24
let's click on the button you will see a
1:33:24
let's click on the button you will see a call was made to the gif component
1:33:26
call was made to the gif component
1:33:26
call was made to the gif component and here we have the the javascript for
1:33:30
and here we have the the javascript for
1:33:30
and here we have the the javascript for the gif component and as soon as that
1:33:32
the gif component and as soon as that
1:33:32
the gif component and as soon as that gif component is retrieved
1:33:34
gif component is retrieved
1:33:34
gif component is retrieved then this whole component factory
1:33:36
then this whole component factory
1:33:36
then this whole component factory resolver
1:33:37
resolver
1:33:38
resolver thing and the view container that's
1:33:39
thing and the view container that's
1:33:39
thing and the view container that's create component thing kicks in
1:33:41
create component thing kicks in
1:33:41
create component thing kicks in and eventually returns to us a component
1:33:43
and eventually returns to us a component
1:33:43
and eventually returns to us a component instance
1:33:44
instance
1:33:44
instance and then that component instance is
1:33:46
and then that component instance is
1:33:46
and then that component instance is something that is
1:33:47
something that is
1:33:47
something that is hosted on the
1:33:51
hosted on the
1:33:51
hosted on the host for lazy component right here
1:33:54
host for lazy component right here
1:33:54
host for lazy component right here so that's what i'm seeing here on the
1:33:56
so that's what i'm seeing here on the
1:33:56
so that's what i'm seeing here on the screen
1:33:57
screen
1:33:57
screen right this was not really possible uh
1:34:00
right this was not really possible uh
1:34:00
right this was not really possible uh prior to iv
1:34:01
prior to iv
1:34:01
prior to iv with angular 8 for instance if it was
1:34:03
with angular 8 for instance if it was
1:34:04
with angular 8 for instance if it was running uh
1:34:04
running uh
1:34:04
running uh the view engine but it is now possible
1:34:07
the view engine but it is now possible
1:34:07
the view engine but it is now possible with iv
1:34:08
with iv
1:34:08
with iv great so this is only one of the
1:34:10
great so this is only one of the
1:34:10
great so this is only one of the examples that i can show for the present
1:34:14
examples that i can show for the present
1:34:14
examples that i can show for the present let's now talk about the future so the
1:34:16
let's now talk about the future so the
1:34:16
let's now talk about the future so the future as well as something that i'll be
1:34:18
future as well as something that i'll be
1:34:18
future as well as something that i'll be demonstrating with a few examples
1:34:20
demonstrating with a few examples
1:34:20
demonstrating with a few examples uh but before talking about anything i
1:34:23
uh but before talking about anything i
1:34:23
uh but before talking about anything i just want to highlight one thing
1:34:25
just want to highlight one thing
1:34:25
just want to highlight one thing that one thing is that a lot of
1:34:27
that one thing is that a lot of
1:34:27
that one thing is that a lot of developers out there
1:34:28
developers out there
1:34:28
developers out there find angular to have a very steep
1:34:32
find angular to have a very steep
1:34:32
find angular to have a very steep learning curve because uh angular has
1:34:35
learning curve because uh angular has
1:34:35
learning curve because uh angular has quite a lot of concepts to
1:34:37
quite a lot of concepts to
1:34:37
quite a lot of concepts to be honest right angular has things like
1:34:39
be honest right angular has things like
1:34:39
be honest right angular has things like uh
1:34:40
uh
1:34:40
uh modules it has components it has
1:34:42
modules it has components it has
1:34:42
modules it has components it has directives pipes a lot of
1:34:43
directives pipes a lot of
1:34:43
directives pipes a lot of moving parts a lot of building blocks
1:34:46
moving parts a lot of building blocks
1:34:46
moving parts a lot of building blocks a lot of things to capture and acquire
1:34:49
a lot of things to capture and acquire
1:34:49
a lot of things to capture and acquire before you can even
1:34:50
before you can even
1:34:50
before you can even render a component as such right so
1:34:53
render a component as such right so
1:34:53
render a component as such right so that kind of feels intimidating to a lot
1:34:57
that kind of feels intimidating to a lot
1:34:57
that kind of feels intimidating to a lot of developers who are like really new to
1:34:59
of developers who are like really new to
1:34:59
of developers who are like really new to angular and so
1:35:00
angular and so
1:35:00
angular and so this is something that probably the
1:35:02
this is something that probably the
1:35:02
this is something that probably the angular team is trying to fix
1:35:04
angular team is trying to fix
1:35:04
angular team is trying to fix and so uh whatever i'll be demonstrating
1:35:07
and so uh whatever i'll be demonstrating
1:35:07
and so uh whatever i'll be demonstrating from this point on might basically blow
1:35:10
from this point on might basically blow
1:35:10
from this point on might basically blow your mind if you have not seen that
1:35:12
your mind if you have not seen that
1:35:12
your mind if you have not seen that prior to the stock so uh
1:35:16
prior to the stock so uh
1:35:16
prior to the stock so uh but before that i need to focus or i
1:35:19
but before that i need to focus or i
1:35:19
but before that i need to focus or i need to highlight one thing
1:35:20
need to highlight one thing
1:35:20
need to highlight one thing that one thing is that angular modules
1:35:23
that one thing is that angular modules
1:35:23
that one thing is that angular modules are link spins to angular applications
1:35:26
are link spins to angular applications
1:35:26
are link spins to angular applications what i mean by this is that angular
1:35:28
what i mean by this is that angular
1:35:28
what i mean by this is that angular modules take care of a lot of work that
1:35:30
modules take care of a lot of work that
1:35:30
modules take care of a lot of work that goes
1:35:31
goes
1:35:31
goes on or happens in the background without
1:35:33
on or happens in the background without
1:35:33
on or happens in the background without even
1:35:34
even
1:35:34
even us knowing about it so angular module
1:35:37
us knowing about it so angular module
1:35:37
us knowing about it so angular module takes care of a lot of things like
1:35:38
takes care of a lot of things like
1:35:38
takes care of a lot of things like uh dependency injection and change
1:35:41
uh dependency injection and change
1:35:41
uh dependency injection and change detection and stuff like that
1:35:43
detection and stuff like that
1:35:43
detection and stuff like that right but um if let's say that we are
1:35:47
right but um if let's say that we are
1:35:47
right but um if let's say that we are able to successfully render
1:35:49
able to successfully render
1:35:49
able to successfully render a component without even using angular
1:35:51
a component without even using angular
1:35:51
a component without even using angular module then these are a few things that
1:35:54
module then these are a few things that
1:35:54
module then these are a few things that probably won't be happening
1:35:57
probably won't be happening
1:35:57
probably won't be happening by default right so these are a few
1:35:59
by default right so these are a few
1:35:59
by default right so these are a few things that we will have to take care of
1:36:01
things that we will have to take care of
1:36:01
things that we will have to take care of on our own
1:36:02
on our own
1:36:02
on our own and so with that let's uh start with the
1:36:05
and so with that let's uh start with the
1:36:05
and so with that let's uh start with the first example wherein
1:36:06
first example wherein
1:36:06
first example wherein i will be rendering an angular component
1:36:09
i will be rendering an angular component
1:36:09
i will be rendering an angular component from scratch
1:36:10
from scratch
1:36:10
from scratch without using an angular module
1:36:13
without using an angular module
1:36:13
without using an angular module so how exactly do we do that well
1:36:17
so how exactly do we do that well
1:36:17
so how exactly do we do that well here we have an angular application and
1:36:19
here we have an angular application and
1:36:19
here we have an angular application and as you can see inside this angular
1:36:20
as you can see inside this angular
1:36:20
as you can see inside this angular application there are quite a lot of
1:36:21
application there are quite a lot of
1:36:22
application there are quite a lot of files
1:36:22
files
1:36:22
files out here right there is this app.module
1:36:24
out here right there is this app.module
1:36:24
out here right there is this app.module file and then
1:36:26
file and then
1:36:26
file and then it it all starts with this main.ts file
1:36:29
it it all starts with this main.ts file
1:36:29
it it all starts with this main.ts file which
1:36:29
which
1:36:29
which essentially is being referred to inside
1:36:32
essentially is being referred to inside
1:36:32
essentially is being referred to inside this angular.json file and
1:36:34
this angular.json file and
1:36:34
this angular.json file and there are basically a lot of files right
1:36:36
there are basically a lot of files right
1:36:36
there are basically a lot of files right but what if you just want to load one
1:36:38
but what if you just want to load one
1:36:38
but what if you just want to load one component
1:36:39
component
1:36:39
component right i mean you wouldn't really uh
1:36:42
right i mean you wouldn't really uh
1:36:42
right i mean you wouldn't really uh need all these things if you just wanted
1:36:44
need all these things if you just wanted
1:36:44
need all these things if you just wanted to load let's say
1:36:45
to load let's say
1:36:45
to load let's say an let's say a heading tag and a button
1:36:48
an let's say a heading tag and a button
1:36:48
an let's say a heading tag and a button and uh something might change in that
1:36:51
and uh something might change in that
1:36:51
and uh something might change in that heading once you click on that button
1:36:52
heading once you click on that button
1:36:52
heading once you click on that button right
1:36:53
right
1:36:53
right so how exactly can we achieve such
1:36:57
so how exactly can we achieve such
1:36:57
so how exactly can we achieve such a scenario well
1:37:00
a scenario well
1:37:00
a scenario well this is something that can be done uh
1:37:02
this is something that can be done uh
1:37:02
this is something that can be done uh with this
1:37:03
with this
1:37:03
with this so here is one such example let me just
1:37:06
so here is one such example let me just
1:37:06
so here is one such example let me just uh
1:37:06
uh
1:37:06
uh make this full screen yeah
1:37:09
make this full screen yeah
1:37:10
make this full screen yeah okay great so i'm using stack bloods
1:37:11
okay great so i'm using stack bloods
1:37:11
okay great so i'm using stack bloods here because
1:37:13
here because
1:37:13
here because i really like stack blades and it's it's
1:37:15
i really like stack blades and it's it's
1:37:15
i really like stack blades and it's it's it's perfect for
1:37:16
it's perfect for
1:37:16
it's perfect for such use cases so this is
1:37:19
such use cases so this is
1:37:19
such use cases so this is a very simple angular application i'll
1:37:22
a very simple angular application i'll
1:37:22
a very simple angular application i'll probably not call it an angular
1:37:24
probably not call it an angular
1:37:24
probably not call it an angular application because it is just rendering
1:37:26
application because it is just rendering
1:37:26
application because it is just rendering one
1:37:26
one
1:37:26
one angular component from scratch but
1:37:29
angular component from scratch but
1:37:29
angular component from scratch but without using angular modules
1:37:31
without using angular modules
1:37:31
without using angular modules so uh just like a regular angular
1:37:33
so uh just like a regular angular
1:37:34
so uh just like a regular angular application you won't really see a lot
1:37:35
application you won't really see a lot
1:37:35
application you won't really see a lot of those different files like the app
1:37:37
of those different files like the app
1:37:37
of those different files like the app module.js or sorry app module.ts and
1:37:40
module.js or sorry app module.ts and
1:37:40
module.js or sorry app module.ts and angular.json
1:37:41
angular.json
1:37:41
angular.json and main.ts right there is just four
1:37:44
and main.ts right there is just four
1:37:44
and main.ts right there is just four files over here
1:37:45
files over here
1:37:45
files over here there is an index.html file that just
1:37:48
there is an index.html file that just
1:37:48
there is an index.html file that just has an
1:37:48
has an
1:37:48
has an iv tag then there is a package.json and
1:37:51
iv tag then there is a package.json and
1:37:52
iv tag then there is a package.json and this package.json looks like a regular
1:37:53
this package.json looks like a regular
1:37:54
this package.json looks like a regular package.json it has a few dependencies
1:37:56
package.json it has a few dependencies
1:37:56
package.json it has a few dependencies the main dependencies that i have here
1:37:58
the main dependencies that i have here
1:37:58
the main dependencies that i have here are angular core because
1:38:00
are angular core because
1:38:00
are angular core because that's the only thing that i need to
1:38:02
that's the only thing that i need to
1:38:02
that's the only thing that i need to depend on right now
1:38:03
depend on right now
1:38:03
depend on right now uh i'm still getting uh
1:38:06
uh i'm still getting uh
1:38:06
uh i'm still getting uh these things like rxjs tslip and zone js
1:38:09
these things like rxjs tslip and zone js
1:38:09
these things like rxjs tslip and zone js because these are peer dependencies to
1:38:11
because these are peer dependencies to
1:38:11
because these are peer dependencies to angular course so i'll
1:38:12
angular course so i'll
1:38:12
angular course so i'll i'll probably not be able to get rid of
1:38:14
i'll probably not be able to get rid of
1:38:14
i'll probably not be able to get rid of them yet
1:38:16
them yet
1:38:16
them yet right but as you can see here is only
1:38:19
right but as you can see here is only
1:38:19
right but as you can see here is only these four dependencies
1:38:20
these four dependencies
1:38:20
these four dependencies but if you open up a regular angular
1:38:22
but if you open up a regular angular
1:38:22
but if you open up a regular angular application then you'll see a lot of
1:38:24
application then you'll see a lot of
1:38:24
application then you'll see a lot of these things
1:38:25
these things
1:38:25
these things like a lot of these things that we
1:38:27
like a lot of these things that we
1:38:27
like a lot of these things that we generally don't even use
1:38:28
generally don't even use
1:38:28
generally don't even use like animations for instance we don't
1:38:30
like animations for instance we don't
1:38:30
like animations for instance we don't really use animations
1:38:32
really use animations
1:38:32
really use animations in in very simple applications anyways
1:38:36
in in very simple applications anyways
1:38:36
in in very simple applications anyways so what exactly is the trick here
1:38:39
so what exactly is the trick here
1:38:39
so what exactly is the trick here now remember that in in one of the
1:38:41
now remember that in in one of the
1:38:41
now remember that in in one of the previous examples that i said that
1:38:45
previous examples that i said that
1:38:45
previous examples that i said that whenever you compile an angular
1:38:47
whenever you compile an angular
1:38:47
whenever you compile an angular component it
1:38:48
component it
1:38:48
component it the compiler adds a few static fields
1:38:51
the compiler adds a few static fields
1:38:51
the compiler adds a few static fields to the angular component and this
1:38:54
to the angular component and this
1:38:54
to the angular component and this component
1:38:55
component
1:38:55
component these static fields are basically having
1:38:57
these static fields are basically having
1:38:57
these static fields are basically having all the necessary information that
1:38:59
all the necessary information that
1:38:59
all the necessary information that angular runtime needs in order to render
1:39:01
angular runtime needs in order to render
1:39:01
angular runtime needs in order to render a component and detect changes on
1:39:03
a component and detect changes on
1:39:03
a component and detect changes on on that component at runtime right so
1:39:05
on that component at runtime right so
1:39:06
on that component at runtime right so that's uh
1:39:06
that's uh
1:39:06
that's uh something that we are going to
1:39:09
something that we are going to
1:39:10
something that we are going to manually type in and we are going to do
1:39:12
manually type in and we are going to do
1:39:12
manually type in and we are going to do that with the help of
1:39:13
that with the help of
1:39:13
that with the help of a few uh a few iv instructions that i
1:39:17
a few uh a few iv instructions that i
1:39:17
a few uh a few iv instructions that i was talking about so these iv
1:39:19
was talking about so these iv
1:39:19
was talking about so these iv instructions are
1:39:20
instructions are
1:39:20
instructions are a few functions that i can directly
1:39:22
a few functions that i can directly
1:39:22
a few functions that i can directly import from angular core
1:39:24
import from angular core
1:39:24
import from angular core most of these functions are prefixed
1:39:27
most of these functions are prefixed
1:39:27
most of these functions are prefixed with
1:39:27
with
1:39:27
with this theta theta symbol the reason for
1:39:29
this theta theta symbol the reason for
1:39:29
this theta theta symbol the reason for that is that angular team
1:39:31
that is that angular team
1:39:31
that is that angular team wants to tell you that okay this is
1:39:33
wants to tell you that okay this is
1:39:33
wants to tell you that okay this is private in nature and you cannot really
1:39:35
private in nature and you cannot really
1:39:35
private in nature and you cannot really use it
1:39:36
use it
1:39:36
use it on production uh applications on like
1:39:39
on production uh applications on like
1:39:39
on production uh applications on like you cannot use it on production
1:39:41
you cannot use it on production
1:39:41
you cannot use it on production right but still if you are like thrill
1:39:44
right but still if you are like thrill
1:39:44
right but still if you are like thrill seekers and you just want to uh
1:39:46
seekers and you just want to uh
1:39:46
seekers and you just want to uh you know make some experiments with it
1:39:49
you know make some experiments with it
1:39:49
you know make some experiments with it then
1:39:50
then
1:39:50
then sure go ahead anyways so i'm importing a
1:39:53
sure go ahead anyways so i'm importing a
1:39:53
sure go ahead anyways so i'm importing a lot of these
1:39:53
lot of these
1:39:54
lot of these functions from angular core and then
1:39:57
functions from angular core and then
1:39:57
functions from angular core and then i have a very simple typescript class
1:39:59
i have a very simple typescript class
1:39:59
i have a very simple typescript class this
1:40:00
this
1:40:00
this class is named iv component it has a
1:40:02
class is named iv component it has a
1:40:02
class is named iv component it has a very simple name property and
1:40:05
very simple name property and
1:40:05
very simple name property and another simple toggle name method but
1:40:07
another simple toggle name method but
1:40:07
another simple toggle name method but apart from these two
1:40:09
apart from these two
1:40:09
apart from these two uh property and methods respectively it
1:40:12
uh property and methods respectively it
1:40:12
uh property and methods respectively it also has two static fields
1:40:13
also has two static fields
1:40:13
also has two static fields one of the static field is this theta
1:40:15
one of the static field is this theta
1:40:16
one of the static field is this theta fac static field that we can see right
1:40:18
fac static field that we can see right
1:40:18
fac static field that we can see right here
1:40:18
here
1:40:18
here let me just zoom this in a bit more so
1:40:21
let me just zoom this in a bit more so
1:40:22
let me just zoom this in a bit more so this theta fac static field is
1:40:25
this theta fac static field is
1:40:25
this theta fac static field is a function that returns to us
1:40:28
a function that returns to us
1:40:28
a function that returns to us an instance of either a token if we pass
1:40:31
an instance of either a token if we pass
1:40:32
an instance of either a token if we pass it a token or
1:40:33
it a token or
1:40:33
it a token or an instance of the component class
1:40:35
an instance of the component class
1:40:35
an instance of the component class itself
1:40:36
itself
1:40:36
itself so this is the theta fac static field
1:40:39
so this is the theta fac static field
1:40:39
so this is the theta fac static field right and it is responsible for creating
1:40:41
right and it is responsible for creating
1:40:41
right and it is responsible for creating an instance
1:40:42
an instance
1:40:42
an instance of that component and then there is also
1:40:45
of that component and then there is also
1:40:45
of that component and then there is also a theta cmp static field that is a
1:40:47
a theta cmp static field that is a
1:40:47
a theta cmp static field that is a result of calling the
1:40:49
result of calling the
1:40:49
result of calling the define component iv instruction now the
1:40:51
define component iv instruction now the
1:40:51
define component iv instruction now the define component is also something that
1:40:52
define component is also something that
1:40:52
define component is also something that i'm
1:40:53
i'm
1:40:53
i'm importing from angular core now this
1:40:56
importing from angular core now this
1:40:56
importing from angular core now this define component iv instruction is
1:40:58
define component iv instruction is
1:40:58
define component iv instruction is called with a javascript object
1:41:00
called with a javascript object
1:41:00
called with a javascript object and this javascript object has a lot of
1:41:02
and this javascript object has a lot of
1:41:02
and this javascript object has a lot of things like the type and the selector
1:41:04
things like the type and the selector
1:41:04
things like the type and the selector and declaration
1:41:05
and declaration
1:41:05
and declaration declarations and variables and
1:41:07
declarations and variables and
1:41:07
declarations and variables and constraints
1:41:08
constraints
1:41:08
constraints but let's not focus on all these right
1:41:10
but let's not focus on all these right
1:41:10
but let's not focus on all these right now let's purely focus on this template
1:41:13
now let's purely focus on this template
1:41:13
now let's purely focus on this template function
1:41:14
function
1:41:14
function the template function is something that
1:41:16
the template function is something that
1:41:16
the template function is something that is called by uh
1:41:18
is called by uh
1:41:18
is called by uh called by the angular runtime when it
1:41:20
called by the angular runtime when it
1:41:20
called by the angular runtime when it has to render this
1:41:21
has to render this
1:41:21
has to render this component and it renders this component
1:41:24
component and it renders this component
1:41:24
component and it renders this component in two phases or two passes
1:41:27
in two phases or two passes
1:41:27
in two phases or two passes and that pass or phase is determined by
1:41:30
and that pass or phase is determined by
1:41:30
and that pass or phase is determined by the render flag
1:41:31
the render flag
1:41:31
the render flag now if the value of render flag is 1
1:41:34
now if the value of render flag is 1
1:41:34
now if the value of render flag is 1 then
1:41:35
then
1:41:35
then it can be considered that this is the
1:41:36
it can be considered that this is the
1:41:36
it can be considered that this is the initialization phase
1:41:38
initialization phase
1:41:38
initialization phase and if the value is 2 then it can be
1:41:41
and if the value is 2 then it can be
1:41:41
and if the value is 2 then it can be considered as the change detection phase
1:41:43
considered as the change detection phase
1:41:43
considered as the change detection phase so in the initialization phase what
1:41:45
so in the initialization phase what
1:41:45
so in the initialization phase what happens is that it is calling a few
1:41:47
happens is that it is calling a few
1:41:47
happens is that it is calling a few functions right
1:41:48
functions right
1:41:48
functions right from angular core so element start
1:41:51
from angular core so element start
1:41:51
from angular core so element start element and for instance
1:41:52
element and for instance
1:41:52
element and for instance all of these functions are imported from
1:41:54
all of these functions are imported from
1:41:54
all of these functions are imported from angular core itself
1:41:56
angular core itself
1:41:56
angular core itself so you can think of these
1:41:59
so you can think of these
1:42:00
so you can think of these calls to these specific iv instructions
1:42:02
calls to these specific iv instructions
1:42:02
calls to these specific iv instructions as something that you can
1:42:04
as something that you can
1:42:04
as something that you can see here in the in the comments
1:42:07
see here in the in the comments
1:42:07
see here in the in the comments so element starts starts an element
1:42:10
so element starts starts an element
1:42:10
so element starts starts an element which is of type
1:42:11
which is of type
1:42:11
which is of type h1 but it is also stored at a zeroth
1:42:14
h1 but it is also stored at a zeroth
1:42:14
h1 but it is also stored at a zeroth index
1:42:14
index
1:42:14
index so angular is somehow maintaining some
1:42:17
so angular is somehow maintaining some
1:42:17
so angular is somehow maintaining some sort of a data structure in the
1:42:18
sort of a data structure in the
1:42:18
sort of a data structure in the background
1:42:19
background
1:42:19
background and it is storing these uh specific
1:42:21
and it is storing these uh specific
1:42:21
and it is storing these uh specific elements that it is creating on those
1:42:23
elements that it is creating on those
1:42:23
elements that it is creating on those specific indices
1:42:25
specific indices
1:42:25
specific indices so uh this line creates and starts an h1
1:42:28
so uh this line creates and starts an h1
1:42:28
so uh this line creates and starts an h1 tag
1:42:28
tag
1:42:28
tag then this line which is the text which
1:42:31
then this line which is the text which
1:42:31
then this line which is the text which is the call
1:42:32
is the call
1:42:32
is the call to the text function or the text iv
1:42:34
to the text function or the text iv
1:42:34
to the text function or the text iv instruction which is now stored at the
1:42:36
instruction which is now stored at the
1:42:36
instruction which is now stored at the first index on the data structure
1:42:38
first index on the data structure
1:42:38
first index on the data structure is creating a name property
1:42:41
is creating a name property
1:42:41
is creating a name property so here we will be seeing a name and
1:42:44
so here we will be seeing a name and
1:42:44
so here we will be seeing a name and then
1:42:44
then
1:42:44
then element and ends that element which is
1:42:47
element and ends that element which is
1:42:47
element and ends that element which is h1
1:42:48
h1
1:42:48
h1 so uh these three function
1:42:51
so uh these three function
1:42:51
so uh these three function calls are going to eventually create
1:42:55
calls are going to eventually create
1:42:55
calls are going to eventually create a template that might look something
1:42:56
a template that might look something
1:42:56
a template that might look something like this so we have an h1 tag
1:42:58
like this so we have an h1 tag
1:42:58
like this so we have an h1 tag then there is a name property somehow
1:43:00
then there is a name property somehow
1:43:00
then there is a name property somehow rendered over here as text
1:43:02
rendered over here as text
1:43:02
rendered over here as text and then the h1 tag ends let's move on
1:43:05
and then the h1 tag ends let's move on
1:43:05
and then the h1 tag ends let's move on and talk about the
1:43:06
and talk about the
1:43:06
and talk about the second thing which is element start
1:43:08
second thing which is element start
1:43:08
second thing which is element start button so
1:43:09
button so
1:43:10
button so here it's starting a button element now
1:43:12
here it's starting a button element now
1:43:12
here it's starting a button element now but on that button element i can also
1:43:14
but on that button element i can also
1:43:14
but on that button element i can also listen to the click event
1:43:16
listen to the click event
1:43:16
listen to the click event so uh this is how you will generally
1:43:20
so uh this is how you will generally
1:43:20
so uh this is how you will generally write a click event on a button in
1:43:22
write a click event on a button in
1:43:22
write a click event on a button in angular right
1:43:23
angular right
1:43:23
angular right so this is how it looks like and then on
1:43:26
so this is how it looks like and then on
1:43:26
so this is how it looks like and then on the click of that button i need to call
1:43:28
the click of that button i need to call
1:43:28
the click of that button i need to call the
1:43:28
the
1:43:28
the toggle name method that i will be
1:43:30
toggle name method that i will be
1:43:30
toggle name method that i will be receiving from the context
1:43:32
receiving from the context
1:43:32
receiving from the context now the context is can be considered as
1:43:35
now the context is can be considered as
1:43:35
now the context is can be considered as the instance of this
1:43:36
the instance of this
1:43:36
the instance of this iv component class so the instance would
1:43:39
iv component class so the instance would
1:43:39
iv component class so the instance would eventually have
1:43:40
eventually have
1:43:40
eventually have the name property and the toggle name
1:43:42
the name property and the toggle name
1:43:42
the name property and the toggle name method because
1:43:43
method because
1:43:43
method because the name property and the toggle name
1:43:45
the name property and the toggle name
1:43:45
the name property and the toggle name method are something that i'm
1:43:46
method are something that i'm
1:43:46
method are something that i'm already having on this component class
1:43:49
already having on this component class
1:43:49
already having on this component class these two
1:43:50
these two
1:43:50
these two right uh so yeah we are binding to
1:43:54
right uh so yeah we are binding to
1:43:54
right uh so yeah we are binding to the click event on this button and once
1:43:58
the click event on this button and once
1:43:58
the click event on this button and once the click
1:43:58
the click
1:43:58
the click happens then we are calling the toggle
1:44:00
happens then we are calling the toggle
1:44:00
happens then we are calling the toggle name method and then there is also a
1:44:02
name method and then there is also a
1:44:02
name method and then there is also a text node on that button
1:44:03
text node on that button
1:44:03
text node on that button uh the value of the text node is change
1:44:05
uh the value of the text node is change
1:44:06
uh the value of the text node is change name so this is how it looks like so
1:44:07
name so this is how it looks like so
1:44:07
name so this is how it looks like so there's a button there's a clicky event
1:44:09
there's a button there's a clicky event
1:44:09
there's a button there's a clicky event on it and then
1:44:10
on it and then
1:44:10
on it and then the text that we see on the button is
1:44:12
the text that we see on the button is
1:44:12
the text that we see on the button is change name and then there is
1:44:14
change name and then there is
1:44:14
change name and then there is element end which ends the button tag so
1:44:17
element end which ends the button tag so
1:44:17
element end which ends the button tag so end tag like this right
1:44:20
end tag like this right
1:44:20
end tag like this right and then so this is the initialization
1:44:22
and then so this is the initialization
1:44:22
and then so this is the initialization phase wherein the whole
1:44:23
phase wherein the whole
1:44:23
phase wherein the whole template initializes and uh this is
1:44:27
template initializes and uh this is
1:44:27
template initializes and uh this is a regular html markup that you generally
1:44:30
a regular html markup that you generally
1:44:30
a regular html markup that you generally are used to seeing
1:44:31
are used to seeing
1:44:31
are used to seeing right then we have the second phase
1:44:34
right then we have the second phase
1:44:34
right then we have the second phase which is the
1:44:35
which is the
1:44:35
which is the change detection phase which is uh which
1:44:37
change detection phase which is uh which
1:44:37
change detection phase which is uh which is supplied by the render flag
1:44:39
is supplied by the render flag
1:44:39
is supplied by the render flag value two so what happens in this case
1:44:42
value two so what happens in this case
1:44:42
value two so what happens in this case is
1:44:42
is
1:44:42
is uh it starts with the zeroth index and
1:44:45
uh it starts with the zeroth index and
1:44:45
uh it starts with the zeroth index and then it advances by one
1:44:47
then it advances by one
1:44:47
then it advances by one so from zero it reaches to one
1:44:50
so from zero it reaches to one
1:44:50
so from zero it reaches to one now on the first index we have the
1:44:53
now on the first index we have the
1:44:53
now on the first index we have the name right so then what it will
1:44:56
name right so then what it will
1:44:56
name right so then what it will do is it will interpolate that text
1:45:00
do is it will interpolate that text
1:45:00
do is it will interpolate that text with something else so it then calls the
1:45:03
with something else so it then calls the
1:45:03
with something else so it then calls the text interpolate one
1:45:04
text interpolate one
1:45:04
text interpolate one iv instruction it will pass in a prefix
1:45:08
iv instruction it will pass in a prefix
1:45:08
iv instruction it will pass in a prefix then the property that needs to be
1:45:10
then the property that needs to be
1:45:10
then the property that needs to be binded to and then the suffix
1:45:13
binded to and then the suffix
1:45:13
binded to and then the suffix and after that it's going to end
1:45:16
and after that it's going to end
1:45:16
and after that it's going to end so with all that in place this is how
1:45:19
so with all that in place this is how
1:45:19
so with all that in place this is how the component gets rendered so i see an
1:45:22
the component gets rendered so i see an
1:45:22
the component gets rendered so i see an h1 tag here
1:45:24
h1 tag here
1:45:24
h1 tag here and then there is also a button right
1:45:26
and then there is also a button right
1:45:26
and then there is also a button right now
1:45:27
now
1:45:27
now uh as we have binded to the click event
1:45:30
uh as we have binded to the click event
1:45:30
uh as we have binded to the click event on the button and we are calling the
1:45:31
on the button and we are calling the
1:45:31
on the button and we are calling the toggle name
1:45:32
toggle name
1:45:32
toggle name which would eventually toggle the name
1:45:35
which would eventually toggle the name
1:45:35
which would eventually toggle the name property from
1:45:36
property from
1:45:36
property from this dot name whatever it was to iv
1:45:39
this dot name whatever it was to iv
1:45:39
this dot name whatever it was to iv or sid like it will oscillate between
1:45:42
or sid like it will oscillate between
1:45:42
or sid like it will oscillate between these two values great
1:45:44
these two values great
1:45:44
these two values great so let me just click on the button
1:45:47
so let me just click on the button
1:45:47
so let me just click on the button uh now i'm clicking on the button but
1:45:50
uh now i'm clicking on the button but
1:45:50
uh now i'm clicking on the button but the value is not getting changed
1:45:53
the value is not getting changed
1:45:53
the value is not getting changed and that's strange right well if you
1:45:55
and that's strange right well if you
1:45:55
and that's strange right well if you think about it it's not
1:45:57
think about it it's not
1:45:57
think about it it's not such it's not so strange because here
1:46:00
such it's not so strange because here
1:46:00
such it's not so strange because here uh when i said that angular applications
1:46:03
uh when i said that angular applications
1:46:03
uh when i said that angular applications are sorry angular modules are linchpins
1:46:06
are sorry angular modules are linchpins
1:46:06
are sorry angular modules are linchpins to angular applications
1:46:07
to angular applications
1:46:07
to angular applications this is exactly what i meant right we
1:46:10
this is exactly what i meant right we
1:46:10
this is exactly what i meant right we are not really using angular modules in
1:46:11
are not really using angular modules in
1:46:12
are not really using angular modules in order to create this or render this
1:46:13
order to create this or render this
1:46:13
order to create this or render this component
1:46:14
component
1:46:14
component on onto the ui right and so a lot of
1:46:17
on onto the ui right and so a lot of
1:46:17
on onto the ui right and so a lot of things
1:46:17
things
1:46:18
things that we use to get out of the box using
1:46:20
that we use to get out of the box using
1:46:20
that we use to get out of the box using angular modules
1:46:21
angular modules
1:46:22
angular modules is something that we won't be uh getting
1:46:24
is something that we won't be uh getting
1:46:24
is something that we won't be uh getting out of the box
1:46:25
out of the box
1:46:25
out of the box and change detection is one such thing
1:46:28
and change detection is one such thing
1:46:28
and change detection is one such thing so
1:46:28
so
1:46:28
so uh that's what's happening over here
1:46:32
uh that's what's happening over here
1:46:32
uh that's what's happening over here um let me just uh
1:46:35
um let me just uh
1:46:35
um let me just uh pull this onto a separate screen great
1:46:38
pull this onto a separate screen great
1:46:38
pull this onto a separate screen great yeah so uh that's exactly what's
1:46:40
yeah so uh that's exactly what's
1:46:40
yeah so uh that's exactly what's happening here we are
1:46:41
happening here we are
1:46:41
happening here we are actually calling the toggle name method
1:46:43
actually calling the toggle name method
1:46:44
actually calling the toggle name method and the toggle name method is also being
1:46:45
and the toggle name method is also being
1:46:46
and the toggle name method is also being called
1:46:46
called
1:46:46
called but and the change name method sorry the
1:46:49
but and the change name method sorry the
1:46:49
but and the change name method sorry the change name uh the
1:46:50
change name uh the
1:46:50
change name uh the name property itself is also getting
1:46:52
name property itself is also getting
1:46:52
name property itself is also getting changed but change detection is not
1:46:55
changed but change detection is not
1:46:55
changed but change detection is not getting uh triggered and so in order to
1:46:58
getting uh triggered and so in order to
1:46:58
getting uh triggered and so in order to detect changes there is also another
1:47:00
detect changes there is also another
1:47:00
detect changes there is also another iv instruction that we can use and that
1:47:03
iv instruction that we can use and that
1:47:03
iv instruction that we can use and that is the mark dirty iv instruction
1:47:05
is the mark dirty iv instruction
1:47:05
is the mark dirty iv instruction so i can call the mark dirty iv
1:47:06
so i can call the mark dirty iv
1:47:06
so i can call the mark dirty iv instruction
1:47:08
instruction
1:47:08
instruction that's something that i'll be calling
1:47:10
that's something that i'll be calling
1:47:10
that's something that i'll be calling right after i have changed
1:47:11
right after i have changed
1:47:11
right after i have changed the name so right here and then i'll
1:47:14
the name so right here and then i'll
1:47:14
the name so right here and then i'll pass it the instance of this
1:47:16
pass it the instance of this
1:47:16
pass it the instance of this and with that as soon as i save that
1:47:18
and with that as soon as i save that
1:47:18
and with that as soon as i save that let's click on the change name button
1:47:20
let's click on the change name button
1:47:20
let's click on the change name button again
1:47:20
again
1:47:20
again and as you can see the name changes now
1:47:25
and as you can see the name changes now
1:47:25
and as you can see the name changes now right and all of this is happening
1:47:27
right and all of this is happening
1:47:28
right and all of this is happening without angular modules
1:47:30
without angular modules
1:47:30
without angular modules from scratch right now
1:47:33
from scratch right now
1:47:33
from scratch right now i mean i can give you a moment to
1:47:36
i mean i can give you a moment to
1:47:36
i mean i can give you a moment to basically
1:47:37
basically
1:47:37
basically just visualize what just happened and uh
1:47:41
just visualize what just happened and uh
1:47:41
just visualize what just happened and uh then you'll probably be able to
1:47:42
then you'll probably be able to
1:47:42
then you'll probably be able to appreciate how great this is
1:47:45
appreciate how great this is
1:47:45
appreciate how great this is but i don't really have time uh so i'll
1:47:48
but i don't really have time uh so i'll
1:47:48
but i don't really have time uh so i'll probably
1:47:49
probably
1:47:49
probably continue uh anyways so this was the
1:47:51
continue uh anyways so this was the
1:47:51
continue uh anyways so this was the first example
1:47:52
first example
1:47:52
first example now there is a challenge with this
1:47:55
now there is a challenge with this
1:47:55
now there is a challenge with this particular example though
1:47:56
particular example though
1:47:56
particular example though the challenge here is that this is the
1:47:58
the challenge here is that this is the
1:47:58
the challenge here is that this is the sort of code that you are not really
1:48:00
sort of code that you are not really
1:48:00
sort of code that you are not really used to
1:48:01
used to
1:48:01
used to writing as angular developers right
1:48:03
writing as angular developers right
1:48:03
writing as angular developers right you're not really used to
1:48:05
you're not really used to
1:48:05
you're not really used to call those specific iv instructions in
1:48:07
call those specific iv instructions in
1:48:08
call those specific iv instructions in order to render something you are just
1:48:09
order to render something you are just
1:48:09
order to render something you are just used to typing in that html part so that
1:48:12
used to typing in that html part so that
1:48:12
used to typing in that html part so that it gets rendered and then the typescript
1:48:14
it gets rendered and then the typescript
1:48:14
it gets rendered and then the typescript part of it
1:48:15
part of it
1:48:15
part of it and everything is taken care of by
1:48:17
and everything is taken care of by
1:48:17
and everything is taken care of by angular in the background
1:48:19
angular in the background
1:48:19
angular in the background right now i also said that this sort of
1:48:23
right now i also said that this sort of
1:48:23
right now i also said that this sort of this sort of a code is something that
1:48:25
this sort of a code is something that
1:48:25
this sort of a code is something that gets generated by
1:48:26
gets generated by
1:48:26
gets generated by angular right so if you compile your
1:48:29
angular right so if you compile your
1:48:29
angular right so if you compile your angular
1:48:31
angular
1:48:31
angular component for instance this is the sort
1:48:33
component for instance this is the sort
1:48:33
component for instance this is the sort of code that
1:48:34
of code that
1:48:34
of code that angular component the the angular
1:48:36
angular component the the angular
1:48:36
angular component the the angular compiler is going to generate for you
1:48:39
compiler is going to generate for you
1:48:39
compiler is going to generate for you so if you think about it the angular
1:48:42
so if you think about it the angular
1:48:42
so if you think about it the angular comp
1:48:42
comp
1:48:42
comp the angular compiler is going to attach
1:48:46
the angular compiler is going to attach
1:48:46
the angular compiler is going to attach these two static fields onto your
1:48:48
these two static fields onto your
1:48:48
these two static fields onto your typescript class if you pass this
1:48:50
typescript class if you pass this
1:48:50
typescript class if you pass this component
1:48:51
component
1:48:51
component through the angular compiler right so
1:48:54
through the angular compiler right so
1:48:54
through the angular compiler right so how about we
1:48:55
how about we
1:48:55
how about we somehow improve the developer experience
1:48:57
somehow improve the developer experience
1:48:57
somehow improve the developer experience by doing just that
1:48:59
by doing just that
1:48:59
by doing just that by leveraging the angular compiler in
1:49:01
by leveraging the angular compiler in
1:49:01
by leveraging the angular compiler in order to actually compile this
1:49:03
order to actually compile this
1:49:03
order to actually compile this typescript class so that we don't have
1:49:05
typescript class so that we don't have
1:49:05
typescript class so that we don't have to manually type in the theta fsc and
1:49:08
to manually type in the theta fsc and
1:49:08
to manually type in the theta fsc and theta cmp static fields on the component
1:49:10
theta cmp static fields on the component
1:49:10
theta cmp static fields on the component class
1:49:11
class
1:49:11
class so that's exactly what i'm doing in the
1:49:12
so that's exactly what i'm doing in the
1:49:12
so that's exactly what i'm doing in the second example now this is
1:49:14
second example now this is
1:49:14
second example now this is almost similar to the first example
1:49:16
almost similar to the first example
1:49:16
almost similar to the first example right here it's just that
1:49:17
right here it's just that
1:49:17
right here it's just that i'm not really typing in a lot of this
1:49:19
i'm not really typing in a lot of this
1:49:19
i'm not really typing in a lot of this boilerplate code anymore
1:49:21
boilerplate code anymore
1:49:21
boilerplate code anymore so i'm not really importing a lot of
1:49:23
so i'm not really importing a lot of
1:49:23
so i'm not really importing a lot of these
1:49:25
these
1:49:25
these iv instructions i'm just importing three
1:49:27
iv instructions i'm just importing three
1:49:27
iv instructions i'm just importing three iv
1:49:28
iv
1:49:28
iv uh instructions here so one of them is
1:49:31
uh instructions here so one of them is
1:49:31
uh instructions here so one of them is the render component iv instruction one
1:49:33
the render component iv instruction one
1:49:33
the render component iv instruction one of them is the compile component iv
1:49:34
of them is the compile component iv
1:49:34
of them is the compile component iv instruction and the other one is the
1:49:36
instruction and the other one is the
1:49:36
instruction and the other one is the mark dirty
1:49:37
mark dirty
1:49:37
mark dirty i shortly forgot one very minute
1:49:41
i shortly forgot one very minute
1:49:42
i shortly forgot one very minute detail here how exactly is this
1:49:44
detail here how exactly is this
1:49:44
detail here how exactly is this component getting rendered
1:49:45
component getting rendered
1:49:45
component getting rendered this component is getting rendered
1:49:47
this component is getting rendered
1:49:47
this component is getting rendered because of this
1:49:49
because of this
1:49:49
because of this this call to the render component iv
1:49:50
this call to the render component iv
1:49:50
this call to the render component iv instruction so
1:49:52
instruction so
1:49:52
instruction so to the render component iv instruction
1:49:53
to the render component iv instruction
1:49:53
to the render component iv instruction we pass it the component class or
1:49:56
we pass it the component class or
1:49:56
we pass it the component class or the compiled the compiled iv
1:49:59
the compiled the compiled iv
1:49:59
the compiled the compiled iv component class right i'm saying it
1:50:02
component class right i'm saying it
1:50:02
component class right i'm saying it compiled because this typescript class
1:50:04
compiled because this typescript class
1:50:04
compiled because this typescript class has uh these two static fields as well
1:50:07
has uh these two static fields as well
1:50:07
has uh these two static fields as well attached to it
1:50:08
attached to it
1:50:08
attached to it right so without these two static fields
1:50:11
right so without these two static fields
1:50:11
right so without these two static fields we won't really be able to
1:50:12
we won't really be able to
1:50:12
we won't really be able to uh render this specific code right here
1:50:16
uh render this specific code right here
1:50:16
uh render this specific code right here so uh here we are passing it the iv
1:50:19
so uh here we are passing it the iv
1:50:19
so uh here we are passing it the iv component and this iv component class
1:50:21
component and this iv component class
1:50:21
component and this iv component class already has those two static fields and
1:50:23
already has those two static fields and
1:50:23
already has those two static fields and that's why we
1:50:23
that's why we
1:50:24
that's why we are able to see uh this getting rendered
1:50:26
are able to see uh this getting rendered
1:50:26
are able to see uh this getting rendered over here
1:50:27
over here
1:50:27
over here another thing is that i'm supplying a
1:50:29
another thing is that i'm supplying a
1:50:29
another thing is that i'm supplying a host of iv here
1:50:30
host of iv here
1:50:30
host of iv here so host iv and this iv is something that
1:50:34
so host iv and this iv is something that
1:50:34
so host iv and this iv is something that i've also specified in the index.html
1:50:36
i've also specified in the index.html
1:50:36
i've also specified in the index.html so instead of iv if let's say i change
1:50:39
so instead of iv if let's say i change
1:50:39
so instead of iv if let's say i change that to host
1:50:41
that to host
1:50:41
that to host and save the application will
1:50:45
and save the application will
1:50:45
and save the application will break right and so i'll have to make
1:50:47
break right and so i'll have to make
1:50:47
break right and so i'll have to make that
1:50:48
that
1:50:48
that necessary change over here as well in
1:50:50
necessary change over here as well in
1:50:50
necessary change over here as well in the host property and once that is there
1:50:52
the host property and once that is there
1:50:52
the host property and once that is there in place
1:50:53
in place
1:50:53
in place uh it should now work as expected
1:50:56
uh it should now work as expected
1:50:56
uh it should now work as expected right so yeah so one thing that we
1:51:00
right so yeah so one thing that we
1:51:00
right so yeah so one thing that we uh now have is the render component iv
1:51:03
uh now have is the render component iv
1:51:03
uh now have is the render component iv instruction
1:51:04
instruction
1:51:04
instruction and then we also have already seen the
1:51:06
and then we also have already seen the
1:51:06
and then we also have already seen the mark dirty iv instruction
1:51:08
mark dirty iv instruction
1:51:08
mark dirty iv instruction but then uh this sort of boilerplate
1:51:11
but then uh this sort of boilerplate
1:51:11
but then uh this sort of boilerplate that we were writing for the theta fse
1:51:13
that we were writing for the theta fse
1:51:13
that we were writing for the theta fse and the theta cmp is something that we
1:51:15
and the theta cmp is something that we
1:51:15
and the theta cmp is something that we are
1:51:15
are
1:51:15
are that we don't want to do and so we want
1:51:17
that we don't want to do and so we want
1:51:17
that we don't want to do and so we want to leverage the angular compiler for
1:51:19
to leverage the angular compiler for
1:51:19
to leverage the angular compiler for that
1:51:19
that
1:51:19
that and so i'll also have to include
1:51:22
and so i'll also have to include
1:51:22
and so i'll also have to include the angular compiler as a dependency
1:51:25
the angular compiler as a dependency
1:51:25
the angular compiler as a dependency this time around
1:51:26
this time around
1:51:26
this time around so i've added that as well and with that
1:51:30
so i've added that as well and with that
1:51:30
so i've added that as well and with that i'm doing a very simple thing here i
1:51:32
i'm doing a very simple thing here i
1:51:32
i'm doing a very simple thing here i have this
1:51:33
have this
1:51:33
have this metadata object and this metadata object
1:51:36
metadata object and this metadata object
1:51:36
metadata object and this metadata object might look similar to the
1:51:38
might look similar to the
1:51:38
might look similar to the sort of metadata object that you pass to
1:51:41
sort of metadata object that you pass to
1:51:41
sort of metadata object that you pass to the
1:51:41
the
1:51:41
the at component decorator right so it has a
1:51:44
at component decorator right so it has a
1:51:44
at component decorator right so it has a selector property and then it has a
1:51:46
selector property and then it has a
1:51:46
selector property and then it has a template property and then this template
1:51:47
template property and then this template
1:51:48
template property and then this template property has a value which is like an h1
1:51:50
property has a value which is like an h1
1:51:50
property has a value which is like an h1 tag
1:51:51
tag
1:51:51
tag a button tag and a very simple link
1:51:55
a button tag and a very simple link
1:51:55
a button tag and a very simple link and i'm already passing it to the add
1:51:57
and i'm already passing it to the add
1:51:57
and i'm already passing it to the add component decorator as the metadata
1:51:59
component decorator as the metadata
1:51:59
component decorator as the metadata and this already has these two uh
1:52:03
and this already has these two uh
1:52:03
and this already has these two uh this property and this method like the
1:52:05
this property and this method like the
1:52:05
this property and this method like the same the exact same example that we had
1:52:07
same the exact same example that we had
1:52:07
same the exact same example that we had in the in the previous one which is this
1:52:10
in the in the previous one which is this
1:52:10
in the in the previous one which is this it's just that this example right here
1:52:12
it's just that this example right here
1:52:12
it's just that this example right here doesn't have these two static fields
1:52:14
doesn't have these two static fields
1:52:14
doesn't have these two static fields like the theta fsc and the theta cmp
1:52:17
like the theta fsc and the theta cmp
1:52:17
like the theta fsc and the theta cmp so this time around we are going to rely
1:52:20
so this time around we are going to rely
1:52:20
so this time around we are going to rely on the compile component iv instruction
1:52:23
on the compile component iv instruction
1:52:23
on the compile component iv instruction in order to
1:52:24
in order to
1:52:24
in order to attach these two static fields onto the
1:52:26
attach these two static fields onto the
1:52:26
attach these two static fields onto the iv component class
1:52:28
iv component class
1:52:28
iv component class so that's exactly what this theta
1:52:30
so that's exactly what this theta
1:52:30
so that's exactly what this theta compile component iv instruction is
1:52:32
compile component iv instruction is
1:52:32
compile component iv instruction is going to do
1:52:33
going to do
1:52:33
going to do and once that is done uh those two
1:52:36
and once that is done uh those two
1:52:36
and once that is done uh those two static fields which is the theta fsc and
1:52:38
static fields which is the theta fsc and
1:52:38
static fields which is the theta fsc and theta cmp
1:52:39
theta cmp
1:52:39
theta cmp will now get attached to the iv
1:52:41
will now get attached to the iv
1:52:41
will now get attached to the iv component class and with that
1:52:43
component class and with that
1:52:43
component class and with that i can then simply call the render
1:52:46
i can then simply call the render
1:52:46
i can then simply call the render component iv instruction
1:52:47
component iv instruction
1:52:47
component iv instruction pass it that class with the attached
1:52:49
pass it that class with the attached
1:52:50
pass it that class with the attached static fields
1:52:51
static fields
1:52:51
static fields supply a host and everything gets sorted
1:52:55
supply a host and everything gets sorted
1:52:55
supply a host and everything gets sorted now if you also want to like
1:52:58
now if you also want to like
1:52:58
now if you also want to like actually see if these static fields are
1:53:02
actually see if these static fields are
1:53:02
actually see if these static fields are applied by the compi by running the
1:53:04
applied by the compi by running the
1:53:04
applied by the compi by running the compiler then you can open this
1:53:06
compiler then you can open this
1:53:06
compiler then you can open this application in a new tab
1:53:08
application in a new tab
1:53:08
application in a new tab and then i have also placed breakpoints
1:53:11
and then i have also placed breakpoints
1:53:11
and then i have also placed breakpoints over here
1:53:12
over here
1:53:12
over here so one breakpoint is placed before the
1:53:15
so one breakpoint is placed before the
1:53:15
so one breakpoint is placed before the compilation and the other breakpoint is
1:53:17
compilation and the other breakpoint is
1:53:17
compilation and the other breakpoint is placed
1:53:17
placed
1:53:17
placed after the compilation as you can see
1:53:20
after the compilation as you can see
1:53:20
after the compilation as you can see right here
1:53:21
right here
1:53:21
right here let me just move this down
1:53:27
let me just move this down
1:53:27
let me just move this down uh yeah okay we can also
1:53:32
uh yeah okay we can also
1:53:32
uh yeah okay we can also maybe increase the font size
1:53:35
maybe increase the font size
1:53:36
maybe increase the font size yeah so this console log is before the
1:53:39
yeah so this console log is before the
1:53:39
yeah so this console log is before the compilation and this one is after the
1:53:40
compilation and this one is after the
1:53:40
compilation and this one is after the compilation now let's see what happens
1:53:42
compilation now let's see what happens
1:53:42
compilation now let's see what happens if i reload the application so let's
1:53:45
if i reload the application so let's
1:53:45
if i reload the application so let's reload
1:53:47
reload
1:53:47
reload and yeah it first gets stuck
1:53:50
and yeah it first gets stuck
1:53:50
and yeah it first gets stuck on the first uh first break point which
1:53:53
on the first uh first break point which
1:53:54
on the first uh first break point which is before the compilation now before the
1:53:56
is before the compilation now before the
1:53:56
is before the compilation now before the compilation if i
1:53:57
compilation if i
1:53:57
compilation if i type in iv component and press a dot
1:54:00
type in iv component and press a dot
1:54:00
type in iv component and press a dot then you won't really see the theta fsc
1:54:02
then you won't really see the theta fsc
1:54:02
then you won't really see the theta fsc and the theta cmp static fields in there
1:54:04
and the theta cmp static fields in there
1:54:04
and the theta cmp static fields in there now even if i manually type in the theta
1:54:07
now even if i manually type in the theta
1:54:07
now even if i manually type in the theta cmp
1:54:07
cmp
1:54:08
cmp and press enter you will see that it is
1:54:09
and press enter you will see that it is
1:54:09
and press enter you will see that it is undefined right now
1:54:11
undefined right now
1:54:11
undefined right now i can do something similar for theta fac
1:54:14
i can do something similar for theta fac
1:54:14
i can do something similar for theta fac static field
1:54:15
static field
1:54:15
static field so both of them are undefined right now
1:54:17
so both of them are undefined right now
1:54:17
so both of them are undefined right now right now let's
1:54:19
right now let's
1:54:19
right now let's uh step this through and now the
1:54:23
uh step this through and now the
1:54:23
uh step this through and now the compile component iv instruction has
1:54:27
compile component iv instruction has
1:54:27
compile component iv instruction has been applied on the iv component class
1:54:30
been applied on the iv component class
1:54:30
been applied on the iv component class so now if i type in iv component again
1:54:34
so now if i type in iv component again
1:54:34
so now if i type in iv component again and then type in theta cmp
1:54:37
and then type in theta cmp
1:54:37
and then type in theta cmp then i'll see a static field being
1:54:40
then i'll see a static field being
1:54:40
then i'll see a static field being attached to the iv component
1:54:42
attached to the iv component
1:54:42
attached to the iv component the value of that static field is this
1:54:44
the value of that static field is this
1:54:44
the value of that static field is this object that you see right here
1:54:46
object that you see right here
1:54:46
object that you see right here and something similar will happen if i
1:54:48
and something similar will happen if i
1:54:48
and something similar will happen if i type in
1:54:49
type in
1:54:49
type in as well this it
1:54:52
as well this it
1:54:52
as well this it so now with that i can just
1:54:57
so now with that i can just
1:54:57
so now with that i can just type in my angular application my
1:54:59
type in my angular application my
1:54:59
type in my angular application my angular component the way i'm used to
1:55:01
angular component the way i'm used to
1:55:01
angular component the way i'm used to typing in right now and then i can just
1:55:04
typing in right now and then i can just
1:55:04
typing in right now and then i can just supply
1:55:05
supply
1:55:05
supply that iv component class to the compile
1:55:07
that iv component class to the compile
1:55:08
that iv component class to the compile component iv instruction
1:55:09
component iv instruction
1:55:09
component iv instruction and also pass it some metadata and then
1:55:12
and also pass it some metadata and then
1:55:12
and also pass it some metadata and then it will
1:55:13
it will
1:55:13
it will automatically attach those two static
1:55:14
automatically attach those two static
1:55:14
automatically attach those two static fields that are required for
1:55:16
fields that are required for
1:55:16
fields that are required for angular runtime in order to render that
1:55:19
angular runtime in order to render that
1:55:19
angular runtime in order to render that component and detect changes on that
1:55:20
component and detect changes on that
1:55:20
component and detect changes on that component class at runtime
1:55:22
component class at runtime
1:55:22
component class at runtime and then it will also uh and then once
1:55:25
and then it will also uh and then once
1:55:25
and then it will also uh and then once it attaches those two static fields then
1:55:27
it attaches those two static fields then
1:55:27
it attaches those two static fields then i can simply add it to
1:55:29
i can simply add it to
1:55:29
i can simply add it to the render component iv instruction
1:55:32
the render component iv instruction
1:55:32
the render component iv instruction great now these are the two examples
1:55:36
great now these are the two examples
1:55:36
great now these are the two examples that we have seen
1:55:37
that we have seen
1:55:37
that we have seen now let's see how it can help us with
1:55:40
now let's see how it can help us with
1:55:40
now let's see how it can help us with simplifying the way we uh we render
1:55:44
simplifying the way we uh we render
1:55:44
simplifying the way we uh we render components dynamically at runtime right
1:55:46
components dynamically at runtime right
1:55:46
components dynamically at runtime right so we will be seeing another example
1:55:48
so we will be seeing another example
1:55:48
so we will be seeing another example wherein
1:55:49
wherein
1:55:50
wherein i will be loading uh an iv
1:55:53
i will be loading uh an iv
1:55:53
i will be loading uh an iv a lazy iv component for instance right
1:55:56
a lazy iv component for instance right
1:55:56
a lazy iv component for instance right so let me just open up the app
1:56:00
so let me just open up the app
1:56:00
so let me just open up the app component.html and yeah
1:56:02
component.html and yeah
1:56:02
component.html and yeah let's just comment this markup out
1:56:06
let's just comment this markup out
1:56:06
let's just comment this markup out and let's uncomment
1:56:09
and let's uncomment
1:56:09
and let's uncomment this one great so
1:56:13
this one great so
1:56:13
this one great so as you can see here if i open up the
1:56:16
as you can see here if i open up the
1:56:16
as you can see here if i open up the application
1:56:17
application
1:56:17
application then you will see that it renders just a
1:56:19
then you will see that it renders just a
1:56:19
then you will see that it renders just a button that says load component lazy
1:56:21
button that says load component lazy
1:56:22
button that says load component lazy lee via render component now
1:56:26
clicking on that button calls this
1:56:27
clicking on that button calls this
1:56:28
clicking on that button calls this method and this method
1:56:30
method and this method
1:56:30
method and this method is present right here this one
1:56:34
is present right here this one
1:56:34
is present right here this one and this is basically doing somewhat
1:56:37
and this is basically doing somewhat
1:56:37
and this is basically doing somewhat similar task
1:56:38
similar task
1:56:38
similar task as this previous method that we used
1:56:41
as this previous method that we used
1:56:41
as this previous method that we used right so in the previous case we were
1:56:44
right so in the previous case we were
1:56:44
right so in the previous case we were we were depending on the result on the
1:56:47
we were depending on the result on the
1:56:47
we were depending on the result on the component factory resolver and then we
1:56:49
component factory resolver and then we
1:56:49
component factory resolver and then we were calling the create component and
1:56:51
were calling the create component and
1:56:51
were calling the create component and all these
1:56:51
all these
1:56:51
all these specific methods right now it's a bit
1:56:54
specific methods right now it's a bit
1:56:54
specific methods right now it's a bit difficult to remember these
1:56:56
difficult to remember these
1:56:56
difficult to remember these methods first of all and the second
1:56:58
methods first of all and the second
1:56:58
methods first of all and the second thing is it is also
1:56:59
thing is it is also
1:56:59
thing is it is also a bit more noisy as compared to the
1:57:02
a bit more noisy as compared to the
1:57:02
a bit more noisy as compared to the the method that i'll be showing you
1:57:04
the method that i'll be showing you
1:57:04
the method that i'll be showing you right now now in the stackblitz example
1:57:07
right now now in the stackblitz example
1:57:07
right now now in the stackblitz example that we saw here we saw that
1:57:10
that we saw here we saw that
1:57:10
that we saw here we saw that we can just use the render component iv
1:57:13
we can just use the render component iv
1:57:13
we can just use the render component iv instruction in order to render a
1:57:15
instruction in order to render a
1:57:15
instruction in order to render a component
1:57:15
component
1:57:15
component right so what if i just use the render
1:57:19
right so what if i just use the render
1:57:19
right so what if i just use the render component here as well
1:57:21
component here as well
1:57:21
component here as well so i use the render component here but i
1:57:23
so i use the render component here but i
1:57:23
so i use the render component here but i need
1:57:24
need
1:57:24
need the component class with those static
1:57:26
the component class with those static
1:57:26
the component class with those static fields attached to it right
1:57:27
fields attached to it right
1:57:27
fields attached to it right so i call the dynamic import statement
1:57:30
so i call the dynamic import statement
1:57:30
so i call the dynamic import statement once again
1:57:31
once again
1:57:31
once again and then i supply the path right here i
1:57:35
and then i supply the path right here i
1:57:35
and then i supply the path right here i um restructure out the lazy iv component
1:57:38
um restructure out the lazy iv component
1:57:38
um restructure out the lazy iv component from there
1:57:39
from there
1:57:39
from there and then i pass it then i pass that to
1:57:41
and then i pass it then i pass that to
1:57:41
and then i pass it then i pass that to the render component iv instruction
1:57:43
the render component iv instruction
1:57:43
the render component iv instruction which is something that i've again
1:57:44
which is something that i've again
1:57:44
which is something that i've again imported from angular core and so with
1:57:47
imported from angular core and so with
1:57:47
imported from angular core and so with that
1:57:48
that
1:57:48
that uh let's see what happens
1:57:51
uh let's see what happens
1:57:51
uh let's see what happens i click on the button and then you will
1:57:53
i click on the button and then you will
1:57:53
i click on the button and then you will also see a network request that would go
1:57:55
also see a network request that would go
1:57:55
also see a network request that would go on
1:57:55
on
1:57:56
on um to fetch that iv component lazily and
1:57:59
um to fetch that iv component lazily and
1:57:59
um to fetch that iv component lazily and then
1:58:01
then
1:58:01
then so this network request went out and
1:58:03
so this network request went out and
1:58:03
so this network request went out and then it loaded this component
1:58:05
then it loaded this component
1:58:05
then it loaded this component but this time around we are not really
1:58:07
but this time around we are not really
1:58:07
but this time around we are not really relying on the component factory
1:58:09
relying on the component factory
1:58:09
relying on the component factory resolver
1:58:09
resolver
1:58:09
resolver or the view container ref in order to
1:58:12
or the view container ref in order to
1:58:12
or the view container ref in order to call those specific methods in order to
1:58:14
call those specific methods in order to
1:58:14
call those specific methods in order to render the component
1:58:15
render the component
1:58:16
render the component uh this is one great aspect of it other
1:58:18
uh this is one great aspect of it other
1:58:18
uh this is one great aspect of it other great aspect
1:58:19
great aspect
1:58:19
great aspect of it is uh stephen how much time do i
1:58:22
of it is uh stephen how much time do i
1:58:22
of it is uh stephen how much time do i have
1:58:25
i think you have a couple of more
1:58:26
i think you have a couple of more
1:58:26
i think you have a couple of more minutes uh couple of more minutes yeah
1:58:29
minutes uh couple of more minutes yeah
1:58:29
minutes uh couple of more minutes yeah okay okay great so yeah the the second
1:58:32
okay okay great so yeah the the second
1:58:32
okay okay great so yeah the the second thing
1:58:32
thing
1:58:32
thing that i wanted to highlight quickly is
1:58:34
that i wanted to highlight quickly is
1:58:34
that i wanted to highlight quickly is that let's say if you didn't really want
1:58:36
that let's say if you didn't really want
1:58:36
that let's say if you didn't really want a very long name for your selector or
1:58:38
a very long name for your selector or
1:58:38
a very long name for your selector or your host element right
1:58:40
your host element right
1:58:40
your host element right so right now i'm using a very long name
1:58:42
so right now i'm using a very long name
1:58:42
so right now i'm using a very long name for the host property to set it
1:58:45
for the host property to set it
1:58:45
for the host property to set it but i can the beauty of this host
1:58:47
but i can the beauty of this host
1:58:47
but i can the beauty of this host property is that i can
1:58:49
property is that i can
1:58:49
property is that i can supply basically anything uh as a value
1:58:52
supply basically anything uh as a value
1:58:52
supply basically anything uh as a value of this host
1:58:53
of this host
1:58:53
of this host and by anything i mean literally
1:58:56
and by anything i mean literally
1:58:56
and by anything i mean literally anything
1:58:57
anything
1:58:57
anything so let's say that there is a host here
1:59:01
so let's say that there is a host here
1:59:01
so let's say that there is a host here the host is using the selector as
1:59:04
the host is using the selector as
1:59:04
the host is using the selector as anything here right
1:59:06
anything here right
1:59:06
anything here right so let's say that we can uh
1:59:09
so let's say that we can uh
1:59:09
so let's say that we can uh expect that this lazy iv component also
1:59:12
expect that this lazy iv component also
1:59:12
expect that this lazy iv component also expects
1:59:13
expects
1:59:13
expects a host property which is of type string
1:59:15
a host property which is of type string
1:59:15
a host property which is of type string and then
1:59:16
and then
1:59:16
and then that's exactly something that we are
1:59:17
that's exactly something that we are
1:59:18
that's exactly something that we are passing it as an argument
1:59:19
passing it as an argument
1:59:19
passing it as an argument here as well as here
1:59:23
here as well as here
1:59:23
here as well as here so now on the ui you will see two
1:59:25
so now on the ui you will see two
1:59:25
so now on the ui you will see two buttons
1:59:26
buttons
1:59:26
buttons both these buttons are referring to two
1:59:29
both these buttons are referring to two
1:59:29
both these buttons are referring to two separate
1:59:29
separate
1:59:30
separate uh two separate hosts right
1:59:33
uh two separate hosts right
1:59:33
uh two separate hosts right another good thing is that if the
1:59:35
another good thing is that if the
1:59:35
another good thing is that if the component is loaded once then it won't
1:59:37
component is loaded once then it won't
1:59:37
component is loaded once then it won't be loaded again
1:59:38
be loaded again
1:59:38
be loaded again right so that is also another aspect of
1:59:40
right so that is also another aspect of
1:59:40
right so that is also another aspect of it now
1:59:41
it now
1:59:41
it now i'm using two different host properties
1:59:44
i'm using two different host properties
1:59:44
i'm using two different host properties but i will be able to still render the
1:59:46
but i will be able to still render the
1:59:46
but i will be able to still render the component with just this one function
1:59:48
component with just this one function
1:59:48
component with just this one function i'll just have to specify the host
1:59:51
i'll just have to specify the host
1:59:52
i'll just have to specify the host as the host which is coming in as an
1:59:53
as the host which is coming in as an
1:59:53
as the host which is coming in as an argument right here
1:59:55
argument right here
1:59:55
argument right here so let's clear everything out and as
1:59:58
so let's clear everything out and as
1:59:58
so let's clear everything out and as soon as i click on a button
1:59:59
soon as i click on a button
1:59:59
soon as i click on a button a new request would go on and it would
2:00:01
a new request would go on and it would
2:00:01
a new request would go on and it would fetch that
2:00:02
fetch that
2:00:02
fetch that lazy iv component on demand and then
2:00:05
lazy iv component on demand and then
2:00:05
lazy iv component on demand and then since it has already been downloaded if
2:00:07
since it has already been downloaded if
2:00:08
since it has already been downloaded if i click on the second button
2:00:09
i click on the second button
2:00:09
i click on the second button a new request won't go the same
2:00:11
a new request won't go the same
2:00:11
a new request won't go the same component that we have here would be
2:00:13
component that we have here would be
2:00:13
component that we have here would be leveraged in order to get it rendered
2:00:15
leveraged in order to get it rendered
2:00:15
leveraged in order to get it rendered onto the ui so i click on the button
2:00:17
onto the ui so i click on the button
2:00:17
onto the ui so i click on the button and then that gets rendered great so far
2:00:21
and then that gets rendered great so far
2:00:21
and then that gets rendered great so far so good
2:00:23
so good
2:00:23
so good now let's say that i open this component
2:00:26
now let's say that i open this component
2:00:26
now let's say that i open this component and
2:00:26
and
2:00:26
and inside this component i wanted to load
2:00:28
inside this component i wanted to load
2:00:28
inside this component i wanted to load some data that is coming in from
2:00:31
some data that is coming in from
2:00:31
some data that is coming in from a call to a method that is present or
2:00:35
a call to a method that is present or
2:00:35
a call to a method that is present or exposed as a part of a service that i
2:00:37
exposed as a part of a service that i
2:00:37
exposed as a part of a service that i have injected as a dependency on this
2:00:39
have injected as a dependency on this
2:00:39
have injected as a dependency on this component
2:00:40
component
2:00:40
component so what i mean by that is let's say that
2:00:42
so what i mean by that is let's say that
2:00:42
so what i mean by that is let's say that there is a data service that i've
2:00:44
there is a data service that i've
2:00:44
there is a data service that i've injected on this component as a
2:00:45
injected on this component as a
2:00:45
injected on this component as a dependency
2:00:46
dependency
2:00:46
dependency and then this data service is having a
2:00:50
and then this data service is having a
2:00:50
and then this data service is having a get data method that i'm calling
2:00:52
get data method that i'm calling
2:00:52
get data method that i'm calling and then whatever data it is returning
2:00:54
and then whatever data it is returning
2:00:54
and then whatever data it is returning to me i'm just logging it
2:00:56
to me i'm just logging it
2:00:56
to me i'm just logging it to the console so
2:01:00
to the console so
2:01:00
to the console so let me just click on the button now the
2:01:03
let me just click on the button now the
2:01:04
let me just click on the button now the request went out
2:01:05
request went out
2:01:05
request went out and the iv component was also loaded
2:01:08
and the iv component was also loaded
2:01:08
and the iv component was also loaded but i couldn't really see that being
2:01:11
but i couldn't really see that being
2:01:11
but i couldn't really see that being rendered onto the ui
2:01:12
rendered onto the ui
2:01:12
rendered onto the ui but i do see a an error as well here so
2:01:16
but i do see a an error as well here so
2:01:16
but i do see a an error as well here so let's open up this error maybe i'll just
2:01:19
let's open up this error maybe i'll just
2:01:20
let's open up this error maybe i'll just open it
2:01:20
open it
2:01:20
open it in the console and it is saying that
2:01:23
in the console and it is saying that
2:01:23
in the console and it is saying that inject must be called from an injection
2:01:25
inject must be called from an injection
2:01:25
inject must be called from an injection context
2:01:26
context
2:01:26
context now it's saying inject so it definitely
2:01:28
now it's saying inject so it definitely
2:01:28
now it's saying inject so it definitely has something to do with dependency
2:01:29
has something to do with dependency
2:01:29
has something to do with dependency injection
2:01:30
injection
2:01:30
injection now the problem that we have here is
2:01:32
now the problem that we have here is
2:01:32
now the problem that we have here is that this specific component is being
2:01:34
that this specific component is being
2:01:34
that this specific component is being loaded dynamically
2:01:36
loaded dynamically
2:01:36
loaded dynamically at runtime but then this doesn't really
2:01:38
at runtime but then this doesn't really
2:01:38
at runtime but then this doesn't really have a context of
2:01:39
have a context of
2:01:39
have a context of where exactly should it load a specific
2:01:41
where exactly should it load a specific
2:01:41
where exactly should it load a specific dependency from
2:01:42
dependency from
2:01:42
dependency from right it doesn't really have an injector
2:01:45
right it doesn't really have an injector
2:01:45
right it doesn't really have an injector of sorts
2:01:46
of sorts
2:01:46
of sorts the great thing about the render
2:01:48
the great thing about the render
2:01:48
the great thing about the render component iv instruction
2:01:50
component iv instruction
2:01:50
component iv instruction that we have here is that as an
2:01:53
that we have here is that as an
2:01:53
that we have here is that as an argument we can also supply to it an
2:01:55
argument we can also supply to it an
2:01:55
argument we can also supply to it an injector
2:01:57
injector
2:01:57
injector i can pass it an injector and this
2:01:59
i can pass it an injector and this
2:01:59
i can pass it an injector and this injector is also something that i can
2:02:02
injector is also something that i can
2:02:02
injector is also something that i can inject as a dependency so i can do
2:02:04
inject as a dependency so i can do
2:02:04
inject as a dependency so i can do something like
2:02:06
something like
2:02:06
something like injector equals to this dot injector and
2:02:09
injector equals to this dot injector and
2:02:09
injector equals to this dot injector and if i save this
2:02:10
if i save this
2:02:10
if i save this go back to the application and let's go
2:02:13
go back to the application and let's go
2:02:13
go back to the application and let's go to
2:02:13
to
2:02:13
to the network tab
2:02:18
the network tab
2:02:18
the network tab let's clear everything out i'll click on
2:02:20
let's clear everything out i'll click on
2:02:20
let's clear everything out i'll click on the button now the component gets loaded
2:02:22
the button now the component gets loaded
2:02:22
the button now the component gets loaded another thing is that you will also see
2:02:24
another thing is that you will also see
2:02:24
another thing is that you will also see this network request going on to an
2:02:26
this network request going on to an
2:02:26
this network request going on to an api that loads in some data and that
2:02:29
api that loads in some data and that
2:02:29
api that loads in some data and that data is also something that have
2:02:31
data is also something that have
2:02:32
data is also something that have then logged onto the console
2:02:35
then logged onto the console
2:02:35
then logged onto the console right here this one so i should be able
2:02:39
right here this one so i should be able
2:02:39
right here this one so i should be able to see the data as well on the console
2:02:43
right yeah so that's great i have
2:02:47
right yeah so that's great i have
2:02:47
right yeah so that's great i have uh just demonstrated how we can
2:02:49
uh just demonstrated how we can
2:02:49
uh just demonstrated how we can dynamically load a component and then
2:02:50
dynamically load a component and then
2:02:50
dynamically load a component and then how we can
2:02:51
how we can
2:02:51
how we can do things like dependency injection and
2:02:53
do things like dependency injection and
2:02:53
do things like dependency injection and life cycle hooks
2:02:55
life cycle hooks
2:02:55
life cycle hooks uh lifecycle hooks is also something
2:02:56
uh lifecycle hooks is also something
2:02:56
uh lifecycle hooks is also something that can be used
2:02:58
that can be used
2:02:58
that can be used so i'm not sure if i have much time but
2:03:00
so i'm not sure if i have much time but
2:03:00
so i'm not sure if i have much time but yeah this example
2:03:02
yeah this example
2:03:02
yeah this example does have that uh that thing so you'll
2:03:05
does have that uh that thing so you'll
2:03:05
does have that uh that thing so you'll be able to check that out at the end
2:03:07
be able to check that out at the end
2:03:07
be able to check that out at the end but exactly two from here well into a
2:03:10
but exactly two from here well into a
2:03:10
but exactly two from here well into a world of angular
2:03:11
world of angular
2:03:11
world of angular then where you probably might not have
2:03:15
then where you probably might not have
2:03:15
then where you probably might not have to rely on angular modules
2:03:17
to rely on angular modules
2:03:17
to rely on angular modules uh just in case you wanted to render a
2:03:19
uh just in case you wanted to render a
2:03:19
uh just in case you wanted to render a component maybe
2:03:20
component maybe
2:03:20
component maybe or you also might not have to rely on
2:03:23
or you also might not have to rely on
2:03:24
or you also might not have to rely on zone cs for
2:03:24
zone cs for
2:03:24
zone cs for dependency injection because you have
2:03:26
dependency injection because you have
2:03:26
dependency injection because you have already seen that uh
2:03:28
already seen that uh
2:03:28
already seen that uh in this example we are not really uh
2:03:31
in this example we are not really uh
2:03:31
in this example we are not really uh importing this marg dirty
2:03:33
importing this marg dirty
2:03:33
importing this marg dirty from zone yes we are relying on angular
2:03:35
from zone yes we are relying on angular
2:03:35
from zone yes we are relying on angular core
2:03:36
core
2:03:36
core uh in order to uh detect changes right
2:03:40
uh in order to uh detect changes right
2:03:40
uh in order to uh detect changes right so yeah this is something that might be
2:03:42
so yeah this is something that might be
2:03:42
so yeah this is something that might be possible in the near future
2:03:44
possible in the near future
2:03:44
possible in the near future now uh a lot of things i
2:03:47
now uh a lot of things i
2:03:47
now uh a lot of things i couldn't cover today in this session is
2:03:50
couldn't cover today in this session is
2:03:50
couldn't cover today in this session is something that i'll probably cover
2:03:52
something that i'll probably cover
2:03:52
something that i'll probably cover as a part of my uh four-hour session
2:03:55
as a part of my uh four-hour session
2:03:55
as a part of my uh four-hour session that i'm taking tomorrow
2:03:56
that i'm taking tomorrow
2:03:56
that i'm taking tomorrow so please do check that out i'll be
2:03:58
so please do check that out i'll be
2:03:58
so please do check that out i'll be sharing a link to this
2:03:59
sharing a link to this
2:03:59
sharing a link to this on the slide right here so yeah uh
2:04:02
on the slide right here so yeah uh
2:04:02
on the slide right here so yeah uh please do check that out and with that
2:04:04
please do check that out and with that
2:04:04
please do check that out and with that uh thank you so much for listening and
2:04:06
uh thank you so much for listening and
2:04:06
uh thank you so much for listening and uh you all have a great day ahead
2:04:10
uh you all have a great day ahead
2:04:10
uh you all have a great day ahead that was an amazing session siddharth i
2:04:12
that was an amazing session siddharth i
2:04:12
that was an amazing session siddharth i thank you you not only need four hours i
2:04:14
thank you you not only need four hours i
2:04:14
thank you you not only need four hours i think you need
2:04:15
think you need
2:04:15
think you need around 12 hours or maybe an entire
2:04:17
around 12 hours or maybe an entire
2:04:17
around 12 hours or maybe an entire conference just for all that knowledge
2:04:19
conference just for all that knowledge
2:04:19
conference just for all that knowledge that you have
2:04:20
that you have
2:04:20
that you have amazingly quran i think there were some
2:04:22
amazingly quran i think there were some
2:04:22
amazingly quran i think there were some really amazing demos that you had right
2:04:24
really amazing demos that you had right
2:04:24
really amazing demos that you had right iv and with that angular i think he was
2:04:27
iv and with that angular i think he was
2:04:27
iv and with that angular i think he was definitely loved it
2:04:28
definitely loved it
2:04:28
definitely loved it we had a couple of questions i think
2:04:30
we had a couple of questions i think
2:04:30
we had a couple of questions i think those questions are answered by the
2:04:32
those questions are answered by the
2:04:32
those questions are answered by the viewers itself
2:04:33
viewers itself
2:04:33
viewers itself and i think we have very active viewers
2:04:35
and i think we have very active viewers
2:04:35
and i think we have very active viewers i know it's little too late for you at
2:04:37
i know it's little too late for you at
2:04:37
i know it's little too late for you at your place
2:04:37
your place
2:04:38
your place i really appreciate on behalf of entire
2:04:41
i really appreciate on behalf of entire
2:04:41
i really appreciate on behalf of entire for coming today thank you so much
2:04:43
for coming today thank you so much
2:04:43
for coming today thank you so much siddharth we will connect with you
2:04:45
siddharth we will connect with you
2:04:45
siddharth we will connect with you in uh other live shows and conferences
2:04:48
in uh other live shows and conferences
2:04:48
in uh other live shows and conferences thank you so much
2:04:49
thank you so much
2:04:49
thank you so much sure thanks stefan thank you so much for
2:04:51
sure thanks stefan thank you so much for
2:04:51
sure thanks stefan thank you so much for having me and uh
2:04:52
having me and uh
2:04:52
having me and uh you have a great conference head thank
2:04:54
you have a great conference head thank
2:04:54
you have a great conference head thank you thank you so much
2:04:55
you thank you so much
2:04:56
you thank you so much bye take care all right so
2:04:59
bye take care all right so
2:04:59
bye take care all right so uh moving on to the next speaker that we
2:05:01
uh moving on to the next speaker that we
2:05:01
uh moving on to the next speaker that we have
2:05:02
have
2:05:02
have here is santosh santosh is a google dev
2:05:05
here is santosh santosh is a google dev
2:05:05
here is santosh santosh is a google dev expert for
2:05:06
expert for
2:05:06
expert for angular and an active contributor for
2:05:08
angular and an active contributor for
2:05:08
angular and an active contributor for angular and ngrx
2:05:10
angular and ngrx
2:05:10
angular and ngrx he writes for angular in depth and
2:05:12
he writes for angular in depth and
2:05:12
he writes for angular in depth and mentors at dot-net tricks
2:05:14
mentors at dot-net tricks
2:05:14
mentors at dot-net tricks and he's an organizer of pune tech
2:05:17
and he's an organizer of pune tech
2:05:17
and he's an organizer of pune tech meetup
2:05:17
meetup
2:05:17
meetup he's a creator of ng deploy package for
2:05:20
he's a creator of ng deploy package for
2:05:20
he's a creator of ng deploy package for uh
2:05:21
uh
2:05:21
uh netifly and a part of nest chairs add-on
2:05:24
netifly and a part of nest chairs add-on
2:05:24
netifly and a part of nest chairs add-on score team
2:05:25
score team
2:05:25
score team he has already been uh one member of one
2:05:27
he has already been uh one member of one
2:05:27
he has already been uh one member of one of our past live
2:05:28
of our past live
2:05:28
of our past live shows and we are really excited to have
2:05:30
shows and we are really excited to have
2:05:30
shows and we are really excited to have him once again
2:05:31
him once again
2:05:31
him once again let's please welcome our next speaker
2:05:34
let's please welcome our next speaker
2:05:34
let's please welcome our next speaker santosh yadav
2:05:50
[Music]
2:06:09
[Music]
2:06:10
[Music] hi santosh welcome to the c sharp corner
2:06:13
hi santosh welcome to the c sharp corner
2:06:13
hi santosh welcome to the c sharp corner angular virtual conference
2:06:20
why is that i care you're muted santosh
2:06:23
why is that i care you're muted santosh
2:06:23
why is that i care you're muted santosh santosh
2:06:26
hey stephen thanks thanks for this that
2:06:27
hey stephen thanks thanks for this that
2:06:28
hey stephen thanks thanks for this that nice introduction
2:06:29
nice introduction
2:06:29
nice introduction before i can go ahead and talk about the
2:06:31
before i can go ahead and talk about the
2:06:31
before i can go ahead and talk about the stuffs my daughter wants to introduce
2:06:33
stuffs my daughter wants to introduce
2:06:33
stuffs my daughter wants to introduce herself so
2:06:34
herself so
2:06:34
herself so let's go ahead and do that first okay
2:06:36
let's go ahead and do that first okay
2:06:36
let's go ahead and do that first okay that's great
2:06:38
that's great
2:06:38
that's great hi how are you
2:06:42
nice nice what's your name
2:06:48
what's your name yeah
2:06:52
what's your name yeah
2:06:52
what's your name yeah well what is that sorry i couldn't get
2:06:53
well what is that sorry i couldn't get
2:06:54
well what is that sorry i couldn't get it
2:06:56
so why did you go ahead and introduce
2:06:58
so why did you go ahead and introduce
2:06:58
so why did you go ahead and introduce yourself
2:06:59
yourself
2:07:00
yourself sorry what you said i i just couldn't
2:07:02
sorry what you said i i just couldn't
2:07:02
sorry what you said i i just couldn't get her name
2:07:03
get her name
2:07:03
get her name here it's here so she will introduce one
2:07:05
here it's here so she will introduce one
2:07:05
here it's here so she will introduce one second just okay go ahead
2:07:10
hi i am welcome to
2:07:13
hi i am welcome to
2:07:13
hi i am welcome to angular conference
2:07:15
angular conference
2:07:15
angular conference [Music]
2:07:18
[Music]
2:07:18
[Music] that's so nice and fun welcome
2:07:21
that's so nice and fun welcome
2:07:22
that's so nice and fun welcome community star i was just looking at the
2:07:24
community star i was just looking at the
2:07:24
community star i was just looking at the comments i you know
2:07:26
comments i you know
2:07:26
comments i you know guys have been uh really appreciate when
2:07:28
guys have been uh really appreciate when
2:07:28
guys have been uh really appreciate when you go ahead and reply
2:07:29
you go ahead and reply
2:07:29
you go ahead and reply them right i i see some of the guys
2:07:32
them right i i see some of the guys
2:07:32
them right i i see some of the guys saying hey santosh i'm a big fan of
2:07:33
saying hey santosh i'm a big fan of
2:07:33
saying hey santosh i'm a big fan of yours
2:07:34
yours
2:07:34
yours so we are really honored to have you
2:07:36
so we are really honored to have you
2:07:36
so we are really honored to have you santosh i think
2:07:37
santosh i think
2:07:37
santosh i think we have to maybe uh do a little past
2:07:40
we have to maybe uh do a little past
2:07:40
we have to maybe uh do a little past minute 20 to 25 or 30 minutes
2:07:42
minute 20 to 25 or 30 minutes
2:07:42
minute 20 to 25 or 30 minutes right so i think uh you will be
2:07:44
right so i think uh you will be
2:07:44
right so i think uh you will be comfortable with that so
2:07:45
comfortable with that so
2:07:45
comfortable with that so yeah next 25 to 30 minutes it's all you
2:07:47
yeah next 25 to 30 minutes it's all you
2:07:47
yeah next 25 to 30 minutes it's all you santosh
2:07:48
santosh
2:07:48
santosh and there you go thank you
2:07:52
and there you go thank you
2:07:52
and there you go thank you uh so uh hello everyone uh my name is
2:07:54
uh so uh hello everyone uh my name is
2:07:54
uh so uh hello everyone uh my name is santo shadow and uh
2:07:55
santo shadow and uh
2:07:55
santo shadow and uh i'll be i'll be talking about optimizing
2:07:57
i'll be i'll be talking about optimizing
2:07:57
i'll be i'll be talking about optimizing an angular application because uh
2:07:59
an angular application because uh
2:07:59
an angular application because uh uh recently i had to actually optimize a
2:08:01
uh recently i had to actually optimize a
2:08:01
uh recently i had to actually optimize a big enterprise-wide application
2:08:04
big enterprise-wide application
2:08:04
big enterprise-wide application and uh uh so what what are the things
2:08:06
and uh uh so what what are the things
2:08:06
and uh uh so what what are the things different things which i did i'll be
2:08:08
different things which i did i'll be
2:08:08
different things which i did i'll be talking about the same
2:08:09
talking about the same
2:08:09
talking about the same uh stephen can you uh share my screen i
2:08:11
uh stephen can you uh share my screen i
2:08:11
uh stephen can you uh share my screen i think i can just
2:08:12
think i can just
2:08:12
think i can just uh yeah cool thanks a lot so this this
2:08:15
uh yeah cool thanks a lot so this this
2:08:15
uh yeah cool thanks a lot so this this is what i'll be talking about for like
2:08:17
is what i'll be talking about for like
2:08:17
is what i'll be talking about for like next 30 minutes so it will be all about
2:08:19
next 30 minutes so it will be all about
2:08:19
next 30 minutes so it will be all about optimizing an angular app
2:08:20
optimizing an angular app
2:08:20
optimizing an angular app and uh my name is santo shadow and i'm
2:08:23
and uh my name is santo shadow and i'm
2:08:23
and uh my name is santo shadow and i'm one of the google developer expert as
2:08:24
one of the google developer expert as
2:08:24
one of the google developer expert as driven informed
2:08:25
driven informed
2:08:25
driven informed uh so i'm uh for angular i i write for
2:08:29
uh so i'm uh for angular i i write for
2:08:29
uh so i'm uh for angular i i write for indepth.dev i'm also a mentor for uh
2:08:31
indepth.dev i'm also a mentor for uh
2:08:31
indepth.dev i'm also a mentor for uh dot net tricks and uh you can find me on
2:08:34
dot net tricks and uh you can find me on
2:08:34
dot net tricks and uh you can find me on social media i'm
2:08:35
social media i'm
2:08:35
social media i'm pretty active on twitter i'm available
2:08:37
pretty active on twitter i'm available
2:08:37
pretty active on twitter i'm available on linkedin
2:08:38
on linkedin
2:08:38
on linkedin you can uh follow me on github as well
2:08:41
you can uh follow me on github as well
2:08:41
you can uh follow me on github as well and it's uh
2:08:42
and it's uh
2:08:42
and it's uh raining heavily at my location right now
2:08:45
raining heavily at my location right now
2:08:45
raining heavily at my location right now so
2:08:45
so
2:08:45
so and you can also follow uh see more
2:08:47
and you can also follow uh see more
2:08:48
and you can also follow uh see more details about me on santosh
2:08:49
details about me on santosh
2:08:49
details about me on santosh dot dev uh basically i am uh
2:08:52
dot dev uh basically i am uh
2:08:52
dot dev uh basically i am uh you can find my youtube link your
2:08:54
you can find my youtube link your
2:08:54
you can find my youtube link your youtube channel you can find my trust at
2:08:56
youtube channel you can find my trust at
2:08:56
youtube channel you can find my trust at twitch link
2:08:57
twitch link
2:08:57
twitch link everything is available there and also
2:08:59
everything is available there and also
2:08:59
everything is available there and also in case there are some
2:09:00
in case there are some
2:09:00
in case there are some in upcoming artic upcoming
2:09:04
in upcoming artic upcoming
2:09:04
in upcoming artic upcoming talks or upcoming shows uh you will be
2:09:06
talks or upcoming shows uh you will be
2:09:06
talks or upcoming shows uh you will be able to get all the information on the
2:09:08
able to get all the information on the
2:09:08
able to get all the information on the same
2:09:09
same
2:09:09
same okay so let's get started so as i said
2:09:12
okay so let's get started so as i said
2:09:12
okay so let's get started so as i said i'll be talking about optimizing an
2:09:13
i'll be talking about optimizing an
2:09:13
i'll be talking about optimizing an angular application and believe me
2:09:15
angular application and believe me
2:09:15
angular application and believe me believe me the struggle uh the uh
2:09:18
believe me the struggle uh the uh
2:09:18
believe me the struggle uh the uh optimizing an app is not simple it's an
2:09:20
optimizing an app is not simple it's an
2:09:20
optimizing an app is not simple it's an struggle
2:09:21
struggle
2:09:21
struggle we struggle a lot and uh i've been there
2:09:24
we struggle a lot and uh i've been there
2:09:24
we struggle a lot and uh i've been there i have struggled and then i i
2:09:26
i have struggled and then i i
2:09:26
i have struggled and then i i have struggled a lot and then i ended up
2:09:29
have struggled a lot and then i ended up
2:09:29
have struggled a lot and then i ended up doing some lot of pocs and then how i
2:09:31
doing some lot of pocs and then how i
2:09:31
doing some lot of pocs and then how i can improve the application performance
2:09:33
can improve the application performance
2:09:33
can improve the application performance how i can uh improve the bundle size
2:09:36
how i can uh improve the bundle size
2:09:36
how i can uh improve the bundle size which we had
2:09:37
which we had
2:09:37
which we had so uh let's go through and see the
2:09:40
so uh let's go through and see the
2:09:40
so uh let's go through and see the different things which we did
2:09:41
different things which we did
2:09:41
different things which we did so first and the simplest thing to do is
2:09:44
so first and the simplest thing to do is
2:09:44
so first and the simplest thing to do is lazy loading so
2:09:46
lazy loading so
2:09:46
lazy loading so in case you have a large application uh
2:09:48
in case you have a large application uh
2:09:48
in case you have a large application uh of course you you should
2:09:50
of course you you should
2:09:50
of course you you should you should be dividing into it into
2:09:52
you should be dividing into it into
2:09:52
you should be dividing into it into different bundles right or different
2:09:53
different bundles right or different
2:09:53
different bundles right or different modules
2:09:54
modules
2:09:54
modules that's what we do right we whenever we
2:09:56
that's what we do right we whenever we
2:09:56
that's what we do right we whenever we create an application we think about it
2:09:57
create an application we think about it
2:09:58
create an application we think about it as not a big application
2:09:59
as not a big application
2:09:59
as not a big application but smaller smaller parts or smaller
2:10:02
but smaller smaller parts or smaller
2:10:02
but smaller smaller parts or smaller smaller features
2:10:03
smaller features
2:10:03
smaller features for example if i have related to
2:10:05
for example if i have related to
2:10:05
for example if i have related to employee i will create an employee
2:10:06
employee i will create an employee
2:10:06
employee i will create an employee module
2:10:07
module
2:10:07
module if i have create some feature related to
2:10:08
if i have create some feature related to
2:10:08
if i have create some feature related to products i will create a products module
2:10:10
products i will create a products module
2:10:10
products i will create a products module that's what we do
2:10:11
that's what we do
2:10:11
that's what we do but are we doing a lazy loading the
2:10:12
but are we doing a lazy loading the
2:10:12
but are we doing a lazy loading the answer in most of the cases may be no
2:10:14
answer in most of the cases may be no
2:10:14
answer in most of the cases may be no because in my application it was not
2:10:16
because in my application it was not
2:10:16
because in my application it was not there
2:10:16
there
2:10:16
there uh we uh we tried to do losi sorry we
2:10:19
uh we uh we tried to do losi sorry we
2:10:19
uh we uh we tried to do losi sorry we tried to implement lazy loading but we
2:10:21
tried to implement lazy loading but we
2:10:21
tried to implement lazy loading but we were struggling
2:10:21
were struggling
2:10:22
were struggling because we had uh around 40 modules
2:10:25
because we had uh around 40 modules
2:10:25
because we had uh around 40 modules so remember 40 modules it means it was
2:10:28
so remember 40 modules it means it was
2:10:28
so remember 40 modules it means it was not a small application
2:10:29
not a small application
2:10:29
not a small application and more than 150 components so of
2:10:31
and more than 150 components so of
2:10:31
and more than 150 components so of course the struggle was real so we ended
2:10:33
course the struggle was real so we ended
2:10:34
course the struggle was real so we ended up doing
2:10:34
up doing
2:10:34
up doing uh implemented uh implementing lazy
2:10:36
uh implemented uh implementing lazy
2:10:36
uh implemented uh implementing lazy loading so uh what
2:10:37
loading so uh what
2:10:38
loading so uh what what how how lazy loading helps you
2:10:40
what how how lazy loading helps you
2:10:40
what how how lazy loading helps you right
2:10:41
right
2:10:41
right so this is what you get you get separate
2:10:43
so this is what you get you get separate
2:10:43
so this is what you get you get separate feature bundles so in case i'm uh
2:10:45
feature bundles so in case i'm uh
2:10:45
feature bundles so in case i'm uh creating a separate module for employees
2:10:47
creating a separate module for employees
2:10:47
creating a separate module for employees separate module for
2:10:49
separate module for
2:10:49
separate module for uh your products i'll get separate
2:10:51
uh your products i'll get separate
2:10:51
uh your products i'll get separate feature bundles right
2:10:53
feature bundles right
2:10:53
feature bundles right and you can load those bundles on demand
2:10:55
and you can load those bundles on demand
2:10:55
and you can load those bundles on demand so it's up to you how you want to load
2:10:57
so it's up to you how you want to load
2:10:57
so it's up to you how you want to load it we will see the uh
2:10:58
it we will see the uh
2:10:58
it we will see the uh we'll discuss about some strategies
2:10:59
we'll discuss about some strategies
2:10:59
we'll discuss about some strategies which are available
2:11:01
which are available
2:11:01
which are available and another advantage of doing lazy
2:11:03
and another advantage of doing lazy
2:11:03
and another advantage of doing lazy loading is you get to
2:11:05
loading is you get to
2:11:05
loading is you get to serve less code on first serve so you
2:11:08
serve less code on first serve so you
2:11:08
serve less code on first serve so you don't you won't be actually
2:11:09
don't you won't be actually
2:11:09
don't you won't be actually giving the entire application or to your
2:11:11
giving the entire application or to your
2:11:11
giving the entire application or to your client on the first serve
2:11:12
client on the first serve
2:11:12
client on the first serve so how you can actually implement lazy
2:11:14
so how you can actually implement lazy
2:11:14
so how you can actually implement lazy loading uh of course that's something
2:11:16
loading uh of course that's something
2:11:16
loading uh of course that's something which i'm not going to talk about
2:11:17
which i'm not going to talk about
2:11:17
which i'm not going to talk about but i'll show you the strategies which
2:11:19
but i'll show you the strategies which
2:11:19
but i'll show you the strategies which you can use so
2:11:21
you can use so
2:11:21
you can use so uh once you do lazy loading the the
2:11:23
uh once you do lazy loading the the
2:11:23
uh once you do lazy loading the the another topic to discuss is how to how
2:11:25
another topic to discuss is how to how
2:11:25
another topic to discuss is how to how to
2:11:25
to
2:11:25
to lazy or how to load those bundles right
2:11:27
lazy or how to load those bundles right
2:11:27
lazy or how to load those bundles right as we said
2:11:28
as we said
2:11:28
as we said in most of the cases it is on demand
2:11:30
in most of the cases it is on demand
2:11:30
in most of the cases it is on demand loading it means whenever a user goes to
2:11:33
loading it means whenever a user goes to
2:11:33
loading it means whenever a user goes to that link
2:11:33
that link
2:11:34
that link and clicks on the uh router or your
2:11:36
and clicks on the uh router or your
2:11:36
and clicks on the uh router or your outer link your bundles are downloaded
2:11:40
outer link your bundles are downloaded
2:11:40
outer link your bundles are downloaded but you can actually avoid that so there
2:11:42
but you can actually avoid that so there
2:11:42
but you can actually avoid that so there is something known as ngx
2:11:43
is something known as ngx
2:11:43
is something known as ngx quick link which is created by minko and
2:11:45
quick link which is created by minko and
2:11:46
quick link which is created by minko and he is also managing that particular
2:11:47
he is also managing that particular
2:11:47
he is also managing that particular package
2:11:48
package
2:11:48
package so uh you can actually attach the nzx
2:11:51
so uh you can actually attach the nzx
2:11:51
so uh you can actually attach the nzx quick link
2:11:52
quick link
2:11:52
quick link with your preloading strategy and what
2:11:54
with your preloading strategy and what
2:11:54
with your preloading strategy and what we'll do what nzx quick link
2:11:56
we'll do what nzx quick link
2:11:56
we'll do what nzx quick link does is it will check if your user is
2:11:58
does is it will check if your user is
2:11:58
does is it will check if your user is active
2:11:59
active
2:11:59
active okay and there is enough bandwidth to
2:12:02
okay and there is enough bandwidth to
2:12:02
okay and there is enough bandwidth to download this particular modules
2:12:03
download this particular modules
2:12:03
download this particular modules so you don't have to wait till actually
2:12:06
so you don't have to wait till actually
2:12:06
so you don't have to wait till actually user goes to that particular router link
2:12:08
user goes to that particular router link
2:12:08
user goes to that particular router link and then clicks and then your module is
2:12:09
and then clicks and then your module is
2:12:09
and then clicks and then your module is downloaded so it will not happen
2:12:11
downloaded so it will not happen
2:12:11
downloaded so it will not happen in that way nzx quickly takes care of it
2:12:13
in that way nzx quickly takes care of it
2:12:13
in that way nzx quickly takes care of it so
2:12:14
so
2:12:14
so in case your application is idle it will
2:12:16
in case your application is idle it will
2:12:16
in case your application is idle it will be loaded in the background
2:12:18
be loaded in the background
2:12:18
be loaded in the background another option uh to do that is using
2:12:20
another option uh to do that is using
2:12:20
another option uh to do that is using guest parser so guess parser
2:12:22
guest parser so guess parser
2:12:22
guest parser so guess parser again uh you you have to just configure
2:12:24
again uh you you have to just configure
2:12:24
again uh you you have to just configure everything
2:12:25
everything
2:12:25
everything as a lazy loaded module and this is a
2:12:28
as a lazy loaded module and this is a
2:12:28
as a lazy loaded module and this is a great solution in case you have google
2:12:29
great solution in case you have google
2:12:29
great solution in case you have google analytics
2:12:30
analytics
2:12:30
analytics because guest parser takes data from
2:12:33
because guest parser takes data from
2:12:33
because guest parser takes data from google analytics
2:12:33
google analytics
2:12:34
google analytics and it tries to check if this particular
2:12:36
and it tries to check if this particular
2:12:36
and it tries to check if this particular module is being used frequently or not
2:12:38
module is being used frequently or not
2:12:38
module is being used frequently or not if user is actually using that
2:12:40
if user is actually using that
2:12:40
if user is actually using that particular module
2:12:41
particular module
2:12:42
particular module it will be lazy loaded otherwise it
2:12:43
it will be lazy loaded otherwise it
2:12:43
it will be lazy loaded otherwise it won't be lazy loaded it will be on
2:12:45
won't be lazy loaded it will be on
2:12:45
won't be lazy loaded it will be on demand loading
2:12:46
demand loading
2:12:46
demand loading so uh prefer uh this guest parser in
2:12:48
so uh prefer uh this guest parser in
2:12:48
so uh prefer uh this guest parser in case uh
2:12:49
case uh
2:12:49
case uh or guess yes in case you have google
2:12:51
or guess yes in case you have google
2:12:51
or guess yes in case you have google analytics first first uh
2:12:53
analytics first first uh
2:12:53
analytics first first uh uh nzx quicklink is of course uh fine
2:12:55
uh nzx quicklink is of course uh fine
2:12:55
uh nzx quicklink is of course uh fine with any solution you have
2:12:56
with any solution you have
2:12:56
with any solution you have but remember in that case all the
2:12:58
but remember in that case all the
2:12:58
but remember in that case all the modules all the lazy loaded modules will
2:13:00
modules all the lazy loaded modules will
2:13:00
modules all the lazy loaded modules will be downloaded based on the bandwidth
2:13:01
be downloaded based on the bandwidth
2:13:02
be downloaded based on the bandwidth so it but in case of guess js you will
2:13:04
so it but in case of guess js you will
2:13:04
so it but in case of guess js you will be actually
2:13:05
be actually
2:13:05
be actually saving some some data some bandwidth on
2:13:08
saving some some data some bandwidth on
2:13:08
saving some some data some bandwidth on your application so that's the first way
2:13:11
your application so that's the first way
2:13:12
your application so that's the first way uh next uh which i did for my
2:13:13
uh next uh which i did for my
2:13:13
uh next uh which i did for my application is
2:13:15
application is
2:13:15
application is i uh avoided using shared modules so we
2:13:17
i uh avoided using shared modules so we
2:13:17
i uh avoided using shared modules so we had a lot of
2:13:18
had a lot of
2:13:18
had a lot of we had two big shared module one was
2:13:21
we had two big shared module one was
2:13:21
we had two big shared module one was material
2:13:22
material
2:13:22
material so we had a material shared module and
2:13:24
so we had a material shared module and
2:13:24
so we had a material shared module and i'm sure if you are an angular developer
2:13:25
i'm sure if you are an angular developer
2:13:26
i'm sure if you are an angular developer you might have
2:13:26
you might have
2:13:26
you might have done that so we had a shared module for
2:13:28
done that so we had a shared module for
2:13:28
done that so we had a shared module for entire application and a different um
2:13:31
entire application and a different um
2:13:31
entire application and a different um shared module for material so what we
2:13:33
shared module for material so what we
2:13:33
shared module for material so what we did how we resolved it
2:13:35
did how we resolved it
2:13:35
did how we resolved it so this is uh so i wrote a blog post so
2:13:37
so this is uh so i wrote a blog post so
2:13:37
so this is uh so i wrote a blog post so i'll just
2:13:38
i'll just
2:13:38
i'll just show you the link so uh this is one of
2:13:40
show you the link so uh this is one of
2:13:40
show you the link so uh this is one of the most famous or
2:13:42
the most famous or
2:13:42
the most famous or one of my most famous blog which i had
2:13:45
one of my most famous blog which i had
2:13:45
one of my most famous blog which i had written and it had it is uh
2:13:46
written and it had it is uh
2:13:46
written and it had it is uh it is read by many uh developers as well
2:13:49
it is read by many uh developers as well
2:13:49
it is read by many uh developers as well so i read uh rotate stop using shared
2:13:52
so i read uh rotate stop using shared
2:13:52
so i read uh rotate stop using shared material modules so this is what i did
2:13:53
material modules so this is what i did
2:13:54
material modules so this is what i did in that particular uh blog post i
2:13:56
in that particular uh blog post i
2:13:56
in that particular uh blog post i created few more a few lazy loaded
2:13:58
created few more a few lazy loaded
2:13:58
created few more a few lazy loaded modules
2:13:59
modules
2:13:59
modules okay and i added shared module so
2:14:03
okay and i added shared module so
2:14:03
okay and i added shared module so this was my application was when i
2:14:04
this was my application was when i
2:14:04
this was my application was when i started i created this application
2:14:06
started i created this application
2:14:06
started i created this application it was around 392 kb then
2:14:10
it was around 392 kb then
2:14:10
it was around 392 kb then uh you can see i created a few
2:14:13
uh you can see i created a few
2:14:13
uh you can see i created a few components
2:14:14
components
2:14:14
components i create a few modules and they are not
2:14:15
i create a few modules and they are not
2:14:16
i create a few modules and they are not lazy loaded right now and i added one
2:14:18
lazy loaded right now and i added one
2:14:18
lazy loaded right now and i added one shared module this is how my shared
2:14:20
shared module this is how my shared
2:14:20
shared module this is how my shared model looks like
2:14:21
model looks like
2:14:21
model looks like i'm sure if you are an angular developer
2:14:23
i'm sure if you are an angular developer
2:14:23
i'm sure if you are an angular developer you might have seen this code
2:14:24
you might have seen this code
2:14:24
you might have seen this code so we uh so we have like
2:14:28
so we uh so we have like
2:14:28
so we uh so we have like starting from overlay module cdk3 and
2:14:31
starting from overlay module cdk3 and
2:14:31
starting from overlay module cdk3 and i'm i actually i don't blame the
2:14:33
i'm i actually i don't blame the
2:14:33
i'm i actually i don't blame the developers because
2:14:34
developers because
2:14:34
developers because this is why this code exists is because
2:14:37
this is why this code exists is because
2:14:37
this is why this code exists is because if i go to the angular material
2:14:39
if i go to the angular material
2:14:39
if i go to the angular material and you click on stack blitz link which
2:14:41
and you click on stack blitz link which
2:14:41
and you click on stack blitz link which is available you will see this code
2:14:42
is available you will see this code
2:14:42
is available you will see this code available and
2:14:43
available and
2:14:43
available and of course people developers just take
2:14:45
of course people developers just take
2:14:46
of course people developers just take that code from
2:14:47
that code from
2:14:47
that code from uh stack blitz link and add into their
2:14:49
uh stack blitz link and add into their
2:14:49
uh stack blitz link and add into their own application but
2:14:50
own application but
2:14:50
own application but believe me this is not a good solution
2:14:52
believe me this is not a good solution
2:14:52
believe me this is not a good solution to do so uh
2:14:53
to do so uh
2:14:54
to do so uh when i did that so uh after after uh
2:14:56
when i did that so uh after after uh
2:14:56
when i did that so uh after after uh adding your component
2:14:58
adding your component
2:14:58
adding your component multiple modules so i added two modules
2:15:00
multiple modules so i added two modules
2:15:00
multiple modules so i added two modules and then i added a
2:15:03
and then i added a
2:15:03
and then i added a shared material module okay so my bundle
2:15:05
shared material module okay so my bundle
2:15:05
shared material module okay so my bundle size went up to 639 kb
2:15:08
size went up to 639 kb
2:15:08
size went up to 639 kb okay so it was like more more 300 kb
2:15:10
okay so it was like more more 300 kb
2:15:10
okay so it was like more more 300 kb more
2:15:11
more
2:15:11
more and then i decided to create lazy loaded
2:15:13
and then i decided to create lazy loaded
2:15:13
and then i decided to create lazy loaded modules so i said okay now
2:15:14
modules so i said okay now
2:15:14
modules so i said okay now if it's 639 kb let's go ahead and do
2:15:17
if it's 639 kb let's go ahead and do
2:15:17
if it's 639 kb let's go ahead and do lazy loading as my first solution was
2:15:20
lazy loading as my first solution was
2:15:20
lazy loading as my first solution was right
2:15:20
right
2:15:20
right and then when i did that actually my
2:15:23
and then when i did that actually my
2:15:23
and then when i did that actually my bundle size went up to 705 kb
2:15:26
bundle size went up to 705 kb
2:15:26
bundle size went up to 705 kb because i was using that shared module
2:15:28
because i was using that shared module
2:15:28
because i was using that shared module shared material model
2:15:29
shared material model
2:15:29
shared material model in my different modules so i even in my
2:15:32
in my different modules so i even in my
2:15:32
in my different modules so i even in my employee module i was
2:15:34
employee module i was
2:15:34
employee module i was injecting that shared shared material
2:15:36
injecting that shared shared material
2:15:36
injecting that shared shared material module even in my
2:15:37
module even in my
2:15:37
module even in my department i was using the same because
2:15:39
department i was using the same because
2:15:39
department i was using the same because but in department or
2:15:41
but in department or
2:15:42
but in department or sorry in employee i was not using all
2:15:43
sorry in employee i was not using all
2:15:43
sorry in employee i was not using all the all the modules which is provided by
2:15:45
the all the modules which is provided by
2:15:45
the all the modules which is provided by material right
2:15:46
material right
2:15:46
material right so then i said okay now let's go get rid
2:15:49
so then i said okay now let's go get rid
2:15:49
so then i said okay now let's go get rid of
2:15:49
of
2:15:49
of this shared material module and try to
2:15:52
this shared material module and try to
2:15:52
this shared material module and try to try to use only modules which i need so
2:15:55
try to use only modules which i need so
2:15:55
try to use only modules which i need so i removed
2:15:55
i removed
2:15:56
i removed that shared module from my application
2:15:57
that shared module from my application
2:15:57
that shared module from my application and then just used the modules from
2:15:59
and then just used the modules from
2:16:00
and then just used the modules from material which is required in
2:16:01
material which is required in
2:16:01
material which is required in employee and in department in product
2:16:04
employee and in department in product
2:16:04
employee and in department in product and this is why and
2:16:05
and this is why and
2:16:05
and this is why and where i ended up so my bundle size got
2:16:07
where i ended up so my bundle size got
2:16:07
where i ended up so my bundle size got reduced from
2:16:09
reduced from
2:16:09
reduced from 705 to 664. so you can see i almost
2:16:12
705 to 664. so you can see i almost
2:16:12
705 to 664. so you can see i almost saved 40 kb you may say okay this is a
2:16:15
saved 40 kb you may say okay this is a
2:16:15
saved 40 kb you may say okay this is a lot of effort for 40 kb
2:16:16
lot of effort for 40 kb
2:16:16
lot of effort for 40 kb remember this is only two applica two
2:16:18
remember this is only two applica two
2:16:18
remember this is only two applica two components which are talking about
2:16:19
components which are talking about
2:16:20
components which are talking about but in case you have uh 40 company 40 uh
2:16:22
but in case you have uh 40 company 40 uh
2:16:22
but in case you have uh 40 company 40 uh modules i mean
2:16:23
modules i mean
2:16:23
modules i mean here we had just two modules but
2:16:25
here we had just two modules but
2:16:25
here we had just two modules but remember in my case i had 40 40 modules
2:16:28
remember in my case i had 40 40 modules
2:16:28
remember in my case i had 40 40 modules and more than 150 components so of
2:16:30
and more than 150 components so of
2:16:30
and more than 150 components so of course in my uh
2:16:31
course in my uh
2:16:31
course in my uh application the impact was used we ended
2:16:33
application the impact was used we ended
2:16:33
application the impact was used we ended up saving more than
2:16:34
up saving more than
2:16:34
up saving more than a mb uh so this is what
2:16:37
a mb uh so this is what
2:16:37
a mb uh so this is what uh the first way is another thing
2:16:41
uh the first way is another thing
2:16:41
uh the first way is another thing uh when i was uh doing uh all this
2:16:44
uh when i was uh doing uh all this
2:16:44
uh when i was uh doing uh all this optimization i i realized
2:16:46
optimization i i realized
2:16:46
optimization i i realized i should i should be able to check my
2:16:48
i should i should be able to check my
2:16:48
i should i should be able to check my component size as well
2:16:49
component size as well
2:16:49
component size as well because so uh but i was struggling i
2:16:52
because so uh but i was struggling i
2:16:52
because so uh but i was struggling i mean
2:16:52
mean
2:16:52
mean i had no idea how to do that so i ended
2:16:55
i had no idea how to do that so i ended
2:16:55
i had no idea how to do that so i ended up
2:16:56
up
2:16:56
up watching the talk from igor igor minor
2:16:59
watching the talk from igor igor minor
2:16:59
watching the talk from igor igor minor from uh
2:16:59
from uh
2:16:59
from uh angular team he's a t he's a tech lead
2:17:02
angular team he's a t he's a tech lead
2:17:02
angular team he's a t he's a tech lead so he
2:17:03
so he
2:17:03
so he introduced a new
2:17:06
introduced a new
2:17:06
introduced a new package which is known as source map
2:17:08
package which is known as source map
2:17:08
package which is known as source map explorer so i created one
2:17:10
explorer so i created one
2:17:10
explorer so i created one small package on top of it which is
2:17:11
small package on top of it which is
2:17:11
small package on top of it which is known as nzx builders
2:17:13
known as nzx builders
2:17:13
known as nzx builders slash analyze so you can actually go
2:17:15
slash analyze so you can actually go
2:17:15
slash analyze so you can actually go ahead and add this into your application
2:17:17
ahead and add this into your application
2:17:17
ahead and add this into your application you can just say ng add and
2:17:19
you can just say ng add and
2:17:19
you can just say ng add and jx builders and slash analyze and then
2:17:21
jx builders and slash analyze and then
2:17:21
jx builders and slash analyze and then you can just run this particular command
2:17:23
you can just run this particular command
2:17:23
you can just run this particular command so you can say ngrun project name and
2:17:25
so you can say ngrun project name and
2:17:25
so you can say ngrun project name and analyze command which will be added
2:17:27
analyze command which will be added
2:17:27
analyze command which will be added into your angular.json file so uh let me
2:17:30
into your angular.json file so uh let me
2:17:30
into your angular.json file so uh let me just show you that code
2:17:35
okay so this is the application i'll
2:17:37
okay so this is the application i'll
2:17:37
okay so this is the application i'll just run this command i have already
2:17:39
just run this command i have already
2:17:39
just run this command i have already added it
2:17:39
added it
2:17:39
added it and i'm just running ng-run scss stream
2:17:42
and i'm just running ng-run scss stream
2:17:42
and i'm just running ng-run scss stream demo
2:17:42
demo
2:17:42
demo uh colon analyze and this will give you
2:17:45
uh colon analyze and this will give you
2:17:45
uh colon analyze and this will give you a nice
2:17:46
a nice
2:17:46
a nice uh representation on on how many
2:17:48
uh representation on on how many
2:17:48
uh representation on on how many different modules you have
2:17:50
different modules you have
2:17:50
different modules you have what which module is responsible for how
2:17:52
what which module is responsible for how
2:17:52
what which module is responsible for how how much bundle size and everything
2:17:54
how much bundle size and everything
2:17:54
how much bundle size and everything and this is where i got one more
2:17:57
and this is where i got one more
2:17:57
and this is where i got one more interesting thing so i'll just
2:17:58
interesting thing so i'll just
2:17:58
interesting thing so i'll just let me just run this
2:18:29
okay so what this package does is it it
2:18:31
okay so what this package does is it it
2:18:31
okay so what this package does is it it will actually
2:18:32
will actually
2:18:32
will actually uh build your application in with source
2:18:34
uh build your application in with source
2:18:34
uh build your application in with source map enabled
2:18:35
map enabled
2:18:36
map enabled and it will also uh not consider the uh
2:18:40
and it will also uh not consider the uh
2:18:40
and it will also uh not consider the uh budgets so uh it will not consider in
2:18:43
budgets so uh it will not consider in
2:18:43
budgets so uh it will not consider in case you have
2:18:44
case you have
2:18:44
case you have specified any budgets which we are
2:18:45
specified any budgets which we are
2:18:45
specified any budgets which we are talking which we are going to talk about
2:18:47
talking which we are going to talk about
2:18:47
talking which we are going to talk about next
2:18:47
next
2:18:47
next and this is this is what it gives you so
2:18:50
and this is this is what it gives you so
2:18:50
and this is this is what it gives you so uh you can see
2:18:51
uh you can see
2:18:51
uh you can see our different files different uh pack
2:18:53
our different files different uh pack
2:18:53
our different files different uh pack different bundles
2:18:54
different bundles
2:18:54
different bundles so let me just increase the font size
2:18:56
so let me just increase the font size
2:18:56
so let me just increase the font size now so it's it
2:18:57
now so it's it
2:18:57
now so it's it should be visible now so you can see uh
2:18:59
should be visible now so you can see uh
2:18:59
should be visible now so you can see uh we whatever different bundles which we
2:19:01
we whatever different bundles which we
2:19:01
we whatever different bundles which we have in our application it will give you
2:19:03
have in our application it will give you
2:19:03
have in our application it will give you all the bundles which are
2:19:04
all the bundles which are
2:19:04
all the bundles which are are there and here you can see uh my
2:19:08
are there and here you can see uh my
2:19:08
are there and here you can see uh my application angular is responsible for
2:19:10
application angular is responsible for
2:19:10
application angular is responsible for 165 kb
2:19:11
165 kb
2:19:11
165 kb in my application then we have something
2:19:13
in my application then we have something
2:19:13
in my application then we have something coming from
2:19:15
coming from
2:19:15
coming from uh iv if we have something coming from
2:19:17
uh iv if we have something coming from
2:19:17
uh iv if we have something coming from router
2:19:18
router
2:19:18
router and similarly we have something coming
2:19:20
and similarly we have something coming
2:19:20
and similarly we have something coming from rxjs
2:19:22
from rxjs
2:19:22
from rxjs in case your application size is used
2:19:23
in case your application size is used
2:19:23
in case your application size is used enough you will be able to see src
2:19:25
enough you will be able to see src
2:19:25
enough you will be able to see src because uh
2:19:26
because uh
2:19:26
because uh the first thing is which it will show
2:19:27
the first thing is which it will show
2:19:27
the first thing is which it will show you is the
2:19:29
you is the
2:19:29
you is the is the largest bundles or largest bundle
2:19:31
is the largest bundles or largest bundle
2:19:31
is the largest bundles or largest bundle size which is available
2:19:32
size which is available
2:19:32
size which is available so by using this uh tool i was able to
2:19:36
so by using this uh tool i was able to
2:19:36
so by using this uh tool i was able to check
2:19:36
check
2:19:36
check that each of my component remember each
2:19:40
that each of my component remember each
2:19:40
that each of my component remember each of my component
2:19:41
of my component
2:19:41
of my component was around 90 kb so i'm talking about
2:19:44
was around 90 kb so i'm talking about
2:19:44
was around 90 kb so i'm talking about 150 components
2:19:45
150 components
2:19:45
150 components and each component is of size 90 kb
2:19:48
and each component is of size 90 kb
2:19:48
and each component is of size 90 kb service i was really shocked
2:19:49
service i was really shocked
2:19:49
service i was really shocked but why why this is happening so uh but
2:19:52
but why why this is happening so uh but
2:19:52
but why why this is happening so uh but at least i i got some data i got some
2:19:54
at least i i got some data i got some
2:19:54
at least i i got some data i got some data to work with then i realized okay
2:19:56
data to work with then i realized okay
2:19:56
data to work with then i realized okay now i have to i have to go ahead and uh
2:19:58
now i have to i have to go ahead and uh
2:19:58
now i have to i have to go ahead and uh decrease this size because 90 kb is of
2:20:00
decrease this size because 90 kb is of
2:20:00
decrease this size because 90 kb is of course really big for a single component
2:20:03
course really big for a single component
2:20:03
course really big for a single component and we have 150 like that but not one
2:20:05
and we have 150 like that but not one
2:20:05
and we have 150 like that but not one not all 50 had 90 kb
2:20:07
not all 50 had 90 kb
2:20:07
not all 50 had 90 kb uh so i started working on it on it so
2:20:09
uh so i started working on it on it so
2:20:09
uh so i started working on it on it so how i
2:20:10
how i
2:20:10
how i i was able to figure out what's what's
2:20:12
i was able to figure out what's what's
2:20:12
i was able to figure out what's what's going wrong so i
2:20:14
going wrong so i
2:20:14
going wrong so i always use budgets budgets are really
2:20:15
always use budgets budgets are really
2:20:15
always use budgets budgets are really useful so we had something known as
2:20:18
useful so we had something known as
2:20:18
useful so we had something known as any component style in my application so
2:20:20
any component style in my application so
2:20:20
any component style in my application so i realized my any component style which
2:20:23
i realized my any component style which
2:20:23
i realized my any component style which is
2:20:23
is
2:20:23
is by default set to 6 kb and maximum
2:20:25
by default set to 6 kb and maximum
2:20:26
by default set to 6 kb and maximum errors resist 10kb was
2:20:28
errors resist 10kb was
2:20:28
errors resist 10kb was actually each component had a maximum or
2:20:31
actually each component had a maximum or
2:20:31
actually each component had a maximum or sorry minimum uh
2:20:32
sorry minimum uh
2:20:32
sorry minimum uh style of 60 kb remember more than i
2:20:36
style of 60 kb remember more than i
2:20:36
style of 60 kb remember more than i think
2:20:36
think
2:20:36
think 60 into 10 right so 10 times more than
2:20:39
60 into 10 right so 10 times more than
2:20:39
60 into 10 right so 10 times more than what
2:20:40
what
2:20:40
what maximum warning should be so uh i
2:20:42
maximum warning should be so uh i
2:20:42
maximum warning should be so uh i realized okay now what's
2:20:43
realized okay now what's
2:20:43
realized okay now what's what what is happening here so we we we
2:20:46
what what is happening here so we we we
2:20:46
what what is happening here so we we we realized that we are using
2:20:47
realized that we are using
2:20:47
realized that we are using the custom theme for uh material right
2:20:50
the custom theme for uh material right
2:20:50
the custom theme for uh material right and we did a lot of things wrong so
2:20:51
and we did a lot of things wrong so
2:20:51
and we did a lot of things wrong so before i'll discuss about it more
2:20:53
before i'll discuss about it more
2:20:53
before i'll discuss about it more but let's go ahead and see uh how
2:20:55
but let's go ahead and see uh how
2:20:55
but let's go ahead and see uh how budgets helps
2:20:56
budgets helps
2:20:56
budgets helps so there are multiple ways you can set
2:20:58
so there are multiple ways you can set
2:20:58
so there are multiple ways you can set the budget so
2:20:59
the budget so
2:20:59
the budget so uh there are there is something known as
2:21:02
uh there are there is something known as
2:21:02
uh there are there is something known as initial so you can
2:21:03
initial so you can
2:21:03
initial so you can define the initial size of your app so
2:21:05
define the initial size of your app so
2:21:05
define the initial size of your app so for example let's say you have
2:21:07
for example let's say you have
2:21:07
for example let's say you have your main bundle size of around 100 kb
2:21:10
your main bundle size of around 100 kb
2:21:10
your main bundle size of around 100 kb and adding polyfills and other styles
2:21:13
and adding polyfills and other styles
2:21:13
and adding polyfills and other styles it goes to 150 kb right so you will set
2:21:15
it goes to 150 kb right so you will set
2:21:15
it goes to 150 kb right so you will set your initial app size to be
2:21:17
your initial app size to be
2:21:17
your initial app size to be 150 kb now how it helps so in case
2:21:19
150 kb now how it helps so in case
2:21:19
150 kb now how it helps so in case someone does something wrong
2:21:21
someone does something wrong
2:21:21
someone does something wrong your application bundle size will
2:21:23
your application bundle size will
2:21:23
your application bundle size will increase so if there is an
2:21:24
increase so if there is an
2:21:24
increase so if there is an there is a sudden increase for example
2:21:26
there is a sudden increase for example
2:21:26
there is a sudden increase for example it goes from 150 kb to 200 kb
2:21:29
it goes from 150 kb to 200 kb
2:21:29
it goes from 150 kb to 200 kb that's a red flag so you should be able
2:21:31
that's a red flag so you should be able
2:21:31
that's a red flag so you should be able to see why that's uh 50 kb
2:21:33
to see why that's uh 50 kb
2:21:33
to see why that's uh 50 kb increase is there so uh this is initial
2:21:36
increase is there so uh this is initial
2:21:36
increase is there so uh this is initial then you have something known as all
2:21:37
then you have something known as all
2:21:37
then you have something known as all script so it says okay
2:21:38
script so it says okay
2:21:38
script so it says okay the size of all script should not
2:21:41
the size of all script should not
2:21:41
the size of all script should not increase so if you are wondering what's
2:21:42
increase so if you are wondering what's
2:21:42
increase so if you are wondering what's uh what are the different scripts you
2:21:44
uh what are the different scripts you
2:21:44
uh what are the different scripts you in angular.js then you specify the
2:21:47
in angular.js then you specify the
2:21:47
in angular.js then you specify the scripts
2:21:47
scripts
2:21:47
scripts you specify the scripts array so all the
2:21:49
you specify the scripts array so all the
2:21:50
you specify the scripts array so all the combined script sites should not
2:21:51
combined script sites should not
2:21:51
combined script sites should not increase this particular size then you
2:21:53
increase this particular size then you
2:21:53
increase this particular size then you have all so you can
2:21:54
have all so you can
2:21:54
have all so you can specify the entire app for example if
2:21:57
specify the entire app for example if
2:21:57
specify the entire app for example if you have some
2:21:58
you have some
2:21:58
you have some uh some standard within your
2:22:00
uh some standard within your
2:22:00
uh some standard within your organization that my app size should not
2:22:02
organization that my app size should not
2:22:02
organization that my app size should not go beyond 200 kb right so i can just go
2:22:04
go beyond 200 kb right so i can just go
2:22:04
go beyond 200 kb right so i can just go ahead and say okay my app
2:22:06
ahead and say okay my app
2:22:06
ahead and say okay my app should not actually increase 200 kb uh
2:22:09
should not actually increase 200 kb uh
2:22:09
should not actually increase 200 kb uh benchmark so i'll
2:22:10
benchmark so i'll
2:22:10
benchmark so i'll always throw an exception whenever it
2:22:12
always throw an exception whenever it
2:22:12
always throw an exception whenever it goes beyond 200 kb
2:22:14
goes beyond 200 kb
2:22:14
goes beyond 200 kb and we have something known as any
2:22:15
and we have something known as any
2:22:16
and we have something known as any component style which will tell you okay
2:22:17
component style which will tell you okay
2:22:17
component style which will tell you okay if there is a
2:22:18
if there is a
2:22:18
if there is a there is any problem or your your
2:22:21
there is any problem or your your
2:22:21
there is any problem or your your styling is actually increasing the
2:22:24
styling is actually increasing the
2:22:24
styling is actually increasing the budget which we have set
2:22:25
budget which we have set
2:22:25
budget which we have set for example in my in my application it
2:22:27
for example in my in my application it
2:22:27
for example in my in my application it was when we configured it
2:22:29
was when we configured it
2:22:29
was when we configured it it i set it to 6kb but yeah i realized
2:22:31
it i set it to 6kb but yeah i realized
2:22:31
it i set it to 6kb but yeah i realized that okay
2:22:32
that okay
2:22:32
that okay for most of the component it's more than
2:22:34
for most of the component it's more than
2:22:34
for most of the component it's more than 60 kb
2:22:35
60 kb
2:22:35
60 kb then you can say any script so any
2:22:37
then you can say any script so any
2:22:37
then you can say any script so any script size it means
2:22:38
script size it means
2:22:38
script size it means the size of any one script should not
2:22:40
the size of any one script should not
2:22:40
the size of any one script should not increase for example if i have specified
2:22:42
increase for example if i have specified
2:22:42
increase for example if i have specified okay any script of 10 kb
2:22:44
okay any script of 10 kb
2:22:44
okay any script of 10 kb and i have 10 different different
2:22:46
and i have 10 different different
2:22:46
and i have 10 different different scripts specified
2:22:48
scripts specified
2:22:48
scripts specified each of them should not actually be more
2:22:50
each of them should not actually be more
2:22:50
each of them should not actually be more than 10 kb
2:22:51
than 10 kb
2:22:51
than 10 kb then we have any so it is applied for
2:22:53
then we have any so it is applied for
2:22:53
then we have any so it is applied for all the files any file should not
2:22:55
all the files any file should not
2:22:55
all the files any file should not increase
2:22:56
increase
2:22:56
increase so how we did that how you actually
2:22:58
so how we did that how you actually
2:22:58
so how we did that how you actually improved the
2:22:59
improved the
2:22:59
improved the scss one so i wrote another blog post uh
2:23:02
scss one so i wrote another blog post uh
2:23:02
scss one so i wrote another blog post uh this is like seven minute read where
2:23:03
this is like seven minute read where
2:23:04
this is like seven minute read where i uh did some experiment around
2:23:06
i uh did some experiment around
2:23:06
i uh did some experiment around something known as bem block elements
2:23:09
something known as bem block elements
2:23:09
something known as bem block elements uh model and uh i ended up reducing my
2:23:12
uh model and uh i ended up reducing my
2:23:12
uh model and uh i ended up reducing my application size
2:23:13
application size
2:23:13
application size uh by more than 150 uh sorry 1.5 mb
2:23:17
uh by more than 150 uh sorry 1.5 mb
2:23:17
uh by more than 150 uh sorry 1.5 mb so i'll show you some stats okay so i
2:23:19
so i'll show you some stats okay so i
2:23:19
so i'll show you some stats okay so i believe uh showing straw
2:23:21
believe uh showing straw
2:23:21
believe uh showing straw stats is much more useful so uh
2:23:24
stats is much more useful so uh
2:23:24
stats is much more useful so uh i'll show you the uh
2:23:27
i'll show you the uh
2:23:27
i'll show you the uh prod build so this is where this is what
2:23:29
prod build so this is where this is what
2:23:29
prod build so this is where this is what we started with
2:23:32
we started with
2:23:32
we started with okay so we had around 8.44 mb of initial
2:23:35
okay so we had around 8.44 mb of initial
2:23:35
okay so we had around 8.44 mb of initial bundle size
2:23:36
bundle size
2:23:36
bundle size and uh uh it was uh we
2:23:39
and uh uh it was uh we
2:23:39
and uh uh it was uh we we had no lazy loaded module we had all
2:23:41
we had no lazy loaded module we had all
2:23:42
we had no lazy loaded module we had all of all of shared module
2:23:43
of all of shared module
2:23:43
of all of shared module everything right so from this we
2:23:46
everything right so from this we
2:23:46
everything right so from this we actually went on to achieve
2:23:50
this one so you can see and now i have
2:23:52
this one so you can see and now i have
2:23:52
this one so you can see and now i have different modules but my
2:23:54
different modules but my
2:23:54
different modules but my entire app size is now 6.4 at mb but
2:23:57
entire app size is now 6.4 at mb but
2:23:57
entire app size is now 6.4 at mb but see my the initial bundle size so if you
2:24:00
see my the initial bundle size so if you
2:24:00
see my the initial bundle size so if you see the initial bundle size it's around
2:24:02
see the initial bundle size it's around
2:24:02
see the initial bundle size it's around main main bundle is 3.65 mb
2:24:04
main main bundle is 3.65 mb
2:24:04
main main bundle is 3.65 mb which is way less as compared to what we
2:24:06
which is way less as compared to what we
2:24:06
which is way less as compared to what we had earlier where we were loading 8
2:24:08
had earlier where we were loading 8
2:24:08
had earlier where we were loading 8 mb of data and then my runtime and
2:24:11
mb of data and then my runtime and
2:24:11
mb of data and then my runtime and common gs plus polyfills
2:24:13
common gs plus polyfills
2:24:13
common gs plus polyfills so if i combine everything it was not
2:24:14
so if i combine everything it was not
2:24:14
so if i combine everything it was not more than 3.8
2:24:17
more than 3.8
2:24:17
more than 3.8 mb so from 8 mb to 3.8 mb this is what
2:24:20
mb so from 8 mb to 3.8 mb this is what
2:24:20
mb so from 8 mb to 3.8 mb this is what we came into came on to
2:24:21
we came into came on to
2:24:21
we came into came on to and similarly my lazy loaded bundle
2:24:24
and similarly my lazy loaded bundle
2:24:24
and similarly my lazy loaded bundle chunks uh which were like
2:24:26
chunks uh which were like
2:24:26
chunks uh which were like if you see the the biggest bundle size
2:24:28
if you see the the biggest bundle size
2:24:28
if you see the the biggest bundle size which which i had was
2:24:29
which which i had was
2:24:29
which which i had was this 622 kb uh but previously
2:24:32
this 622 kb uh but previously
2:24:32
this 622 kb uh but previously was it 622 kb no so before this is uh
2:24:36
was it 622 kb no so before this is uh
2:24:36
was it 622 kb no so before this is uh this is before i did the scss
2:24:38
this is before i did the scss
2:24:38
this is before i did the scss optimization you can read the blog in
2:24:40
optimization you can read the blog in
2:24:40
optimization you can read the blog in to get more details how i did that so
2:24:42
to get more details how i did that so
2:24:42
to get more details how i did that so you can see my biggest bundle size was
2:24:44
you can see my biggest bundle size was
2:24:44
you can see my biggest bundle size was actually 1 mb
2:24:46
actually 1 mb
2:24:46
actually 1 mb so i reduced the bundle size from 1 mb
2:24:48
so i reduced the bundle size from 1 mb
2:24:48
so i reduced the bundle size from 1 mb to 660 kb
2:24:49
to 660 kb
2:24:49
to 660 kb by using that styling technique plus we
2:24:51
by using that styling technique plus we
2:24:51
by using that styling technique plus we did a lot of a lot of
2:24:53
did a lot of a lot of
2:24:53
did a lot of a lot of optimization where we removed all the
2:24:55
optimization where we removed all the
2:24:55
optimization where we removed all the shared modules and
2:24:56
shared modules and
2:24:56
shared modules and ended up using each uh component should
2:24:59
ended up using each uh component should
2:24:59
ended up using each uh component should have its own module so that's what we
2:25:01
have its own module so that's what we
2:25:01
have its own module so that's what we that's what approach we took and uh
2:25:04
that's what approach we took and uh
2:25:04
that's what approach we took and uh there is already uh one
2:25:05
there is already uh one
2:25:05
there is already uh one principle called scam principle uh
2:25:07
principle called scam principle uh
2:25:07
principle called scam principle uh written by one of the
2:25:09
written by one of the
2:25:09
written by one of the community member lars so he wrote about
2:25:11
community member lars so he wrote about
2:25:11
community member lars so he wrote about scam where he says that
2:25:13
scam where he says that
2:25:13
scam where he says that you should use single component and
2:25:15
you should use single component and
2:25:15
you should use single component and module so every component
2:25:16
module so every component
2:25:16
module so every component should have their own module and we
2:25:18
should have their own module and we
2:25:18
should have their own module and we should be able to define where
2:25:19
should be able to define where
2:25:20
should be able to define where i want to use what so this is this blog
2:25:23
i want to use what so this is this blog
2:25:23
i want to use what so this is this blog post you can go through it and then
2:25:24
post you can go through it and then
2:25:24
post you can go through it and then you of course you i'll be interested to
2:25:27
you of course you i'll be interested to
2:25:27
you of course you i'll be interested to see
2:25:27
see
2:25:27
see uh or see your feedbacks on social media
2:25:30
uh or see your feedbacks on social media
2:25:30
uh or see your feedbacks on social media if it helped you
2:25:33
if it helped you
2:25:33
if it helped you to reduce your bundle size and
2:25:36
to reduce your bundle size and
2:25:36
to reduce your bundle size and the next thing there is also one very
2:25:38
the next thing there is also one very
2:25:38
the next thing there is also one very small thing i mean i this is something
2:25:39
small thing i mean i this is something
2:25:40
small thing i mean i this is something which doesn't require a lot of uh a lot
2:25:42
which doesn't require a lot of uh a lot
2:25:42
which doesn't require a lot of uh a lot of code changes
2:25:43
of code changes
2:25:44
of code changes is to avoid using es modules so we had
2:25:46
is to avoid using es modules so we had
2:25:46
is to avoid using es modules so we had something known as low dash
2:25:48
something known as low dash
2:25:48
something known as low dash and deep dash we were using the es
2:25:50
and deep dash we were using the es
2:25:50
and deep dash we were using the es modules for both so
2:25:51
modules for both so
2:25:51
modules for both so what we ended up doing is we removed the
2:25:54
what we ended up doing is we removed the
2:25:54
what we ended up doing is we removed the es modules and then we moved on to the
2:25:58
sorry uh sorry we uh earlier it was uh
2:26:01
sorry uh sorry we uh earlier it was uh
2:26:01
sorry uh sorry we uh earlier it was uh uh
2:26:01
uh
2:26:01
uh we moved on to es modules so we we were
2:26:03
we moved on to es modules so we we were
2:26:03
we moved on to es modules so we we were using low dash and moments
2:26:05
using low dash and moments
2:26:05
using low dash and moments not moment but we were using deep dash
2:26:07
not moment but we were using deep dash
2:26:07
not moment but we were using deep dash so we
2:26:08
so we
2:26:08
so we removed low dash with low dash es and
2:26:11
removed low dash with low dash es and
2:26:11
removed low dash with low dash es and similarly for
2:26:11
similarly for
2:26:12
similarly for deep dash we had some we have something
2:26:13
deep dash we had some we have something
2:26:13
deep dash we had some we have something called known as deep dash es
2:26:16
called known as deep dash es
2:26:16
called known as deep dash es so we actually uh did that as well
2:26:19
so we actually uh did that as well
2:26:19
so we actually uh did that as well and it also helped us to uh uh reduce
2:26:22
and it also helped us to uh uh reduce
2:26:22
and it also helped us to uh uh reduce our bundle size because when i s
2:26:24
our bundle size because when i s
2:26:24
our bundle size because when i s when you use low dash es it actually
2:26:26
when you use low dash es it actually
2:26:26
when you use low dash es it actually only
2:26:27
only
2:26:27
only adds the bundle size or the
2:26:30
adds the bundle size or the
2:26:30
adds the bundle size or the the packages or the functions which you
2:26:32
the packages or the functions which you
2:26:32
the packages or the functions which you are using for example if i am using one
2:26:34
are using for example if i am using one
2:26:34
are using for example if i am using one function from load
2:26:35
function from load
2:26:35
function from load cs i will get the uh that variable
2:26:37
cs i will get the uh that variable
2:26:37
cs i will get the uh that variable function in my final bundle size
2:26:39
function in my final bundle size
2:26:39
function in my final bundle size but if i'm including entire low dash
2:26:42
but if i'm including entire low dash
2:26:42
but if i'm including entire low dash it's like you are in
2:26:43
it's like you are in
2:26:43
it's like you are in including the entire library and it will
2:26:45
including the entire library and it will
2:26:45
including the entire library and it will be your part of your bundle uh
2:26:46
be your part of your bundle uh
2:26:46
be your part of your bundle uh final bundle size how i realized that of
2:26:49
final bundle size how i realized that of
2:26:49
final bundle size how i realized that of course using the same tool
2:26:51
course using the same tool
2:26:51
course using the same tool so you can actually go ahead and use
2:26:53
so you can actually go ahead and use
2:26:53
so you can actually go ahead and use that so uh
2:26:54
that so uh
2:26:54
that so uh avoid using common js modules in angular
2:26:57
avoid using common js modules in angular
2:26:57
avoid using common js modules in angular 10 the good thing is
2:26:58
10 the good thing is
2:26:58
10 the good thing is in case you migrate to angular 10 you
2:27:00
in case you migrate to angular 10 you
2:27:00
in case you migrate to angular 10 you will be you will be you will get warning
2:27:02
will be you will be you will get warning
2:27:02
will be you will be you will get warning in case you are using low dash or you
2:27:03
in case you are using low dash or you
2:27:03
in case you are using low dash or you are using deep dash you will get a
2:27:05
are using deep dash you will get a
2:27:05
are using deep dash you will get a warning that okay you are trying to use
2:27:07
warning that okay you are trying to use
2:27:07
warning that okay you are trying to use common gs module
2:27:32
yeah uh sorry uh sorry for uh the
2:27:34
yeah uh sorry uh sorry for uh the
2:27:34
yeah uh sorry uh sorry for uh the interruption
2:27:35
interruption
2:27:35
interruption i there is heavy rain which is happening
2:27:37
i there is heavy rain which is happening
2:27:37
i there is heavy rain which is happening at my uh
2:27:38
at my uh
2:27:38
at my uh uh my in my city so there was some just
2:27:40
uh my in my city so there was some just
2:27:40
uh my in my city so there was some just power failure we are back now
2:27:42
power failure we are back now
2:27:42
power failure we are back now simon can you just confirm are we back
2:27:46
simon can you just confirm are we back
2:27:46
simon can you just confirm are we back yeah i was just going to uh walk in and
2:27:48
yeah i was just going to uh walk in and
2:27:48
yeah i was just going to uh walk in and say hey where you are i don't know any
2:27:50
say hey where you are i don't know any
2:27:50
say hey where you are i don't know any angular
2:27:51
angular
2:27:51
angular i cannot take the session from there so
2:27:53
i cannot take the session from there so
2:27:53
i cannot take the session from there so definitely we are live
2:27:55
definitely we are live
2:27:55
definitely we are live yeah yeah okay we are live oh thanks
2:27:57
yeah yeah okay we are live oh thanks
2:27:57
yeah yeah okay we are live oh thanks okay so
2:27:58
okay so
2:27:58
okay so in angular 10 you will get a warning
2:27:59
in angular 10 you will get a warning
2:27:59
in angular 10 you will get a warning whenever you try to use common gs
2:28:01
whenever you try to use common gs
2:28:01
whenever you try to use common gs modules
2:28:01
modules
2:28:01
modules but in but in case you are actually
2:28:03
but in but in case you are actually
2:28:03
but in but in case you are actually using common js module and you don't
2:28:05
using common js module and you don't
2:28:05
using common js module and you don't have any alternative
2:28:06
have any alternative
2:28:06
have any alternative angular as your back so you can actually
2:28:08
angular as your back so you can actually
2:28:08
angular as your back so you can actually use something known as allow
2:28:10
use something known as allow
2:28:10
use something known as allow allowed common js dependencies and once
2:28:13
allowed common js dependencies and once
2:28:13
allowed common js dependencies and once you add this you will actually
2:28:15
you add this you will actually
2:28:15
you add this you will actually those warnings will just disappear it
2:28:16
those warnings will just disappear it
2:28:16
those warnings will just disappear it will it will just go away
2:28:18
will it will just go away
2:28:18
will it will just go away uh use cdn to serve the assets a lot of
2:28:20
uh use cdn to serve the assets a lot of
2:28:20
uh use cdn to serve the assets a lot of people a lot of developers what they do
2:28:22
people a lot of developers what they do
2:28:22
people a lot of developers what they do is they add all the images to your
2:28:24
is they add all the images to your
2:28:24
is they add all the images to your assets folder right i mean of course
2:28:26
assets folder right i mean of course
2:28:26
assets folder right i mean of course that's the most uh
2:28:27
that's the most uh
2:28:27
that's the most uh most easiest thing to do but i would
2:28:29
most easiest thing to do but i would
2:28:30
most easiest thing to do but i would suggest go ahead and use
2:28:31
suggest go ahead and use
2:28:31
suggest go ahead and use cdn cdn of course in case you are using
2:28:33
cdn cdn of course in case you are using
2:28:33
cdn cdn of course in case you are using cdn you you have
2:28:34
cdn you you have
2:28:34
cdn you you have low network latency it is high
2:28:36
low network latency it is high
2:28:36
low network latency it is high availability and better analytics you
2:28:38
availability and better analytics you
2:28:38
availability and better analytics you will be able to see from where
2:28:39
will be able to see from where
2:28:39
will be able to see from where the where the people are trying to
2:28:41
the where the people are trying to
2:28:41
the where the people are trying to access your uh
2:28:42
access your uh
2:28:42
access your uh your your website and it decreases the
2:28:45
your your website and it decreases the
2:28:46
your your website and it decreases the server load so you you are not
2:28:47
server load so you you are not
2:28:47
server load so you you are not going to serve like 1 mb of image from
2:28:49
going to serve like 1 mb of image from
2:28:49
going to serve like 1 mb of image from your server it is
2:28:50
your server it is
2:28:50
your server it is deployed on cdn and cdn you will take
2:28:52
deployed on cdn and cdn you will take
2:28:52
deployed on cdn and cdn you will take care and it will just try to
2:28:54
care and it will just try to
2:28:54
care and it will just try to serve the image from the the nearest
2:28:57
serve the image from the the nearest
2:28:57
serve the image from the the nearest location right this is what
2:28:59
location right this is what
2:28:59
location right this is what happens in cdn a lot of developers do
2:29:01
happens in cdn a lot of developers do
2:29:01
happens in cdn a lot of developers do this
2:29:02
this
2:29:02
this so they are not using the prod mode so
2:29:05
so they are not using the prod mode so
2:29:05
so they are not using the prod mode so i'd suggest go ahead and check if you
2:29:06
i'd suggest go ahead and check if you
2:29:06
i'd suggest go ahead and check if you are using the prod mode to deploy or
2:29:08
are using the prod mode to deploy or
2:29:08
are using the prod mode to deploy or build your application
2:29:09
build your application
2:29:09
build your application and in case you are using prod prod
2:29:11
and in case you are using prod prod
2:29:11
and in case you are using prod prod build the other thing which you can do
2:29:13
build the other thing which you can do
2:29:13
build the other thing which you can do is gzip minification
2:29:15
is gzip minification
2:29:15
is gzip minification so zip minification actually helps you a
2:29:17
so zip minification actually helps you a
2:29:18
so zip minification actually helps you a lot let me show you one of the stats
2:29:19
lot let me show you one of the stats
2:29:19
lot let me show you one of the stats again
2:29:20
again
2:29:20
again where we are actually using gz
2:29:22
where we are actually using gz
2:29:22
where we are actually using gz minification
2:29:23
minification
2:29:23
minification and uh the our bundle size is uh
2:29:27
and uh the our bundle size is uh
2:29:27
and uh the our bundle size is uh g zipped so this is uh this is not the
2:29:30
g zipped so this is uh this is not the
2:29:30
g zipped so this is uh this is not the latest one but i think
2:29:41
ah it is taking a lot of time uh okay so
2:29:44
ah it is taking a lot of time uh okay so
2:29:44
ah it is taking a lot of time uh okay so it is it is taking a lot of time to load
2:29:45
it is it is taking a lot of time to load
2:29:45
it is it is taking a lot of time to load that particular image so just to give
2:29:47
that particular image so just to give
2:29:47
that particular image so just to give you an idea
2:29:48
you an idea
2:29:48
you an idea uh once i do uh you you have seen my
2:29:50
uh once i do uh you you have seen my
2:29:50
uh once i do uh you you have seen my application size right so it's around
2:29:51
application size right so it's around
2:29:51
application size right so it's around six point four eight mb
2:29:53
six point four eight mb
2:29:53
six point four eight mb but uh am i serving six point four mb to
2:29:55
but uh am i serving six point four mb to
2:29:55
but uh am i serving six point four mb to the user of course i'm not
2:29:57
the user of course i'm not
2:29:57
the user of course i'm not so we we are using a server where zip
2:29:59
so we we are using a server where zip
2:29:59
so we we are using a server where zip minification is enabled and the final
2:30:00
minification is enabled and the final
2:30:00
minification is enabled and the final bundle size which we are serving is
2:30:03
bundle size which we are serving is
2:30:03
bundle size which we are serving is 648 kb so remember 648
2:30:06
648 kb so remember 648
2:30:06
648 kb so remember 648 6.48 mb and the uh that's that's the
2:30:09
6.48 mb and the uh that's that's the
2:30:09
6.48 mb and the uh that's that's the that's the entire application size and
2:30:10
that's the entire application size and
2:30:10
that's the entire application size and the
2:30:11
the
2:30:11
the of the one which we are serving is less
2:30:13
of the one which we are serving is less
2:30:13
of the one which we are serving is less than uh 900 kb 900 or 800 kb
2:30:16
than uh 900 kb 900 or 800 kb
2:30:16
than uh 900 kb 900 or 800 kb that's what we are serving to the user
2:30:17
that's what we are serving to the user
2:30:17
that's what we are serving to the user using gzip magnification
2:30:19
using gzip magnification
2:30:19
using gzip magnification so uh z zip magnification is something
2:30:20
so uh z zip magnification is something
2:30:20
so uh z zip magnification is something which you cannot do you have to look for
2:30:22
which you cannot do you have to look for
2:30:22
which you cannot do you have to look for a server which actually does that for
2:30:23
a server which actually does that for
2:30:24
a server which actually does that for you for example if i am using
2:30:25
you for example if i am using
2:30:25
you for example if i am using netlife to deploy it lightly if i
2:30:27
netlife to deploy it lightly if i
2:30:27
netlife to deploy it lightly if i already already takes care of zip
2:30:29
already already takes care of zip
2:30:29
already already takes care of zip unification i don't have to do anything
2:30:30
unification i don't have to do anything
2:30:30
unification i don't have to do anything else
2:30:30
else
2:30:30
else and it is provided by your server so you
2:30:33
and it is provided by your server so you
2:30:33
and it is provided by your server so you just
2:30:34
just
2:30:34
just you just have to check if they it is
2:30:35
you just have to check if they it is
2:30:35
you just have to check if they it is enabled or not and
2:30:39
enabled or not and
2:30:39
enabled or not and i think just a second
2:30:43
yeah that's that's all about it because
2:30:45
yeah that's that's all about it because
2:30:45
yeah that's that's all about it because this this was my
2:30:47
this this was my
2:30:47
this this was my own uh experience which i had uh during
2:30:49
own uh experience which i had uh during
2:30:49
own uh experience which i had uh during uh
2:30:50
uh
2:30:50
uh optimization optimizing my angular
2:30:52
optimization optimizing my angular
2:30:52
optimization optimizing my angular application and that's what i
2:30:53
application and that's what i
2:30:53
application and that's what i wanted to share here so uh thank you
2:30:55
wanted to share here so uh thank you
2:30:55
wanted to share here so uh thank you thank you very much for
2:30:56
thank you very much for
2:30:56
thank you very much for listening to my talk that's great
2:31:00
listening to my talk that's great
2:31:00
listening to my talk that's great santosh uh i think uh you see a bunch of
2:31:03
santosh uh i think uh you see a bunch of
2:31:03
santosh uh i think uh you see a bunch of best practices that one should have in
2:31:05
best practices that one should have in
2:31:05
best practices that one should have in building a uh angular project especially
2:31:07
building a uh angular project especially
2:31:07
building a uh angular project especially during the broad time
2:31:08
during the broad time
2:31:08
during the broad time right uh one quick question uh which is
2:31:10
right uh one quick question uh which is
2:31:10
right uh one quick question uh which is your favorite cdn i mean i use
2:31:12
your favorite cdn i mean i use
2:31:12
your favorite cdn i mean i use supersonic
2:31:13
supersonic
2:31:13
supersonic which cdn do you use ah so i i use a
2:31:16
which cdn do you use ah so i i use a
2:31:16
which cdn do you use ah so i i use a netlife to deploy my entire application
2:31:17
netlife to deploy my entire application
2:31:17
netlife to deploy my entire application so netlify has your
2:31:19
so netlify has your
2:31:19
so netlify has your uh it actually manifests your images it
2:31:21
uh it actually manifests your images it
2:31:21
uh it actually manifests your images it uh
2:31:22
uh
2:31:22
uh it optimizes your images everything is
2:31:23
it optimizes your images everything is
2:31:24
it optimizes your images everything is taken care by netlife so i don't have to
2:31:25
taken care by netlife so i don't have to
2:31:25
taken care by netlife so i don't have to look anything else
2:31:27
look anything else
2:31:27
look anything else okay so that's a netflix easy even with
2:31:29
okay so that's a netflix easy even with
2:31:29
okay so that's a netflix easy even with your angular application it doesn't have
2:31:30
your angular application it doesn't have
2:31:30
your angular application it doesn't have to do anything that that's all good to
2:31:32
to do anything that that's all good to
2:31:32
to do anything that that's all good to go right
2:31:33
go right
2:31:33
go right exactly you just you just need to deploy
2:31:34
exactly you just you just need to deploy
2:31:34
exactly you just you just need to deploy the application you can actually uh not
2:31:36
the application you can actually uh not
2:31:36
the application you can actually uh not only for angular you can deploy
2:31:38
only for angular you can deploy
2:31:38
only for angular you can deploy any static application in case you have
2:31:40
any static application in case you have
2:31:40
any static application in case you have and that's it
2:31:41
and that's it
2:31:41
and that's it everything will be taken care by natalie
2:31:43
everything will be taken care by natalie
2:31:44
everything will be taken care by natalie that's great
2:31:44
that's great
2:31:44
that's great santosh thank you for your time i love
2:31:46
santosh thank you for your time i love
2:31:46
santosh thank you for your time i love your background right
2:31:48
your background right
2:31:48
your background right it's filled with the conference very
2:31:50
it's filled with the conference very
2:31:50
it's filled with the conference very creative and that was an amazing session
2:31:52
creative and that was an amazing session
2:31:52
creative and that was an amazing session to put together thank you so much for
2:31:54
to put together thank you so much for
2:31:54
to put together thank you so much for your time
2:31:54
your time
2:31:54
your time it's an honor for us to have you today
2:31:57
it's an honor for us to have you today
2:31:57
it's an honor for us to have you today and
2:31:58
and
2:31:58
and uh we'll see you in the next conference
2:32:00
uh we'll see you in the next conference
2:32:00
uh we'll see you in the next conference until then enjoy
2:32:01
until then enjoy
2:32:01
until then enjoy your dinner time i think so or maybe
2:32:03
your dinner time i think so or maybe
2:32:03
your dinner time i think so or maybe some thanks
2:32:04
some thanks
2:32:04
some thanks yes thank you stephen and thank you
2:32:06
yes thank you stephen and thank you
2:32:06
yes thank you stephen and thank you everyone in case you have any ques
2:32:07
everyone in case you have any ques
2:32:07
everyone in case you have any ques questions
2:32:08
questions
2:32:08
questions uh you know my social media handles you
2:32:10
uh you know my social media handles you
2:32:10
uh you know my social media handles you can always connect and ask questions
2:32:12
can always connect and ask questions
2:32:12
can always connect and ask questions yeah great and if you want to connect
2:32:14
yeah great and if you want to connect
2:32:14
yeah great and if you want to connect with him there he also does live shows
2:32:15
with him there he also does live shows
2:32:15
with him there he also does live shows talk with santosh yeah tech talks with
2:32:17
talk with santosh yeah tech talks with
2:32:18
talk with santosh yeah tech talks with santosh which i recently started so
2:32:19
santosh which i recently started so
2:32:19
santosh which i recently started so you can always come again come and join
2:32:21
you can always come again come and join
2:32:22
you can always come again come and join us
2:32:23
us
2:32:23
us great thank you santosh we'll catch you
2:32:25
great thank you santosh we'll catch you
2:32:25
great thank you santosh we'll catch you another conference or a live show thank
2:32:26
another conference or a live show thank
2:32:26
another conference or a live show thank you so much thank you thank you bye bye
2:32:28
you so much thank you thank you bye bye
2:32:28
you so much thank you thank you bye bye everyone
2:32:30
everyone
2:32:30
everyone all right so that was by santosh uh our
2:32:33
all right so that was by santosh uh our
2:32:33
all right so that was by santosh uh our next speaker
2:32:35
next speaker
2:32:35
next speaker is uh minko minko is an engineer in the
2:32:38
is uh minko minko is an engineer in the
2:32:38
is uh minko minko is an engineer in the angular team at google
2:32:39
angular team at google
2:32:39
angular team at google he loves to transform abstract
2:32:41
he loves to transform abstract
2:32:41
he loves to transform abstract theoretical computer science concepts
2:32:43
theoretical computer science concepts
2:32:43
theoretical computer science concepts into robust industrial solution
2:32:45
into robust industrial solution
2:32:46
into robust industrial solution miko is working on tools for static code
2:32:48
miko is working on tools for static code
2:32:48
miko is working on tools for static code analysis
2:32:49
analysis
2:32:49
analysis and development productivity before
2:32:51
and development productivity before
2:32:51
and development productivity before joining google he
2:32:53
joining google he
2:32:53
joining google he co-founded and was the cto of rhyme.com
2:32:56
co-founded and was the cto of rhyme.com
2:32:56
co-founded and was the cto of rhyme.com which in 2019 joined coursera which is
2:32:59
which in 2019 joined coursera which is
2:32:59
which in 2019 joined coursera which is pretty interesting
2:33:00
pretty interesting
2:33:00
pretty interesting let us now go ahead and invite our next
2:33:04
let us now go ahead and invite our next
2:33:04
let us now go ahead and invite our next speaker minko himself
2:33:06
speaker minko himself
2:33:06
speaker minko himself [Music]
2:33:38
[Music]
2:33:38
hi minkow welcome to the conference hi
2:33:43
hi minkow welcome to the conference hi
2:33:43
hi minkow welcome to the conference hi uh great to be here so tell us how you
2:33:46
uh great to be here so tell us how you
2:33:46
uh great to be here so tell us how you are we are joining us from today and
2:33:49
are we are joining us from today and
2:33:49
are we are joining us from today and how's the day
2:33:51
how's the day
2:33:51
how's the day i'm actually currently in europe so i
2:33:53
i'm actually currently in europe so i
2:33:53
i'm actually currently in europe so i was able to fly back home
2:33:55
was able to fly back home
2:33:56
was able to fly back home uh just before like all the entire
2:33:58
uh just before like all the entire
2:33:58
uh just before like all the entire lockdown happened so i'm working
2:34:00
lockdown happened so i'm working
2:34:00
lockdown happened so i'm working remotely in a little bit
2:34:01
remotely in a little bit
2:34:01
remotely in a little bit it's super hot here so i'm struggling
2:34:03
it's super hot here so i'm struggling
2:34:03
it's super hot here so i'm struggling with the heat but
2:34:04
with the heat but
2:34:04
with the heat but aside from that it's a beautiful day so
2:34:10
which city i think is are you in germany
2:34:12
which city i think is are you in germany
2:34:12
which city i think is are you in germany maybe or someone's
2:34:13
maybe or someone's
2:34:14
maybe or someone's currently currently i'm in bulgaria in
2:34:16
currently currently i'm in bulgaria in
2:34:16
currently currently i'm in bulgaria in sofia
2:34:17
sofia
2:34:17
sofia well that's great and i think lucky time
2:34:19
well that's great and i think lucky time
2:34:19
well that's great and i think lucky time to go back to home right he got the
2:34:21
to go back to home right he got the
2:34:21
to go back to home right he got the flight at the right time
2:34:24
right so minko our next 45 minutes is
2:34:27
right so minko our next 45 minutes is
2:34:27
right so minko our next 45 minutes is all yours you can go ahead and start
2:34:28
all yours you can go ahead and start
2:34:28
all yours you can go ahead and start sharing your screen and
2:34:30
sharing your screen and
2:34:30
sharing your screen and i'll catch you towards the end of your
2:34:31
i'll catch you towards the end of your
2:34:31
i'll catch you towards the end of your session sounds good
2:34:36
yeah there you go all right
2:34:42
all right okay yeah uh hello everybody
2:34:45
all right okay yeah uh hello everybody
2:34:46
all right okay yeah uh hello everybody my name is minko getchev and i'm
2:34:48
my name is minko getchev and i'm
2:34:48
my name is minko getchev and i'm currently
2:34:49
currently
2:34:49
currently one of the leads of angular developer
2:34:50
one of the leads of angular developer
2:34:50
one of the leads of angular developer relations today in this presentation i
2:34:53
relations today in this presentation i
2:34:53
relations today in this presentation i want to share with you
2:34:54
want to share with you
2:34:54
want to share with you what is the current state of angular
2:34:56
what is the current state of angular
2:34:56
what is the current state of angular this is going to be also
2:34:58
this is going to be also
2:34:58
this is going to be also kind of a theoretical discussion as well
2:35:00
kind of a theoretical discussion as well
2:35:00
kind of a theoretical discussion as well we will be talking about
2:35:02
we will be talking about
2:35:02
we will be talking about the reasoning for some of the decisions
2:35:04
the reasoning for some of the decisions
2:35:04
the reasoning for some of the decisions that we have been making
2:35:06
that we have been making
2:35:06
that we have been making in angular for a bit for a while
2:35:08
in angular for a bit for a while
2:35:08
in angular for a bit for a while actually which
2:35:10
actually which
2:35:10
actually which could be considered quite different from
2:35:13
could be considered quite different from
2:35:13
could be considered quite different from where the rest of the ecosystem is for
2:35:15
where the rest of the ecosystem is for
2:35:15
where the rest of the ecosystem is for example we have been focused a lot on
2:35:17
example we have been focused a lot on
2:35:17
example we have been focused a lot on some static
2:35:18
some static
2:35:18
some static optimizations and static typing like
2:35:20
optimizations and static typing like
2:35:20
optimizations and static typing like typescript
2:35:21
typescript
2:35:21
typescript and many other such features which are
2:35:24
and many other such features which are
2:35:24
and many other such features which are bringing some specific benefits
2:35:26
bringing some specific benefits
2:35:26
bringing some specific benefits when it comes down to development of
2:35:28
when it comes down to development of
2:35:28
when it comes down to development of angular applications
2:35:30
angular applications
2:35:30
angular applications since i don't know how familiar
2:35:33
since i don't know how familiar
2:35:33
since i don't know how familiar you're all with angular i want to give
2:35:35
you're all with angular i want to give
2:35:35
you're all with angular i want to give you a very high level overview
2:35:37
you a very high level overview
2:35:37
you a very high level overview on what we have been building actually
2:35:40
on what we have been building actually
2:35:40
on what we have been building actually in our team
2:35:41
in our team
2:35:41
in our team of course we have a framework right we
2:35:43
of course we have a framework right we
2:35:43
of course we have a framework right we have angular core
2:35:45
have angular core
2:35:45
have angular core it provides you with a bunch of
2:35:46
it provides you with a bunch of
2:35:46
it provides you with a bunch of primitives that allow you to
2:35:49
primitives that allow you to
2:35:49
primitives that allow you to compose complicated user interfaces
2:35:53
compose complicated user interfaces
2:35:53
compose complicated user interfaces you pretty much have here components
2:35:55
you pretty much have here components
2:35:55
you pretty much have here components which can receive certain inputs
2:35:57
which can receive certain inputs
2:35:57
which can receive certain inputs and they can also emit outputs and
2:36:01
and they can also emit outputs and
2:36:01
and they can also emit outputs and on top of that when you decide that your
2:36:04
on top of that when you decide that your
2:36:04
on top of that when you decide that your source code wants to be more testable
2:36:06
source code wants to be more testable
2:36:06
source code wants to be more testable you can take advantage of the angular
2:36:08
you can take advantage of the angular
2:36:08
you can take advantage of the angular dependency injection that
2:36:09
dependency injection that
2:36:09
dependency injection that comes together with angular framework we
2:36:12
comes together with angular framework we
2:36:12
comes together with angular framework we also have advanced content projection
2:36:13
also have advanced content projection
2:36:13
also have advanced content projection and many other features
2:36:15
and many other features
2:36:15
and many other features but in order to get started with angular
2:36:16
but in order to get started with angular
2:36:16
but in order to get started with angular all you need to understand is just a
2:36:17
all you need to understand is just a
2:36:18
all you need to understand is just a component model
2:36:19
component model
2:36:19
component model how we can create a component and how
2:36:21
how we can create a component and how
2:36:21
how we can create a component and how you can compose components together
2:36:24
you can compose components together
2:36:24
you can compose components together on top of that if you have been using
2:36:25
on top of that if you have been using
2:36:25
on top of that if you have been using the framework you probably know that we
2:36:27
the framework you probably know that we
2:36:27
the framework you probably know that we have a pretty powerful cli
2:36:29
have a pretty powerful cli
2:36:29
have a pretty powerful cli it actually has pretty wide adoption not
2:36:31
it actually has pretty wide adoption not
2:36:32
it actually has pretty wide adoption not only inside of angular but also in other
2:36:34
only inside of angular but also in other
2:36:34
only inside of angular but also in other frameworks out there as well
2:36:36
frameworks out there as well
2:36:36
frameworks out there as well together with the cli we're building
2:36:38
together with the cli we're building
2:36:38
together with the cli we're building components the
2:36:39
components the
2:36:39
components the angular material implementation as well
2:36:42
angular material implementation as well
2:36:42
angular material implementation as well as the angular cdk
2:36:44
as the angular cdk
2:36:44
as the angular cdk all of them help you to quickly
2:36:46
all of them help you to quickly
2:36:46
all of them help you to quickly bootstrap your application
2:36:48
bootstrap your application
2:36:48
bootstrap your application of course we cannot provide all the
2:36:50
of course we cannot provide all the
2:36:50
of course we cannot provide all the different components out there that
2:36:51
different components out there that
2:36:51
different components out there that exist you can take advantage of them
2:36:54
exist you can take advantage of them
2:36:54
exist you can take advantage of them from community projects but we provide a
2:36:55
from community projects but we provide a
2:36:55
from community projects but we provide a pretty solid core
2:36:57
pretty solid core
2:36:57
pretty solid core that allow you to quickly boost up your
2:36:59
that allow you to quickly boost up your
2:36:59
that allow you to quickly boost up your application and know that these
2:37:00
application and know that these
2:37:00
application and know that these components work pretty
2:37:02
components work pretty
2:37:02
components work pretty well with the framework since they're
2:37:03
well with the framework since they're
2:37:04
well with the framework since they're developed by the same team
2:37:05
developed by the same team
2:37:05
developed by the same team [Music]
2:37:06
[Music]
2:37:06
[Music] on top of that we provide
2:37:07
on top of that we provide
2:37:07
on top of that we provide internationalization this is actually a
2:37:10
internationalization this is actually a
2:37:10
internationalization this is actually a module that
2:37:11
module that
2:37:11
module that and a mechanism in fact that i would
2:37:13
and a mechanism in fact that i would
2:37:13
and a mechanism in fact that i would want us to discuss a bit harder
2:37:15
want us to discuss a bit harder
2:37:15
want us to discuss a bit harder in this presentation because this is
2:37:17
in this presentation because this is
2:37:17
in this presentation because this is probably a pretty unusual implementation
2:37:19
probably a pretty unusual implementation
2:37:19
probably a pretty unusual implementation of internationalization
2:37:21
of internationalization
2:37:21
of internationalization across compared to like all other
2:37:23
across compared to like all other
2:37:23
across compared to like all other implementations that you might have been
2:37:25
implementations that you might have been
2:37:25
implementations that you might have been used to
2:37:25
used to
2:37:25
used to in other frameworks so i would really
2:37:27
in other frameworks so i would really
2:37:27
in other frameworks so i would really want to spend some time discussing some
2:37:29
want to spend some time discussing some
2:37:29
want to spend some time discussing some of the reasoning
2:37:30
of the reasoning
2:37:30
of the reasoning of what's behind it this is going to be
2:37:32
of what's behind it this is going to be
2:37:32
of what's behind it this is going to be somewhere around the end of the
2:37:33
somewhere around the end of the
2:37:33
somewhere around the end of the presentation
2:37:34
presentation
2:37:34
presentation we also have a language service a router
2:37:38
we also have a language service a router
2:37:38
we also have a language service a router animations forms and much more and these
2:37:40
animations forms and much more and these
2:37:40
animations forms and much more and these are all maintained by the angular team
2:37:44
are all maintained by the angular team
2:37:44
are all maintained by the angular team so we have this right now and to get
2:37:47
so we have this right now and to get
2:37:47
so we have this right now and to get here
2:37:47
here
2:37:47
here well it was a pretty long journey i was
2:37:50
well it was a pretty long journey i was
2:37:50
well it was a pretty long journey i was lucky enough to be able to follow this
2:37:51
lucky enough to be able to follow this
2:37:52
lucky enough to be able to follow this journey
2:37:52
journey
2:37:52
journey especially for angular since pretty much
2:37:55
especially for angular since pretty much
2:37:55
especially for angular since pretty much the beginning
2:37:56
the beginning
2:37:56
the beginning when i wrote my first angular book and
2:38:00
when i wrote my first angular book and
2:38:00
when i wrote my first angular book and it was pretty exciting for me to to
2:38:03
it was pretty exciting for me to to
2:38:03
it was pretty exciting for me to to observe this
2:38:03
observe this
2:38:03
observe this from the perspective of a third-party
2:38:05
from the perspective of a third-party
2:38:05
from the perspective of a third-party contributor just
2:38:07
contributor just
2:38:07
contributor just contributing to a large to a popular
2:38:09
contributing to a large to a popular
2:38:09
contributing to a large to a popular google project
2:38:10
google project
2:38:10
google project now later on when i joined the team i
2:38:12
now later on when i joined the team i
2:38:12
now later on when i joined the team i see how things
2:38:14
see how things
2:38:14
see how things are moving pretty fast there are
2:38:16
are moving pretty fast there are
2:38:16
are moving pretty fast there are different requirements
2:38:18
different requirements
2:38:18
different requirements with like coming from the evolution of
2:38:19
with like coming from the evolution of
2:38:19
with like coming from the evolution of the web coming from angular engineers
2:38:22
the web coming from angular engineers
2:38:22
the web coming from angular engineers and in general coming from the
2:38:24
and in general coming from the
2:38:24
and in general coming from the requirements of the business so that we
2:38:26
requirements of the business so that we
2:38:26
requirements of the business so that we can efficiently ship
2:38:27
can efficiently ship
2:38:27
can efficiently ship new features of business applications
2:38:29
new features of business applications
2:38:29
new features of business applications right that's our goal at the end
2:38:31
right that's our goal at the end
2:38:31
right that's our goal at the end so the angular framework itself it went
2:38:34
so the angular framework itself it went
2:38:34
so the angular framework itself it went through
2:38:35
through
2:38:35
through very
2:38:38
different paths to be aware it is today
2:38:41
different paths to be aware it is today
2:38:41
different paths to be aware it is today i'm pretty happy and confident to share
2:38:43
i'm pretty happy and confident to share
2:38:43
i'm pretty happy and confident to share that right now
2:38:44
that right now
2:38:44
that right now we're primarily focused on stability
2:38:46
we're primarily focused on stability
2:38:46
we're primarily focused on stability making sure that we're addressing
2:38:48
making sure that we're addressing
2:38:48
making sure that we're addressing the issues that we have been collecting
2:38:50
the issues that we have been collecting
2:38:50
the issues that we have been collecting on the on github recently
2:38:51
on the on github recently
2:38:51
on the on github recently we have quite a few of them to take care
2:38:53
we have quite a few of them to take care
2:38:53
we have quite a few of them to take care of we're also investing a lot in
2:38:55
of we're also investing a lot in
2:38:55
of we're also investing a lot in simplicity as you can see
2:38:57
simplicity as you can see
2:38:57
simplicity as you can see we're constantly trying to reduce the
2:38:59
we're constantly trying to reduce the
2:38:59
we're constantly trying to reduce the conceptual overheads
2:39:00
conceptual overheads
2:39:00
conceptual overheads of folks who are getting started with
2:39:02
of folks who are getting started with
2:39:02
of folks who are getting started with the framework and also
2:39:03
the framework and also
2:39:03
the framework and also as usually we're focused on speed
2:39:07
as usually we're focused on speed
2:39:07
as usually we're focused on speed we want to provide the best and fastest
2:39:09
we want to provide the best and fastest
2:39:09
we want to provide the best and fastest change detection out there we want to
2:39:11
change detection out there we want to
2:39:11
change detection out there we want to make sure that
2:39:11
make sure that
2:39:12
make sure that we enable best practices such as
2:39:13
we enable best practices such as
2:39:13
we enable best practices such as component level call splitting route
2:39:15
component level call splitting route
2:39:15
component level call splitting route level call splitting
2:39:16
level call splitting
2:39:16
level call splitting efficient prefetching and so much more
2:39:20
efficient prefetching and so much more
2:39:20
efficient prefetching and so much more of course at the same time we have
2:39:21
of course at the same time we have
2:39:21
of course at the same time we have opened a space for innovation this
2:39:23
opened a space for innovation this
2:39:23
opened a space for innovation this doesn't mean that
2:39:24
doesn't mean that
2:39:24
doesn't mean that anywhere is now a mature project that is
2:39:27
anywhere is now a mature project that is
2:39:27
anywhere is now a mature project that is not going to grow
2:39:28
not going to grow
2:39:28
not going to grow from now on of course it is going to
2:39:29
from now on of course it is going to
2:39:29
from now on of course it is going to grow i'm going to talk
2:39:31
grow i'm going to talk
2:39:31
grow i'm going to talk particularly about this and how we're
2:39:33
particularly about this and how we're
2:39:33
particularly about this and how we're going to communicate our
2:39:34
going to communicate our
2:39:34
going to communicate our roadmap with community a little bit
2:39:37
roadmap with community a little bit
2:39:37
roadmap with community a little bit later in this presentation
2:39:39
later in this presentation
2:39:39
later in this presentation so currently we have over 2 000 projects
2:39:42
so currently we have over 2 000 projects
2:39:42
so currently we have over 2 000 projects inside of google
2:39:43
inside of google
2:39:43
inside of google to be exact i believe the number is
2:39:45
to be exact i believe the number is
2:39:45
to be exact i believe the number is above 2600
2:39:47
above 2600
2:39:47
above 2600 so for the past about 10 months
2:39:50
so for the past about 10 months
2:39:50
so for the past about 10 months we got 600 new google projects
2:39:54
we got 600 new google projects
2:39:54
we got 600 new google projects developed with angular
2:39:57
developed with angular
2:39:57
developed with angular and the current version of the framework
2:39:59
and the current version of the framework
2:39:59
and the current version of the framework is version 10.
2:40:01
is version 10.
2:40:01
is version 10. i'm going to talk about some of the
2:40:02
i'm going to talk about some of the
2:40:02
i'm going to talk about some of the features that version 10 introduced but
2:40:05
features that version 10 introduced but
2:40:05
features that version 10 introduced but before that let us discuss
2:40:06
before that let us discuss
2:40:06
before that let us discuss the theory behind the framework i have
2:40:10
the theory behind the framework i have
2:40:10
the theory behind the framework i have mentioned this many times
2:40:11
mentioned this many times
2:40:11
mentioned this many times in many different presentations but i'm
2:40:12
in many different presentations but i'm
2:40:12
in many different presentations but i'm really excited about compilers in
2:40:14
really excited about compilers in
2:40:14
really excited about compilers in general i have
2:40:15
general i have
2:40:15
general i have this kind of uh academic interests in
2:40:18
this kind of uh academic interests in
2:40:18
this kind of uh academic interests in compilers and programming
2:40:19
compilers and programming
2:40:20
compilers and programming languages so i really like to talk about
2:40:23
languages so i really like to talk about
2:40:23
languages so i really like to talk about the theoretical foundations
2:40:25
the theoretical foundations
2:40:25
the theoretical foundations which are actually inspired to a big
2:40:27
which are actually inspired to a big
2:40:27
which are actually inspired to a big extent by the compiler design
2:40:30
extent by the compiler design
2:40:30
extent by the compiler design which we made in angular oftentimes i
2:40:34
which we made in angular oftentimes i
2:40:34
which we made in angular oftentimes i want to start
2:40:35
want to start
2:40:35
want to start often i prefer to start talking about
2:40:37
often i prefer to start talking about
2:40:37
often i prefer to start talking about these theoretical foundations in a very
2:40:39
these theoretical foundations in a very
2:40:39
these theoretical foundations in a very practical case in a very practical
2:40:40
practical case in a very practical
2:40:40
practical case in a very practical context
2:40:42
context
2:40:42
context you're probably all familiar with the
2:40:44
you're probably all familiar with the
2:40:44
you're probably all familiar with the trade-off of predictability versus
2:40:45
trade-off of predictability versus
2:40:46
trade-off of predictability versus flexibility
2:40:47
flexibility
2:40:47
flexibility a good example is the daily schedule of
2:40:50
a good example is the daily schedule of
2:40:50
a good example is the daily schedule of someone
2:40:51
someone
2:40:51
someone imagine you have a very booked calendar
2:40:53
imagine you have a very booked calendar
2:40:53
imagine you have a very booked calendar where you have optimized your
2:40:55
where you have optimized your
2:40:55
where you have optimized your schedule up to a minute you know exactly
2:40:58
schedule up to a minute you know exactly
2:40:58
schedule up to a minute you know exactly when you're going to
2:40:59
when you're going to
2:40:59
when you're going to wake up you know exactly when you're
2:41:01
wake up you know exactly when you're
2:41:01
wake up you know exactly when you're going to prepare your coffee and
2:41:02
going to prepare your coffee and
2:41:02
going to prepare your coffee and uh take it you know exactly when you're
2:41:04
uh take it you know exactly when you're
2:41:04
uh take it you know exactly when you're going for a workout going to the office
2:41:06
going for a workout going to the office
2:41:06
going for a workout going to the office and so on and so forth
2:41:08
and so on and so forth
2:41:08
and so on and so forth the schedule could be a little bit
2:41:10
the schedule could be a little bit
2:41:10
the schedule could be a little bit stressful for a human of course for
2:41:12
stressful for a human of course for
2:41:12
stressful for a human of course for a computer this doesn't really matter if
2:41:14
a computer this doesn't really matter if
2:41:14
a computer this doesn't really matter if you utilize the resources well
2:41:16
you utilize the resources well
2:41:16
you utilize the resources well the computer is not going to be stressed
2:41:17
the computer is not going to be stressed
2:41:17
the computer is not going to be stressed out by having a really well optimized
2:41:19
out by having a really well optimized
2:41:19
out by having a really well optimized and strict schedule
2:41:21
and strict schedule
2:41:21
and strict schedule uh but for a human it's it could and
2:41:23
uh but for a human it's it could and
2:41:23
uh but for a human it's it could and both for humans and for computers it
2:41:25
both for humans and for computers it
2:41:25
both for humans and for computers it could be really
2:41:26
could be really
2:41:26
could be really hard to introduce something new into the
2:41:29
hard to introduce something new into the
2:41:29
hard to introduce something new into the schedule right it's going to be really
2:41:30
schedule right it's going to be really
2:41:30
schedule right it's going to be really hard to introduce a new task since
2:41:32
hard to introduce a new task since
2:41:32
hard to introduce a new task since everything is already pre-booked your
2:41:33
everything is already pre-booked your
2:41:34
everything is already pre-booked your calendar is completely
2:41:36
calendar is completely
2:41:36
calendar is completely full so you're very productive
2:41:39
full so you're very productive
2:41:39
full so you're very productive but at the same time not too flexible
2:41:43
but at the same time not too flexible
2:41:43
but at the same time not too flexible compared to flexibility you can have
2:41:45
compared to flexibility you can have
2:41:45
compared to flexibility you can have your calendar completely empty you might
2:41:47
your calendar completely empty you might
2:41:47
your calendar completely empty you might not be like doing absolutely anything
2:41:49
not be like doing absolutely anything
2:41:49
not be like doing absolutely anything and you can be
2:41:50
and you can be
2:41:50
and you can be you could be potentially like
2:41:51
you could be potentially like
2:41:52
you could be potentially like improvising every next day with
2:41:54
improvising every next day with
2:41:54
improvising every next day with what your schedule is going to look like
2:41:56
what your schedule is going to look like
2:41:56
what your schedule is going to look like and this way you're very flexible but
2:41:58
and this way you're very flexible but
2:41:58
and this way you're very flexible but potentially not too efficient
2:42:01
potentially not too efficient
2:42:01
potentially not too efficient in the context of programming languages
2:42:03
in the context of programming languages
2:42:03
in the context of programming languages and frameworks
2:42:04
and frameworks
2:42:04
and frameworks this trade-off is better known as static
2:42:07
this trade-off is better known as static
2:42:07
this trade-off is better known as static versus dynamic
2:42:08
versus dynamic
2:42:08
versus dynamic static usually refers to operations that
2:42:11
static usually refers to operations that
2:42:12
static usually refers to operations that are performed
2:42:13
are performed
2:42:13
are performed ahead of time at due time during
2:42:15
ahead of time at due time during
2:42:15
ahead of time at due time during compilation
2:42:16
compilation
2:42:16
compilation and dynamic are resources or
2:42:19
and dynamic are resources or
2:42:19
and dynamic are resources or like tasks that are performed
2:42:22
like tasks that are performed
2:42:22
like tasks that are performed like just in time in the browser at
2:42:24
like just in time in the browser at
2:42:24
like just in time in the browser at runtime
2:42:26
runtime
2:42:26
runtime we can put some programming languages on
2:42:28
we can put some programming languages on
2:42:28
we can put some programming languages on this axis so that we can give you a
2:42:30
this axis so that we can give you a
2:42:30
this axis so that we can give you a better like intuition
2:42:31
better like intuition
2:42:32
better like intuition on what static versus dynamic means
2:42:35
on what static versus dynamic means
2:42:35
on what static versus dynamic means my guess is that you're familiar with
2:42:36
my guess is that you're familiar with
2:42:36
my guess is that you're familiar with some of these programming languages for
2:42:37
some of these programming languages for
2:42:38
some of these programming languages for example
2:42:38
example
2:42:38
example with rust rust is a pretty popular
2:42:41
with rust rust is a pretty popular
2:42:41
with rust rust is a pretty popular programming language coming from mozilla
2:42:42
programming language coming from mozilla
2:42:42
programming language coming from mozilla right now
2:42:43
right now
2:42:43
right now it has a really powerful but at the same
2:42:45
it has a really powerful but at the same
2:42:45
it has a really powerful but at the same time really static and really strict
2:42:47
time really static and really strict
2:42:48
time really static and really strict type system which doesn't allow us to do
2:42:50
type system which doesn't allow us to do
2:42:50
type system which doesn't allow us to do much so
2:42:51
much so
2:42:51
much so if you try to if we don't follow the
2:42:54
if you try to if we don't follow the
2:42:54
if you try to if we don't follow the constraints as
2:42:55
constraints as
2:42:55
constraints as set by the compiler we can
2:42:59
set by the compiler we can
2:42:59
set by the compiler we can we will not be able to run our program
2:43:00
we will not be able to run our program
2:43:00
we will not be able to run our program at all because well it is not going to
2:43:02
at all because well it is not going to
2:43:02
at all because well it is not going to compile
2:43:03
compile
2:43:03
compile but at the same time this static and
2:43:05
but at the same time this static and
2:43:05
but at the same time this static and this
2:43:06
this
2:43:06
this like static behavior and strictness it
2:43:08
like static behavior and strictness it
2:43:08
like static behavior and strictness it is helping for a very efficient
2:43:10
is helping for a very efficient
2:43:10
is helping for a very efficient memory management on the other side of
2:43:13
memory management on the other side of
2:43:13
memory management on the other side of the spectrum we have javascript
2:43:15
the spectrum we have javascript
2:43:15
the spectrum we have javascript and javascript is a super dynamic
2:43:17
and javascript is a super dynamic
2:43:17
and javascript is a super dynamic language
2:43:19
language
2:43:19
language with javascript we don't really have to
2:43:21
with javascript we don't really have to
2:43:21
with javascript we don't really have to fight any compiler because we actually
2:43:23
fight any compiler because we actually
2:43:23
fight any compiler because we actually have
2:43:23
have
2:43:23
have zero compile time but at the same time
2:43:27
zero compile time but at the same time
2:43:27
zero compile time but at the same time we don't have any guarantees that our
2:43:29
we don't have any guarantees that our
2:43:29
we don't have any guarantees that our program is even going to
2:43:30
program is even going to
2:43:30
program is even going to run in the browser we get some runtime
2:43:33
run in the browser we get some runtime
2:43:33
run in the browser we get some runtime errors and
2:43:34
errors and
2:43:34
errors and if our program starts growing we don't
2:43:36
if our program starts growing we don't
2:43:36
if our program starts growing we don't know if we're going to catch these
2:43:37
know if we're going to catch these
2:43:37
know if we're going to catch these runtime errors before shipping our
2:43:39
runtime errors before shipping our
2:43:39
runtime errors before shipping our program to production right
2:43:41
program to production right
2:43:41
program to production right so it could get quite tricky
2:43:44
so it could get quite tricky
2:43:44
so it could get quite tricky we are sacrificing
2:43:47
we are sacrificing in this case like
2:43:50
we are sacrificing in this case like
2:43:50
we are sacrificing in this case like stability and
2:43:52
stability and
2:43:52
stability and static verification and knowing that our
2:43:54
static verification and knowing that our
2:43:54
static verification and knowing that our program is going to work in general in
2:43:56
program is going to work in general in
2:43:56
program is going to work in general in the browser
2:43:57
the browser
2:43:57
the browser for better and faster prototyping with
2:44:01
for better and faster prototyping with
2:44:01
for better and faster prototyping with javascript
2:44:02
javascript
2:44:02
javascript typescript is somewhere in the middle so
2:44:04
typescript is somewhere in the middle so
2:44:04
typescript is somewhere in the middle so with typescript we have a good type
2:44:05
with typescript we have a good type
2:44:05
with typescript we have a good type system
2:44:06
system
2:44:06
system which can help us prevent a lot of
2:44:08
which can help us prevent a lot of
2:44:08
which can help us prevent a lot of issues ahead of time
2:44:10
issues ahead of time
2:44:10
issues ahead of time but at the same time it is not
2:44:13
but at the same time it is not
2:44:13
but at the same time it is not constraining as much it is not
2:44:14
constraining as much it is not
2:44:14
constraining as much it is not restricting us too much to be expressive
2:44:16
restricting us too much to be expressive
2:44:16
restricting us too much to be expressive and to be able to rapidly prototype new
2:44:18
and to be able to rapidly prototype new
2:44:18
and to be able to rapidly prototype new features
2:44:19
features
2:44:19
features so i would say that typescript is really
2:44:22
so i would say that typescript is really
2:44:22
so i would say that typescript is really well positioned
2:44:23
well positioned
2:44:23
well positioned into this spectrum from like static to
2:44:27
into this spectrum from like static to
2:44:27
into this spectrum from like static to dynamic
2:44:28
dynamic
2:44:28
dynamic of course this still depends on the
2:44:29
of course this still depends on the
2:44:29
of course this still depends on the purpose of the language i'm not saying
2:44:31
purpose of the language i'm not saying
2:44:31
purpose of the language i'm not saying that typescript
2:44:31
that typescript
2:44:32
that typescript is better than rust it very highly
2:44:34
is better than rust it very highly
2:44:34
is better than rust it very highly depends on the use case that you have
2:44:36
depends on the use case that you have
2:44:36
depends on the use case that you have for example we trust you can build
2:44:38
for example we trust you can build
2:44:38
for example we trust you can build really efficient and low level systems
2:44:40
really efficient and low level systems
2:44:40
really efficient and low level systems which you cannot build with typescript
2:44:42
which you cannot build with typescript
2:44:42
which you cannot build with typescript nowadays
2:44:45
it is also very interesting that from
2:44:47
it is also very interesting that from
2:44:47
it is also very interesting that from static you can very easily go to dynamic
2:44:49
static you can very easily go to dynamic
2:44:50
static you can very easily go to dynamic imagine we have a very static
2:44:53
imagine we have a very static
2:44:53
imagine we have a very static very statically well typed typescript
2:44:55
very statically well typed typescript
2:44:55
very statically well typed typescript program
2:44:56
program
2:44:56
program we have very explicit type annotations
2:44:59
we have very explicit type annotations
2:44:59
we have very explicit type annotations and
2:44:59
and
2:45:00
and well we're pretty confident that our
2:45:02
well we're pretty confident that our
2:45:02
well we're pretty confident that our program is going to run
2:45:04
program is going to run
2:45:04
program is going to run and it's going to work properly at
2:45:06
and it's going to work properly at
2:45:06
and it's going to work properly at runtime
2:45:07
runtime
2:45:08
runtime well it's very it's going to be very
2:45:09
well it's very it's going to be very
2:45:09
well it's very it's going to be very easy to make it more dynamic it's going
2:45:11
easy to make it more dynamic it's going
2:45:11
easy to make it more dynamic it's going to be very easy to just drop some of
2:45:13
to be very easy to just drop some of
2:45:13
to be very easy to just drop some of these type annotations
2:45:14
these type annotations
2:45:14
these type annotations and get rid of the constraints coming
2:45:16
and get rid of the constraints coming
2:45:16
and get rid of the constraints coming from the compiler
2:45:17
from the compiler
2:45:17
from the compiler and be able to prototype to start
2:45:19
and be able to prototype to start
2:45:20
and be able to prototype to start prototyping more
2:45:21
prototyping more
2:45:21
prototyping more like faster just by introducing new
2:45:24
like faster just by introducing new
2:45:24
like faster just by introducing new expressions with type n or so on and so
2:45:26
expressions with type n or so on and so
2:45:26
expressions with type n or so on and so forth
2:45:27
forth
2:45:28
forth but starting with a very dynamic program
2:45:31
but starting with a very dynamic program
2:45:31
but starting with a very dynamic program with a javascript program
2:45:34
with a javascript program
2:45:34
with a javascript program which has never been type checked before
2:45:36
which has never been type checked before
2:45:36
which has never been type checked before it could be pretty tricky to make it
2:45:37
it could be pretty tricky to make it
2:45:37
it could be pretty tricky to make it static and to add typescript type
2:45:39
static and to add typescript type
2:45:39
static and to add typescript type annotations
2:45:40
annotations
2:45:40
annotations note that it is impossible it is just
2:45:42
note that it is impossible it is just
2:45:42
note that it is impossible it is just going to cost us a lot of work
2:45:44
going to cost us a lot of work
2:45:44
going to cost us a lot of work [Music]
2:45:45
[Music]
2:45:45
[Music] if we put some like more
2:45:49
if we put some like more
2:45:49
if we put some like more tangible features and associate them
2:45:51
tangible features and associate them
2:45:51
tangible features and associate them with static and dynamic
2:45:52
with static and dynamic
2:45:52
with static and dynamic we can think about them the following
2:45:54
we can think about them the following
2:45:54
we can think about them the following way for example
2:45:56
way for example
2:45:56
way for example compile time optimizations is something
2:45:58
compile time optimizations is something
2:45:58
compile time optimizations is something that static systems can provide
2:46:00
that static systems can provide
2:46:00
that static systems can provide you might have noticed this in angular
2:46:02
you might have noticed this in angular
2:46:02
you might have noticed this in angular we have these static html templates
2:46:04
we have these static html templates
2:46:04
we have these static html templates which are in fact translated to
2:46:07
which are in fact translated to
2:46:07
which are in fact translated to javascript
2:46:08
javascript
2:46:08
javascript and they're translatable to javascript
2:46:10
and they're translatable to javascript
2:46:10
and they're translatable to javascript because they're static
2:46:12
because they're static
2:46:12
because they're static and the compiler understands them ahead
2:46:14
and the compiler understands them ahead
2:46:14
and the compiler understands them ahead of time without having to execute
2:46:17
of time without having to execute
2:46:17
of time without having to execute without having to execute the source
2:46:19
without having to execute the source
2:46:19
without having to execute the source code in the browser so we can
2:46:20
code in the browser so we can
2:46:20
code in the browser so we can statically analyze the templates and
2:46:22
statically analyze the templates and
2:46:22
statically analyze the templates and very efficiently translate them to
2:46:24
very efficiently translate them to
2:46:24
very efficiently translate them to javascript
2:46:25
javascript
2:46:25
javascript instructions and make them really fast
2:46:28
instructions and make them really fast
2:46:28
instructions and make them really fast for execution and your in fact has been
2:46:30
for execution and your in fact has been
2:46:30
for execution and your in fact has been innovating a lot in the space in the
2:46:32
innovating a lot in the space in the
2:46:32
innovating a lot in the space in the past
2:46:33
past
2:46:33
past if you're looking at the like framework
2:46:35
if you're looking at the like framework
2:46:35
if you're looking at the like framework landscape
2:46:36
landscape
2:46:36
landscape you can notice that angular was probably
2:46:38
you can notice that angular was probably
2:46:38
you can notice that angular was probably the first framework to introduce ahead
2:46:40
the first framework to introduce ahead
2:46:40
the first framework to introduce ahead of time compilation
2:46:41
of time compilation
2:46:41
of time compilation and you can see that this is now a
2:46:43
and you can see that this is now a
2:46:43
and you can see that this is now a common practice and a lot of different
2:46:45
common practice and a lot of different
2:46:45
common practice and a lot of different folks found out that this is a quite
2:46:46
folks found out that this is a quite
2:46:46
folks found out that this is a quite powerful concept right
2:46:49
powerful concept right
2:46:49
powerful concept right also static systems allow us to have
2:46:52
also static systems allow us to have
2:46:52
also static systems allow us to have much better
2:46:53
much better
2:46:53
much better text data and id support you can again
2:46:55
text data and id support you can again
2:46:55
text data and id support you can again compare typescript versus javascript
2:46:59
compare typescript versus javascript
2:46:59
compare typescript versus javascript the typescript types annotations provide
2:47:02
the typescript types annotations provide
2:47:02
the typescript types annotations provide much more context
2:47:04
much more context
2:47:04
much more context to text editors and ids so that we can
2:47:06
to text editors and ids so that we can
2:47:06
to text editors and ids so that we can get goods
2:47:07
get goods
2:47:07
get goods out of completion
2:47:10
strict type checking is something that
2:47:12
strict type checking is something that
2:47:12
strict type checking is something that i'm going to discuss just in a little
2:47:13
i'm going to discuss just in a little
2:47:13
i'm going to discuss just in a little bit so that
2:47:14
bit so that
2:47:14
bit so that i can give you kind of a tangible idea
2:47:16
i can give you kind of a tangible idea
2:47:16
i can give you kind of a tangible idea for
2:47:17
for
2:47:17
for the results that we're getting out of it
2:47:20
the results that we're getting out of it
2:47:20
the results that we're getting out of it but on the other side dynamic systems
2:47:21
but on the other side dynamic systems
2:47:21
but on the other side dynamic systems are not bad as well
2:47:23
are not bad as well
2:47:23
are not bad as well dynamic systems can allow us to perform
2:47:26
dynamic systems can allow us to perform
2:47:26
dynamic systems can allow us to perform very dynamic behavior
2:47:27
very dynamic behavior
2:47:27
very dynamic behavior for example we can even dynamically
2:47:29
for example we can even dynamically
2:47:29
for example we can even dynamically assemble the user interface
2:47:31
assemble the user interface
2:47:31
assemble the user interface and the huge advantage of dynamic
2:47:32
and the huge advantage of dynamic
2:47:32
and the huge advantage of dynamic systems is that
2:47:34
systems is that
2:47:34
systems is that we don't have a build process there so
2:47:37
we don't have a build process there so
2:47:37
we don't have a build process there so you can just put a bunch of scripts in
2:47:39
you can just put a bunch of scripts in
2:47:39
you can just put a bunch of scripts in the browser and everything is going to
2:47:41
the browser and everything is going to
2:47:41
the browser and everything is going to work you don't really need to
2:47:43
work you don't really need to
2:47:43
work you don't really need to go through some kind of a build process
2:47:45
go through some kind of a build process
2:47:45
go through some kind of a build process that transforms your application to
2:47:47
that transforms your application to
2:47:47
that transforms your application to something else
2:47:51
[Music]
2:47:52
[Music]
2:47:52
[Music] so something that's like a just a
2:47:56
so something that's like a just a
2:47:56
so something that's like a just a conclusion that i reached out several
2:47:58
conclusion that i reached out several
2:47:58
conclusion that i reached out several years ago and i'm sure that i'm not the
2:48:00
years ago and i'm sure that i'm not the
2:48:00
years ago and i'm sure that i'm not the first person who have reached out to
2:48:01
first person who have reached out to
2:48:01
first person who have reached out to this conclusion is that
2:48:02
this conclusion is that
2:48:02
this conclusion is that it's much better to get your errors
2:48:05
it's much better to get your errors
2:48:05
it's much better to get your errors ahead of time
2:48:06
ahead of time
2:48:06
ahead of time during your build process instead of
2:48:09
during your build process instead of
2:48:09
during your build process instead of getting them
2:48:09
getting them
2:48:09
getting them at runtime when you have deployed your
2:48:11
at runtime when you have deployed your
2:48:11
at runtime when you have deployed your application and you have shipped it to
2:48:13
application and you have shipped it to
2:48:13
application and you have shipped it to your users
2:48:13
your users
2:48:13
your users right so of course
2:48:17
right so of course
2:48:17
right so of course the best possible scenario is we if we
2:48:19
the best possible scenario is we if we
2:48:19
the best possible scenario is we if we write bug free programs right
2:48:21
write bug free programs right
2:48:21
write bug free programs right i i wasn't fortunate enough to be able
2:48:23
i i wasn't fortunate enough to be able
2:48:23
i i wasn't fortunate enough to be able to
2:48:25
to
2:48:25
to create a large application without
2:48:27
create a large application without
2:48:27
create a large application without having any issues in it so
2:48:28
having any issues in it so
2:48:28
having any issues in it so if you are capable of doing this you
2:48:31
if you are capable of doing this you
2:48:31
if you are capable of doing this you definitely don't need build systems but
2:48:32
definitely don't need build systems but
2:48:32
definitely don't need build systems but if you're just like me
2:48:34
if you're just like me
2:48:34
if you're just like me you probably can benefit from typescript
2:48:36
you probably can benefit from typescript
2:48:36
you probably can benefit from typescript type checking and from static systems
2:48:39
type checking and from static systems
2:48:39
type checking and from static systems so here is an example which actually
2:48:41
so here is an example which actually
2:48:41
so here is an example which actually points out
2:48:42
points out
2:48:42
points out how beneficial typescript could be in
2:48:44
how beneficial typescript could be in
2:48:44
how beneficial typescript could be in your day-to-day development process
2:48:46
your day-to-day development process
2:48:46
your day-to-day development process and when i'm saying typescript i'm not
2:48:48
and when i'm saying typescript i'm not
2:48:48
and when i'm saying typescript i'm not necessarily meaning only typescript
2:48:50
necessarily meaning only typescript
2:48:50
necessarily meaning only typescript since in angular we have type
2:48:52
since in angular we have type
2:48:52
since in angular we have type checking in templates as well
2:48:55
checking in templates as well
2:48:55
checking in templates as well so a couple of folks from community and
2:48:57
so a couple of folks from community and
2:48:57
so a couple of folks from community and from
2:48:58
from
2:48:58
from academia and microsoft they did a survey
2:49:01
academia and microsoft they did a survey
2:49:01
academia and microsoft they did a survey they pretty much looked at different
2:49:03
they pretty much looked at different
2:49:03
they pretty much looked at different github projects
2:49:04
github projects
2:49:04
github projects that were developed with javascript they
2:49:06
that were developed with javascript they
2:49:06
that were developed with javascript they looked at their issue trackers
2:49:07
looked at their issue trackers
2:49:08
looked at their issue trackers and they tried to just
2:49:11
and they tried to just
2:49:11
and they tried to just verify which one of these issues
2:49:15
verify which one of these issues
2:49:15
verify which one of these issues was going to be detectable by the
2:49:17
was going to be detectable by the
2:49:17
was going to be detectable by the typescript type system
2:49:19
typescript type system
2:49:19
typescript type system at build time they found out that 15
2:49:22
at build time they found out that 15
2:49:22
at build time they found out that 15 of the bugs were going to be detectable
2:49:25
of the bugs were going to be detectable
2:49:25
of the bugs were going to be detectable at build time
2:49:26
at build time
2:49:26
at build time instead of runtime so this means that
2:49:28
instead of runtime so this means that
2:49:28
instead of runtime so this means that these issues were never going to exist
2:49:30
these issues were never going to exist
2:49:30
these issues were never going to exist in the final product
2:49:31
in the final product
2:49:31
in the final product so users would never had to go through
2:49:33
so users would never had to go through
2:49:34
so users would never had to go through the experience
2:49:35
the experience
2:49:35
the experience of hitting these issues they would have
2:49:37
of hitting these issues they would have
2:49:37
of hitting these issues they would have never went through the experience
2:49:38
never went through the experience
2:49:38
never went through the experience reporting them and developers
2:49:40
reporting them and developers
2:49:40
reporting them and developers never had to go through the process of
2:49:42
never had to go through the process of
2:49:42
never had to go through the process of fixing them imagine how much time this
2:49:44
fixing them imagine how much time this
2:49:44
fixing them imagine how much time this is going to save in a large organization
2:49:46
is going to save in a large organization
2:49:46
is going to save in a large organization working on a complicated project
2:49:49
working on a complicated project
2:49:49
working on a complicated project and the survey was done with typescript
2:49:51
and the survey was done with typescript
2:49:51
and the survey was done with typescript 2.0
2:49:53
2.0
2:49:53
2.0 so this is typescript 2.0 now we are in
2:49:55
so this is typescript 2.0 now we are in
2:49:55
so this is typescript 2.0 now we are in typescripts
2:49:56
typescripts
2:49:56
typescripts almost 4.0 it is coming in the next
2:49:59
almost 4.0 it is coming in the next
2:49:59
almost 4.0 it is coming in the next couple of weeks
2:50:00
couple of weeks
2:50:00
couple of weeks it has much more powerful type system
2:50:02
it has much more powerful type system
2:50:02
it has much more powerful type system and it helps us to catch
2:50:03
and it helps us to catch
2:50:03
and it helps us to catch many more issues ahead of time
2:50:06
many more issues ahead of time
2:50:06
many more issues ahead of time here is an example how static systems
2:50:09
here is an example how static systems
2:50:09
here is an example how static systems could be really powerful
2:50:11
could be really powerful
2:50:11
could be really powerful i know that we usually associate dynamic
2:50:13
i know that we usually associate dynamic
2:50:13
i know that we usually associate dynamic with goods but i just want to show you a
2:50:15
with goods but i just want to show you a
2:50:15
with goods but i just want to show you a different perspective how
2:50:16
different perspective how
2:50:16
different perspective how static could be helpful in letting you
2:50:19
static could be helpful in letting you
2:50:19
static could be helpful in letting you develop more high quality products
2:50:22
develop more high quality products
2:50:22
develop more high quality products [Music]
2:50:24
[Music]
2:50:24
[Music] all right so talking about static and
2:50:26
all right so talking about static and
2:50:26
all right so talking about static and dynamic and putting them into the
2:50:27
dynamic and putting them into the
2:50:27
dynamic and putting them into the context of frameworks
2:50:29
context of frameworks
2:50:29
context of frameworks angularjs this is the framework that
2:50:31
angularjs this is the framework that
2:50:31
angularjs this is the framework that google released in 2009
2:50:35
google released in 2009
2:50:35
google released in 2009 it is very dynamic it is on a very
2:50:38
it is very dynamic it is on a very
2:50:38
it is very dynamic it is on a very dynamic part of the spectrum you can
2:50:40
dynamic part of the spectrum you can
2:50:40
dynamic part of the spectrum you can just take
2:50:41
just take
2:50:41
just take angular you can place it on a page and
2:50:43
angular you can place it on a page and
2:50:43
angular you can place it on a page and you can start
2:50:45
you can start
2:50:45
you can start developing your program you're not going
2:50:47
developing your program you're not going
2:50:47
developing your program you're not going to get any static verification by the
2:50:48
to get any static verification by the
2:50:48
to get any static verification by the build process you're not going to get
2:50:49
build process you're not going to get
2:50:49
build process you're not going to get any
2:50:50
any
2:50:50
any type checking or whatsoever but at the
2:50:52
type checking or whatsoever but at the
2:50:52
type checking or whatsoever but at the same time you didn't have any build
2:50:53
same time you didn't have any build
2:50:53
same time you didn't have any build process
2:50:54
process
2:50:54
process so you are able to prototype very
2:50:56
so you are able to prototype very
2:50:56
so you are able to prototype very quickly and you didn't have to wait for
2:50:57
quickly and you didn't have to wait for
2:50:57
quickly and you didn't have to wait for your production build to complete
2:50:59
your production build to complete
2:50:59
your production build to complete right you are actually even able if you
2:51:02
right you are actually even able if you
2:51:02
right you are actually even able if you want to and if you want to live on the
2:51:04
want to and if you want to live on the
2:51:04
want to and if you want to live on the edge
2:51:05
edge
2:51:05
edge pretty much develop your application in
2:51:07
pretty much develop your application in
2:51:08
pretty much develop your application in production environment why not
2:51:11
production environment why not
2:51:11
production environment why not angular version 2 however
2:51:14
angular version 2 however
2:51:14
angular version 2 however started with a couple of things in mind
2:51:16
started with a couple of things in mind
2:51:16
started with a couple of things in mind first thing was that
2:51:18
first thing was that
2:51:18
first thing was that static things and static checks are
2:51:20
static things and static checks are
2:51:20
static things and static checks are really useful
2:51:22
really useful
2:51:22
really useful they provide better compile-time
2:51:24
they provide better compile-time
2:51:24
they provide better compile-time optimizations so they make
2:51:26
optimizations so they make
2:51:26
optimizations so they make the framework faster they improve the
2:51:29
the framework faster they improve the
2:51:29
the framework faster they improve the text editor and id support
2:51:31
text editor and id support
2:51:31
text editor and id support and also i'll help allow us to catch
2:51:33
and also i'll help allow us to catch
2:51:33
and also i'll help allow us to catch many more issues ahead of time
2:51:36
many more issues ahead of time
2:51:36
many more issues ahead of time at the same time the framework team also
2:51:38
at the same time the framework team also
2:51:38
at the same time the framework team also knew that if they start with a very
2:51:40
knew that if they start with a very
2:51:40
knew that if they start with a very dynamic framework
2:51:42
dynamic framework
2:51:42
dynamic framework they would be really struggling to go to
2:51:45
they would be really struggling to go to
2:51:45
they would be really struggling to go to make it more static
2:51:46
make it more static
2:51:46
make it more static because they're going to break a lot of
2:51:47
because they're going to break a lot of
2:51:47
because they're going to break a lot of projects so what they did
2:51:49
projects so what they did
2:51:49
projects so what they did back then when i wasn't part of the team
2:51:52
back then when i wasn't part of the team
2:51:52
back then when i wasn't part of the team they just made angular version 2 really
2:51:54
they just made angular version 2 really
2:51:54
they just made angular version 2 really static really constrained you weren't
2:51:56
static really constrained you weren't
2:51:56
static really constrained you weren't able to declare
2:51:57
able to declare
2:51:57
able to declare you you had constraints on how you can
2:51:58
you you had constraints on how you can
2:51:58
you you had constraints on how you can declare providers let's say
2:52:01
declare providers let's say
2:52:01
declare providers let's say in your ng modules you had a lot of
2:52:02
in your ng modules you had a lot of
2:52:02
in your ng modules you had a lot of different constraints which
2:52:04
different constraints which
2:52:04
different constraints which were probably not necessary at the
2:52:06
were probably not necessary at the
2:52:06
were probably not necessary at the beginning but that was a pretty good
2:52:08
beginning but that was a pretty good
2:52:08
beginning but that was a pretty good shot to make the framework static at
2:52:09
shot to make the framework static at
2:52:10
shot to make the framework static at first and from there
2:52:10
first and from there
2:52:10
first and from there grow it to a more dynamic solution which
2:52:14
grow it to a more dynamic solution which
2:52:14
grow it to a more dynamic solution which provides better development experience
2:52:16
provides better development experience
2:52:16
provides better development experience so that's what they did for version four
2:52:18
so that's what they did for version four
2:52:18
so that's what they did for version four there was a rewrite of the compiler and
2:52:20
there was a rewrite of the compiler and
2:52:20
there was a rewrite of the compiler and the view and the
2:52:21
the view and the
2:52:21
the view and the rendering pipeline which made angular
2:52:24
rendering pipeline which made angular
2:52:24
rendering pipeline which made angular more dynamic
2:52:25
more dynamic
2:52:25
more dynamic with ivy we did one more such rewrite as
2:52:28
with ivy we did one more such rewrite as
2:52:28
with ivy we did one more such rewrite as well
2:52:29
well
2:52:30
well so ivy was this big project that we
2:52:31
so ivy was this big project that we
2:52:31
so ivy was this big project that we worked on for
2:52:33
worked on for
2:52:33
worked on for over two years i'll say this project
2:52:35
over two years i'll say this project
2:52:35
over two years i'll say this project took us a lot of effort because
2:52:37
took us a lot of effort because
2:52:37
took us a lot of effort because it was a really large a rewrite of the
2:52:41
it was a really large a rewrite of the
2:52:41
it was a really large a rewrite of the internals of the framework
2:52:42
internals of the framework
2:52:42
internals of the framework and you can't imagine what tiny things
2:52:46
and you can't imagine what tiny things
2:52:46
and you can't imagine what tiny things that you would
2:52:46
that you would
2:52:46
that you would you you'd have never expected can have
2:52:48
you you'd have never expected can have
2:52:48
you you'd have never expected can have an impact on existing
2:52:50
an impact on existing
2:52:50
an impact on existing code bases have so just like changing
2:52:53
code bases have so just like changing
2:52:53
code bases have so just like changing tiny internal piece in angular
2:52:55
tiny internal piece in angular
2:52:55
tiny internal piece in angular can break hundreds of people
2:52:58
can break hundreds of people
2:52:58
can break hundreds of people or even thousands of projects so that's
2:53:01
or even thousands of projects so that's
2:53:01
or even thousands of projects so that's why it took us
2:53:02
why it took us
2:53:02
why it took us quite some time to make sure that
2:53:03
quite some time to make sure that
2:53:03
quite some time to make sure that angular version 9 with ivy
2:53:05
angular version 9 with ivy
2:53:05
angular version 9 with ivy was completely backward compatible with
2:53:08
was completely backward compatible with
2:53:08
was completely backward compatible with view engine which was our previous
2:53:10
view engine which was our previous
2:53:10
view engine which was our previous compilation and rendering pipeline
2:53:12
compilation and rendering pipeline
2:53:12
compilation and rendering pipeline so we made angular more dynamic but also
2:53:15
so we made angular more dynamic but also
2:53:15
so we made angular more dynamic but also not too dynamic so that we cannot take
2:53:18
not too dynamic so that we cannot take
2:53:18
not too dynamic so that we cannot take care of all the compile time
2:53:19
care of all the compile time
2:53:20
care of all the compile time and static optimizations
2:53:23
now let me talk to you what is happening
2:53:26
now let me talk to you what is happening
2:53:26
now let me talk to you what is happening in version 10.
2:53:27
in version 10.
2:53:27
in version 10. that was a pretty long i would say
2:53:31
that was a pretty long i would say
2:53:31
that was a pretty long i would say overview of uh
2:53:34
overview of uh
2:53:34
overview of uh different trade-offs that we have in
2:53:35
different trade-offs that we have in
2:53:35
different trade-offs that we have in software engineering
2:53:38
software engineering
2:53:38
software engineering now version 10 is a pretty small release
2:53:41
now version 10 is a pretty small release
2:53:41
now version 10 is a pretty small release when you look at it
2:53:42
when you look at it
2:53:42
when you look at it we are pretty much providing an opt-in
2:53:44
we are pretty much providing an opt-in
2:53:44
we are pretty much providing an opt-in strict mode and
2:53:45
strict mode and
2:53:46
strict mode and we are also aiming to increase more the
2:53:48
we are also aiming to increase more the
2:53:48
we are also aiming to increase more the visibility
2:53:50
visibility
2:53:50
visibility of what we have been building in the
2:53:52
of what we have been building in the
2:53:52
of what we have been building in the team to community
2:53:54
team to community
2:53:54
team to community now i would want to talk a little bit
2:53:57
now i would want to talk a little bit
2:53:57
now i would want to talk a little bit about the second part
2:53:59
about the second part
2:53:59
about the second part i would want to actually acknowledge
2:54:03
i would want to actually acknowledge
2:54:03
i would want to actually acknowledge the pretty rough feedback that we have
2:54:05
the pretty rough feedback that we have
2:54:05
the pretty rough feedback that we have been receiving over the past couple of
2:54:07
been receiving over the past couple of
2:54:07
been receiving over the past couple of weeks
2:54:08
weeks
2:54:08
weeks some of it was more constructive and
2:54:11
some of it was more constructive and
2:54:11
some of it was more constructive and reasonable than the other but
2:54:13
reasonable than the other but
2:54:13
reasonable than the other but we definitely listened you might have
2:54:15
we definitely listened you might have
2:54:15
we definitely listened you might have also noticed that we didn't
2:54:17
also noticed that we didn't
2:54:17
also noticed that we didn't share any public direct response this
2:54:20
share any public direct response this
2:54:20
share any public direct response this doesn't mean that we didn't acknowledge
2:54:21
doesn't mean that we didn't acknowledge
2:54:22
doesn't mean that we didn't acknowledge and listen to
2:54:22
and listen to
2:54:22
and listen to everything we have been in fact
2:54:24
everything we have been in fact
2:54:24
everything we have been in fact listening for quite some time and we
2:54:26
listening for quite some time and we
2:54:26
listening for quite some time and we have had
2:54:26
have had
2:54:26
have had a plan on how we can increase the
2:54:29
a plan on how we can increase the
2:54:29
a plan on how we can increase the community engagement and
2:54:30
community engagement and
2:54:30
community engagement and be more open towards what we have been
2:54:33
be more open towards what we have been
2:54:33
be more open towards what we have been developing
2:54:34
developing
2:54:34
developing at the angular team so in the next
2:54:36
at the angular team so in the next
2:54:36
at the angular team so in the next couple of weeks we'll be
2:54:38
couple of weeks we'll be
2:54:38
couple of weeks we'll be sharing some efforts for example where
2:54:41
sharing some efforts for example where
2:54:41
sharing some efforts for example where we have been working on
2:54:42
we have been working on
2:54:42
we have been working on like actually over the past three months
2:54:44
like actually over the past three months
2:54:44
like actually over the past three months or so on making our world map more
2:54:46
or so on making our world map more
2:54:46
or so on making our world map more digestible not only by us but
2:54:48
digestible not only by us but
2:54:48
digestible not only by us but also by folks who are outside of the
2:54:51
also by folks who are outside of the
2:54:51
also by folks who are outside of the team
2:54:51
team
2:54:51
team outside of google so that we can
2:54:54
outside of google so that we can
2:54:54
outside of google so that we can all understand where angular is heading
2:54:56
all understand where angular is heading
2:54:56
all understand where angular is heading to
2:54:57
to
2:54:57
to we have been also working on opening
2:54:59
we have been also working on opening
2:54:59
we have been also working on opening some of our engineering processes
2:55:02
some of our engineering processes
2:55:02
some of our engineering processes we would want to involve more people
2:55:04
we would want to involve more people
2:55:04
we would want to involve more people into the technical decision making
2:55:07
into the technical decision making
2:55:07
into the technical decision making around angular so that
2:55:08
around angular so that
2:55:08
around angular so that you can provide early feedback on design
2:55:10
you can provide early feedback on design
2:55:10
you can provide early feedback on design decisions
2:55:11
decisions
2:55:11
decisions and just help us to shape the
2:55:15
and just help us to shape the
2:55:15
and just help us to shape the future of angular and in general of web
2:55:17
future of angular and in general of web
2:55:17
future of angular and in general of web together
2:55:18
together
2:55:18
together remembering back when i was not part of
2:55:21
remembering back when i was not part of
2:55:21
remembering back when i was not part of the team
2:55:22
the team
2:55:22
the team looking at the design decisions and the
2:55:23
looking at the design decisions and the
2:55:23
looking at the design decisions and the design documents for angular these were
2:55:25
design documents for angular these were
2:55:25
design documents for angular these were some of my main resources that i was
2:55:28
some of my main resources that i was
2:55:28
some of my main resources that i was looking at that i was reading through
2:55:29
looking at that i was reading through
2:55:30
looking at that i was reading through in order to understand the framework and
2:55:31
in order to understand the framework and
2:55:32
in order to understand the framework and even understand many other technical
2:55:33
even understand many other technical
2:55:33
even understand many other technical areas where i didn't have expertise back
2:55:35
areas where i didn't have expertise back
2:55:35
areas where i didn't have expertise back then
2:55:37
then
2:55:37
then looking at the angular source code and
2:55:38
looking at the angular source code and
2:55:38
looking at the angular source code and looking at the angular's
2:55:41
looking at the angular's
2:55:41
looking at the angular's design documents i understood how
2:55:43
design documents i understood how
2:55:43
design documents i understood how compilers work and from there i got
2:55:45
compilers work and from there i got
2:55:45
compilers work and from there i got really passionate about them and started
2:55:46
really passionate about them and started
2:55:46
really passionate about them and started building my own programming languages
2:55:48
building my own programming languages
2:55:48
building my own programming languages so i really think that this is
2:55:52
so i really think that this is
2:55:52
so i really think that this is opening this design process is going to
2:55:53
opening this design process is going to
2:55:53
opening this design process is going to be not only helpful for everyone to
2:55:55
be not only helpful for everyone to
2:55:55
be not only helpful for everyone to understand where angular is heading to
2:55:57
understand where angular is heading to
2:55:57
understand where angular is heading to but also to
2:55:58
but also to
2:55:58
but also to like grow together like get ideas from
2:56:00
like grow together like get ideas from
2:56:00
like grow together like get ideas from one another
2:56:01
one another
2:56:01
one another and develop them all right now let us
2:56:05
and develop them all right now let us
2:56:05
and develop them all right now let us focus on the
2:56:06
focus on the
2:56:06
focus on the technical part of things now let us talk
2:56:08
technical part of things now let us talk
2:56:08
technical part of things now let us talk about
2:56:09
about
2:56:09
about angular streak mode
2:56:12
angular streak mode
2:56:12
angular streak mode the strict modes in angular cli version
2:56:15
the strict modes in angular cli version
2:56:15
the strict modes in angular cli version 10
2:56:16
10
2:56:16
10 is just a flac it allows you to build
2:56:18
is just a flac it allows you to build
2:56:18
is just a flac it allows you to build applications
2:56:19
applications
2:56:20
applications with stricter configuration
2:56:23
with stricter configuration
2:56:23
with stricter configuration this structure configuration
2:56:27
this structure configuration
2:56:27
this structure configuration pretty much enables stricter type
2:56:29
pretty much enables stricter type
2:56:29
pretty much enables stricter type checking
2:56:30
checking
2:56:30
checking so this helps you to catch more issues
2:56:32
so this helps you to catch more issues
2:56:32
so this helps you to catch more issues ahead of time
2:56:33
ahead of time
2:56:33
ahead of time it enables stricter type checking for
2:56:35
it enables stricter type checking for
2:56:35
it enables stricter type checking for angular templates as well
2:56:37
angular templates as well
2:56:37
angular templates as well it makes the ecmoscript 5 support opt-in
2:56:40
it makes the ecmoscript 5 support opt-in
2:56:40
it makes the ecmoscript 5 support opt-in this means that if you want to support
2:56:44
this means that if you want to support
2:56:44
this means that if you want to support internet explorer and you're in strict
2:56:46
internet explorer and you're in strict
2:56:46
internet explorer and you're in strict mode you'll have to enable this
2:56:48
mode you'll have to enable this
2:56:48
mode you'll have to enable this es5 support it also makes the common js
2:56:51
es5 support it also makes the common js
2:56:51
es5 support it also makes the common js support
2:56:53
support
2:56:53
support opt-in common js is this module format
2:56:56
opt-in common js is this module format
2:56:56
opt-in common js is this module format that was
2:56:57
that was
2:56:57
that was originally developed for the server for
2:56:59
originally developed for the server for
2:56:59
originally developed for the server for knowledge
2:57:00
knowledge
2:57:00
knowledge and it got some traction for browser
2:57:04
and it got some traction for browser
2:57:04
and it got some traction for browser packages as well
2:57:05
packages as well
2:57:05
packages as well which i wouldn't say is too reasonable
2:57:07
which i wouldn't say is too reasonable
2:57:07
which i wouldn't say is too reasonable i'm going to show you an example
2:57:09
i'm going to show you an example
2:57:09
i'm going to show you an example of a common js module and how it can
2:57:11
of a common js module and how it can
2:57:11
of a common js module and how it can pretty much ruin your performance
2:57:13
pretty much ruin your performance
2:57:13
pretty much ruin your performance completely in a little bit
2:57:14
completely in a little bit
2:57:14
completely in a little bit but if you would want to use common js
2:57:16
but if you would want to use common js
2:57:16
but if you would want to use common js modules in the strict mode of the
2:57:18
modules in the strict mode of the
2:57:18
modules in the strict mode of the angular cli
2:57:19
angular cli
2:57:19
angular cli well you would not be able to unless you
2:57:22
well you would not be able to unless you
2:57:22
well you would not be able to unless you opt-in into using it
2:57:25
opt-in into using it
2:57:25
opt-in into using it and also with strict mode we're assuming
2:57:27
and also with strict mode we're assuming
2:57:27
and also with strict mode we're assuming that your application has
2:57:28
that your application has
2:57:28
that your application has reduced side effects this is pretty much
2:57:31
reduced side effects this is pretty much
2:57:31
reduced side effects this is pretty much taking advantage of the
2:57:33
taking advantage of the
2:57:33
taking advantage of the side effects property in package.json
2:57:36
side effects property in package.json
2:57:36
side effects property in package.json which webpack understands and applies
2:57:39
which webpack understands and applies
2:57:39
which webpack understands and applies more aggressive tree shaking
2:57:41
more aggressive tree shaking
2:57:41
more aggressive tree shaking on top of your applications when it
2:57:42
on top of your applications when it
2:57:42
on top of your applications when it finds this property and the setting
2:57:45
finds this property and the setting
2:57:45
finds this property and the setting so the strict mode is not something that
2:57:47
so the strict mode is not something that
2:57:47
so the strict mode is not something that we're going to enable
2:57:48
we're going to enable
2:57:48
we're going to enable out of malware this is something that is
2:57:51
out of malware this is something that is
2:57:51
out of malware this is something that is going to stay in the angular c liver but
2:57:53
going to stay in the angular c liver but
2:57:53
going to stay in the angular c liver but we just want to get your feedback we
2:57:55
we just want to get your feedback we
2:57:55
we just want to get your feedback we want to see how
2:57:56
want to see how
2:57:56
want to see how strict mode works for everybody and if
2:57:58
strict mode works for everybody and if
2:57:58
strict mode works for everybody and if people really love it and they see
2:58:00
people really love it and they see
2:58:00
people really love it and they see actually noticeable improvements
2:58:02
actually noticeable improvements
2:58:02
actually noticeable improvements in their day-to-day development
2:58:04
in their day-to-day development
2:58:04
in their day-to-day development processes in like
2:58:05
processes in like
2:58:05
processes in like in terms of fewer issues or faster
2:58:07
in terms of fewer issues or faster
2:58:07
in terms of fewer issues or faster applications
2:58:09
applications
2:58:09
applications we would want to just enable it by
2:58:11
we would want to just enable it by
2:58:11
we would want to just enable it by default for everyone
2:58:13
default for everyone
2:58:13
default for everyone but if you find out that it is keeping
2:58:16
but if you find out that it is keeping
2:58:16
but if you find out that it is keeping you
2:58:16
you
2:58:16
you it is dragging you back it is making you
2:58:18
it is dragging you back it is making you
2:58:18
it is dragging you back it is making you less productive because you need to
2:58:19
less productive because you need to
2:58:19
less productive because you need to fight with different
2:58:21
fight with different
2:58:21
fight with different static checks and you would want to have
2:58:23
static checks and you would want to have
2:58:23
static checks and you would want to have more dynamic behavior
2:58:25
more dynamic behavior
2:58:25
more dynamic behavior we're going to just remove it completely
2:58:27
we're going to just remove it completely
2:58:27
we're going to just remove it completely from the angular cli
2:58:29
from the angular cli
2:58:29
from the angular cli and preserve the current compilation
2:58:32
and preserve the current compilation
2:58:32
and preserve the current compilation pipeline
2:58:33
pipeline
2:58:33
pipeline so see we still have this very
2:58:35
so see we still have this very
2:58:35
so see we still have this very interesting trade-off between static
2:58:38
interesting trade-off between static
2:58:38
interesting trade-off between static this makes the angular cli more static
2:58:39
this makes the angular cli more static
2:58:39
this makes the angular cli more static with more compile-time checks
2:58:41
with more compile-time checks
2:58:41
with more compile-time checks and dynamic where we have fewer such
2:58:43
and dynamic where we have fewer such
2:58:43
and dynamic where we have fewer such checks and
2:58:44
checks and
2:58:44
checks and potentially if your optimizations ahead
2:58:46
potentially if your optimizations ahead
2:58:46
potentially if your optimizations ahead of time
2:58:46
of time
2:58:46
of time [Music]
2:58:48
[Music]
2:58:48
[Music] now talking about more and stricter
2:58:50
now talking about more and stricter
2:58:50
now talking about more and stricter compile time type checking
2:58:52
compile time type checking
2:58:52
compile time type checking i'm sure that in your mind you see
2:58:54
i'm sure that in your mind you see
2:58:54
i'm sure that in your mind you see something like this
2:58:56
something like this
2:58:56
something like this a lot of folks especially people who are
2:58:58
a lot of folks especially people who are
2:58:58
a lot of folks especially people who are just getting started with software
2:58:59
just getting started with software
2:58:59
just getting started with software engineering
2:59:01
engineering
2:59:01
engineering they kind of find out that they they
2:59:03
they kind of find out that they they
2:59:03
they kind of find out that they they fight with
2:59:04
fight with
2:59:04
fight with both javascript and typescript they get
2:59:07
both javascript and typescript they get
2:59:07
both javascript and typescript they get different errors
2:59:08
different errors
2:59:08
different errors some of them in the browser's console
2:59:10
some of them in the browser's console
2:59:10
some of them in the browser's console and others
2:59:11
and others
2:59:11
and others in their terminal
2:59:15
in their terminal
2:59:15
in their terminal and it's hard to understand the benefits
2:59:17
and it's hard to understand the benefits
2:59:17
and it's hard to understand the benefits of all this
2:59:18
of all this
2:59:18
of all this well i hope that i give you just like a
2:59:20
well i hope that i give you just like a
2:59:20
well i hope that i give you just like a slight hint that
2:59:22
slight hint that
2:59:22
slight hint that typescript giving you these errors
2:59:25
typescript giving you these errors
2:59:25
typescript giving you these errors just means that there is place for
2:59:27
just means that there is place for
2:59:27
just means that there is place for improvement in your program so that you
2:59:29
improvement in your program so that you
2:59:29
improvement in your program so that you can reduce
2:59:30
can reduce
2:59:30
can reduce some of the potential issues that you
2:59:32
some of the potential issues that you
2:59:32
some of the potential issues that you that can occur at run time
2:59:33
that can occur at run time
2:59:33
that can occur at run time when you ship your application to
2:59:35
when you ship your application to
2:59:35
when you ship your application to production
2:59:38
now i would want to spend some time
2:59:39
now i would want to spend some time
2:59:39
now i would want to spend some time talking about common js because this is
2:59:41
talking about common js because this is
2:59:41
talking about common js because this is a pretty interesting
2:59:41
a pretty interesting
2:59:42
a pretty interesting problem and it again shows this
2:59:44
problem and it again shows this
2:59:44
problem and it again shows this trade-off static versus dynamic
2:59:47
trade-off static versus dynamic
2:59:47
trade-off static versus dynamic a couple of actually over two months ago
2:59:50
a couple of actually over two months ago
2:59:50
a couple of actually over two months ago now yeah
2:59:51
now yeah
2:59:51
now yeah i wrote this blog post about how common
2:59:53
i wrote this blog post about how common
2:59:53
i wrote this blog post about how common js is making your bundles larger
2:59:56
js is making your bundles larger
2:59:56
js is making your bundles larger i just wrote this blog post this is a
2:59:58
i just wrote this blog post this is a
2:59:58
i just wrote this blog post this is a well-known facts i didn't discover it
3:00:01
well-known facts i didn't discover it
3:00:01
well-known facts i didn't discover it but the findings in this blog post were
3:00:03
but the findings in this blog post were
3:00:03
but the findings in this blog post were pretty interesting
3:00:04
pretty interesting
3:00:04
pretty interesting you can find it on web.dev
3:00:07
you can find it on web.dev
3:00:07
you can find it on web.dev common js larger bundles
3:00:10
common js larger bundles
3:00:10
common js larger bundles let us look at some examples so that we
3:00:12
let us look at some examples so that we
3:00:12
let us look at some examples so that we can understand why common.js
3:00:14
can understand why common.js
3:00:14
can understand why common.js is in fact making your bundle smaller
3:00:17
is in fact making your bundle smaller
3:00:17
is in fact making your bundle smaller excuse me bundles larger so here we have
3:00:21
excuse me bundles larger so here we have
3:00:21
excuse me bundles larger so here we have a javascript program
3:00:23
a javascript program
3:00:23
a javascript program we have a utils.js module which has a
3:00:26
we have a utils.js module which has a
3:00:26
we have a utils.js module which has a couple of public exports
3:00:27
couple of public exports
3:00:27
couple of public exports so here you can see that we have an
3:00:29
so here you can see that we have an
3:00:29
so here you can see that we have an export of the adds
3:00:31
export of the adds
3:00:31
export of the adds function we're exporting subtract
3:00:34
function we're exporting subtract
3:00:34
function we're exporting subtract multiply divide
3:00:35
multiply divide
3:00:35
multiply divide and max it's interesting that
3:00:38
and max it's interesting that
3:00:38
and max it's interesting that we're importing max by
3:00:41
we're importing max by
3:00:41
we're importing max by by lowdash and we're invoking it here
3:00:45
by lowdash and we're invoking it here
3:00:45
by lowdash and we're invoking it here just keep that in mind at the same time
3:00:48
just keep that in mind at the same time
3:00:48
just keep that in mind at the same time we have an index.js file
3:00:50
we have an index.js file
3:00:50
we have an index.js file and in this index.js file
3:00:53
and in this index.js file
3:00:53
and in this index.js file we're importing only the at
3:00:56
we're importing only the at
3:00:56
we're importing only the at function from utils and we're invoking
3:00:59
function from utils and we're invoking
3:00:59
function from utils and we're invoking it
3:01:01
it
3:01:01
it so here now we can take this program and
3:01:03
so here now we can take this program and
3:01:03
so here now we can take this program and pass it to webpack
3:01:05
pass it to webpack
3:01:05
pass it to webpack webpack is going to produce a single
3:01:07
webpack is going to produce a single
3:01:07
webpack is going to produce a single javascript file out of these two modules
3:01:09
javascript file out of these two modules
3:01:09
javascript file out of these two modules and this single javascript file is going
3:01:12
and this single javascript file is going
3:01:12
and this single javascript file is going to be highly optimized
3:01:14
to be highly optimized
3:01:14
to be highly optimized webpack is going to do everything it can
3:01:16
webpack is going to do everything it can
3:01:16
webpack is going to do everything it can to optimize it
3:01:17
to optimize it
3:01:17
to optimize it so that it can be as small as possible
3:01:20
so that it can be as small as possible
3:01:20
so that it can be as small as possible to provide faster user experience for
3:01:22
to provide faster user experience for
3:01:22
to provide faster user experience for our end users
3:01:25
once webpack outputs this file output.js
3:01:29
once webpack outputs this file output.js
3:01:29
once webpack outputs this file output.js this file is going to be over 600
3:01:32
this file is going to be over 600
3:01:32
this file is going to be over 600 kilobytes
3:01:33
kilobytes
3:01:33
kilobytes see almost like more than half a
3:01:35
see almost like more than half a
3:01:35
see almost like more than half a megabyte
3:01:36
megabyte
3:01:36
megabyte see the original source code in the
3:01:38
see the original source code in the
3:01:38
see the original source code in the original source code we just have a
3:01:39
original source code we just have a
3:01:39
original source code we just have a couple of functions these are
3:01:41
couple of functions these are
3:01:41
couple of functions these are for sure less than uh one kilobyte right
3:01:46
for sure less than uh one kilobyte right
3:01:46
for sure less than uh one kilobyte right and the final bundle is over 600
3:01:48
and the final bundle is over 600
3:01:48
and the final bundle is over 600 kilobytes that that was crazy the first
3:01:50
kilobytes that that was crazy the first
3:01:50
kilobytes that that was crazy the first time i saw it i
3:01:51
time i saw it i
3:01:51
time i saw it i i thought that i did something wrong so
3:01:54
i thought that i did something wrong so
3:01:54
i thought that i did something wrong so i spent a couple of iterations profiling
3:01:56
i spent a couple of iterations profiling
3:01:56
i spent a couple of iterations profiling what webpack does looking at the
3:01:59
what webpack does looking at the
3:01:59
what webpack does looking at the module loading looking at the webpack
3:02:02
module loading looking at the webpack
3:02:02
module loading looking at the webpack reports
3:02:03
reports
3:02:03
reports and so on and so forth until i realized
3:02:05
and so on and so forth until i realized
3:02:06
and so on and so forth until i realized that well
3:02:06
that well
3:02:06
that well that just how things are here we're
3:02:09
that just how things are here we're
3:02:09
that just how things are here we're importing
3:02:11
importing
3:02:11
importing x by from lowdash and since we're
3:02:14
x by from lowdash and since we're
3:02:14
x by from lowdash and since we're importing it with a common js
3:02:17
importing it with a common js
3:02:17
importing it with a common js require it is getting par like the
3:02:20
require it is getting par like the
3:02:20
require it is getting par like the entire law dash is getting part of our
3:02:21
entire law dash is getting part of our
3:02:21
entire law dash is getting part of our final bundle
3:02:22
final bundle
3:02:22
final bundle because well webpack just cannot
3:02:25
because well webpack just cannot
3:02:25
because well webpack just cannot optimize
3:02:26
optimize
3:02:26
optimize common js modules i'm going to tell you
3:02:28
common js modules i'm going to tell you
3:02:28
common js modules i'm going to tell you why just in a little bit
3:02:30
why just in a little bit
3:02:30
why just in a little bit now when we translate this to ecmascript
3:02:33
now when we translate this to ecmascript
3:02:33
now when we translate this to ecmascript modules instead
3:02:35
modules instead
3:02:35
modules instead here see we are exporting the adds
3:02:38
here see we are exporting the adds
3:02:38
here see we are exporting the adds subtracts multiply and divide functions
3:02:40
subtracts multiply and divide functions
3:02:40
subtracts multiply and divide functions as well we're also
3:02:42
as well we're also
3:02:42
as well we're also exporting max and importing again max pi
3:02:45
exporting max and importing again max pi
3:02:45
exporting max and importing again max pi from low dash yes pretty much the same
3:02:47
from low dash yes pretty much the same
3:02:48
from low dash yes pretty much the same program but instead of using common js
3:02:49
program but instead of using common js
3:02:49
program but instead of using common js we're using ecmoscript
3:02:51
we're using ecmoscript
3:02:51
we're using ecmoscript modules the output after we bundle this
3:02:54
modules the output after we bundle this
3:02:54
modules the output after we bundle this with webpack is going to be this
3:02:57
with webpack is going to be this
3:02:58
with webpack is going to be this pretty small right pretty tiny and
3:03:00
pretty small right pretty tiny and
3:03:00
pretty small right pretty tiny and depending on the configuration of the
3:03:02
depending on the configuration of the
3:03:02
depending on the configuration of the javascript optimizer cursor
3:03:04
javascript optimizer cursor
3:03:04
javascript optimizer cursor this one plus two could be actually
3:03:06
this one plus two could be actually
3:03:06
this one plus two could be actually folded to three
3:03:08
folded to three
3:03:08
folded to three so you can get two bytes less
3:03:12
so you can get two bytes less
3:03:12
so you can get two bytes less this is 40 bytes compared to 625
3:03:19
this is 40 bytes compared to 625
3:03:19
this is 40 bytes compared to 625 kilobytes right that's a massive
3:03:20
kilobytes right that's a massive
3:03:20
kilobytes right that's a massive difference so you can see how
3:03:22
difference so you can see how
3:03:22
difference so you can see how a single common js module can completely
3:03:24
a single common js module can completely
3:03:24
a single common js module can completely blow up
3:03:25
blow up
3:03:25
blow up your application size and make it much
3:03:27
your application size and make it much
3:03:27
your application size and make it much slower compared to just using
3:03:29
slower compared to just using
3:03:29
slower compared to just using yes modules
3:03:31
yes modules
3:03:31
yes modules [Music]
3:03:33
[Music]
3:03:33
[Music] and the difference is only in this see
3:03:36
and the difference is only in this see
3:03:36
and the difference is only in this see only the utils modules
3:03:37
only the utils modules
3:03:37
only the utils modules is slightly different on how you're
3:03:39
is slightly different on how you're
3:03:39
is slightly different on how you're exporting things
3:03:41
exporting things
3:03:41
exporting things the interesting thing here is that it is
3:03:43
the interesting thing here is that it is
3:03:43
the interesting thing here is that it is again related to this trade-off static
3:03:45
again related to this trade-off static
3:03:45
again related to this trade-off static versus dynamic
3:03:48
it may not seem that common gs is much
3:03:50
it may not seem that common gs is much
3:03:50
it may not seem that common gs is much more dynamic but
3:03:51
more dynamic but
3:03:51
more dynamic but look at this here we can export
3:03:55
look at this here we can export
3:03:56
look at this here we can export a function with a name that we're
3:03:57
a function with a name that we're
3:03:57
a function with a name that we're getting from local storage
3:03:59
getting from local storage
3:03:59
getting from local storage by touching the
3:04:02
element in local storage associated with
3:04:05
element in local storage associated with
3:04:05
element in local storage associated with a random number that we have generated
3:04:08
a random number that we have generated
3:04:08
a random number that we have generated so this is extremely dynamic pretty much
3:04:10
so this is extremely dynamic pretty much
3:04:10
so this is extremely dynamic pretty much webpack at build time it has no idea how
3:04:12
webpack at build time it has no idea how
3:04:12
webpack at build time it has no idea how to
3:04:13
to
3:04:13
to understand what is the module name so it
3:04:15
understand what is the module name so it
3:04:15
understand what is the module name so it can so that it can get rid of the import
3:04:17
can so that it can get rid of the import
3:04:17
can so that it can get rid of the import the export if we're not using it
3:04:21
the export if we're not using it
3:04:21
the export if we're not using it this local storage get item information
3:04:23
this local storage get item information
3:04:24
this local storage get item information is
3:04:24
is
3:04:24
is something that is only available at
3:04:27
something that is only available at
3:04:27
something that is only available at runtime so at build time statically
3:04:29
runtime so at build time statically
3:04:29
runtime so at build time statically we have no idea how to optimize it
3:04:33
we have no idea how to optimize it
3:04:33
we have no idea how to optimize it this is just one example but i also want
3:04:35
this is just one example but i also want
3:04:35
this is just one example but i also want to give you one more example
3:04:36
to give you one more example
3:04:36
to give you one more example which is related to the angular's
3:04:38
which is related to the angular's
3:04:38
which is related to the angular's internationalization
3:04:40
internationalization
3:04:40
internationalization i have been hearing a lot of very mixed
3:04:42
i have been hearing a lot of very mixed
3:04:42
i have been hearing a lot of very mixed feedback about internal civilization and
3:04:44
feedback about internal civilization and
3:04:44
feedback about internal civilization and a lot of people have been asking for a
3:04:45
a lot of people have been asking for a
3:04:46
a lot of people have been asking for a runtime internationalization which
3:04:47
runtime internationalization which
3:04:47
runtime internationalization which allows you to swap
3:04:49
allows you to swap
3:04:49
allows you to swap the language dynamically without
3:04:51
the language dynamically without
3:04:51
the language dynamically without refreshing the page
3:04:53
refreshing the page
3:04:53
refreshing the page and originally
3:04:57
actually i thought that we just don't
3:04:59
actually i thought that we just don't
3:05:00
actually i thought that we just don't communicate the reasons why
3:05:02
communicate the reasons why
3:05:02
communicate the reasons why we have taken certain decisions on
3:05:04
we have taken certain decisions on
3:05:04
we have taken certain decisions on improving
3:05:06
improving
3:05:06
improving the internationalization with static
3:05:10
the internationalization with static
3:05:10
the internationalization with static analysis
3:05:11
analysis
3:05:12
analysis so let me share why we're doing it right
3:05:14
so let me share why we're doing it right
3:05:14
so let me share why we're doing it right now
3:05:17
by using our internal initialization
3:05:21
by using our internal initialization
3:05:21
by using our internal initialization you would first compile your angular
3:05:23
you would first compile your angular
3:05:23
you would first compile your angular application
3:05:25
application
3:05:25
application to javascript here for all your
3:05:27
to javascript here for all your
3:05:27
to javascript here for all your internationalization markers
3:05:29
internationalization markers
3:05:29
internationalization markers where you have specified the i18 i18n
3:05:31
where you have specified the i18 i18n
3:05:31
where you have specified the i18 i18n attribute
3:05:32
attribute
3:05:32
attribute we're going to add some specific other
3:05:35
we're going to add some specific other
3:05:35
we're going to add some specific other markers using
3:05:36
markers using
3:05:36
markers using our dollar localize service
3:05:41
our dollar localize service
3:05:41
our dollar localize service later on for each one of your
3:05:44
later on for each one of your
3:05:44
later on for each one of your translation files
3:05:47
translation files
3:05:47
translation files we're going to take your application and
3:05:49
we're going to take your application and
3:05:50
we're going to take your application and apply direct replacements to the source
3:05:52
apply direct replacements to the source
3:05:52
apply direct replacements to the source code
3:05:52
code
3:05:52
code so we're going to replace these markers
3:05:54
so we're going to replace these markers
3:05:54
so we're going to replace these markers that we introduced with the actual
3:05:56
that we introduced with the actual
3:05:56
that we introduced with the actual strings associated with the particular
3:05:58
strings associated with the particular
3:05:58
strings associated with the particular translation that you're building your
3:05:59
translation that you're building your
3:05:59
translation that you're building your application with
3:06:01
application with
3:06:01
application with so this means that with like four
3:06:03
so this means that with like four
3:06:03
so this means that with like four different translation files you're going
3:06:04
different translation files you're going
3:06:04
different translation files you're going to come up with
3:06:05
to come up with
3:06:05
to come up with four different versions of your
3:06:06
four different versions of your
3:06:06
four different versions of your application
3:06:10
i want to address a couple of things
3:06:11
i want to address a couple of things
3:06:11
i want to address a couple of things here first of all so uh
3:06:13
here first of all so uh
3:06:13
here first of all so uh there were problems with our
3:06:14
there were problems with our
3:06:14
there were problems with our internationalization inversion in
3:06:16
internationalization inversion in
3:06:16
internationalization inversion in version 8 and before
3:06:17
version 8 and before
3:06:17
version 8 and before where we had to compile your application
3:06:19
where we had to compile your application
3:06:20
where we had to compile your application once for each in the individual language
3:06:21
once for each in the individual language
3:06:21
once for each in the individual language that you support
3:06:22
that you support
3:06:22
that you support and this wasn't ideal for sure this was
3:06:24
and this wasn't ideal for sure this was
3:06:24
and this wasn't ideal for sure this was taking a lot of time
3:06:26
taking a lot of time
3:06:26
taking a lot of time now we optimize this so instead of
3:06:28
now we optimize this so instead of
3:06:28
now we optimize this so instead of compiling your application once for each
3:06:29
compiling your application once for each
3:06:30
compiling your application once for each language now we're compiling it
3:06:31
language now we're compiling it
3:06:31
language now we're compiling it only once and we're performing
3:06:33
only once and we're performing
3:06:33
only once and we're performing replacements
3:06:34
replacements
3:06:34
replacements depending on the language that you're
3:06:36
depending on the language that you're
3:06:36
depending on the language that you're targeting right now replacements are
3:06:38
targeting right now replacements are
3:06:38
targeting right now replacements are much faster
3:06:39
much faster
3:06:39
much faster than the original compilation so that's
3:06:41
than the original compilation so that's
3:06:41
than the original compilation so that's why the build process now
3:06:43
why the build process now
3:06:43
why the build process now with like 100 different languages it's
3:06:46
with like 100 different languages it's
3:06:46
with like 100 different languages it's not going to be
3:06:46
not going to be
3:06:46
not going to be so much different from the compilation
3:06:49
so much different from the compilation
3:06:49
so much different from the compilation process with
3:06:49
process with
3:06:50
process with one language right
3:06:53
one language right
3:06:53
one language right we're going to produce 100 different
3:06:54
we're going to produce 100 different
3:06:54
we're going to produce 100 different versions of your application
3:06:56
versions of your application
3:06:56
versions of your application as well but we are no longer having to
3:06:59
as well but we are no longer having to
3:06:59
as well but we are no longer having to introduce like individual bindings for
3:07:02
introduce like individual bindings for
3:07:02
introduce like individual bindings for the different translations that you
3:07:03
the different translations that you
3:07:03
the different translations that you depend on
3:07:04
depend on
3:07:04
depend on since we're going to replace these
3:07:05
since we're going to replace these
3:07:05
since we're going to replace these bindings with strings
3:07:07
bindings with strings
3:07:07
bindings with strings associated with the corresponding
3:07:09
associated with the corresponding
3:07:09
associated with the corresponding language
3:07:10
language
3:07:10
language this is going to allow us to remove the
3:07:12
this is going to allow us to remove the
3:07:12
this is going to allow us to remove the overtime the
3:07:15
overtime the
3:07:15
overtime the runtime overhead associated with these
3:07:17
runtime overhead associated with these
3:07:17
runtime overhead associated with these bindings since
3:07:18
bindings since
3:07:18
bindings since a binding means that angular needs to
3:07:21
a binding means that angular needs to
3:07:21
a binding means that angular needs to perform
3:07:22
perform
3:07:22
perform checking there like angular needs to
3:07:23
checking there like angular needs to
3:07:23
checking there like angular needs to verify whether the current value of the
3:07:25
verify whether the current value of the
3:07:25
verify whether the current value of the binding
3:07:25
binding
3:07:25
binding is different from the previous value
3:07:26
is different from the previous value
3:07:26
is different from the previous value right so this means that
3:07:28
right so this means that
3:07:28
right so this means that by performing this compile time i18n
3:07:30
by performing this compile time i18n
3:07:30
by performing this compile time i18n we're making your application much
3:07:32
we're making your application much
3:07:32
we're making your application much faster
3:07:33
faster
3:07:33
faster compares to binding to
3:07:37
compares to binding to
3:07:37
compares to binding to the individual translations one by one
3:07:39
the individual translations one by one
3:07:39
the individual translations one by one also we're making it much smaller
3:07:41
also we're making it much smaller
3:07:41
also we're making it much smaller because each binding is a javascript
3:07:43
because each binding is a javascript
3:07:43
because each binding is a javascript instruction
3:07:44
instruction
3:07:44
instruction and this javascript instruction adds up
3:07:46
and this javascript instruction adds up
3:07:46
and this javascript instruction adds up especially when your application grows
3:07:49
especially when your application grows
3:07:49
especially when your application grows so you're going to have smaller
3:07:50
so you're going to have smaller
3:07:50
so you're going to have smaller application and faster
3:07:52
application and faster
3:07:52
application and faster at runtime just by performing such
3:07:54
at runtime just by performing such
3:07:54
at runtime just by performing such static optimizations
3:07:57
static optimizations
3:07:57
static optimizations and the cost for this is pretty much
3:08:00
and the cost for this is pretty much
3:08:00
and the cost for this is pretty much zero
3:08:00
zero
3:08:00
zero the cost is that it's going to be
3:08:03
the cost is that it's going to be
3:08:03
the cost is that it's going to be impossible in this case
3:08:05
impossible in this case
3:08:05
impossible in this case to change the language without
3:08:06
to change the language without
3:08:06
to change the language without refreshing the page
3:08:08
refreshing the page
3:08:08
refreshing the page and well to be honest users are not
3:08:10
and well to be honest users are not
3:08:10
and well to be honest users are not usually changing from one
3:08:12
usually changing from one
3:08:12
usually changing from one language to another in a series just so
3:08:14
language to another in a series just so
3:08:14
language to another in a series just so that
3:08:16
that
3:08:16
that they can read your content in like all
3:08:19
they can read your content in like all
3:08:19
they can read your content in like all the different languages that you provide
3:08:20
the different languages that you provide
3:08:20
the different languages that you provide so this is not a very common use case
3:08:22
so this is not a very common use case
3:08:22
so this is not a very common use case you're giving up something small in
3:08:24
you're giving up something small in
3:08:24
you're giving up something small in order to
3:08:25
order to
3:08:25
order to add better performance to your
3:08:26
add better performance to your
3:08:26
add better performance to your application
3:08:28
application
3:08:28
application so this is a way we implement
3:08:30
so this is a way we implement
3:08:30
so this is a way we implement internationalization it is it is much
3:08:32
internationalization it is it is much
3:08:32
internationalization it is it is much different compared to what most other
3:08:34
different compared to what most other
3:08:34
different compared to what most other frameworks
3:08:35
frameworks
3:08:35
frameworks do right now i'm not saying that this is
3:08:37
do right now i'm not saying that this is
3:08:37
do right now i'm not saying that this is not possible to achieve in other
3:08:39
not possible to achieve in other
3:08:39
not possible to achieve in other frameworks
3:08:40
frameworks
3:08:40
frameworks this is just the decision that we took
3:08:42
this is just the decision that we took
3:08:42
this is just the decision that we took and it is a result of the design that we
3:08:44
and it is a result of the design that we
3:08:44
and it is a result of the design that we have for angular
3:08:45
have for angular
3:08:45
have for angular static templates allow us to perform
3:08:47
static templates allow us to perform
3:08:47
static templates allow us to perform static optimizations
3:08:48
static optimizations
3:08:48
static optimizations and produce produce faster applications
3:08:53
all right uh that was pretty much
3:08:55
all right uh that was pretty much
3:08:55
all right uh that was pretty much everything i actually wanted to share
3:08:56
everything i actually wanted to share
3:08:56
everything i actually wanted to share with you today
3:08:57
with you today
3:08:57
with you today i really hope that with this overview on
3:08:59
i really hope that with this overview on
3:08:59
i really hope that with this overview on static
3:09:00
static
3:09:00
static versus dynamic i was able to point you
3:09:03
versus dynamic i was able to point you
3:09:03
versus dynamic i was able to point you to some of the
3:09:04
to some of the
3:09:04
to some of the motivation behind the technical
3:09:06
motivation behind the technical
3:09:06
motivation behind the technical decisions that we made in angular
3:09:07
decisions that we made in angular
3:09:08
decisions that we made in angular i'm also hoping that i gave you a little
3:09:09
i'm also hoping that i gave you a little
3:09:09
i'm also hoping that i gave you a little bit more visibility on what
3:09:11
bit more visibility on what
3:09:11
bit more visibility on what community processes that we're working
3:09:13
community processes that we're working
3:09:13
community processes that we're working on for example
3:09:15
on for example
3:09:15
on for example sharing our roadmap finally and
3:09:19
sharing our roadmap finally and
3:09:19
sharing our roadmap finally and requesting for comments for some of the
3:09:21
requesting for comments for some of the
3:09:21
requesting for comments for some of the technical decisions that we're making
3:09:24
technical decisions that we're making
3:09:24
technical decisions that we're making if you have any feedback for my talk or
3:09:26
if you have any feedback for my talk or
3:09:26
if you have any feedback for my talk or for myself or for angular
3:09:28
for myself or for angular
3:09:28
for myself or for angular feel free to reach out on twitter i'm
3:09:31
feel free to reach out on twitter i'm
3:09:31
feel free to reach out on twitter i'm responding there pretty actively i spent
3:09:33
responding there pretty actively i spent
3:09:33
responding there pretty actively i spent far too much time on twitter
3:09:34
far too much time on twitter
3:09:34
far too much time on twitter and i would also really love your
3:09:36
and i would also really love your
3:09:36
and i would also really love your feedback on mgv dot
3:09:38
feedback on mgv dot
3:09:38
feedback on mgv dot io talk about this presentation
3:09:42
io talk about this presentation
3:09:42
io talk about this presentation thank you that was an amazing session
3:09:45
thank you that was an amazing session
3:09:45
thank you that was an amazing session minko uh let me just go ahead and ask
3:09:47
minko uh let me just go ahead and ask
3:09:47
minko uh let me just go ahead and ask you
3:09:47
you
3:09:47
you uh the very first thing how long it took
3:09:49
uh the very first thing how long it took
3:09:49
uh the very first thing how long it took you to make that presentation
3:09:51
you to make that presentation
3:09:51
you to make that presentation because that was really fantastic
3:09:54
because that was really fantastic
3:09:54
because that was really fantastic uh it is actually i do it incrementally
3:09:58
uh it is actually i do it incrementally
3:09:58
uh it is actually i do it incrementally for different
3:10:00
for different
3:10:00
for different yeah over time it evolved
3:10:03
yeah over time it evolved
3:10:03
yeah over time it evolved yes we have been giving a lot of our
3:10:05
yes we have been giving a lot of our
3:10:05
yes we have been giving a lot of our conferences and uh
3:10:06
conferences and uh
3:10:06
conferences and uh sessions so you just compile it and
3:10:08
sessions so you just compile it and
3:10:08
sessions so you just compile it and that's how you get the best presentation
3:10:10
that's how you get the best presentation
3:10:10
that's how you get the best presentation amazing uh session minkow we really
3:10:12
amazing uh session minkow we really
3:10:12
amazing uh session minkow we really appreciate your time hi
3:10:13
appreciate your time hi
3:10:13
appreciate your time hi steven simon on behalf of entire c
3:10:16
steven simon on behalf of entire c
3:10:16
steven simon on behalf of entire c corner community and his millions of
3:10:17
corner community and his millions of
3:10:17
corner community and his millions of users
3:10:18
users
3:10:18
users would like to thank you for your
3:10:19
would like to thank you for your
3:10:19
would like to thank you for your valuable time and i really appreciate
3:10:21
valuable time and i really appreciate
3:10:21
valuable time and i really appreciate for what you're doing for the community
3:10:23
for what you're doing for the community
3:10:23
for what you're doing for the community thank you thank you so much minko
3:10:25
thank you thank you so much minko
3:10:25
thank you thank you so much minko i also want to thank you for everything
3:10:27
i also want to thank you for everything
3:10:27
i also want to thank you for everything that you're doing for community this
3:10:28
that you're doing for community this
3:10:28
that you're doing for community this presentation
3:10:28
presentation
3:10:28
presentation this uh this entire conference is super
3:10:30
this uh this entire conference is super
3:10:30
this uh this entire conference is super valuable for everyone like this
3:10:32
valuable for everyone like this
3:10:32
valuable for everyone like this knowledge sharing and
3:10:33
knowledge sharing and
3:10:33
knowledge sharing and allowing people to share the work they
3:10:35
allowing people to share the work they
3:10:35
allowing people to share the work they have been doing is fantastic
3:10:37
have been doing is fantastic
3:10:37
have been doing is fantastic thank you thank you bye bye take care
3:10:40
thank you thank you bye bye take care
3:10:40
thank you thank you bye bye take care bye-bye all right so now
3:10:44
bye-bye all right so now
3:10:44
bye-bye all right so now let's move to the next speaker that we
3:10:46
let's move to the next speaker that we
3:10:46
let's move to the next speaker that we have
3:10:47
have
3:10:47
have is nishigo uh nishu is an engineer who
3:10:50
is nishigo uh nishu is an engineer who
3:10:50
is nishigo uh nishu is an engineer who works on front-end technologies
3:10:52
works on front-end technologies
3:10:52
works on front-end technologies she's a google dev expert in angular and
3:10:55
she's a google dev expert in angular and
3:10:55
she's a google dev expert in angular and a microsoft mep
3:10:56
a microsoft mep
3:10:56
a microsoft mep she's also a c-sharp on an mvp she
3:10:58
she's also a c-sharp on an mvp she
3:10:58
she's also a c-sharp on an mvp she writes blog posts and
3:11:00
writes blog posts and
3:11:00
writes blog posts and code labs around the concept of angular
3:11:03
code labs around the concept of angular
3:11:03
code labs around the concept of angular and webbing journal
3:11:04
and webbing journal
3:11:04
and webbing journal she is also an author of the book step
3:11:06
she is also an author of the book step
3:11:06
she is also an author of the book step by step angular routing
3:11:08
by step angular routing
3:11:08
by step angular routing and you can always find her on twitter
3:11:10
and you can always find her on twitter
3:11:10
and you can always find her on twitter with the handle d costa
3:11:12
with the handle d costa
3:11:12
with the handle d costa wilson let's invite this speaker now
3:11:16
wilson let's invite this speaker now
3:11:16
wilson let's invite this speaker now we should go
3:11:22
we should go
3:11:22
we should go [Music]
3:11:34
do
3:11:38
[Music]
3:11:51
hi nishi welcome to the conference
3:11:56
hi thank you so much that was a great
3:11:58
hi thank you so much that was a great
3:11:58
hi thank you so much that was a great introduction stephen
3:12:00
introduction stephen
3:12:00
introduction stephen yeah i think and i will go ahead and
3:12:03
yeah i think and i will go ahead and
3:12:03
yeah i think and i will go ahead and start
3:12:07
yeah i definitely see your screen and uh
3:12:10
yeah i definitely see your screen and uh
3:12:10
yeah i definitely see your screen and uh thank you so much for joining us today
3:12:11
thank you so much for joining us today
3:12:11
thank you so much for joining us today and i'll just share your screen and then
3:12:13
and i'll just share your screen and then
3:12:13
and i'll just share your screen and then you can go ahead and start having a
3:12:14
you can go ahead and start having a
3:12:14
you can go ahead and start having a presentation
3:12:22
okay so
3:12:25
okay so
3:12:25
okay so yeah hi everyone hi again thank you very
3:12:28
yeah hi everyone hi again thank you very
3:12:28
yeah hi everyone hi again thank you very much for joining
3:12:29
much for joining
3:12:29
much for joining and i am really excited to be presenting
3:12:31
and i am really excited to be presenting
3:12:31
and i am really excited to be presenting today and i'm gonna be talking about
3:12:33
today and i'm gonna be talking about
3:12:33
today and i'm gonna be talking about creating libraries in angular
3:12:35
creating libraries in angular
3:12:35
creating libraries in angular and building and packaging your
3:12:36
and building and packaging your
3:12:36
and building and packaging your libraries especially with angular 10
3:12:39
libraries especially with angular 10
3:12:39
libraries especially with angular 10 you would see a little bit changes um in
3:12:41
you would see a little bit changes um in
3:12:42
you would see a little bit changes um in the way
3:12:42
the way
3:12:42
the way library your library would work or the
3:12:44
library your library would work or the
3:12:44
library your library would work or the bundling of your library would work
3:12:46
bundling of your library would work
3:12:46
bundling of your library would work so let's just try to write uh jump right
3:12:49
so let's just try to write uh jump right
3:12:49
so let's just try to write uh jump right in and you know
3:12:50
in and you know
3:12:50
in and you know have a look and how to create um angular
3:12:52
have a look and how to create um angular
3:12:52
have a look and how to create um angular libraries
3:12:55
okay so um as steven already introduced
3:12:58
okay so um as steven already introduced
3:12:58
okay so um as steven already introduced a little bit about myself
3:12:59
a little bit about myself
3:12:59
a little bit about myself i am an engineer and i work at the
3:13:01
i am an engineer and i work at the
3:13:01
i am an engineer and i work at the dataworks uh most of my work revolves
3:13:03
dataworks uh most of my work revolves
3:13:03
dataworks uh most of my work revolves around the trunk and technologies
3:13:05
around the trunk and technologies
3:13:05
around the trunk and technologies angular
3:13:06
angular
3:13:06
angular react and i am a microsoft mvp and a
3:13:08
react and i am a microsoft mvp and a
3:13:08
react and i am a microsoft mvp and a google developer expert in web
3:13:11
google developer expert in web
3:13:11
google developer expert in web and i love to write code labs blog posts
3:13:14
and i love to write code labs blog posts
3:13:14
and i love to write code labs blog posts around the basic concepts of angular
3:13:16
around the basic concepts of angular
3:13:16
around the basic concepts of angular or web so um when we talk about
3:13:20
or web so um when we talk about
3:13:20
or web so um when we talk about libraries right the basic idea of
3:13:23
libraries right the basic idea of
3:13:23
libraries right the basic idea of creating it is about the concept of
3:13:25
creating it is about the concept of
3:13:25
creating it is about the concept of reusability and
3:13:26
reusability and
3:13:26
reusability and if you're looking for a more standard
3:13:28
if you're looking for a more standard
3:13:28
if you're looking for a more standard definition of what libraries are
3:13:30
definition of what libraries are
3:13:30
definition of what libraries are you would want to go into the the
3:13:33
you would want to go into the the
3:13:33
you would want to go into the the programmatic definition of what
3:13:34
programmatic definition of what
3:13:34
programmatic definition of what libraries are
3:13:36
libraries are
3:13:36
libraries are so when i was googling what is the um
3:13:39
so when i was googling what is the um
3:13:39
so when i was googling what is the um legal definition it gives you this
3:13:41
legal definition it gives you this
3:13:41
legal definition it gives you this standard definition
3:13:42
standard definition
3:13:42
standard definition and it says that in programming a
3:13:44
and it says that in programming a
3:13:44
and it says that in programming a collection of pre-compiled routines
3:13:46
collection of pre-compiled routines
3:13:46
collection of pre-compiled routines that a program can use is a library now
3:13:49
that a program can use is a library now
3:13:49
that a program can use is a library now there's a lot of words there so let's
3:13:50
there's a lot of words there so let's
3:13:50
there's a lot of words there so let's just break it down and understand what
3:13:52
just break it down and understand what
3:13:52
just break it down and understand what it really means and how it is helpful to
3:13:55
it really means and how it is helpful to
3:13:55
it really means and how it is helpful to us
3:13:55
us
3:13:55
us for our understanding of you know why
3:13:57
for our understanding of you know why
3:13:57
for our understanding of you know why would we want to create a library
3:13:59
would we want to create a library
3:13:59
would we want to create a library using a framework and why would a
3:14:01
using a framework and why would a
3:14:01
using a framework and why would a program want to use a library right
3:14:03
program want to use a library right
3:14:03
program want to use a library right and basically what is the purpose so it
3:14:05
and basically what is the purpose so it
3:14:05
and basically what is the purpose so it says it's a collection
3:14:07
says it's a collection
3:14:07
says it's a collection of pre-compiled routines now this gives
3:14:09
of pre-compiled routines now this gives
3:14:10
of pre-compiled routines now this gives us a sense that okay there's some
3:14:11
us a sense that okay there's some
3:14:11
us a sense that okay there's some functionality
3:14:12
functionality
3:14:12
functionality that can be used repeatedly or maybe
3:14:15
that can be used repeatedly or maybe
3:14:15
that can be used repeatedly or maybe across your different projects
3:14:16
across your different projects
3:14:16
across your different projects and it's pre-compiled like the
3:14:18
and it's pre-compiled like the
3:14:18
and it's pre-compiled like the functionality is working and you can
3:14:19
functionality is working and you can
3:14:19
functionality is working and you can just export it and use it inside your
3:14:22
just export it and use it inside your
3:14:22
just export it and use it inside your maybe other applications and so the
3:14:25
maybe other applications and so the
3:14:25
maybe other applications and so the program can use this pre-compiled
3:14:26
program can use this pre-compiled
3:14:26
program can use this pre-compiled routine pre-compiled feature that is
3:14:28
routine pre-compiled feature that is
3:14:28
routine pre-compiled feature that is ready for you
3:14:29
ready for you
3:14:29
ready for you and you can maybe share it with other or
3:14:32
and you can maybe share it with other or
3:14:32
and you can maybe share it with other or just create it and use it in different
3:14:34
just create it and use it in different
3:14:34
just create it and use it in different programs or different projects of yours
3:14:36
programs or different projects of yours
3:14:36
programs or different projects of yours now the takeaway from here can be that
3:14:39
now the takeaway from here can be that
3:14:39
now the takeaway from here can be that first your library
3:14:40
first your library
3:14:40
first your library has some shareable code you can share it
3:14:42
has some shareable code you can share it
3:14:42
has some shareable code you can share it across your projects or
3:14:44
across your projects or
3:14:44
across your projects or with your colleagues then it has the
3:14:46
with your colleagues then it has the
3:14:46
with your colleagues then it has the reusable functionality
3:14:47
reusable functionality
3:14:47
reusable functionality which is obviously the basic idea of
3:14:49
which is obviously the basic idea of
3:14:49
which is obviously the basic idea of creating a functionality
3:14:51
creating a functionality
3:14:51
creating a functionality then the four point here says um it
3:14:53
then the four point here says um it
3:14:53
then the four point here says um it would have a dedicated code for a
3:14:55
would have a dedicated code for a
3:14:55
would have a dedicated code for a feature
3:14:56
feature
3:14:56
feature now for example you want to implement a
3:14:58
now for example you want to implement a
3:14:58
now for example you want to implement a virtual scroll for your
3:15:00
virtual scroll for your
3:15:00
virtual scroll for your project now this is a project that has
3:15:03
project now this is a project that has
3:15:03
project now this is a project that has many other functionalities but then
3:15:05
many other functionalities but then
3:15:05
many other functionalities but then this particular functionality which is
3:15:06
this particular functionality which is
3:15:06
this particular functionality which is virtual scroll uh
3:15:08
virtual scroll uh
3:15:08
virtual scroll uh makes you think that you know you might
3:15:10
makes you think that you know you might
3:15:10
makes you think that you know you might need a similar functionality in many
3:15:11
need a similar functionality in many
3:15:11
need a similar functionality in many different projects of yours
3:15:14
different projects of yours
3:15:14
different projects of yours and you don't want to keep it specific
3:15:16
and you don't want to keep it specific
3:15:16
and you don't want to keep it specific to a project
3:15:17
to a project
3:15:17
to a project so you think that okay let me make it
3:15:19
so you think that okay let me make it
3:15:19
so you think that okay let me make it reusable let me build it in a way that
3:15:21
reusable let me build it in a way that
3:15:21
reusable let me build it in a way that it becomes reusable and i should be able
3:15:23
it becomes reusable and i should be able
3:15:23
it becomes reusable and i should be able to use it in my next application or next
3:15:25
to use it in my next application or next
3:15:25
to use it in my next application or next project that i'm doing
3:15:27
project that i'm doing
3:15:27
project that i'm doing that's where the the concept of
3:15:29
that's where the the concept of
3:15:29
that's where the the concept of libraries
3:15:30
libraries
3:15:30
libraries start coming in that's where you start
3:15:32
start coming in that's where you start
3:15:32
start coming in that's where you start thinking that okay what if i
3:15:34
thinking that okay what if i
3:15:34
thinking that okay what if i you know just create a view reusable put
3:15:36
you know just create a view reusable put
3:15:36
you know just create a view reusable put it somewhere maybe just for myself or
3:15:38
it somewhere maybe just for myself or
3:15:38
it somewhere maybe just for myself or maybe
3:15:38
maybe
3:15:38
maybe um an internal repository of your
3:15:41
um an internal repository of your
3:15:41
um an internal repository of your organization
3:15:42
organization
3:15:42
organization just put it there whenever you or
3:15:44
just put it there whenever you or
3:15:44
just put it there whenever you or anybody wants to use it
3:15:45
anybody wants to use it
3:15:45
anybody wants to use it can just go ahead and you know use it
3:15:48
can just go ahead and you know use it
3:15:48
can just go ahead and you know use it and i always use this example
3:15:50
and i always use this example
3:15:50
and i always use this example of um my own way of working so i used to
3:15:53
of um my own way of working so i used to
3:15:53
of um my own way of working so i used to work in a setup
3:15:54
work in a setup
3:15:54
work in a setup where um we would like for example there
3:15:56
where um we would like for example there
3:15:56
where um we would like for example there are five colleagues
3:15:58
are five colleagues
3:15:58
are five colleagues in our team and all of us were working
3:16:01
in our team and all of us were working
3:16:01
in our team and all of us were working on different projects
3:16:01
on different projects
3:16:02
on different projects four different clients now one person
3:16:05
four different clients now one person
3:16:06
four different clients now one person for a client would be working on now
3:16:08
for a client would be working on now
3:16:08
for a client would be working on now what we would do
3:16:09
what we would do
3:16:09
what we would do is to you know start an efficient way of
3:16:13
is to you know start an efficient way of
3:16:13
is to you know start an efficient way of working
3:16:14
working
3:16:14
working we would build something whatever
3:16:16
we would build something whatever
3:16:16
we would build something whatever component or you know functionality that
3:16:18
component or you know functionality that
3:16:18
component or you know functionality that we see
3:16:19
we see
3:16:19
we see can be reused we would build it as an
3:16:21
can be reused we would build it as an
3:16:21
can be reused we would build it as an opponent
3:16:22
opponent
3:16:22
opponent or um a library in itself and then we
3:16:25
or um a library in itself and then we
3:16:25
or um a library in itself and then we would just use it and push it on to our
3:16:28
would just use it and push it on to our
3:16:28
would just use it and push it on to our internal repository now for example my
3:16:31
internal repository now for example my
3:16:31
internal repository now for example my next colleague who's working on any
3:16:33
next colleague who's working on any
3:16:33
next colleague who's working on any other project
3:16:33
other project
3:16:33
other project says that uh you know i'm working on a
3:16:35
says that uh you know i'm working on a
3:16:35
says that uh you know i'm working on a different framework project
3:16:37
different framework project
3:16:37
different framework project and he wants to use the same
3:16:38
and he wants to use the same
3:16:38
and he wants to use the same functionality um he can definitely go
3:16:41
functionality um he can definitely go
3:16:41
functionality um he can definitely go ahead and you know use the different web
3:16:43
ahead and you know use the different web
3:16:43
ahead and you know use the different web components
3:16:44
components
3:16:44
components that i have created now that's the thing
3:16:47
that i have created now that's the thing
3:16:47
that i have created now that's the thing with their components if you're
3:16:48
with their components if you're
3:16:48
with their components if you're looking for using your functionality in
3:16:51
looking for using your functionality in
3:16:51
looking for using your functionality in different
3:16:52
different
3:16:52
different you know framework projects you can go
3:16:53
you know framework projects you can go
3:16:54
you know framework projects you can go with custom elements and we have
3:16:56
with custom elements and we have
3:16:56
with custom elements and we have angular elements
3:17:01
then you would want to have it inside
3:17:03
then you would want to have it inside
3:17:03
then you would want to have it inside your angular project because you know
3:17:04
your angular project because you know
3:17:04
your angular project because you know you can export like
3:17:05
you can export like
3:17:05
you can export like angular libraries and use them
3:17:09
only inside your angular applications so
3:17:12
only inside your angular applications so
3:17:12
only inside your angular applications so you can do that in that case
3:17:14
you can do that in that case
3:17:14
you can do that in that case now when you understand that um
3:17:16
now when you understand that um
3:17:16
now when you understand that um reusability is the main idea of you know
3:17:19
reusability is the main idea of you know
3:17:19
reusability is the main idea of you know creating and using like these
3:17:21
creating and using like these
3:17:21
creating and using like these this picture comes into my mind and this
3:17:24
this picture comes into my mind and this
3:17:24
this picture comes into my mind and this is a very
3:17:25
is a very
3:17:25
is a very uh good example that was shared by
3:17:28
uh good example that was shared by
3:17:28
uh good example that was shared by um it's a minute
3:17:34
so where is my screen
3:17:37
yeah so this was a very good example
3:17:40
yeah so this was a very good example
3:17:40
yeah so this was a very good example that was shared in the stock uh create
3:17:43
that was shared in the stock uh create
3:17:43
that was shared in the stock uh create and publish angular libraries like a pro
3:17:45
and publish angular libraries like a pro
3:17:45
and publish angular libraries like a pro by udi
3:17:45
by udi
3:17:46
by udi and in there you know he used this
3:17:47
and in there you know he used this
3:17:47
and in there you know he used this picture which is a very good
3:17:48
picture which is a very good
3:17:48
picture which is a very good representation of how our applications
3:17:51
representation of how our applications
3:17:51
representation of how our applications uh comprise of you know different
3:17:53
uh comprise of you know different
3:17:53
uh comprise of you know different javascript libraries or different
3:17:54
javascript libraries or different
3:17:54
javascript libraries or different angular libraries
3:17:55
angular libraries
3:17:55
angular libraries and all of the code is then assembled to
3:17:57
and all of the code is then assembled to
3:17:57
and all of the code is then assembled to create your whole application
3:17:59
create your whole application
3:17:59
create your whole application and now if you reflect and think about
3:18:02
and now if you reflect and think about
3:18:02
and now if you reflect and think about your own application
3:18:03
your own application
3:18:03
your own application you would see that your application
3:18:05
you would see that your application
3:18:05
you would see that your application actually actually uses a lot of
3:18:06
actually actually uses a lot of
3:18:06
actually actually uses a lot of different libraries right maybe it's
3:18:09
different libraries right maybe it's
3:18:09
different libraries right maybe it's just a regular javascript library
3:18:10
just a regular javascript library
3:18:10
just a regular javascript library or maybe a different angular library
3:18:13
or maybe a different angular library
3:18:13
or maybe a different angular library right so
3:18:14
right so
3:18:14
right so we um in our projects use a lot of
3:18:16
we um in our projects use a lot of
3:18:16
we um in our projects use a lot of angular libraries or javascript
3:18:18
angular libraries or javascript
3:18:18
angular libraries or javascript libraries
3:18:19
libraries
3:18:19
libraries in general and then
3:18:22
in general and then
3:18:22
in general and then that makes me you know come to the point
3:18:25
that makes me you know come to the point
3:18:25
that makes me you know come to the point of the use of library and how it really
3:18:27
of the use of library and how it really
3:18:27
of the use of library and how it really helps us
3:18:28
helps us
3:18:28
helps us so this is the definition that you know
3:18:29
so this is the definition that you know
3:18:29
so this is the definition that you know makes uh justifies the use of library
3:18:32
makes uh justifies the use of library
3:18:32
makes uh justifies the use of library kind of
3:18:33
kind of
3:18:33
kind of so it says it's the smallest set of
3:18:34
so it says it's the smallest set of
3:18:34
so it says it's the smallest set of logically connected code
3:18:36
logically connected code
3:18:36
logically connected code and as you can see i've highlighted
3:18:38
and as you can see i've highlighted
3:18:38
and as you can see i've highlighted logically connected code here
3:18:40
logically connected code here
3:18:40
logically connected code here and what it really means is that you
3:18:42
and what it really means is that you
3:18:42
and what it really means is that you know you would have one feature
3:18:43
know you would have one feature
3:18:43
know you would have one feature one functionality in your library that
3:18:46
one functionality in your library that
3:18:46
one functionality in your library that you want to bundle together
3:18:47
you want to bundle together
3:18:48
you want to bundle together and use it as the small set of all the
3:18:50
and use it as the small set of all the
3:18:50
and use it as the small set of all the connected code which is obviously
3:18:52
connected code which is obviously
3:18:52
connected code which is obviously logical enough because it has a purpose
3:18:54
logical enough because it has a purpose
3:18:54
logical enough because it has a purpose it has this feature that you're trying
3:18:55
it has this feature that you're trying
3:18:55
it has this feature that you're trying to export and this bundle
3:18:57
to export and this bundle
3:18:57
to export and this bundle is the thing that you can export and
3:18:58
is the thing that you can export and
3:18:58
is the thing that you can export and then give to your on wherever
3:19:01
then give to your on wherever
3:19:01
then give to your on wherever whether make it public to npm repository
3:19:03
whether make it public to npm repository
3:19:03
whether make it public to npm repository or just give it to your colleague or
3:19:05
or just give it to your colleague or
3:19:05
or just give it to your colleague or just keep it to yourself if you want to
3:19:06
just keep it to yourself if you want to
3:19:06
just keep it to yourself if you want to use it in different projects so
3:19:08
use it in different projects so
3:19:08
use it in different projects so that is kind of you know the best use of
3:19:10
that is kind of you know the best use of
3:19:10
that is kind of you know the best use of library when
3:19:11
library when
3:19:11
library when you're making the bundle very small and
3:19:13
you're making the bundle very small and
3:19:13
you're making the bundle very small and just very
3:19:14
just very
3:19:14
just very feature specific and keeping it on or
3:19:17
feature specific and keeping it on or
3:19:18
feature specific and keeping it on or sharing it with anyone
3:19:19
sharing it with anyone
3:19:19
sharing it with anyone now there are different features that a
3:19:21
now there are different features that a
3:19:21
now there are different features that a library should have
3:19:23
library should have
3:19:23
library should have and um we just had minko talk about um
3:19:25
and um we just had minko talk about um
3:19:25
and um we just had minko talk about um angular right so
3:19:27
angular right so
3:19:27
angular right so he in a blog post shared the different
3:19:29
he in a blog post shared the different
3:19:29
he in a blog post shared the different features of a library
3:19:31
features of a library
3:19:31
features of a library and these are some of the features that
3:19:32
and these are some of the features that
3:19:32
and these are some of the features that i i'll be talking about now
3:19:34
i i'll be talking about now
3:19:34
i i'll be talking about now so he mentioned that a library should be
3:19:36
so he mentioned that a library should be
3:19:36
so he mentioned that a library should be platform independent now what this means
3:19:38
platform independent now what this means
3:19:38
platform independent now what this means is that
3:19:39
is that
3:19:39
is that um a library should not just work with
3:19:41
um a library should not just work with
3:19:41
um a library should not just work with our regular angular project but it
3:19:43
our regular angular project but it
3:19:43
our regular angular project but it should also work on the server side
3:19:45
should also work on the server side
3:19:45
should also work on the server side if you're working on angular universal
3:19:47
if you're working on angular universal
3:19:47
if you're working on angular universal and it should also work with web workers
3:19:50
and it should also work with web workers
3:19:50
and it should also work with web workers this was one feature of you know having
3:19:52
this was one feature of you know having
3:19:52
this was one feature of you know having a library
3:19:53
a library
3:19:53
a library then the other feature that the library
3:19:55
then the other feature that the library
3:19:55
then the other feature that the library should have is that it should be bundled
3:19:57
should have is that it should be bundled
3:19:57
should have is that it should be bundled and distributed
3:19:58
and distributed
3:19:58
and distributed now we understand that well that our
3:20:00
now we understand that well that our
3:20:00
now we understand that well that our library obviously should be
3:20:02
library obviously should be
3:20:02
library obviously should be bundled and it should be distributed
3:20:04
bundled and it should be distributed
3:20:04
bundled and it should be distributed across projects or
3:20:05
across projects or
3:20:05
across projects or you know wherever you want to use it it
3:20:08
you know wherever you want to use it it
3:20:08
you know wherever you want to use it it should be aot compilation ready
3:20:10
should be aot compilation ready
3:20:10
should be aot compilation ready now before aot was um by default you
3:20:13
now before aot was um by default you
3:20:13
now before aot was um by default you know you
3:20:13
know you
3:20:14
know you you have to make sure that your
3:20:15
you have to make sure that your
3:20:15
you have to make sure that your libraries by is aot compilation ready
3:20:17
libraries by is aot compilation ready
3:20:17
libraries by is aot compilation ready but with um the latest feature of
3:20:19
but with um the latest feature of
3:20:19
but with um the latest feature of angular you already have that
3:20:21
angular you already have that
3:20:21
angular you already have that right so your library always will be um
3:20:23
right so your library always will be um
3:20:23
right so your library always will be um you know decompilation ready
3:20:25
you know decompilation ready
3:20:26
you know decompilation ready um and that's when you think that okay
3:20:28
um and that's when you think that okay
3:20:28
um and that's when you think that okay there are a lot of features and how do
3:20:30
there are a lot of features and how do
3:20:30
there are a lot of features and how do we keep up with all of those when
3:20:32
we keep up with all of those when
3:20:32
we keep up with all of those when for example you are trying to create
3:20:33
for example you are trying to create
3:20:33
for example you are trying to create your own library and for example
3:20:35
your own library and for example
3:20:35
your own library and for example um you are a newbie and you know maybe
3:20:37
um you are a newbie and you know maybe
3:20:37
um you are a newbie and you know maybe you have been working with angular but
3:20:40
you have been working with angular but
3:20:40
you have been working with angular but then
3:20:41
then
3:20:41
then if you choose this might
3:20:44
if you choose this might
3:20:44
if you choose this might kind of disappoint you that okay then i
3:20:47
kind of disappoint you that okay then i
3:20:47
kind of disappoint you that okay then i need to take care of each and every
3:20:48
need to take care of each and every
3:20:48
need to take care of each and every feature
3:20:49
feature
3:20:49
feature and that's when you really think that do
3:20:52
and that's when you really think that do
3:20:52
and that's when you really think that do i have a proper way of
3:20:54
i have a proper way of
3:20:54
i have a proper way of you know deciding what format to use
3:20:56
you know deciding what format to use
3:20:56
you know deciding what format to use what not to use what is the
3:20:57
what not to use what is the
3:20:57
what not to use what is the best way to go about it what is the
3:20:59
best way to go about it what is the
3:20:59
best way to go about it what is the exact architecture that i should use
3:21:02
exact architecture that i should use
3:21:02
exact architecture that i should use and that's when uh angular package
3:21:04
and that's when uh angular package
3:21:04
and that's when uh angular package format comes into picture
3:21:06
format comes into picture
3:21:06
format comes into picture now the angular team actually prepared a
3:21:08
now the angular team actually prepared a
3:21:08
now the angular team actually prepared a whole document which is called the
3:21:09
whole document which is called the
3:21:09
whole document which is called the angular package format
3:21:11
angular package format
3:21:11
angular package format and this document is it it's kind of a
3:21:14
and this document is it it's kind of a
3:21:14
and this document is it it's kind of a guideline
3:21:15
guideline
3:21:15
guideline to share with you the recommended way of
3:21:16
to share with you the recommended way of
3:21:16
to share with you the recommended way of distributing your angular packages
3:21:18
distributing your angular packages
3:21:18
distributing your angular packages and if you look at the already existing
3:21:20
and if you look at the already existing
3:21:20
and if you look at the already existing angular packages
3:21:22
angular packages
3:21:22
angular packages that you use on a regular basis all of
3:21:24
that you use on a regular basis all of
3:21:24
that you use on a regular basis all of those are you know created and bundled
3:21:26
those are you know created and bundled
3:21:26
those are you know created and bundled and packaged as per the angular package
3:21:27
and packaged as per the angular package
3:21:28
and packaged as per the angular package format
3:21:28
format
3:21:28
format now it it basically means that if you're
3:21:31
now it it basically means that if you're
3:21:31
now it it basically means that if you're using the angular package format to
3:21:33
using the angular package format to
3:21:33
using the angular package format to create your
3:21:33
create your
3:21:34
create your own library this would um you know
3:21:36
own library this would um you know
3:21:36
own library this would um you know integrate seamlessly with your angular
3:21:38
integrate seamlessly with your angular
3:21:38
integrate seamlessly with your angular application and you would not have to
3:21:39
application and you would not have to
3:21:39
application and you would not have to since it would follow all the guidelines
3:21:41
since it would follow all the guidelines
3:21:41
since it would follow all the guidelines of your you know angular project
3:21:43
of your you know angular project
3:21:43
of your you know angular project or the way angular libraries work and
3:21:45
or the way angular libraries work and
3:21:45
or the way angular libraries work and some of the things that it suggests
3:21:47
some of the things that it suggests
3:21:47
some of the things that it suggests is that it would create the module
3:21:49
is that it would create the module
3:21:49
is that it would create the module definitions for you it would
3:21:50
definitions for you it would
3:21:50
definitions for you it would keep your library aot ready and it would
3:21:53
keep your library aot ready and it would
3:21:53
keep your library aot ready and it would create the metadata file for the same
3:21:55
create the metadata file for the same
3:21:55
create the metadata file for the same same then it would have had the entry
3:21:58
same then it would have had the entry
3:21:58
same then it would have had the entry point
3:21:59
point
3:21:59
point file ready for you you can obviously
3:22:01
file ready for you you can obviously
3:22:01
file ready for you you can obviously configure the entry point
3:22:02
configure the entry point
3:22:02
configure the entry point um file that you have and we'll look at
3:22:05
um file that you have and we'll look at
3:22:05
um file that you have and we'll look at that a bit later
3:22:06
that a bit later
3:22:06
that a bit later and it would also create the typing
3:22:08
and it would also create the typing
3:22:08
and it would also create the typing files for you
3:22:09
files for you
3:22:09
files for you now i've i shared this link here in the
3:22:12
now i've i shared this link here in the
3:22:12
now i've i shared this link here in the same slide which refers due to the
3:22:14
same slide which refers due to the
3:22:14
same slide which refers due to the angular
3:22:15
angular
3:22:15
angular package format this is really
3:22:17
package format this is really
3:22:18
package format this is really interesting because this document takes
3:22:19
interesting because this document takes
3:22:20
interesting because this document takes you through
3:22:20
you through
3:22:20
you through all the different um you know file
3:22:22
all the different um you know file
3:22:22
all the different um you know file layouts uh file layouts
3:22:24
layouts uh file layouts
3:22:24
layouts uh file layouts and um the design ways so i've opened
3:22:27
and um the design ways so i've opened
3:22:28
and um the design ways so i've opened this document
3:22:28
this document
3:22:28
this document here actually and if you look at
3:22:31
here actually and if you look at
3:22:31
here actually and if you look at it here you can see that how you know
3:22:33
it here you can see that how you know
3:22:33
it here you can see that how you know the file layout is shared the different
3:22:35
the file layout is shared the different
3:22:35
the file layout is shared the different bundle formats are shared in here
3:22:37
bundle formats are shared in here
3:22:37
bundle formats are shared in here whatever you would want to use for
3:22:39
whatever you would want to use for
3:22:39
whatever you would want to use for example it um
3:22:41
example it um
3:22:41
example it um mentions all the different module
3:22:42
mentions all the different module
3:22:42
mentions all the different module formats that you would need for your
3:22:44
formats that you would need for your
3:22:44
formats that you would need for your that the library should compile
3:22:48
that the library should compile
3:22:48
that the library should compile and um there's one very interesting
3:22:50
and um there's one very interesting
3:22:50
and um there's one very interesting thing in this document
3:22:51
thing in this document
3:22:51
thing in this document which um yeah so if you see here there's
3:22:54
which um yeah so if you see here there's
3:22:54
which um yeah so if you see here there's this excellent post mention
3:22:56
this excellent post mention
3:22:56
this excellent post mention of the the post is called the cost of
3:22:57
of the the post is called the cost of
3:22:57
of the the post is called the cost of small modules and you might be really
3:22:59
small modules and you might be really
3:22:59
small modules and you might be really interested in this if you
3:23:01
interested in this if you
3:23:01
interested in this if you are you know trying to understand more
3:23:03
are you know trying to understand more
3:23:03
are you know trying to understand more about the bundling of your library
3:23:04
about the bundling of your library
3:23:04
about the bundling of your library so i would suggest to read this one it
3:23:07
so i would suggest to read this one it
3:23:07
so i would suggest to read this one it would also talk about the flat bundles
3:23:09
would also talk about the flat bundles
3:23:09
would also talk about the flat bundles that you would create for your library
3:23:11
that you would create for your library
3:23:11
that you would create for your library and the regular bundles also moving on
3:23:15
and the regular bundles also moving on
3:23:15
and the regular bundles also moving on um finally about creating your library
3:23:18
um finally about creating your library
3:23:18
um finally about creating your library right
3:23:18
right
3:23:18
right so now that you have understood the
3:23:19
so now that you have understood the
3:23:19
so now that you have understood the different uh features your library
3:23:21
different uh features your library
3:23:21
different uh features your library should have
3:23:22
should have
3:23:22
should have and the recommended way of creating your
3:23:24
and the recommended way of creating your
3:23:24
and the recommended way of creating your library what is the file layout that you
3:23:25
library what is the file layout that you
3:23:25
library what is the file layout that you should follow
3:23:26
should follow
3:23:26
should follow all of that then finally let's see what
3:23:28
all of that then finally let's see what
3:23:28
all of that then finally let's see what is the first step actually that you
3:23:30
is the first step actually that you
3:23:30
is the first step actually that you should take for creating your library
3:23:32
should take for creating your library
3:23:32
should take for creating your library so first of all you need to make sure
3:23:34
so first of all you need to make sure
3:23:34
so first of all you need to make sure that you inline all your styles and
3:23:36
that you inline all your styles and
3:23:36
that you inline all your styles and templates
3:23:37
templates
3:23:37
templates now whenever you're creating a library
3:23:39
now whenever you're creating a library
3:23:39
now whenever you're creating a library and you want to keep a feature
3:23:40
and you want to keep a feature
3:23:40
and you want to keep a feature and we mostly have features as for
3:23:42
and we mostly have features as for
3:23:42
and we mostly have features as for components right so
3:23:44
components right so
3:23:44
components right so let's say there's a module which
3:23:45
let's say there's a module which
3:23:45
let's say there's a module which contains many components
3:23:47
contains many components
3:23:48
contains many components and all these components would have one
3:23:49
and all these components would have one
3:23:50
and all these components would have one html file one
3:23:51
html file one
3:23:51
html file one um styling file then it would have a
3:23:54
um styling file then it would have a
3:23:54
um styling file then it would have a testing file and the ps5
3:23:56
testing file and the ps5
3:23:56
testing file and the ps5 and you would really want to inline all
3:23:58
and you would really want to inline all
3:23:58
and you would really want to inline all these styles and templates to make sure
3:24:00
these styles and templates to make sure
3:24:00
these styles and templates to make sure that the bundling of your
3:24:02
that the bundling of your
3:24:02
that the bundling of your component into the library when you're
3:24:04
component into the library when you're
3:24:04
component into the library when you're finally bundling your library
3:24:06
finally bundling your library
3:24:06
finally bundling your library is seamless it's very easy for the
3:24:07
is seamless it's very easy for the
3:24:07
is seamless it's very easy for the compiler and
3:24:09
compiler and
3:24:09
compiler and the next step after you have inlined all
3:24:11
the next step after you have inlined all
3:24:11
the next step after you have inlined all your templates and you know the styles
3:24:13
your templates and you know the styles
3:24:13
your templates and you know the styles is to pass it through the angular
3:24:15
is to pass it through the angular
3:24:15
is to pass it through the angular compiler which is ngc
3:24:17
compiler which is ngc
3:24:17
compiler which is ngc now this is the point where the inlining
3:24:19
now this is the point where the inlining
3:24:19
now this is the point where the inlining of your templates is very important
3:24:21
of your templates is very important
3:24:21
of your templates is very important because you want the angular compiler to
3:24:23
because you want the angular compiler to
3:24:23
because you want the angular compiler to you know just take it
3:24:24
you know just take it
3:24:24
you know just take it as a one file which has the um
3:24:27
as a one file which has the um
3:24:27
as a one file which has the um all the template for html for it it has
3:24:30
all the template for html for it it has
3:24:30
all the template for html for it it has all the business logic for that
3:24:32
all the business logic for that
3:24:32
all the business logic for that and all the styles in there within that
3:24:33
and all the styles in there within that
3:24:34
and all the styles in there within that one ps file which is for your component
3:24:36
one ps file which is for your component
3:24:36
one ps file which is for your component when you compile it it generates all the
3:24:38
when you compile it it generates all the
3:24:38
when you compile it it generates all the different bundles for your application
3:24:40
different bundles for your application
3:24:40
different bundles for your application and these are the build formats now the
3:24:43
and these are the build formats now the
3:24:43
and these are the build formats now the first bundle that it should create is
3:24:45
first bundle that it should create is
3:24:45
first bundle that it should create is the
3:24:45
the
3:24:45
the esm 2015 bundle now we also call it es6
3:24:49
esm 2015 bundle now we also call it es6
3:24:49
esm 2015 bundle now we also call it es6 format
3:24:49
format
3:24:49
format so that's the first kind of bundles that
3:24:51
so that's the first kind of bundles that
3:24:51
so that's the first kind of bundles that it would generate for you
3:24:52
it would generate for you
3:24:52
it would generate for you the second bundle that it should
3:24:54
the second bundle that it should
3:24:54
the second bundle that it should generate for you is esm5
3:24:56
generate for you is esm5
3:24:56
generate for you is esm5 and that is actually a combination of
3:24:58
and that is actually a combination of
3:24:58
and that is actually a combination of es5 and the import export statements
3:25:01
es5 and the import export statements
3:25:01
es5 and the import export statements from the um
3:25:02
from the um
3:25:02
from the um esa so it's kind of a hybrid um
3:25:06
esa so it's kind of a hybrid um
3:25:06
esa so it's kind of a hybrid um bundle format and then there's this
3:25:08
bundle format and then there's this
3:25:08
bundle format and then there's this third bundle uh
3:25:10
third bundle uh
3:25:10
third bundle uh i mean the build format which is the umd
3:25:12
i mean the build format which is the umd
3:25:12
i mean the build format which is the umd format
3:25:13
format
3:25:13
format now this universal module definition is
3:25:15
now this universal module definition is
3:25:15
now this universal module definition is actually a combination of common gs and
3:25:17
actually a combination of common gs and
3:25:17
actually a combination of common gs and amd which we used to
3:25:18
amd which we used to
3:25:18
amd which we used to use earlier so
3:25:23
use earlier so
3:25:23
use earlier so actually which we will talk about it a
3:25:25
actually which we will talk about it a
3:25:25
actually which we will talk about it a bit later
3:25:27
bit later
3:25:27
bit later and we also should notice that when we
3:25:28
and we also should notice that when we
3:25:28
and we also should notice that when we are actually bundling our library we
3:25:30
are actually bundling our library we
3:25:30
are actually bundling our library we also get to see some
3:25:31
also get to see some
3:25:31
also get to see some flat bundles so when we are building our
3:25:34
flat bundles so when we are building our
3:25:34
flat bundles so when we are building our library and you know going through the
3:25:35
library and you know going through the
3:25:35
library and you know going through the demo we'll see that
3:25:36
demo we'll see that
3:25:36
demo we'll see that the esm5 button won't be there after you
3:25:38
the esm5 button won't be there after you
3:25:38
the esm5 button won't be there after you have switched to angular 10
3:25:40
have switched to angular 10
3:25:40
have switched to angular 10 and that's a deprecation because um the
3:25:41
and that's a deprecation because um the
3:25:42
and that's a deprecation because um the down leveling of
3:25:43
down leveling of
3:25:43
down leveling of um you know your library to es5 happens
3:25:46
um you know your library to es5 happens
3:25:46
um you know your library to es5 happens after the build so we'll look at uh that
3:25:49
after the build so we'll look at uh that
3:25:49
after the build so we'll look at uh that a bit later
3:25:51
a bit later
3:25:51
a bit later then you might be wondering that i
3:25:53
then you might be wondering that i
3:25:53
then you might be wondering that i talked about aligning the templates i
3:25:55
talked about aligning the templates i
3:25:55
talked about aligning the templates i talked about compiling those i talked
3:25:57
talked about compiling those i talked
3:25:57
talked about compiling those i talked about different build formats i mean
3:25:59
about different build formats i mean
3:25:59
about different build formats i mean how you know you might be totally
3:26:01
how you know you might be totally
3:26:01
how you know you might be totally disappointed about you know
3:26:02
disappointed about you know
3:26:02
disappointed about you know creating your library and you might be
3:26:04
creating your library and you might be
3:26:04
creating your library and you might be disheartened that okay do i just quit
3:26:06
disheartened that okay do i just quit
3:26:06
disheartened that okay do i just quit creating a library what about my you
3:26:08
creating a library what about my you
3:26:08
creating a library what about my you know your plan of creating a library
3:26:10
know your plan of creating a library
3:26:10
know your plan of creating a library but then you uh ng packager comes to
3:26:13
but then you uh ng packager comes to
3:26:13
but then you uh ng packager comes to rescue when you're actually um you know
3:26:15
rescue when you're actually um you know
3:26:15
rescue when you're actually um you know wanting to create your library but then
3:26:16
wanting to create your library but then
3:26:16
wanting to create your library but then all of those tasks are you know don't
3:26:19
all of those tasks are you know don't
3:26:19
all of those tasks are you know don't seem to be very easy
3:26:21
seem to be very easy
3:26:21
seem to be very easy and ng packager is a project that was
3:26:23
and ng packager is a project that was
3:26:23
and ng packager is a project that was done by uh that was created by david
3:26:25
done by uh that was created by david
3:26:25
done by uh that was created by david and it allows your libraries to be built
3:26:27
and it allows your libraries to be built
3:26:27
and it allows your libraries to be built and packaged using this single bundle
3:26:29
and packaged using this single bundle
3:26:29
and packaged using this single bundle a single command and it what it
3:26:32
a single command and it what it
3:26:32
a single command and it what it basically does for you to make your task
3:26:34
basically does for you to make your task
3:26:34
basically does for you to make your task a whole lot easier is that it would
3:26:37
a whole lot easier is that it would
3:26:37
a whole lot easier is that it would create the libraries
3:26:38
create the libraries
3:26:38
create the libraries in the angular package format isn't that
3:26:40
in the angular package format isn't that
3:26:40
in the angular package format isn't that the best thing ever
3:26:41
the best thing ever
3:26:41
the best thing ever i mean uh ng packager make sure that all
3:26:44
i mean uh ng packager make sure that all
3:26:44
i mean uh ng packager make sure that all of your libraries
3:26:47
of your libraries
3:26:47
of your libraries are created as per the angular packet so
3:26:51
are created as per the angular packet so
3:26:51
are created as per the angular packet so it follows all
3:26:52
it follows all
3:26:52
it follows all you know um whatever guidelines are
3:26:55
you know um whatever guidelines are
3:26:55
you know um whatever guidelines are given in the format
3:26:55
given in the format
3:26:56
given in the format document and follows those to create
3:26:57
document and follows those to create
3:26:57
document and follows those to create your library that's one
3:26:59
your library that's one
3:26:59
your library that's one the second thing it would do is that it
3:27:01
the second thing it would do is that it
3:27:01
the second thing it would do is that it would also create all the different
3:27:03
would also create all the different
3:27:03
would also create all the different bundles for you which is the ones that
3:27:04
bundles for you which is the ones that
3:27:04
bundles for you which is the ones that we discussed
3:27:06
we discussed
3:27:06
we discussed just before the slide which is the esm
3:27:08
just before the slide which is the esm
3:27:08
just before the slide which is the esm 2015 bundle the esm5 bundle and the
3:27:11
2015 bundle the esm5 bundle and the
3:27:11
2015 bundle the esm5 bundle and the umd and the third very important thing
3:27:14
umd and the third very important thing
3:27:14
umd and the third very important thing is that it would also create tight
3:27:16
is that it would also create tight
3:27:16
is that it would also create tight definition files for you
3:27:17
definition files for you
3:27:17
definition files for you so you would not want to you know have
3:27:20
so you would not want to you know have
3:27:20
so you would not want to you know have to uh step in
3:27:22
to uh step in
3:27:22
to uh step in install the types of packets or you
3:27:25
install the types of packets or you
3:27:25
install the types of packets or you would not want to you know specify
3:27:26
would not want to you know specify
3:27:26
would not want to you know specify um in environment.ts file for example so
3:27:30
um in environment.ts file for example so
3:27:30
um in environment.ts file for example so it would create the right definitions
3:27:31
it would create the right definitions
3:27:31
it would create the right definitions for you
3:27:31
for you
3:27:32
for you it would create the metadata file which
3:27:33
it would create the metadata file which
3:27:33
it would create the metadata file which is for ahead of time compilation
3:27:35
is for ahead of time compilation
3:27:35
is for ahead of time compilation and the best it would inline all the
3:27:38
and the best it would inline all the
3:27:38
and the best it would inline all the styles and templates for you
3:27:39
styles and templates for you
3:27:39
styles and templates for you i mean if you're not if you're not use
3:27:41
i mean if you're not if you're not use
3:27:41
i mean if you're not if you're not use the angular side to inline your
3:27:43
the angular side to inline your
3:27:43
the angular side to inline your templates
3:27:44
templates
3:27:44
templates or also if you don't want to manually
3:27:46
or also if you don't want to manually
3:27:46
or also if you don't want to manually because who does that
3:27:47
because who does that
3:27:47
because who does that uh you would definitely want to use the
3:27:49
uh you would definitely want to use the
3:27:49
uh you would definitely want to use the angular nd packager to you know inline
3:27:51
angular nd packager to you know inline
3:27:51
angular nd packager to you know inline all these styles and templates
3:27:53
all these styles and templates
3:27:53
all these styles and templates now since this does almost every
3:27:55
now since this does almost every
3:27:55
now since this does almost every liability
3:27:56
liability
3:27:56
liability to be created this is actually this was
3:27:59
to be created this is actually this was
3:27:59
to be created this is actually this was actually adopted by the angular cli
3:28:01
actually adopted by the angular cli
3:28:01
actually adopted by the angular cli and now it works under the hood behind
3:28:03
and now it works under the hood behind
3:28:03
and now it works under the hood behind the hood um
3:28:04
the hood um
3:28:04
the hood um in the cli and cli uses ng packager to
3:28:07
in the cli and cli uses ng packager to
3:28:07
in the cli and cli uses ng packager to create your library
3:28:08
create your library
3:28:08
create your library and just like you see the all other
3:28:11
and just like you see the all other
3:28:11
and just like you see the all other commands to create any package right for
3:28:12
commands to create any package right for
3:28:12
commands to create any package right for example ng generate component
3:28:14
example ng generate component
3:28:14
example ng generate component and generate module similarly you can
3:28:17
and generate module similarly you can
3:28:17
and generate module similarly you can create our
3:28:17
create our
3:28:18
create our library um ng generate library
3:28:21
library um ng generate library
3:28:21
library um ng generate library and then the library name and as we
3:28:23
and then the library name and as we
3:28:23
and then the library name and as we discussed before
3:28:24
discussed before
3:28:24
discussed before uh the bundles that also will be created
3:28:26
uh the bundles that also will be created
3:28:26
uh the bundles that also will be created for you will be the flag bundles for
3:28:28
for you will be the flag bundles for
3:28:28
for you will be the flag bundles for your
3:28:29
your
3:28:29
your each of the bundles esm5 and esm 2015.
3:28:32
each of the bundles esm5 and esm 2015.
3:28:32
each of the bundles esm5 and esm 2015. so if you see your bundle as fe sm5 asm
3:28:36
so if you see your bundle as fe sm5 asm
3:28:36
so if you see your bundle as fe sm5 asm 2015
3:28:37
2015
3:28:37
2015 these are the flat bundles with
3:28:40
these are the flat bundles with
3:28:40
these are the flat bundles with whole code in one file so
3:28:43
whole code in one file so
3:28:43
whole code in one file so that's the another important thing here
3:28:47
that's the another important thing here
3:28:47
that's the another important thing here now um if you remember a bit back i was
3:28:50
now um if you remember a bit back i was
3:28:50
now um if you remember a bit back i was talking about configuring your
3:28:52
talking about configuring your
3:28:52
talking about configuring your ng packager entry file or the
3:28:54
ng packager entry file or the
3:28:54
ng packager entry file or the destination
3:28:55
destination
3:28:55
destination now this is the place where you have
3:28:57
now this is the place where you have
3:28:57
now this is the place where you have actually defined what your entry file
3:28:59
actually defined what your entry file
3:28:59
actually defined what your entry file should be
3:28:59
should be
3:28:59
should be and what is the you know when you
3:29:00
and what is the you know when you
3:29:00
and what is the you know when you produce your and when you build your
3:29:02
produce your and when you build your
3:29:02
produce your and when you build your library what is the destination for that
3:29:04
library what is the destination for that
3:29:04
library what is the destination for that so the entry file is usually um of this
3:29:07
so the entry file is usually um of this
3:29:07
so the entry file is usually um of this name public api dot ts and you can
3:29:09
name public api dot ts and you can
3:29:09
name public api dot ts and you can definitely configure that
3:29:11
definitely configure that
3:29:11
definitely configure that and then you have business folder which
3:29:12
and then you have business folder which
3:29:12
and then you have business folder which would have the library the produced
3:29:14
would have the library the produced
3:29:14
would have the library the produced library for you
3:29:16
library for you
3:29:16
library for you so um that's the first step you can do
3:29:18
so um that's the first step you can do
3:29:18
so um that's the first step you can do and if you look closely into the public
3:29:21
and if you look closely into the public
3:29:21
and if you look closely into the public api.ps file
3:29:22
api.ps file
3:29:22
api.ps file it contains all the information
3:29:25
it contains all the information
3:29:26
it contains all the information of the uh things that you're trying to
3:29:27
of the uh things that you're trying to
3:29:28
of the uh things that you're trying to expose from your library
3:29:29
expose from your library
3:29:29
expose from your library we eat a module be it a component be it
3:29:31
we eat a module be it a component be it
3:29:31
we eat a module be it a component be it a service
3:29:32
a service
3:29:32
a service so this is very important file because
3:29:35
so this is very important file because
3:29:35
so this is very important file because this is kind of the face of your library
3:29:37
this is kind of the face of your library
3:29:37
this is kind of the face of your library this is how you in the library is
3:29:39
this is how you in the library is
3:29:39
this is how you in the library is interacting with the consuming
3:29:40
interacting with the consuming
3:29:40
interacting with the consuming application
3:29:41
application
3:29:41
application so your public api tells the consuming
3:29:43
so your public api tells the consuming
3:29:44
so your public api tells the consuming application that okay this library has
3:29:45
application that okay this library has
3:29:46
application that okay this library has this module
3:29:46
this module
3:29:46
this module uh or this component and you know you
3:29:49
uh or this component and you know you
3:29:49
uh or this component and you know you can just use it
3:29:50
can just use it
3:29:50
can just use it and um you know get the functionality of
3:29:52
and um you know get the functionality of
3:29:52
and um you know get the functionality of this library
3:29:53
this library
3:29:53
this library and the consuming application then um
3:29:56
and the consuming application then um
3:29:56
and the consuming application then um i'm just trying to show you very
3:29:58
i'm just trying to show you very
3:29:58
i'm just trying to show you very uh you know step by step as to
3:30:01
uh you know step by step as to
3:30:01
uh you know step by step as to when we come to the consuming
3:30:03
when we come to the consuming
3:30:03
when we come to the consuming application you can just use the name of
3:30:04
application you can just use the name of
3:30:04
application you can just use the name of your library
3:30:05
your library
3:30:05
your library and you can import whatever you were
3:30:08
and you can import whatever you were
3:30:08
and you can import whatever you were exporting from your public ps file
3:30:10
exporting from your public ps file
3:30:10
exporting from your public ps file and you know then in your consuming
3:30:12
and you know then in your consuming
3:30:12
and you know then in your consuming application you can simply use the
3:30:13
application you can simply use the
3:30:13
application you can simply use the module and you can use the component
3:30:14
module and you can use the component
3:30:14
module and you can use the component which you
3:30:15
which you
3:30:15
which you obviously exported from your public api
3:30:18
obviously exported from your public api
3:30:18
obviously exported from your public api and
3:30:19
and
3:30:19
and this uh you can use the ex es6 import
3:30:21
this uh you can use the ex es6 import
3:30:21
this uh you can use the ex es6 import statement to do that
3:30:24
statement to do that
3:30:24
statement to do that the next step to look at and to
3:30:25
the next step to look at and to
3:30:25
the next step to look at and to understand better
3:30:27
understand better
3:30:27
understand better is the ng packager way of working so
3:30:30
is the ng packager way of working so
3:30:30
is the ng packager way of working so earlier your library had one public api
3:30:32
earlier your library had one public api
3:30:32
earlier your library had one public api ds file which looked something like
3:30:34
ds file which looked something like
3:30:34
ds file which looked something like this you were exporting things from here
3:30:37
this you were exporting things from here
3:30:37
this you were exporting things from here then you had
3:30:38
then you had
3:30:38
then you had all the ts files which are actually your
3:30:41
all the ts files which are actually your
3:30:41
all the ts files which are actually your the logic
3:30:41
the logic
3:30:41
the logic in your library whatever library
3:30:43
in your library whatever library
3:30:43
in your library whatever library functionality you have
3:30:44
functionality you have
3:30:44
functionality you have so those are all the typescript files
3:30:47
so those are all the typescript files
3:30:47
so those are all the typescript files and then you have
3:30:47
and then you have
3:30:48
and then you have this package.json file which is the
3:30:50
this package.json file which is the
3:30:50
this package.json file which is the information about your library
3:30:52
information about your library
3:30:52
information about your library it can contain your the name of your
3:30:53
it can contain your the name of your
3:30:54
it can contain your the name of your library the version and the
3:30:55
library the version and the
3:30:56
library the version and the peer dependencies now peer dependency is
3:30:58
peer dependencies now peer dependency is
3:30:58
peer dependencies now peer dependency is basically tell the consuming application
3:31:00
basically tell the consuming application
3:31:00
basically tell the consuming application that this
3:31:01
that this
3:31:01
that this library is compatible with you know
3:31:03
library is compatible with you know
3:31:03
library is compatible with you know these versions of the
3:31:04
these versions of the
3:31:04
these versions of the dependencies and it works really well if
3:31:07
dependencies and it works really well if
3:31:07
dependencies and it works really well if you know it is
3:31:08
you know it is
3:31:08
you know it is if it is integrated with similar um
3:31:10
if it is integrated with similar um
3:31:10
if it is integrated with similar um versions of the
3:31:11
versions of the
3:31:11
versions of the libraries or the packages then it goes
3:31:14
libraries or the packages then it goes
3:31:14
libraries or the packages then it goes through ng packages
3:31:15
through ng packages
3:31:15
through ng packages and what it converts to is the angular
3:31:18
and what it converts to is the angular
3:31:18
and what it converts to is the angular package format right
3:31:19
package format right
3:31:19
package format right and the different files that it creates
3:31:21
and the different files that it creates
3:31:21
and the different files that it creates is
3:31:22
is
3:31:22
is the dot ps file without the typing files
3:31:25
the dot ps file without the typing files
3:31:25
the dot ps file without the typing files that you need for your library
3:31:27
that you need for your library
3:31:27
that you need for your library then it contains it creates the
3:31:29
then it contains it creates the
3:31:29
then it contains it creates the package.json file which contains all the
3:31:31
package.json file which contains all the
3:31:31
package.json file which contains all the information of your produced library of
3:31:33
information of your produced library of
3:31:33
information of your produced library of your build library
3:31:35
your build library
3:31:35
your build library and then it creates all the different
3:31:37
and then it creates all the different
3:31:37
and then it creates all the different bundles the bundles that we just
3:31:39
bundles the bundles that we just
3:31:39
bundles the bundles that we just discussed the sm5
3:31:40
discussed the sm5
3:31:40
discussed the sm5 es7 2015 and the umd bundles
3:31:45
es7 2015 and the umd bundles
3:31:45
es7 2015 and the umd bundles and like i told you already that
3:31:46
and like i told you already that
3:31:46
and like i told you already that whenever you're trying to create your
3:31:48
whenever you're trying to create your
3:31:48
whenever you're trying to create your library now that
3:31:49
library now that
3:31:49
library now that um the cli has ng packager working under
3:31:52
um the cli has ng packager working under
3:31:52
um the cli has ng packager working under the hood
3:31:52
the hood
3:31:52
the hood you can simply use ng generate library
3:31:55
you can simply use ng generate library
3:31:55
you can simply use ng generate library and the library name
3:31:56
and the library name
3:31:56
and the library name and what it basically does is that it
3:31:57
and what it basically does is that it
3:31:57
and what it basically does is that it runs the ng packager on the files that
3:32:00
runs the ng packager on the files that
3:32:00
runs the ng packager on the files that you have
3:32:00
you have
3:32:00
you have and then um build your library
3:32:04
and then um build your library
3:32:04
and then um build your library i mean this is for generating the
3:32:05
i mean this is for generating the
3:32:05
i mean this is for generating the library obviously and it would create
3:32:07
library obviously and it would create
3:32:07
library obviously and it would create the public apids file with the
3:32:08
the public apids file with the
3:32:08
the public apids file with the configuration
3:32:09
configuration
3:32:09
configuration uh mentioned as entry file with this
3:32:11
uh mentioned as entry file with this
3:32:11
uh mentioned as entry file with this public api ids
3:32:13
public api ids
3:32:13
public api ids and so now you might
3:32:17
and so now you might
3:32:17
and so now you might want to you know understand the basic
3:32:19
want to you know understand the basic
3:32:19
want to you know understand the basic structure whenever you're creating your
3:32:21
structure whenever you're creating your
3:32:21
structure whenever you're creating your library
3:32:21
library
3:32:21
library so first off you don't really need to
3:32:23
so first off you don't really need to
3:32:23
so first off you don't really need to create you know an angular application
3:32:25
create you know an angular application
3:32:25
create you know an angular application the general way we do that the regular
3:32:27
the general way we do that the regular
3:32:27
the general way we do that the regular way we do that so
3:32:28
way we do that so
3:32:28
way we do that so if you say engineering application it
3:32:31
if you say engineering application it
3:32:31
if you say engineering application it just creates the application for you
3:32:32
just creates the application for you
3:32:32
just creates the application for you right
3:32:33
right
3:32:33
right so if you want to just create the
3:32:35
so if you want to just create the
3:32:35
so if you want to just create the workspace the angular workspace but not
3:32:37
workspace the angular workspace but not
3:32:37
workspace the angular workspace but not really have an application because
3:32:38
really have an application because
3:32:38
really have an application because you're what you're trying to do is just
3:32:40
you're what you're trying to do is just
3:32:40
you're what you're trying to do is just to
3:32:40
to
3:32:40
to create a library right so you would just
3:32:43
create a library right so you would just
3:32:43
create a library right so you would just say the
3:32:43
say the
3:32:43
say the engine you the name of your application
3:32:45
engine you the name of your application
3:32:45
engine you the name of your application and then you can just pass the cloud
3:32:47
and then you can just pass the cloud
3:32:47
and then you can just pass the cloud create application equals to false
3:32:49
create application equals to false
3:32:49
create application equals to false this would create the workspace for you
3:32:51
this would create the workspace for you
3:32:51
this would create the workspace for you with almost nothing there related to
3:32:53
with almost nothing there related to
3:32:53
with almost nothing there related to your code
3:32:53
your code
3:32:53
your code and just contain the basic configuration
3:32:56
and just contain the basic configuration
3:32:56
and just contain the basic configuration files
3:32:57
files
3:32:57
files and once you have that done the next
3:32:58
and once you have that done the next
3:32:58
and once you have that done the next step for you it should be to the
3:33:00
step for you it should be to the
3:33:00
step for you it should be to the to create the library right because
3:33:02
to create the library right because
3:33:02
to create the library right because inside
3:33:03
inside
3:33:03
inside workspace currently you don't have
3:33:05
workspace currently you don't have
3:33:05
workspace currently you don't have anything but you want to have a library
3:33:07
anything but you want to have a library
3:33:07
anything but you want to have a library so the next step for you would be to
3:33:08
so the next step for you would be to
3:33:08
so the next step for you would be to create a library using the same command
3:33:10
create a library using the same command
3:33:10
create a library using the same command um
3:33:15
so um the last ngg
3:33:18
so um the last ngg
3:33:18
so um the last ngg uh library name of the library and then
3:33:21
uh library name of the library and then
3:33:21
uh library name of the library and then as you can see it is
3:33:23
as you can see it is
3:33:23
as you can see it is creating inside the project's folder
3:33:25
creating inside the project's folder
3:33:25
creating inside the project's folder with the name of the library and then
3:33:26
with the name of the library and then
3:33:26
with the name of the library and then the different files inside the library
3:33:29
the different files inside the library
3:33:29
the different files inside the library and once that is done you would see
3:33:31
and once that is done you would see
3:33:31
and once that is done you would see something like this
3:33:32
something like this
3:33:32
something like this so earlier before you know before you
3:33:34
so earlier before you know before you
3:33:34
so earlier before you know before you activated a library there was just a
3:33:36
activated a library there was just a
3:33:36
activated a library there was just a workspace with no modules
3:33:38
workspace with no modules
3:33:38
workspace with no modules and all your files like git ignore
3:33:40
and all your files like git ignore
3:33:40
and all your files like git ignore angularjs and packet.json without
3:33:42
angularjs and packet.json without
3:33:42
angularjs and packet.json without anything related to the project
3:33:43
anything related to the project
3:33:43
anything related to the project but when you created a library um click
3:33:46
but when you created a library um click
3:33:46
but when you created a library um click the pro
3:33:47
the pro
3:33:47
the pro folder for you library for you with the
3:33:50
folder for you library for you with the
3:33:50
folder for you library for you with the name that you decided for your library
3:33:52
name that you decided for your library
3:33:52
name that you decided for your library and as you can see there's one more
3:33:54
and as you can see there's one more
3:33:54
and as you can see there's one more packet.this in here this is not the root
3:33:56
packet.this in here this is not the root
3:33:56
packet.this in here this is not the root package
3:33:57
package
3:33:57
package season that is different and then
3:33:58
season that is different and then
3:33:58
season that is different and then there's other packet donation which is
3:34:00
there's other packet donation which is
3:34:00
there's other packet donation which is specific to your library which contains
3:34:02
specific to your library which contains
3:34:02
specific to your library which contains your library information
3:34:04
your library information
3:34:04
your library information like we discussed it would have the name
3:34:05
like we discussed it would have the name
3:34:05
like we discussed it would have the name the version and it would have the pure
3:34:07
the version and it would have the pure
3:34:07
the version and it would have the pure dependencies
3:34:08
dependencies
3:34:08
dependencies and similar um such um you know
3:34:12
and similar um such um you know
3:34:12
and similar um such um you know fields so the important thing here to
3:34:16
fields so the important thing here to
3:34:16
fields so the important thing here to notice
3:34:16
notice
3:34:16
notice is that inside the root package.this
3:34:19
is that inside the root package.this
3:34:19
is that inside the root package.this not in the library pattern donation but
3:34:21
not in the library pattern donation but
3:34:21
not in the library pattern donation but in the root packet audition
3:34:23
in the root packet audition
3:34:23
in the root packet audition you need to create um i mean you need to
3:34:25
you need to create um i mean you need to
3:34:25
you need to create um i mean you need to finally build your library right for
3:34:27
finally build your library right for
3:34:27
finally build your library right for example at this step
3:34:28
example at this step
3:34:28
example at this step you have created your library and you
3:34:31
you have created your library and you
3:34:31
you have created your library and you have all the code written for whatever
3:34:32
have all the code written for whatever
3:34:32
have all the code written for whatever functionality or whatever feature you
3:34:35
functionality or whatever feature you
3:34:35
functionality or whatever feature you are wanting to have in your library
3:34:37
are wanting to have in your library
3:34:37
are wanting to have in your library let's say let's keep it simple for this
3:34:39
let's say let's keep it simple for this
3:34:39
let's say let's keep it simple for this illustration
3:34:39
illustration
3:34:39
illustration and um let's say our the library feature
3:34:42
and um let's say our the library feature
3:34:42
and um let's say our the library feature that we have is this that
3:34:43
that we have is this that
3:34:44
that we have is this that it should say on the browser that
3:34:45
it should say on the browser that
3:34:45
it should say on the browser that military works for example right
3:34:47
military works for example right
3:34:47
military works for example right so in that case the next step for you
3:34:49
so in that case the next step for you
3:34:49
so in that case the next step for you should be to be able to build your
3:34:51
should be to be able to build your
3:34:51
should be to be able to build your library because you have the logic
3:34:52
library because you have the logic
3:34:52
library because you have the logic complete for that
3:34:53
complete for that
3:34:53
complete for that so to build that you have this script i
3:34:55
so to build that you have this script i
3:34:55
so to build that you have this script i mean you can create any script and it
3:34:57
mean you can create any script and it
3:34:57
mean you can create any script and it should say ng build
3:34:58
should say ng build
3:34:58
should say ng build and then the name of your library in my
3:35:00
and then the name of your library in my
3:35:00
and then the name of your library in my case the name of my library is technique
3:35:02
case the name of my library is technique
3:35:02
case the name of my library is technique live as you see here
3:35:04
live as you see here
3:35:04
live as you see here so i just use ng build and technic
3:35:08
so i just use ng build and technic
3:35:08
so i just use ng build and technic and i would do that inside the
3:35:10
and i would do that inside the
3:35:10
and i would do that inside the rootpacket.json because you know i want
3:35:12
rootpacket.json because you know i want
3:35:12
rootpacket.json because you know i want to create a disk folder for my library
3:35:14
to create a disk folder for my library
3:35:14
to create a disk folder for my library uh which will contain the produce
3:35:16
uh which will contain the produce
3:35:16
uh which will contain the produce library and if you see here when what i
3:35:19
library and if you see here when what i
3:35:19
library and if you see here when what i do here is i'm trying to run the build
3:35:21
do here is i'm trying to run the build
3:35:21
do here is i'm trying to run the build of my library
3:35:22
of my library
3:35:22
of my library and once i do that there is some quite
3:35:24
and once i do that there is some quite
3:35:24
and once i do that there is some quite important information that we should
3:35:26
important information that we should
3:35:26
important information that we should look at
3:35:27
look at
3:35:27
look at the first says that um we should not
3:35:28
the first says that um we should not
3:35:28
the first says that um we should not publish iv libraries to npm repositories
3:35:31
publish iv libraries to npm repositories
3:35:31
publish iv libraries to npm repositories and you can read more about that here
3:35:33
and you can read more about that here
3:35:33
and you can read more about that here then as you can see the first thing that
3:35:35
then as you can see the first thing that
3:35:35
then as you can see the first thing that it refers to is the entry point of the
3:35:38
it refers to is the entry point of the
3:35:38
it refers to is the entry point of the library which is the public api ds file
3:35:42
library which is the public api ds file
3:35:42
library which is the public api ds file then it goes to the compilation step and
3:35:45
then it goes to the compilation step and
3:35:45
then it goes to the compilation step and it
3:35:45
it
3:35:45
it goes to the different uh you know the
3:35:47
goes to the different uh you know the
3:35:47
goes to the different uh you know the different dependencies which are there
3:35:49
different dependencies which are there
3:35:49
different dependencies which are there finally it would start bundling as you
3:35:51
finally it would start bundling as you
3:35:51
finally it would start bundling as you can see here it's creating the
3:35:53
can see here it's creating the
3:35:53
can see here it's creating the 2015 bundle the umd bundle and it's
3:35:55
2015 bundle the umd bundle and it's
3:35:55
2015 bundle the umd bundle and it's finally writing the metadata file that
3:35:57
finally writing the metadata file that
3:35:57
finally writing the metadata file that is required for a library
3:35:59
is required for a library
3:35:59
is required for a library and finally it shows you that you know
3:36:02
and finally it shows you that you know
3:36:02
and finally it shows you that you know earlier the library was in project
3:36:04
earlier the library was in project
3:36:04
earlier the library was in project technique lib and it has finally built
3:36:07
technique lib and it has finally built
3:36:07
technique lib and it has finally built to a package inside the disk folder
3:36:09
to a package inside the disk folder
3:36:09
to a package inside the disk folder and your library uh is produced inside
3:36:12
and your library uh is produced inside
3:36:12
and your library uh is produced inside that
3:36:12
that
3:36:12
that so this is how it looks now you have
3:36:15
so this is how it looks now you have
3:36:15
so this is how it looks now you have this folder inside which you have your
3:36:17
this folder inside which you have your
3:36:17
this folder inside which you have your library generated
3:36:18
library generated
3:36:18
library generated and you can see inside the bundles
3:36:20
and you can see inside the bundles
3:36:20
and you can see inside the bundles folder you would have all the umd
3:36:21
folder you would have all the umd
3:36:21
folder you would have all the umd bundles
3:36:22
bundles
3:36:22
bundles then you have the 2015 bundle but
3:36:25
then you have the 2015 bundle but
3:36:25
then you have the 2015 bundle but like like we talked before there's no
3:36:27
like like we talked before there's no
3:36:27
like like we talked before there's no esp
3:36:28
esp
3:36:28
esp 5 bundle why is that so because um this
3:36:31
5 bundle why is that so because um this
3:36:31
5 bundle why is that so because um this illustration is of
3:36:32
illustration is of
3:36:32
illustration is of angular 10 right i'm using angular 10
3:36:34
angular 10 right i'm using angular 10
3:36:34
angular 10 right i'm using angular 10 version and we don't have angular i mean
3:36:37
version and we don't have angular i mean
3:36:37
version and we don't have angular i mean esm
3:36:37
esm
3:36:37
esm 5 here because download like i said
3:36:40
5 here because download like i said
3:36:40
5 here because download like i said downloading
3:36:41
downloading
3:36:41
downloading leveling to es5 is would be done at the
3:36:43
leveling to es5 is would be done at the
3:36:43
leveling to es5 is would be done at the end of the build process
3:36:45
end of the build process
3:36:45
end of the build process so either you down level your project
3:36:46
so either you down level your project
3:36:46
so either you down level your project es5 and then only
3:36:49
es5 and then only
3:36:49
es5 and then only you can see the other bundles
3:36:52
you can see the other bundles
3:36:52
you can see the other bundles then um you might now be confused that
3:36:55
then um you might now be confused that
3:36:55
then um you might now be confused that there are so many pattern
3:36:57
there are so many pattern
3:36:57
there are so many pattern dot json files there was one at the root
3:36:59
dot json files there was one at the root
3:36:59
dot json files there was one at the root folder there was one at the library
3:37:02
folder there was one at the library
3:37:02
folder there was one at the library level and then there's one at the this
3:37:04
level and then there's one at the this
3:37:04
level and then there's one at the this level which is the final
3:37:05
level which is the final
3:37:05
level which is the final third package.json file now it's very
3:37:08
third package.json file now it's very
3:37:08
third package.json file now it's very important to understand that first
3:37:10
important to understand that first
3:37:10
important to understand that first packet.json inside your application was
3:37:11
packet.json inside your application was
3:37:12
packet.json inside your application was the root packet.json
3:37:13
the root packet.json
3:37:13
the root packet.json the second was the library specific
3:37:15
the second was the library specific
3:37:15
the second was the library specific which contains the library information
3:37:18
which contains the library information
3:37:18
which contains the library information and the third packet.json is actually
3:37:20
and the third packet.json is actually
3:37:20
and the third packet.json is actually for your produced library which contains
3:37:22
for your produced library which contains
3:37:22
for your produced library which contains all the information of your
3:37:24
all the information of your
3:37:24
all the information of your uh finally produced library which you
3:37:25
uh finally produced library which you
3:37:25
uh finally produced library which you which you'll be publishing to npm or
3:37:27
which you'll be publishing to npm or
3:37:27
which you'll be publishing to npm or using it for your um
3:37:29
using it for your um
3:37:29
using it for your um as a package for your other applications
3:37:32
as a package for your other applications
3:37:32
as a package for your other applications locally
3:37:33
locally
3:37:33
locally so uh when you understand that the final
3:37:35
so uh when you understand that the final
3:37:35
so uh when you understand that the final step for you should be
3:37:37
step for you should be
3:37:37
step for you should be to pack your libraries because you have
3:37:38
to pack your libraries because you have
3:37:38
to pack your libraries because you have generated a library you've written the
3:37:40
generated a library you've written the
3:37:40
generated a library you've written the code for
3:37:41
code for
3:37:41
code for uh required for you know whatever
3:37:42
uh required for you know whatever
3:37:42
uh required for you know whatever feature you want in your library
3:37:44
feature you want in your library
3:37:44
feature you want in your library the next step was to build your library
3:37:46
the next step was to build your library
3:37:46
the next step was to build your library we have built our library
3:37:48
we have built our library
3:37:48
we have built our library and finally we want to pack it and be
3:37:49
and finally we want to pack it and be
3:37:50
and finally we want to pack it and be able to use it inside our other projects
3:37:51
able to use it inside our other projects
3:37:51
able to use it inside our other projects or maybe you know just give it
3:37:53
or maybe you know just give it
3:37:53
or maybe you know just give it to um and just publish it to npm so that
3:37:56
to um and just publish it to npm so that
3:37:56
to um and just publish it to npm so that the whole world can benefit from what
3:37:57
the whole world can benefit from what
3:37:57
the whole world can benefit from what you've done
3:37:58
you've done
3:37:58
you've done so the next step for you should be to
3:38:01
so the next step for you should be to
3:38:01
so the next step for you should be to pack your library
3:38:02
pack your library
3:38:02
pack your library and now back in your library should be
3:38:04
and now back in your library should be
3:38:04
and now back in your library should be done from where you have built it which
3:38:05
done from where you have built it which
3:38:05
done from where you have built it which is inside the
3:38:06
is inside the
3:38:06
is inside the list folder so you go to the disk folder
3:38:09
list folder so you go to the disk folder
3:38:09
list folder so you go to the disk folder and you can you can just write a script
3:38:10
and you can you can just write a script
3:38:10
and you can you can just write a script for that
3:38:11
for that
3:38:11
for that so you go to the build folder inside the
3:38:13
so you go to the build folder inside the
3:38:14
so you go to the build folder inside the library and then you finally run the
3:38:15
library and then you finally run the
3:38:15
library and then you finally run the command
3:38:16
command
3:38:16
command npm path now if you see here
3:38:19
npm path now if you see here
3:38:19
npm path now if you see here what this would do is that it would take
3:38:21
what this would do is that it would take
3:38:21
what this would do is that it would take all the files which are inside the disk
3:38:23
all the files which are inside the disk
3:38:23
all the files which are inside the disk folder
3:38:23
folder
3:38:24
folder and it would create a very small bundle
3:38:25
and it would create a very small bundle
3:38:25
and it would create a very small bundle of that and as you can see
3:38:27
of that and as you can see
3:38:27
of that and as you can see in the end there's one pgz file which is
3:38:30
in the end there's one pgz file which is
3:38:30
in the end there's one pgz file which is created
3:38:31
created
3:38:31
created and this is your library package that
3:38:33
and this is your library package that
3:38:33
and this is your library package that you have created this contains the logic
3:38:35
you have created this contains the logic
3:38:35
you have created this contains the logic with all the typescript files with the
3:38:37
with all the typescript files with the
3:38:37
with all the typescript files with the public api file which is exposing your
3:38:38
public api file which is exposing your
3:38:38
public api file which is exposing your component
3:38:39
component
3:38:39
component or module and if you notice here the
3:38:42
or module and if you notice here the
3:38:42
or module and if you notice here the name is actually taken from the
3:38:43
name is actually taken from the
3:38:43
name is actually taken from the package.json of your
3:38:45
package.json of your
3:38:45
package.json of your library from your library level the
3:38:47
library from your library level the
3:38:47
library from your library level the first is the name of the library
3:38:49
first is the name of the library
3:38:49
first is the name of the library which you have specified as the name
3:38:51
which you have specified as the name
3:38:51
which you have specified as the name we'll look at that then the second bit
3:38:53
we'll look at that then the second bit
3:38:53
we'll look at that then the second bit is the version of the library
3:38:55
is the version of the library
3:38:55
is the version of the library now it follows semantic version in major
3:38:57
now it follows semantic version in major
3:38:57
now it follows semantic version in major minor paths so
3:38:58
minor paths so
3:38:58
minor paths so you can increase it as for that if
3:39:00
you can increase it as for that if
3:39:00
you can increase it as for that if you're making any change which is
3:39:01
you're making any change which is
3:39:01
you're making any change which is not breaking anything which is just a
3:39:03
not breaking anything which is just a
3:39:03
not breaking anything which is just a minor you know fix you can just increase
3:39:05
minor you know fix you can just increase
3:39:05
minor you know fix you can just increase the patch version 0 0 2
3:39:06
the patch version 0 0 2
3:39:06
the patch version 0 0 2 and so on and finally the extension dot
3:39:09
and so on and finally the extension dot
3:39:09
and so on and finally the extension dot pg z
3:39:10
pg z
3:39:10
pg z so this is the package that you have
3:39:12
so this is the package that you have
3:39:12
so this is the package that you have created for your library
3:39:13
created for your library
3:39:13
created for your library and now this particular package is to be
3:39:16
and now this particular package is to be
3:39:16
and now this particular package is to be passed on to you know wherever you want
3:39:18
passed on to you know wherever you want
3:39:18
passed on to you know wherever you want to use it for example a different
3:39:19
to use it for example a different
3:39:19
to use it for example a different application
3:39:20
application
3:39:20
application or maybe the app in the similar uh the
3:39:23
or maybe the app in the similar uh the
3:39:23
or maybe the app in the similar uh the same application with these
3:39:24
same application with these
3:39:24
same application with these and um the new application that you will
3:39:26
and um the new application that you will
3:39:26
and um the new application that you will create here which will be the consuming
3:39:28
create here which will be the consuming
3:39:28
create here which will be the consuming application
3:39:29
application
3:39:29
application so um now let's have a look at you know
3:39:32
so um now let's have a look at you know
3:39:32
so um now let's have a look at you know different ways you can use our library
3:39:33
different ways you can use our library
3:39:33
different ways you can use our library the library that we just created inside
3:39:35
the library that we just created inside
3:39:35
the library that we just created inside an application
3:39:37
an application
3:39:37
an application and there are three ways of doing it
3:39:39
and there are three ways of doing it
3:39:39
and there are three ways of doing it either you can just do npm install
3:39:41
either you can just do npm install
3:39:41
either you can just do npm install and give the path to your library
3:39:43
and give the path to your library
3:39:43
and give the path to your library package that you just created the
3:39:45
package that you just created the
3:39:45
package that you just created the tgz file or you can simply link to that
3:39:48
tgz file or you can simply link to that
3:39:48
tgz file or you can simply link to that you know not have a reference of it
3:39:50
you know not have a reference of it
3:39:50
you know not have a reference of it here but you know just just uh link to
3:39:52
here but you know just just uh link to
3:39:52
here but you know just just uh link to the library
3:39:53
the library
3:39:53
the library that you're using and the final thing
3:39:55
that you're using and the final thing
3:39:55
that you're using and the final thing that you can use is npm pack
3:39:56
that you can use is npm pack
3:39:56
that you can use is npm pack so you just pack your library and maybe
3:39:58
so you just pack your library and maybe
3:39:58
so you just pack your library and maybe publish it to npm and install it from
3:40:00
publish it to npm and install it from
3:40:00
publish it to npm and install it from there
3:40:02
there
3:40:02
there so um now i have created one project
3:40:04
so um now i have created one project
3:40:04
so um now i have created one project inside the same workspace
3:40:06
inside the same workspace
3:40:06
inside the same workspace and let's call it consume library
3:40:08
and let's call it consume library
3:40:08
and let's call it consume library because you want to consume the library
3:40:09
because you want to consume the library
3:40:09
because you want to consume the library that you just created
3:40:11
that you just created
3:40:11
that you just created and you would see that when you do ng
3:40:13
and you would see that when you do ng
3:40:13
and you would see that when you do ng generate application and whatever name
3:40:15
generate application and whatever name
3:40:15
generate application and whatever name you give to your application
3:40:17
you give to your application
3:40:17
you give to your application it would go to the same folder which is
3:40:19
it would go to the same folder which is
3:40:19
it would go to the same folder which is the project folder it has one library
3:40:21
the project folder it has one library
3:40:21
the project folder it has one library already in there
3:40:22
already in there
3:40:22
already in there but now it creates another folder for
3:40:23
but now it creates another folder for
3:40:23
but now it creates another folder for you which is your app folder it's not a
3:40:25
you which is your app folder it's not a
3:40:26
you which is your app folder it's not a library packet
3:40:26
library packet
3:40:26
library packet it's not a library uh folder but our
3:40:28
it's not a library uh folder but our
3:40:28
it's not a library uh folder but our application folder because now you're
3:40:30
application folder because now you're
3:40:30
application folder because now you're trying to create an application
3:40:32
trying to create an application
3:40:32
trying to create an application so inside that now you would want to
3:40:34
so inside that now you would want to
3:40:34
so inside that now you would want to install your library right and for that
3:40:36
install your library right and for that
3:40:36
install your library right and for that you will have to use the whole path to
3:40:38
you will have to use the whole path to
3:40:38
you will have to use the whole path to your library which is inside the disk
3:40:40
your library which is inside the disk
3:40:40
your library which is inside the disk folder
3:40:40
folder
3:40:40
folder and the name of your package whatever is
3:40:43
and the name of your package whatever is
3:40:43
and the name of your package whatever is created
3:40:44
created
3:40:44
created so as you can see here i'm doing npm
3:40:46
so as you can see here i'm doing npm
3:40:46
so as you can see here i'm doing npm install and
3:40:47
install and
3:40:47
install and then the path to my technique 0 0 1 pg z
3:40:50
then the path to my technique 0 0 1 pg z
3:40:50
then the path to my technique 0 0 1 pg z file the package
3:40:52
file the package
3:40:52
file the package when it adds that you will get to see
3:40:55
when it adds that you will get to see
3:40:55
when it adds that you will get to see that um inside the packet.js right
3:40:58
that um inside the packet.js right
3:40:58
that um inside the packet.js right you'll get to see something like this
3:40:59
you'll get to see something like this
3:40:59
you'll get to see something like this technique live
3:41:00
technique live
3:41:00
technique live and then since you're referring to it
3:41:02
and then since you're referring to it
3:41:02
and then since you're referring to it locally you would see this file
3:41:04
locally you would see this file
3:41:04
locally you would see this file parameter in the beginning
3:41:05
parameter in the beginning
3:41:05
parameter in the beginning before the path of your library so this
3:41:07
before the path of your library so this
3:41:08
before the path of your library so this basically refers to that it is um
3:41:09
basically refers to that it is um
3:41:09
basically refers to that it is um you know it is extracted or it is um
3:41:12
you know it is extracted or it is um
3:41:12
you know it is extracted or it is um installed as a file but not from
3:41:14
installed as a file but not from
3:41:14
installed as a file but not from web or anywhere or maybe from npm right
3:41:16
web or anywhere or maybe from npm right
3:41:16
web or anywhere or maybe from npm right so
3:41:17
so
3:41:17
so once you have this available in your
3:41:18
once you have this available in your
3:41:18
once you have this available in your package.json this means that you have
3:41:20
package.json this means that you have
3:41:20
package.json this means that you have installed your library
3:41:22
installed your library
3:41:22
installed your library from or locally somewhere your uh
3:41:25
from or locally somewhere your uh
3:41:25
from or locally somewhere your uh application
3:41:26
application
3:41:26
application now the next thing for you to check
3:41:29
now the next thing for you to check
3:41:29
now the next thing for you to check after installing your library
3:41:30
after installing your library
3:41:30
after installing your library to finally use it
3:41:34
you really want to check if your library
3:41:35
you really want to check if your library
3:41:36
you really want to check if your library is installed or not
3:41:37
is installed or not
3:41:37
is installed or not if the typing property the morning of
3:41:40
if the typing property the morning of
3:41:40
if the typing property the morning of installing
3:41:41
installing
3:41:41
installing typing separately it will because we
3:41:43
typing separately it will because we
3:41:44
typing separately it will because we have used angular package format and all
3:41:46
have used angular package format and all
3:41:46
have used angular package format and all the typing definitely being taken care
3:41:47
the typing definitely being taken care
3:41:47
the typing definitely being taken care of
3:41:48
of
3:41:48
of so you go to your app module you simply
3:41:51
so you go to your app module you simply
3:41:51
so you go to your app module you simply use what
3:41:52
use what
3:41:52
use what empty girl bases from and then the name
3:41:54
empty girl bases from and then the name
3:41:54
empty girl bases from and then the name of your library
3:41:55
of your library
3:41:56
of your library and then you check when you type some of
3:41:57
and then you check when you type some of
3:41:57
and then you check when you type some of the component name from your library or
3:42:00
the component name from your library or
3:42:00
the component name from your library or the module name does it give you the
3:42:01
the module name does it give you the
3:42:01
the module name does it give you the selections there
3:42:02
selections there
3:42:02
selections there and i mean obviously if you have the um
3:42:04
and i mean obviously if you have the um
3:42:04
and i mean obviously if you have the um ide for
3:42:05
ide for
3:42:05
ide for id extension for you so as you can see
3:42:08
id extension for you so as you can see
3:42:08
id extension for you so as you can see here i have the different
3:42:09
here i have the different
3:42:09
here i have the different things that i exported from my public
3:42:11
things that i exported from my public
3:42:11
things that i exported from my public api ds file which is the
3:42:12
api ds file which is the
3:42:12
api ds file which is the technique lib component the module and
3:42:15
technique lib component the module and
3:42:15
technique lib component the module and the service so i can import any of those
3:42:17
the service so i can import any of those
3:42:17
the service so i can import any of those here
3:42:18
here
3:42:18
here and when i do that the next step for me
3:42:20
and when i do that the next step for me
3:42:20
and when i do that the next step for me is to check i mean
3:42:21
is to check i mean
3:42:21
is to check i mean to add it to the import side first of
3:42:23
to add it to the import side first of
3:42:23
to add it to the import side first of all so as you can see here in the app
3:42:25
all so as you can see here in the app
3:42:25
all so as you can see here in the app module.ts
3:42:26
module.ts
3:42:26
module.ts i have it imported uh from my library
3:42:29
i have it imported uh from my library
3:42:29
i have it imported uh from my library then i have added it to the imports
3:42:31
then i have added it to the imports
3:42:31
then i have added it to the imports areas technique lib module
3:42:33
areas technique lib module
3:42:33
areas technique lib module once i have done that i can i should be
3:42:35
once i have done that i can i should be
3:42:35
once i have done that i can i should be able to use it inside the html c and
3:42:38
able to use it inside the html c and
3:42:38
able to use it inside the html c and see it on the browser right so on the
3:42:41
see it on the browser right so on the
3:42:41
see it on the browser right so on the right
3:42:43
right
3:42:43
right component of html and i'm using the
3:42:45
component of html and i'm using the
3:42:45
component of html and i'm using the selector
3:42:46
selector
3:42:46
selector now to make sure um remember the select
3:42:49
now to make sure um remember the select
3:42:49
now to make sure um remember the select go back to the library folder and check
3:42:53
for the component that you're trying to
3:42:55
for the component that you're trying to
3:42:55
for the component that you're trying to use so in my case it's live technique
3:42:57
use so in my case it's live technique
3:42:57
use so in my case it's live technique name now if i run my application
3:42:59
name now if i run my application
3:42:59
name now if i run my application i should be able to see the library
3:43:00
i should be able to see the library
3:43:00
i should be able to see the library right so this is my application running
3:43:02
right so this is my application running
3:43:02
right so this is my application running here
3:43:03
here
3:43:03
here there's no code in the app
3:43:06
there's no code in the app
3:43:06
there's no code in the app and i as you can see in the previous
3:43:08
and i as you can see in the previous
3:43:08
and i as you can see in the previous slide i removed all the html from the
3:43:10
slide i removed all the html from the
3:43:10
slide i removed all the html from the app component
3:43:12
app component
3:43:12
app component and just referring to the um the
3:43:15
and just referring to the um the
3:43:15
and just referring to the um the selector of the library and it just
3:43:18
selector of the library and it just
3:43:18
selector of the library and it just works right
3:43:20
works right
3:43:20
works right yeah so coming to the next part which is
3:43:23
yeah so coming to the next part which is
3:43:23
yeah so coming to the next part which is quite an important part when you're
3:43:24
quite an important part when you're
3:43:24
quite an important part when you're building your library
3:43:25
building your library
3:43:25
building your library and creating your library that is about
3:43:28
and creating your library that is about
3:43:28
and creating your library that is about publishing it to npm because
3:43:29
publishing it to npm because
3:43:29
publishing it to npm because when you build something cool why not
3:43:31
when you build something cool why not
3:43:31
when you build something cool why not share it with the world right
3:43:33
share it with the world right
3:43:33
share it with the world right okay so when you're trying to publish
3:43:35
okay so when you're trying to publish
3:43:35
okay so when you're trying to publish your library the first step for you is
3:43:37
your library the first step for you is
3:43:37
your library the first step for you is to log into npm
3:43:38
to log into npm
3:43:38
to log into npm first of all when you have done that the
3:43:41
first of all when you have done that the
3:43:41
first of all when you have done that the second thing that
3:43:42
second thing that
3:43:42
second thing that you should check is what is the name of
3:43:44
you should check is what is the name of
3:43:44
you should check is what is the name of your library what is the version of your
3:43:46
your library what is the version of your
3:43:46
your library what is the version of your library
3:43:47
library
3:43:47
library right so um if you want to read more
3:43:49
right so um if you want to read more
3:43:49
right so um if you want to read more about semantic versioning and what is
3:43:51
about semantic versioning and what is
3:43:51
about semantic versioning and what is the exact pattern followed when
3:43:53
the exact pattern followed when
3:43:53
the exact pattern followed when versioning your libraries
3:43:54
versioning your libraries
3:43:54
versioning your libraries you should you know just go to
3:43:55
you should you know just go to
3:43:55
you should you know just go to assembly.org and read more about that
3:43:59
assembly.org and read more about that
3:43:59
assembly.org and read more about that and once you have verified the name and
3:44:00
and once you have verified the name and
3:44:00
and once you have verified the name and version of your library
3:44:02
version of your library
3:44:02
version of your library you can simply publish it with the
3:44:04
you can simply publish it with the
3:44:04
you can simply publish it with the access flag as public
3:44:05
access flag as public
3:44:05
access flag as public because you want the whole world to use
3:44:07
because you want the whole world to use
3:44:07
because you want the whole world to use it
3:44:08
it
3:44:08
it don't we so first of all you logged in
3:44:11
don't we so first of all you logged in
3:44:12
don't we so first of all you logged in to npm with your username and password
3:44:14
to npm with your username and password
3:44:14
to npm with your username and password second as in the first screenshot that
3:44:16
second as in the first screenshot that
3:44:16
second as in the first screenshot that you see here
3:44:16
you see here
3:44:16
you see here i'm giving the name of my library as
3:44:19
i'm giving the name of my library as
3:44:19
i'm giving the name of my library as technique name
3:44:20
technique name
3:44:20
technique name then i have the version defined there
3:44:21
then i have the version defined there
3:44:22
then i have the version defined there zero zero one since uh you know this is
3:44:23
zero zero one since uh you know this is
3:44:23
zero zero one since uh you know this is the first time i'm creating the library
3:44:25
the first time i'm creating the library
3:44:25
the first time i'm creating the library and there's no fixes or no changes
3:44:27
and there's no fixes or no changes
3:44:27
and there's no fixes or no changes and um this is the first time i'm
3:44:29
and um this is the first time i'm
3:44:29
and um this is the first time i'm publishing it so the third thing that
3:44:31
publishing it so the third thing that
3:44:31
publishing it so the third thing that you see here is peer dependencies which
3:44:33
you see here is peer dependencies which
3:44:33
you see here is peer dependencies which are all the dev dependencies required
3:44:35
are all the dev dependencies required
3:44:35
are all the dev dependencies required compatible uh with your library and
3:44:39
compatible uh with your library and
3:44:39
compatible uh with your library and if you uh you know try to publish this
3:44:41
if you uh you know try to publish this
3:44:41
if you uh you know try to publish this one and let's say there already exists a
3:44:43
one and let's say there already exists a
3:44:43
one and let's say there already exists a package
3:44:44
package
3:44:44
package with the name technique hyphen lib what
3:44:46
with the name technique hyphen lib what
3:44:46
with the name technique hyphen lib what would you do
3:44:48
would you do
3:44:48
would you do it is already existing right so the best
3:44:50
it is already existing right so the best
3:44:50
it is already existing right so the best way to handle such ways is to you know
3:44:52
way to handle such ways is to you know
3:44:52
way to handle such ways is to you know do it inside your scope now your npm
3:44:55
do it inside your scope now your npm
3:44:55
do it inside your scope now your npm username is your scope right so at the
3:44:57
username is your scope right so at the
3:44:57
username is your scope right so at the rate initial google on npm is my score
3:44:59
rate initial google on npm is my score
3:44:59
rate initial google on npm is my score whatever i install whatever i publish
3:45:01
whatever i install whatever i publish
3:45:02
whatever i install whatever i publish inside that
3:45:03
inside that
3:45:03
inside that should be my own file even if you know
3:45:05
should be my own file even if you know
3:45:05
should be my own file even if you know libraries with same name
3:45:07
libraries with same name
3:45:07
libraries with same name exist anywhere else it is under my scope
3:45:09
exist anywhere else it is under my scope
3:45:09
exist anywhere else it is under my scope so i can see it
3:45:10
so i can see it
3:45:10
so i can see it at the rate initial slash um you know
3:45:12
at the rate initial slash um you know
3:45:12
at the rate initial slash um you know whatever uh library name that i have
3:45:15
whatever uh library name that i have
3:45:15
whatever uh library name that i have in this case technique i live and this
3:45:17
in this case technique i live and this
3:45:17
in this case technique i live and this should totally work because now my
3:45:19
should totally work because now my
3:45:19
should totally work because now my packet dot i mean the package name is
3:45:21
packet dot i mean the package name is
3:45:21
packet dot i mean the package name is not just technically
3:45:22
not just technically
3:45:22
not just technically but at the rate issue world slash
3:45:24
but at the rate issue world slash
3:45:24
but at the rate issue world slash technique
3:45:25
technique
3:45:25
technique and then the same other fields like
3:45:27
and then the same other fields like
3:45:27
and then the same other fields like version and peer dependencies
3:45:29
version and peer dependencies
3:45:30
version and peer dependencies once you have the version and name
3:45:32
once you have the version and name
3:45:32
once you have the version and name sorted you can finally go and publish
3:45:34
sorted you can finally go and publish
3:45:34
sorted you can finally go and publish your library using the simple command
3:45:36
your library using the simple command
3:45:36
your library using the simple command npm publish
3:45:37
npm publish
3:45:37
npm publish and the access as public so once you've
3:45:39
and the access as public so once you've
3:45:40
and the access as public so once you've done that
3:45:40
done that
3:45:40
done that you should be able to see your library
3:45:42
you should be able to see your library
3:45:42
you should be able to see your library on npn
3:45:43
on npn
3:45:43
on npn and this is what something it would look
3:45:46
and this is what something it would look
3:45:46
and this is what something it would look like if you keep it and the choice is
3:45:48
like if you keep it and the choice is
3:45:48
like if you keep it and the choice is totally yours if you want to keep it
3:45:49
totally yours if you want to keep it
3:45:49
totally yours if you want to keep it public or private
3:45:52
public or private
3:45:52
public or private and yeah this is kind of done right this
3:45:55
and yeah this is kind of done right this
3:45:55
and yeah this is kind of done right this is how your library
3:45:56
is how your library
3:45:56
is how your library is created and this is how you can build
3:45:59
is created and this is how you can build
3:45:59
is created and this is how you can build it use it locally or
3:46:00
it use it locally or
3:46:00
it use it locally or just publish it to npm and then you know
3:46:02
just publish it to npm and then you know
3:46:02
just publish it to npm and then you know install it in any different project that
3:46:04
install it in any different project that
3:46:04
install it in any different project that you want to
3:46:05
you want to
3:46:05
you want to but it should be an angular project
3:46:07
but it should be an angular project
3:46:07
but it should be an angular project since it's an angular library
3:46:09
since it's an angular library
3:46:09
since it's an angular library and yes so i've shared this in the in
3:46:12
and yes so i've shared this in the in
3:46:12
and yes so i've shared this in the in two different repositories the one is
3:46:14
two different repositories the one is
3:46:14
two different repositories the one is for creating a library
3:46:16
for creating a library
3:46:16
for creating a library now this tells you all the different
3:46:17
now this tells you all the different
3:46:17
now this tells you all the different ways of you know what is the pattern to
3:46:19
ways of you know what is the pattern to
3:46:19
ways of you know what is the pattern to follow
3:46:20
follow
3:46:20
follow and how you can you know create your all
3:46:23
and how you can you know create your all
3:46:23
and how you can you know create your all the different files that's in line
3:46:24
the different files that's in line
3:46:24
the different files that's in line though they already will be if you're
3:46:26
though they already will be if you're
3:46:26
though they already will be if you're using the cli and ng packager would do
3:46:28
using the cli and ng packager would do
3:46:28
using the cli and ng packager would do that for you
3:46:29
that for you
3:46:29
that for you but you can take a reference from that
3:46:31
but you can take a reference from that
3:46:31
but you can take a reference from that and if you want to then consume the same
3:46:33
and if you want to then consume the same
3:46:33
and if you want to then consume the same library
3:46:33
library
3:46:33
library either locally or from npm then you
3:46:35
either locally or from npm then you
3:46:36
either locally or from npm then you could you could go to the second repo
3:46:37
could you could go to the second repo
3:46:37
could you could go to the second repo that i shared here
3:46:38
that i shared here
3:46:38
that i shared here which is for the consuming of the
3:46:40
which is for the consuming of the
3:46:40
which is for the consuming of the angular library
3:46:41
angular library
3:46:41
angular library so yeah that's pretty much it and um
3:46:45
so yeah that's pretty much it and um
3:46:45
so yeah that's pretty much it and um these are some great resources for you
3:46:46
these are some great resources for you
3:46:46
these are some great resources for you to follow and i also followed these and
3:46:49
to follow and i also followed these and
3:46:49
to follow and i also followed these and these are great for
3:46:49
these are great for
3:46:50
these are great for you know if you're building your library
3:46:51
you know if you're building your library
3:46:51
you know if you're building your library first of all obviously the documentation
3:46:54
first of all obviously the documentation
3:46:54
first of all obviously the documentation then there's a great uh series on uh
3:46:56
then there's a great uh series on uh
3:46:56
then there's a great uh series on uh series blog actually on the angular
3:46:58
series blog actually on the angular
3:46:58
series blog actually on the angular library series and you might want to
3:47:00
library series and you might want to
3:47:00
library series and you might want to refer to that it goes into detail of
3:47:02
refer to that it goes into detail of
3:47:02
refer to that it goes into detail of every
3:47:03
every
3:47:03
every every step for example the creation step
3:47:06
every step for example the creation step
3:47:06
every step for example the creation step then the publishing step
3:47:07
then the publishing step
3:47:07
then the publishing step it also talks about the bundling of your
3:47:09
it also talks about the bundling of your
3:47:09
it also talks about the bundling of your library with the single command it talks
3:47:11
library with the single command it talks
3:47:11
library with the single command it talks about ng passenger etcetera
3:47:13
about ng passenger etcetera
3:47:13
about ng passenger etcetera then if you're really interested of you
3:47:15
then if you're really interested of you
3:47:15
then if you're really interested of you know diving deeper into how
3:47:17
know diving deeper into how
3:47:17
know diving deeper into how angular libraries work each and every
3:47:19
angular libraries work each and every
3:47:19
angular libraries work each and every part about that then there's this very
3:47:21
part about that then there's this very
3:47:21
part about that then there's this very interesting course about angular
3:47:22
interesting course about angular
3:47:22
interesting course about angular libraries by fabian goofbrink
3:47:24
libraries by fabian goofbrink
3:47:24
libraries by fabian goofbrink so you might want to check that and if
3:47:27
so you might want to check that and if
3:47:27
so you might want to check that and if you just want to create
3:47:28
you just want to create
3:47:28
you just want to create your library step by step you know just
3:47:30
your library step by step you know just
3:47:30
your library step by step you know just follow the exact steps as i told you
3:47:32
follow the exact steps as i told you
3:47:32
follow the exact steps as i told you today and create one
3:47:34
today and create one
3:47:34
today and create one just go to um the step-by-step guide to
3:47:36
just go to um the step-by-step guide to
3:47:36
just go to um the step-by-step guide to creating your first library in angular
3:47:38
creating your first library in angular
3:47:38
creating your first library in angular and this is where i have you know
3:47:40
and this is where i have you know
3:47:40
and this is where i have you know specified each and every step
3:47:42
specified each and every step
3:47:42
specified each and every step and each and every error that i came
3:47:43
and each and every error that i came
3:47:43
and each and every error that i came across when i was creating my first
3:47:45
across when i was creating my first
3:47:45
across when i was creating my first library
3:47:46
library
3:47:46
library so yeah these are some great resources
3:47:48
so yeah these are some great resources
3:47:48
so yeah these are some great resources you might want to have a look at
3:47:50
you might want to have a look at
3:47:50
you might want to have a look at and i'll share these slides so yes thank
3:47:53
and i'll share these slides so yes thank
3:47:53
and i'll share these slides so yes thank you very much
3:47:54
you very much
3:47:54
you very much that's all that that's great issue i
3:47:57
that's all that that's great issue i
3:47:57
that's all that that's great issue i think uh
3:47:59
think uh
3:47:59
think uh that was a session uh that people would
3:48:01
that was a session uh that people would
3:48:01
that was a session uh that people would love it my quick question for you would
3:48:03
love it my quick question for you would
3:48:03
love it my quick question for you would be
3:48:03
be
3:48:04
be uh what was some of the challenges that
3:48:05
uh what was some of the challenges that
3:48:06
uh what was some of the challenges that you faced when you were building your
3:48:07
you faced when you were building your
3:48:07
you faced when you were building your first library
3:48:11
oh definitely so um first of all right
3:48:15
oh definitely so um first of all right
3:48:15
oh definitely so um first of all right i was not sure of any format that is
3:48:17
i was not sure of any format that is
3:48:17
i was not sure of any format that is there when you're creating your library
3:48:19
there when you're creating your library
3:48:19
there when you're creating your library so um that's when i came across
3:48:22
so um that's when i came across
3:48:22
so um that's when i came across angular package format and this this
3:48:24
angular package format and this this
3:48:24
angular package format and this this document is
3:48:27
out of the files that you should you
3:48:29
out of the files that you should you
3:48:29
out of the files that you should you know put across and
3:48:31
know put across and
3:48:31
know put across and exactly how you should put them and you
3:48:34
exactly how you should put them and you
3:48:34
exactly how you should put them and you know
3:48:34
know
3:48:34
know where to put the feature and you know
3:48:36
where to put the feature and you know
3:48:36
where to put the feature and you know the major challenge that i faced when i
3:48:37
the major challenge that i faced when i
3:48:38
the major challenge that i faced when i was doing my library was
3:48:39
was doing my library was
3:48:39
was doing my library was three different packet auditions and i
3:48:41
three different packet auditions and i
3:48:41
three different packet auditions and i was every time getting confused maybe
3:48:43
was every time getting confused maybe
3:48:43
was every time getting confused maybe um you know maybe i will i could either
3:48:46
um you know maybe i will i could either
3:48:46
um you know maybe i will i could either i would put a script command somewhere
3:48:47
i would put a script command somewhere
3:48:47
i would put a script command somewhere in the
3:48:48
in the
3:48:48
in the library uh package.json or i would pack
3:48:51
library uh package.json or i would pack
3:48:51
library uh package.json or i would pack the library from the
3:48:52
the library from the
3:48:52
the library from the package.json so these were some of the
3:48:54
package.json so these were some of the
3:48:54
package.json so these were some of the challenges that you know
3:48:55
challenges that you know
3:48:56
challenges that you know were i i was really coming across but it
3:48:58
were i i was really coming across but it
3:48:58
were i i was really coming across but it made a
3:48:59
made a
3:49:00
made a lot more sense you know when i actually
3:49:02
lot more sense you know when i actually
3:49:02
lot more sense you know when i actually try to understand what i'm doing
3:49:03
try to understand what i'm doing
3:49:03
try to understand what i'm doing and then three pack indoor basins or
3:49:06
and then three pack indoor basins or
3:49:06
and then three pack indoor basins or three similar structures don't really
3:49:08
three similar structures don't really
3:49:08
three similar structures don't really matter to you because then you
3:49:09
matter to you because then you
3:49:09
matter to you because then you understand there's one library
3:49:11
understand there's one library
3:49:11
understand there's one library one root folder and then you know one
3:49:13
one root folder and then you know one
3:49:13
one root folder and then you know one created bundle for your library which
3:49:15
created bundle for your library which
3:49:15
created bundle for your library which you're finally gonna pack and send to
3:49:16
you're finally gonna pack and send to
3:49:16
you're finally gonna pack and send to the whole world
3:49:17
the whole world
3:49:18
the whole world so yeah so i think uh
3:49:21
so yeah so i think uh
3:49:21
so yeah so i think uh as you have said all the resources you
3:49:23
as you have said all the resources you
3:49:23
as you have said all the resources you have shared with the viewers uh
3:49:24
have shared with the viewers uh
3:49:24
have shared with the viewers uh i think they're definitely going to help
3:49:26
i think they're definitely going to help
3:49:26
i think they're definitely going to help people to develop
3:49:28
people to develop
3:49:28
people to develop the libraries and definitely avoid those
3:49:30
the libraries and definitely avoid those
3:49:30
the libraries and definitely avoid those challenges that you face
3:49:32
challenges that you face
3:49:32
challenges that you face and especially the resources that you
3:49:34
and especially the resources that you
3:49:34
and especially the resources that you should uh so that's all an issue i think
3:49:36
should uh so that's all an issue i think
3:49:36
should uh so that's all an issue i think that was an amazing session from you we
3:49:38
that was an amazing session from you we
3:49:38
that was an amazing session from you we really appreciate
3:49:39
really appreciate
3:49:39
really appreciate we'll take a coffee break for 15 minutes
3:49:42
we'll take a coffee break for 15 minutes
3:49:42
we'll take a coffee break for 15 minutes right and then we will be back once
3:49:44
right and then we will be back once
3:49:44
right and then we will be back once again for the
3:49:45
again for the
3:49:45
again for the second half of the session thank you so
3:49:47
second half of the session thank you so
3:49:47
second half of the session thank you so much everyone for
3:49:48
much everyone for
3:49:48
much everyone for joining uh in the first half we will be
3:49:51
joining uh in the first half we will be
3:49:51
joining uh in the first half we will be coming live once again on a different
3:49:53
coming live once again on a different
3:49:53
coming live once again on a different stream
3:49:53
stream
3:49:53
stream on all the same social media platform
3:49:56
on all the same social media platform
3:49:56
on all the same social media platform that we are streaming now
3:49:57
that we are streaming now
3:49:57
that we are streaming now once again nisshu thank you so much i
3:49:59
once again nisshu thank you so much i
3:49:59
once again nisshu thank you so much i steven simon on behalf of entire seashop
3:50:01
steven simon on behalf of entire seashop
3:50:01
steven simon on behalf of entire seashop for the community would like to thank
3:50:03
for the community would like to thank
3:50:03
for the community would like to thank you for the contributions that we are
3:50:05
you for the contributions that we are
3:50:05
you for the contributions that we are doing for the community
3:50:05
doing for the community
3:50:06
doing for the community thank you so much thank you very much
3:50:08
thank you so much thank you very much
3:50:08
thank you so much thank you very much thank you everyone