Angular 2 Routing Explained by Misko Hevery

Angular 2 Routing Explained by Misko Hevery at ng-conf 2016.

Transcript

0:00
yes good morning is this my colin is working perfect well thank you for
0:10
having me guys it’s nice party not working OK when I do it’s too high on my
0:18
face
0:20
is a better good well I mean every I guess I just got a new label I used to
0:34
be called I used to sell my father of angular the creator create this kind of
0:37
like I made the whole thing I did make the whole thing right only made part of
0:40
it and then the greater community kind of took over I’ll go with Papa michiko
0:44
ok sounds good
0:46
router because turns out rather is the thing that’s on a top and it’s kind of
0:52
important
0:54
but before we go there like what is a router as kind of the question and
0:58
really
1:05
trustee worries the cable man
1:09
the writers not working
1:41
those cables are still in Release Candidate rather is that thing that
1:53
takes that thing on top of the box and parses it and based on that of a simple
1:59
your application is divided into components are you got lots of them
2:03
represent a lot of different colors and the writer’s job is to kind of figure
2:07
out which are the components really matter for the user right now in an
2:10
inside of each other in this particular case each component has a outlet
2:14
component can be loaded into an outlet and so by assembling a set of components
2:21
in the proper order you get a particular view of your application now the trick
2:25
we would like to do the really important thing about the whole thing is that I
2:28
really would like to be able to do it lazy the only right we don’t want to
2:31
blow to every single component out there for some applications like literally
2:35
thousands of them we just want to load those set of components that are
2:39
actually needed to render in this particular page here there’s been a lot
2:42
of talk about offline compilation of how we can make the application smolan we
2:46
have focused on us all throughout but it turns out that the router doesn’t
2:51
cooperate in the router isn’t written a specific way then the router will kinda
2:55
ruined all the hard work we have put into place to make sure that we can do
2:59
lazy loading and so what I want to talk about the router today is how it relates
3:04
to lazy loading and how the lazy loading is becomes the enabler for the whole
3:08
building small kinds of applications have already seen this this is just a
3:16
regular England component lets see them the magical part in here is that the out
3:21
route sanitation which specifies which particular routes meet which component
3:28
of your particular routes that thing to notice here is that there isn’t a single
3:33
place where the whole route kind of surface area can be discovered instead
3:39
we always only put this in the minimalist amount of information
3:43
necessary to process this particular component
3:46
and by doing so we have to make sure that we don’t have to look at a lot the
3:49
whole world right doesn’t matter how big your application is it only matters
3:53
which of the set of routes are currently active in only those rounds have to be
3:58
loaded and and dealt with this is why we place the routing information what the
4:02
component the other things to notice is this for example an activate lifecycle
4:08
hook will talk about those later we have these things called outlets which is
4:12
where the child component get loaded into notice you can have multiple
4:15
outlets they could be named so the second one is called walks around the
4:19
one that has doesn’t have a name usually referred to it as a primary route and
4:22
the last thing the router needs to do is needs to be able to probably use route
4:26
links for you and how do I navigate from point A to point B in a predictable
4:30
manner in all discussing all this I want to think I want you to think in back of
4:35
your head how does this relate to lazy loading so you get a URL well the first
4:41
thing we do is we chop it up and into these things we called segments and what
4:46
we’ve built out of this is something we called a trio of your all segments that
4:50
the thing to kind of notice here is that we can do this operation without having
4:55
zero knowledge about the kinds of routes exist in your application right so this
4:59
is independent as a result we can defer lazy loading as far as possible so we
5:04
chop it up into the Euro seventy wondering why is it that read looks like
5:08
a list rate was actually treat because we can do fancy kinda thing so for
5:12
example here is a more complicated roads I guess the route around here has
5:16
multiple child segments we can encode this tree like structure into the URL
5:22
and oh by the way this is just a particular including mechanism that we
5:25
ship with angular you’re free to write your own including mechanism for
5:29
encoding these these trees and decoding them in here we also have matrix
5:34
parameters metrics primers are essentially query parameters except
5:37
perhaps to particular segment in a tree so that a user has its own set of
5:42
primaries and details can have its own set of primaries and the exhilarate
5:45
charging have its own set of problems as well
5:47
so we can build this country’s but let’s go back to a simpler tree which is the
5:52
most likely use case where you just have a a list of things we have a tree you
5:57
are all segments and as I mentioned we can do this always leave without having
6:00
any knowledge of the routes so now we actually want to turn this segment into
6:05
an actual components on a student visa loading things so if application and to
6:10
do that we need to build something we called a route segments treat and every
6:15
application has a route route and that one is already preloaded right there’s
6:19
no lazy loading their and there we can look through it set off routes and we
6:22
can say hey which one happens to be that one we are interested in and so we can
6:27
scan through and say hi there is a user IDs and can match that up with the user
6:33
and we now know that the 123 actually built the user component so we can
6:37
actually draw a picture around it and while the individual yellow boxes will
6:42
call the URL segments the green box is now we called them route segments or
6:47
routing sentence and so once we have this weekend we know that the next
6:52
component is a user component be so use a component and so now we can lazy load
6:57
the user component and with the user component we can now lives alone its
7:01
routes and now we discover that the next section is the details and we can
7:06
recognize the the details as being part of the details component and we go into
7:12
the details component not shown over here and you can see there is more
7:16
routes presumably there are none and we can now render this particular pitch so
7:21
there are two phases right there’s the phase of assembling the Euro segments
7:25
and there’s a second phase of assembling the route segments treat and this is
7:30
where the recognition and it’s only during the recognition phase that lazy
7:34
loading pics enemy actually start loading the components this is what
7:39
allows us to come to defer the whole thing as far back as possible
7:43
so once we have recognized the route we can instantiate all the components were
7:49
loaded into the proper route out legs and we can start calling lifecycle hooks
7:53
and so in this particular case I’m just showing one of these hooks and activate
7:58
and deactivate here you can see it takes to route segment on route segments will
8:01
contain information such as your matrix parameters senior any positional
8:08
parameters you might have inside of the URL also might contain any other
8:13
information about that particular think only pertinent to your component so the
8:18
parents components segment will be but the parent component with you and
8:22
there’s actually we we made sure that the route segment is immutable and that
8:26
means that the ransom and cannot actually have a reference to the parent
8:29
component so when you do want to get around and say hey I wanna know who my
8:32
parents this this is why we also allowed to pass a a trio of segments for you and
8:37
the reason that they’re spread out is because as you navigate throughout the
8:40
application some of the components stage across navigations because their
8:44
interview go / user / details or user / settings then the user portion persist
8:52
between them and so we want to make sure that we can we can know let you know the
8:56
person always returning you the same segment identity but the trees will
9:01
change as you navigate from point A to point B
9:05
throughout your applications but they do allow you to to navigate through so for
9:09
example if you want to have a red bar at the top and you can you wonder how you
9:13
got there you can use to treat to give you a path of segments to the route once
9:21
we have all this let’s look at how we generate links so here’s an example of
9:25
generating lately you can see we can pass then a relative path and also a set
9:30
of parameters which become the matrix barometers now that it’s important to
9:34
recognize that while you can put absolute paths in there we highly
9:38
recommend that all the paths are relative because what that allows you to
9:41
do is that these components now become reusable and you can move them around
9:44
you can decide you no longer want to have these component in this part of the
9:48
tree
9:49
somewhere else or maybe even have the same component in multiple parts of the
9:53
tree or what is oftentimes the case is that when you have a application
9:57
sometimes the the the developers often have like the the inner internal
10:03
customer support kind of version of the application where they can pretend to be
10:06
different users to see what the user sees and and usually those are
10:09
indifferent you are else and so these are all reasons why you want to make
10:13
your your roles relative so imagine we have two components loaded into each
10:19
other and they both have using let’s say you have a rattling in the interview one
10:23
so what we do is we copy the existing set of you are all segments over because
10:30
that’s the context that’s what we’ve been begin when you say CD because
10:34
essentially were out there is change directory to save CD and UC food it
10:39
makes no sense to talk about what the resulting directory is untold you know
10:43
what the initial context is from where you started the navigating strong and so
10:48
we do is we copy it over and I won’t notice with copying over he is a is the
10:54
Euro segment tree which does not require recognition doesn’t require us to lazy
10:59
load all the components we can generate all these links without actually
11:02
supporting them in this is important because you want to be able to generate
11:06
links to two deep into your application and you don’t want to force the loading
11:11
of that those application segments until you actually navigate to them and then
11:16
once we have the context you can apply the relative
11:21
kind of a link to it which is the food as we get it you’re like that once we
11:26
have transformed the initial ural tree into the destination tree we can
11:30
serialize it be probably going to end up with a Euro like this now similarly to
11:39
try the same exact operation you’re somewhere else on the tree the initial
11:43
location is going to be different right you gonna start with the user 123
11:46
details and then you can add through to the end and so the resulting you’re
11:49
always going to be different still so when you have links it’s important to
11:52
realize that these links are always relative to some other location inside
11:56
of the application and it’s actually a benefit that are rather have we say that
12:00
the broader is fractal which means that at any point anywhere where you look
12:05
inside of the application it behaves just like any other one and you can list
12:09
them repeatedly so what’s happening here is we start with the Euro we run the
12:16
parser a parser is the thing that’s pluggable so if you don’t like the way
12:20
we are sorry you’re also can change that and we build up a trio of your all
12:24
segments and notice that all of this in the sections in the white area of the
12:30
screen
12:31
do not require Lisa loading in this is important because we can do late as far
12:34
back as possible we get to the tree of your all segments and then we can
12:40
generate a route links to new set of tree or all segments those around the
12:45
only thing they need is the initial context but the context while requiring
12:50
recognition is something that’s already loaded right you’re already on the page
12:53
so you already paid the price of loading it so that context please
12:56
essentially free all day and then they generate new set of your entries and
13:02
then we can ask them to be serialized back into your old which then end up
13:06
inside of your application and both the serious issue and the parser part is
13:10
over I double in your application
13:13
now for those of you have been paying attention you should have been
13:16
scratching her head and said but but how can you lazy load if you actually have a
13:20
reference over the top it says something like import simple components from some
13:25
location and you’d be correct this would totally break the lazy loading as it is
13:30
right now and this is this is an important thing to solve because it’s
13:35
the last puzzling piece of how to get the lazy loading go so we have route
13:39
links they don’t need recognition of the whole world of routes we can load them
13:45
please leave weekend in compiling what what do we do about this reference so
13:50
the solution of these references we take it and we quoted put it in a in a in a
13:54
strength now we have break broken the dependency of the route component to the
13:59
child employers and this is really what an a Morse the lazy loading up the whole
14:03
magical piece however once you have this you have just created yourself a new
14:08
problem and a new problem is how do you convert a string to a reference and
14:15
while you might think this is a pretty straightforward answer that question it
14:19
actually is pretty complicated quickly because remember that the tcode you ship
14:25
the production will probably be magnified and as a result it won’t have
14:28
a simple component reference and Sciences gonna be mangled into something
14:33
else and so to do that we are we are proposing that we will have a specific
14:39
directory structure and it will simply use that strength as something we pass
14:43
into system GIS to load the particular a sub module for us
14:47
lazily and then we’ll just assume that if there is a default component or there
14:52
is exactly one component of the sub module and below that component inside
14:56
of ourselves and we’ll use that for further navigating and I’m lazy loading
15:01
the components it so that requires a particular directory structure so if you
15:05
for example has
15:06
have the set of routes than our CLI to automatically produces these set of
15:11
directories with noticed a plus sign over here which is the convention that
15:15
we generate to have the lazy loading capabilities available to us and then
15:22
when you quote the component inside of the rather finishing by quoting it you
15:27
break the last piece of language allows the tree shaker to break up your
15:31
application to break it up into modules and then have a lazy loading take over
15:35
at runtime for the application so that it becomes a question for you as to how
15:40
you want to bundle the application know where do you want to put these these
15:43
breaks you can go all the way you know from what I want to deal with it and I’m
15:47
gonna preference over there everywhere but you can go to the other extreme you
15:50
say I’m gonna put strings everywhere and have the lazy loading take over the lazy
15:56
loading his is kind of important because I’m sorry that the routing inside of the
16:01
laser looking inside of the router is important because if we don’t have at
16:04
least loading router all the hard work we have done into making sure that the
16:08
components that the the framework knows how to lazy load components of the
16:12
directories are all of that kind of comes apart unless the router also plays
16:18
the game in here as well so thank you for having me over here you can find me
16:24
on Twitter and certainly can say hello to you see me in the Holy thank you

 

AngularJS 4U

AngularJS 4U

AngularJS 4U is a development blog and Angular Community where you can share your latest ng development tips, articles, demos, plugins, modules and more.

Leave a Reply

Your email address will not be published. Required fields are marked *