Adventures in Angular

Adventures in Angular is a weekly podcast dedicated to the Angular JavaScript framework and related technologies, tools, languages, and practices.

Subscribe

Get episodes automatically

122

122 AiA Angular 2 Routing


1:20 – What is the Angular router?

4:20 – Router links

5:20 – Child routing

7:00 – Defining a router and a path

10:05 – Controlling browser history

11:05 – Push state versus hash state

15:10 – Style guides and best practices

16:45 – Configuring the routes

19:10 – Router guards

26:55 – Resolve guards

30:20 – Lazy routing and eager routing

38:30 – How to get started with routing

Picks:

Oakland Raiders (John)

Fantastic Beasts and Where to Find Them (John)

Rogue One (John)

Catalyst by James Luceno (John)

The Eagle Huntress (Ward)

Evans Mill (Charles)

Aaron Walker (Charles)

NYC City Pass (Charles)

Statue of Liberty (Charles)

Ellis Island (Charles)

Empire State Building (Charles)

Ripley’s Believe It Or Not (Charles)

911 Tribute Center (Charles)

Microsoft Connect Keynote (Charles)

Javascript Jabber (Charles)

iPhreaks (Charles)

This episode is sponsored by

comments powered by Disqus

TRANSCRIPT

Charles: Hey everybody and welcome to episode 122 of the Adventures in Angular show. This week on our panel we have John Papa.

John: Hello.

Charles: Ward Bell.

Ward: Here I am.

Charles: I’m Charles Max Wood from Devchat.tv. This week we’re going to be talking about the Angular router. I’ll admit, just to get started that I really haven’t done a lot with the router. I tend to like all of the fancy DOM manipulation and then it’s like, oh yeah, you can do this too where you click a button in it load the different component into a different spot. Is that essentially in a nutshell what a router’s about?

John: That’s the basic fundamental of a router that you want to show more than one page in your app and you want to go from one place to another or you want to have ten different pages. That’s the starting point but there’s a lot more to it. Once you start using a router, or building any app even without a router, you start realizing why you need one. If we had a bunch of components on the page and we didn’t have a router, we could write code ourselves to switch between 10 different components by hiding and showing.

But, how do you handle authentication to not allow Charles to this particular pages? Or how do you make sure that you load the data before you get there? How do you make sure you lazy load some other routes after while the application is loading? maybe only go get them on demand. There’s a lot of cool things that you can do that you start realizing to code that yourself is kind a pain.

Charles: That makes sense.

Ward: Yeah, I got to admit I was always, before I knew what a router was, I always just had a series of links and then I’d hide and show stuff. That was pretty much the way I did it. The router actually makes life easier for you. It’s surprising.

John: Maybe we should start with what the basic like how does it actually work. Really, what it’s doing, let say you’ve got two pages, A and B, you load your app first of all, there’s your index HTML and inside of your index HTML, maybe you got menu item for A and B then you clicked on A. What it normally could do without any other configuration let’s say, when I go to A, I’m going to go get that component and it’s got some associated HTML and I’m going to show it on the screen which implies a lot of things. It implies that it has to know where to get that HTML and typescript or JavaScript. It also implies that it needs to know where to put it on the page.

You’ve got animations. You got to figure out how it animates and if you want it to. There’s other stuff you can do but the basics are, where do I get that code that’s going to do this? Where do I show it up on my page? The assumption which I skipped over is, how do I tell Angular to go get that specific component in HTML as opposed to B like what I had in A and B.

Those are the basics, is that, it has to go and make an HTTP call, go get the data, put it on the page, we use something called a router outlet to tell it where to put it. [00:21:32] which is a great way of explaining it. You have to mark on the page [00:21:37] spot, this is where it’s going to show up, that’s the router outlet. The first step really is that router link. Ward, do you want to explain what a router link is?

Ward: A router link is a directive that you can put on say an [00:21:51] tag that identifies what the router should do if somebody clicks that link. That usually means what page should be swapped into the router outlet. It’s a sort of declarative approach to setting up the user’s interaction with the route as supposed to an imperative approach which would be inside the class component you could say, “Hey, router navigate to.” You have those companion ways to doing it.

The second way where you tell explicitly in code the router where to go, that’s called the imperative way. Having a link in the HTML that’s decorated with the directive that tells it where to go is the declarative approach.

Charles: I have something to ask. In single page apps, a lot of times you have a menu bar on the left then you have a main area on the right. I could see that if you click something on the menu bar that it might reload or reroute something into that router outlet then you have another router outlet for the rest of the screen. Can you do that with multiple router outlets and how do you tell it which one to send what to?

John: You’re saying for example on the right hand side maybe you have two different areas like a top and a bottom and you want something to show on the top and some on the bottom? You can do that too actually.

Ward: You can do that or you can have a router outlet within a router outlet, that’s the notion of having child routes. Maybe the thing on the left takes you to one of the major work flows. In an email program, for example, you’ll have one that chose you your mail and there’s one that chose your calendar, on that chose you your contacts. Each of those is sort of a major areas of your application and you expect that when you click on that, some panel, let’s say it’s on the right changes but even within that, it might have its own series of panels that go in there and that you could navigate around into. That’s the notion of child routes.

John: I think it’s the place I would start is child routing actually. I do them more often than I do name routes, at least that’s been my experience. I don’t know why, I just thinking about that now. I think maybe child routing just makes more sense to me. That’s what Ward said, that’s the concept of having a main route with the menu which goes to a router outlet and inside of that router outlet, there are sub router outlets.

Charles: Can I ask another question really quickly? Looking at the documentation, it looks like a route is just a path and a component, is that all there is to it?

Ward: Ultimately, it boils down to that, I think. There’s [00:24:37] on that concept but yes.

John: If you stopped there, you probably wouldn’t get the whole concept to that. It effectively gets down to, when you define a path, you’re saying, “When you go to this route, this HTTP, URL, whatever, you’re going to load this thing.” That’s the two basic pieces you need.

Ward: One of the things that was immediately obvious to me when I first encountered routers, is that, we express route as if they were URLs, as if they were going back to the server to fetch another web page because that’s the metaphor that we’ve come to use for routing. We’ve taken the standard browser metaphor of how you navigate the web to go from the New York Times to Doonesbury or whatever the heck it is that you’re looking at. We’ve taken that metaphor and we’ve applied it to the way in which you manoeuvre around inside an application that’s sitting there inside your browser. We can use URLs inside our banking app or inside of our CRM system or whatever it is.

John: Effectively, once the Angular app is loaded, because there’s a copy out here which would get back to you. But, once your Angular app is loaded, when you go to /customers/orders/ordered/seven, you’re Angular app is intercepting that address bar change in your browser and Angular’s evaluating it with this router saying, “Hey, don’t actually go to the server, go find this route that happens to be this component over here or over there.” The caveat on that whole thing is that, if you have a deep link, which is when maybe your application has requirement where I work with Ward and I need to send him an email that says, “Hey, go check out this particular customer in this application.” I send him the long URL of my application/customer/17.

That’s a deep link. It’s not the login page. Ward’s going to click that. The first time his browser opens, the app is in running. It’s actually going to hit the server and then the app should start up if we configure it right which I can talk about, should start up and go to the login page that lets you log in and then direct you to customer/17. In your application, you need to make sure you support deep linking as well which is not an Angular concern. That is a server side concern which basically you just have to tell your server what to do if it finds one of those routes.

Ward: From the user’s perspective, it should feel seamless. Users shouldn’t really know whether they’re wandering around on the web or wandering around within the application on the web or whether in fact the route has been intercepted and you’re just navigating locally. It should all feel seamless. That’s why it’s designed as a URL. That’s the way routers work.

John: What a history too right? That’s the key component to this, is, I always guess the question when I’m talking with users in businesses, what if I hit the back button in the browser or the forward button, can we stop the users from doing that? The answer to that is, you don’t have to stop them because the way that the router works is it actually listens to browser history. If you hit the back button in the browser, it’s going to go to the last route that you just traversed. Hit the forward button going to go to that one that you are on before [00:27:58] backwards. It actually listens to the browser history and works in concert with it.

Ward: You can control that as the person who wrote the application, you can decide whether or not the person is allowed to revisit that page or go forward to a page. All of that is within your control.

Charles: [00:28:19] push date or does it actually work through some other mechanism in the browser?

Ward: The router is actually intercepting location change. The whole push state versus hash distinction, is that where you’re going?

Charles: Yeah, I was wondering about that too because I’ve seen that in other single page apps where they have that hash whatever path. Ultimately, it’s like I was wondering if it needed a browser that supported the push state change or if it was as you said intercepting the location itself.

Ward: It’s really trying to take charge of the way the browsers is responding the location changes. Of course, the nice thing about the push state is that, visually, looking at the URL, it feels like it looks just like a regular route. You have no idea. It’s not trying to pretend navigating within a page. It does if you want that format of a URL, your browser does have to support it as modern browsers do. But it’s mostly a matter of formatting, I think. Do you agree, John?

John: Yeah, I do agree. I think that when you’re starting to routing, we mentions [00:29:31] basis to get started, there’s always this important place stuff you got to do like import the routing module and then import the Angular router. We mentioned the router outlet and the router link but we missed one. Again, this is the curse of knowledge, once you know how to do this, you forget that you’ve it. But the most essential part probably of doing a router is, you have to define the routers themselves.

Ward:          That would be a good idea. You just start with a router and you don’t tell it. It’s going to say, “I don’t know where you’re going.”

John: It’s like in a computer. It’s going to do exactly what you tell it. If we don’t give it paths, then it has no idea that /customers is actually supposed to go get this customer component. It’s something you have to do to go ahead and set up these routes so it knows what to do when it sees these URL patterns. Example Ward, when I set up list of routes, I usually have two routes for sure. The first route I must always have is the blank route where the path is set to the empty string.

I set the path matching the fall on that. That’s because my app usually, whatever domain my app is setup to be, let’s say it’s www.papajohn’s.com. Let’s say that’s a spa because I have no idea if it is, probably isn’t. Let’s say it’s an Angular app, then my path would be empty string because I don’t wanted to go to papajohn’s.com/some other app like by pizza. I wanted to go right to the route. I set that empty string and that would be my first dashboard components.

The other route I must always have is a page not found. At the end of my routes, because they get processed in order, all the path that’s star, start where basically I redirect them to a page not found, let’s say, “Okay, we get at the end of the world.” I do this specifically because I seen many, many apps where people for that star path, that basic catch all. They bring them back to the dashboard. The problem I have with that is, that might be the user experience you want, at least during development and usually during user experience too. If somebody enters that invalid path, you don’t want them going back to the dashboard, you want to tell them that was a bad place so they don’t go there again.

Ward: You like to build what’s known as a 404 page into all of your apps?

John:            Yes.

Ward:          404 meaning the status code for page not found.

Charles: [00:31:54] if it went all the way through.

John: Yeah, it’s like a client’s side 404 and I build that up and usually I have a nice animation on it, something very low res and then I have some nice message thing, “Oops, you probably meant to go here, would you like to go there?” Put a link underneath it and maybe in some cases I built apps or redirects after ten seconds and they do nothing to that dashboard. But at least, I want the user to know you went somewhere that doesn’t exist because maybe they’ve bookmarked that.

Ward: I’m super embarrassed, John because we don’t have that in our documentation at the moment. We should add that.

John: Good idea. And then in between all this two, that’s where you got your customized routes.

Charles: Would you call that a best practice because I keep thinking style guide but it’s not something I would put in style guide. Is that just the best practice that you found?

John: I wouldn’t say every app I’ve had does. There have been apps where I’ve been specifically requested where they typed an invalid route, they wanted to go right into the dashboard. But, my style guide, the stuff that I do, yes, I’d like to direct them to it page not found.

Ward: I think what really needs to be in the style guide is that you should make a positive decision about what you want to do when somebody puts in a bad route. We should add that as well, John. If 404 pages is your answer, fine. If no, the answer is dashboard, fine. But make a decision.

John: Yeah, I think leaving at the office probably the only bad decision because then you don’t go anywhere. You’ll actually get a routing error in that case. I haven’t seen that in our message because I never actually tried it but we should do that. That’s what the actual error would be.

Ward:         Let’s back up a little bit. We know why we want to have a router, we know that it brings the metaphor of navigating the web to navigating your application. We know that it has an outlet which is where things appear and that you can navigate imperatively or use a link. Now, we’re getting into configuration and I would say that configuration of the routes is one of the things that can start out simple and get crazy. But we should probably talk about.

Charles: One friend of mine used the phrase [00:34:22] fire.

Ward: A friend of yours who likes that phrase might very well bring that to there. I’d like to think of this a campfire.

Charles: I’ll get marshmallows because I’m doing routing.

Ward: Let’s get marshmallows, hold hands, sing songs and configure the routes. John, you’ve configured the default route and you configured the uh-oh 404 route. But now we’re into the ones where somebody says he’ll actually want to go to customers or I want to go to orders. What’s the absolute fundamental of a route, John?

John: The way I liked [00:35:05] is inside those routes, I always have a path and a component, well, not always but most of the time. You’ve got to give it a path property like I’m going to customers or customers/orders. The second thing is, when I see that match, where do I go next? I go to components. I set the path property and I set the component property and the component properly, in the simplest example is a symbol that recognizes the component that I’m going to like the customer component.

Ward: This is like Chuck’s left hand side. I might build up the whole bunch of this., customers, orders, products, the major areas of management in my application. What happens, John if I’m in the middle of one of those let’s say, editing the customer and I’m just typing a way and suddenly I click another, what should happen? It’s sitting there in the screen and then I make some changes and I’m sort of got my work going there and for some reason I decided to go click on the navigation that would take me to products.

John: Or the best customer experience, user experience would be to completely throw away all the changes they made and not tell the user.

Ward: That’s one possibility.

Charles: That’s totally what they expect.

Ward: It’s actually what they expect.

John: Better yet, you can even use a route guard that say, “I just moved you from this route to that route and I thrown away all your changes and then you can play audio that says hahaha.”

Ward: Okay?

Charles: Press that button for further frustrations.

John: Please shut off your computer by yanking the plug out of the wall.

Ward: But you know actually, websites did this for the longest time. It was quite possible to go and have an oops like that and then you just hope that something was still sitting there when you went back. But we don’t have to do that.

John: No, we have something now that will protect us from these things. They’re called route guards. They’re guards that you put on the routes, you can think of them like a route events, if you will. That stand between you and moving to a route or after a route on different types of ways you can move each routes too which we can talk about different types. They enable used cases exactly like Ward just talked about where you want to stop the user from preventing workplace suicide effectively where they’re typing into the screen the events and all the stuff they wanted and then they hit a button by mistake and bam, they just lost to other changes.

We getting a route guard, this is, hold on a sec, did you mean to leave this page because you have unsaved changes here. Yes? Okay. We’ll throw them away. Or no, let’s stand the page let you save or you can save automatically, you can do whatever else you want to do.

Ward: We should put a parenthesis around that and say, it actually has to do with how you design your user experience because it’s possible that you have said, I don’t want to have any by push to say button, I want to auto save periodically or I want to do various things so that they don’t have to think about it and they can just navigate the route. But lot of applications, it’s not even clear that you can do that because you might have to pass certain server side, validity checks and maybe you couldn’t pass them yet because they hadn’t filled in the form properly.

Even if you liked to auto save, it’s probably a good idea to check in with the application before navigating away to find out if navigating a way at this moment is something that user really wants to do. That’s what you’re talking about that deactivate guard.

Ward: Yeah, there are five guards today. I hear rumors of others make coming at the future which Ward do know more than I would. But the ones are there today are can deactivate. Can I deactivate? Can I leave this route? And then you get an opportunity to do something either as the user checks some logic, don’t ask the user. Then there’s also can activate, there’s can deactivate and can activate, maybe before you go to route, you want to check to see if they have permission they get there. There’s also can activate child, in case of child routes.

For lazy loading type things, you could say, I am just lazy load but any kind of route you’re going to, you could say, “Can I load this?” There’s a can load guard as well to see if should I even load it which is different to can activate because can load says, “Don’t even go to get the HTML for this template unless I have satisfied this condition. There’s a fifth kind which we probably want to group with another category. I like the users.

Ward: You’re teasing me there, John. What’s the one that you’re talking about there?

John: There’s a fifth kind of a router guard and we can go back to router guards too but I really like this idea. Let’s say this, let’s say before you go to a page, you want to pass data to that page. Chuck, you’re on the customer page and you’re checking out the sky Ward Bell. He happens to be customer 17. Alright, you clicked on customer 17 Ward Bell to his picture. It brings you to his page. How does Ward Bell’s information get from the page you’re on to the page you’re going to? There are three ways.

We can have something called routing parameters which allows us to get the data from one place to the other. Within routing parameters, there’s two ways we can get to those parameters. One is using observables which we talked about in the previous shows and another one is using something called the router snapshot.

Ward: You lost me a second here, John. First of all, he clicked that 17, let’s say it says customer/17 meaning, the customer whose ID is 17. Is the number 17 significant when I arrive at that customer editor, is the customer editor going to see the parameter 17 or were you trying to tell the story? I got lost.

John: That’s really up to you, the way you wanted to. You can make the 17 part of the route so it’s customer/then whatever ID they happen to be which is a common thing to do or you can pass some other ways as well. How would you like to do it, Ward?

Ward: I was just wondering where you were going with the parameters there and the observables and stuff because I was getting a little lost.

John: I was just saying that there’s multiple ways you can pass between routes. Once you’ve decided to go somewhere, you can pass a parameter but let’s say you don’t even want to do that? What if you didn’t want to go look up the customer name Ward Bell? What if you instead, didn’t want to get to that page? For example, your back end takes 10 seconds to find a customer. That’s a long time. [00:41:59] but sometimes we do these things in real life.

We’re on the page where Chuck is really looking at you. He’s done a private investigation page. He’s looking at this customer called Ward Bell. He wants to really find out more from information of what this guy has been up to. When you click on Ward Bell, Chuck, you tell me, what do you want to have happen? It’s going to [00:42:16] 10 seconds, would you rather have the page you’re on stay there until all the data is back and then show Ward Bell? Or would you rather have it start to load the Ward Bell page with no data in it? Stay there for 10 seconds in a weird state and then show Ward.

Charles: Well, I would rather have it start showing me what it can when it can. But, if it’s just the layout, then I’d rather just have it wait and tell me it’s trying.

John: I think you’re hitting on both side of it. It depends on how much data you could show.

Charles: Yeah, if I already have the URL for the picture of Ward Bell and I have his name and maybe his address but I don’t have his full file because that’s still being loaded, I’d like to see that loaded in. Maybe all I needed was the address.

John: Exactly. If you’ve got someone the data start showing it, if you don’t have any of the data, it probably would be a weird to go a page that’s completely blank with a spinner on it. This is where I will come back for circle back the routing guards. The fifth type of routing guard that exist today is called the Resolve or [00:43:20] they had in Angular 1.0 which allows you to decide, if you use that, you could say while you’re looking at Ward Bell on the main screen and you want to click on his idea to go look at all this information, if that’s going to take ten seconds and you’re not want to show that page, you could say, okay, I’m going to create a resolve guard that says, “Go get Ward’s data, stay in the page I’m on but go get Ward’s data and once you get that data, then transition to the detail page and show it.” A resolve guard will let you do that.

Ward: You’re there. You are looking at the list of names, that’s really what it was saying. All he had about me was the name Ward Bell in the list of customers to look at.

John: [00:44:06] activity that you’ve been out today.

Ward: Let me know if that’s available then we can go there. He clicks on something. Now, the Resolve guard is busily making the long trip back to the server to get the information and you’re staying on the lists until that arrives and then it navigates over to the editor. Whereas if you were willing to go over to the editor immediately then you wouldn’t use a resolve guard, you would just navigate straight away to the customer editor where it would have Ward’s name and nothing else. Then that page would be responsible for a synchronously getting the data and it would arrive when it arrived.

The great thing here is that you have choices. You get to look at your application, its characteristics and decide whether you want to preload the data before you get there or get there and then load the data. There’s no one right answer to that question. But the technology is there.

John: If you step back in this whole thing, we’re really showing is we start up at the basics of the router. Everybody just wants to say, “If I go to this route, show this thing.” But, ultimately, almost every app I’ve ever dealt with, always have at least one other question, at least one other. That’s like, how do I make sure they can’t get to the page if they’re not supposed to with authentication? How do I make sure I get data to the page for the page load? What if that HTTP call fails and I can’t actually go get Ward Bell’s in various activity? Why would I want to bring him to the page start showing it and then back them off? There are always other things that you eventually want to do when you build real applications and get beyond hello world.

Charles: Yeah. But ultimately, it depends on what your customers expects and what you want to train them to expect. I think that’s something that Ward was talking about a second ago. In some cases, you may want to load partial data and then other cases you may not want to because you’re not just in a position where it makes any sense. People are going to get frustrated because they only have half of what they asked for.

John: That’s probably why the router, is not probably is, it’s exactly why the router has been one of the most difficult thing to put on a style guide because people generally wants a very strict of this is the way I should do it. However, I think, what we’re getting out here, Ward and I have had the exact conversation but I sense people feel the same way. There is no strict guidance, you] always must use resolve or you always must use this can activator. It really depends on what the user experience is supposed to be. It depends how you want the application to behave. The good news is, the router has the ability to do all these things or none of them if you don’t want them.

Ward: One of the cool things that you mentioned in the passing, John was lazy loading. That isn’t something that routers traditionally been able to do. It certainly wants something that Angular 1.0 did very easily as you know all too well. But it’s remarkably easy in Angular 2.0 although the route can’t simply be a path and a component because if you’re lazy routing to it, that implies that you don’t actually know the component at this time. You just know where to go get the component, you have some address. What’s different about lazy routes and how do they work?

John: To understand lazy route, I think we need to understand what’s the other thing, IGOR routes is. You’re either getting your routes one of two ways, it’s very binary. You’re either getting them igorly upfront and or there or you’re lazy loading your routes. IGOR loading happens by default since what happen history in most of our apps, that’s where all of your application is loading up front. When you click on your route, all the code is already there, all the HTML generally is there because you bundled it and your browser just go showing place to the other. It’s very fast. But it also means that your pre loading everything into the browser even if you’re never going to get there.

Imagine a massive app like Amazon, imagine Amazon.com was a large spa. If they loaded every single shopping page in advance and all Chuck wanted were batteries. Chuck doesn’t care about American girl dolls, why is that page loading? Why are we bringing that into that browser? Lazy loading allows us to say, “You know what, only show the things eagerly that we need for the after run. But then, when you clicked on a particular thing, go get it on demand and then go cross the wire, get that page, get the content and code with it and then display it.” That’s why lazy loading can help in some cases for performance.

Ward: Yeah, the thing that’s in my head about that is that I design a lazy load when I’m thinking about loading whole collection of functionality. Going back to our other thing, there’s no reason for me at the start of an application to load all of the product inventory or management, the screens or any of that stuff if I’m not going there, I may never go there during the user session, that would be a total waste of downloading a module and setting things up. That could be true if any of the side loads of the functionality of my application. I can neatly divide my application into separate work flows, that’s a natural way to also decide what ideas that I want to lazy load.

John: Let’s do the exact [00:49:39] exercise. Let’s make up a fix site called Amazon.com. Let’s pretend they [00:49:44] shopping on the site. One area might be shopping. But there’s other things you might want to do in this site like account maintenance or order history, things like that, we can stop there. Wouldn’t you put like boxes around those sets of functionality and maybe don’t even load the account stuff if all you’re doing is shopping.

Ward: Exactly.

Charles: One question I have then is that I worked on apps where let’s say that the shopping section actually takes a little while to load up. 90% of the people coming to my website are going to shop. But at the same time, I want my index load to be really fast. Essentially, what I’d like to do is load the main page and then start side loading the stuff for shopping, in that way when somebody click on it, I’m at least part way there.

John: That’s a great example, Chuck because I actually worked on a site that’s exactly that where the first thing they want you to do is shop. But then when they really thought about it is, the first thing they’re doing isn’t actually shopping, the first page is like a marketing page where they want you to look at products, they look at profile and say, “Hey Chuck, he’s used to buying a lot of batteries. I’ll show frequently brought batteries first.” It’s not the whole site. It’s like a dashboard or a marketing splash which got a big search box on like a Google search.

While that’s loading, as you said, in the background, they start loading the real shopping site which might be larger. But on [00:51:15] to you, the user experience, you think the whole thing is there already. By the time you search, it’s already there. That’s another trick that we use in technology to offload heavy processing to allow the user experience to be using the app right away. We can do that with Angular which is cool. That’s a feature that was brought out relatively recently in Angular, what were you saying, Ward? 2.1?

Ward: I think it was 2.1.

John: That was called preload?

Ward: It was called preload. There is a preload strategy and then you can customize that strategy to meet the needs of your application.

John: [00:51:59] to default once that comes out of the box.

Ward: Don’t preload and then preload everything.

John: You can customize it to do whatever the heck you want in between.

Ward: In this example, you would actually want to eagerly load, immediately on launch load that first, that sort of start up splash experience that leverage whatever you could quickly get in front of the eyeballs. It could be a homepage or depending on how clever you are. Maybe you left some information in browser storage that sort of said something about where the user was previously and you could quickly get that to screen.

There are all kinds of clever stuff you can do that gets the ball rolling. But immediately, because you know they’re going to shop. Immediately, you set it up with a custom strategy that says, “Get that shopping module down here as quickly as you can.” There would be something else that would be, say the account administration that the user’s unlikely to do that you would leave in the lazy load state and only when the user clicked on the button that said, “I want to administer my account.” with that module come down.

John: That’s really like three modules. You got your homepage splash screen which is really a very tiny module, that’s your start up and that one would be eager. Then you’ve got your sales or shopping module which might be large, that would be lazy but with ever preload strategy has loaded upfront. We’d have another lazy load module which we like our account administration which probably would just leave it with don’t preload at all because why bother loading until we get there. This is really up to your user experience but that’s how you could tinker and customize your application to behave the way you feel is best.

Ward: Another dimension on which these things can also take place is whether you want some of your site to require sign in and some of them not. Certain modules could be loaded right away before they even allow the users to log in. As soon as the user logged in, you could do use the preload feature to bring in the things that require somebody to be authenticated to come in and still have that third do it only if they ask for it.

You can intersect your authentication and your authorization policies with this ability to construct routes to decide when things load. Yes, by the way, you can even rework the navigation entirely based on who the user is and what their roles are so that the router is working hand in hand with your authentication and authorization policies.

Charles: Now I want to go play with all these stuff.

John: There’s a lot here. I think we battled off  all these things. I’m looking at my Pluralsight course which I just updated. I completely redid 90% of it for the release. The biggest part that I added, I think I added like almost an hour of content on the router because basically, if you get the router going, you get to decide, how do I get parameters? Do I pass parameters at all? Do I do child routes? Do I use observables or snapshots? Do I use resolvers? How about route guards? Authentication? Lazy loading? No lazy loading. Preload strategies. Hey Ward, what if I want to have a provider for my route too? There’s always different things you can do now which are pretty cool.

Ward: But we don’t want to overwhelm you because it’s all waiting there for you but you could start really simple and say, “Hey, I just want to create an A page and a B page and have it when the app starts. It always arrives on A and then I see on B lots of bells and whistles but it works very simply coming out of the box.” You can learn about these things with John’s course and with documentation. You learn these features as you need them.

John: If I wanted to get started, the simplest ways probably to go to the Angular documentation and even in the [00:56:15] itself. One of the last pieces is just set up as simple router. It doesn’t do all the bells and whistles we just talked about but it get you exactly what Ward just said. Go from page A to page B and at least get that working. There’s not a lot of code to do that, it’s quite simple actually.

Ward:         Then you learn about child routes. You got you’re A and B but when you get to B, B is actually made of B1, B2, B3, you learn how to do that. B is on little sub routing universe that just nicely contains to the need of B. You learn how to do that. That’s probably one of the things you learn next and then you start worrying about guards and what it takes to get to a page and what it takes to leave. There’s a nice learning path for acquiring your router knowledge.

John: I want to sum up with one thing because I think this is a point that works, pointing out. When we did eager loading vs lazy loading in Angular 1.0, it was a big effort. In Angular 2.0, if you want to take an eagerly loaded route, for an area, a feature like the sales or shopping feature we talked about. You want to turn it to lazy loading, guess how many lines of code have to change, Chuck.

Charles: How many? One?

John: One. That’s it.

Charles: That is so slick.

John: It is slick.

Charles: I’m sorry but it’s so slick. It’s like, “Well, I don’t wanted to load right away.” Okay. It doesn’t have to.

John: Yeah, it’s really beautiful. I actually didn’t believe it. The first time I did it because Ward is telling me this, it’s month ago, and the router came out over the summer. When I was looking at this, I had an eager loader router and I’m like, “I want to use lazy loading.” He goes, “Okay, go try this.” I started for five minutes, there’s no way this is going to do this. I remember the pain in Angular 1.0 to get this to work. You flip the switch and it loads lazily and you’re like, “Oh it smokes, that was awesome.”

Ward: What this shows by the way is, we start to say, “I want to build and make those decisions. I’m sure I want to make today but I want to make them.” what it does require is that you start thinking about your application in terms of work flows and the side loads that we’re mentioning earlier so that you start grouping functionality that belong together, that behave naturally. That’s something that I feel like a solid architect, for me, I don’t know about to you, John.

I know that our friend of dumpster fire fame has suggested that you should just throw all of your code in one big pot and watch that pot. Then it’s not one. You don’t have any basis for just setting one line and having it lazy load because you have to make a decision. Personally, I like to design my app in terms of the work flows that are involved and put each of those workflows in its own module. That’s your preferences.

John: It is. I’ll go more on Joe’s side of this too. We’ve had many deep conversations on this. Since he’s not here to defend it, I’ll mention his points. I do agree with this. You also don’t want to have, if you’ve got 50 routes in your app, you don’t want to have 50 modules either probably. You want to logically break these things up into areas or groups. Like Ward and I just saying, it might have like a splash page and a shopping page and an account app and page. You wouldn’t have one for every single page. You could do it but just because you can, you shouldn’t.

Ward: You just want to think about your app as if you were going to deviate functionality up and give it to different themes. You may be the only person designing the whole app but imagine you were looking at it and saying either well, I want to give it to different themes or you were imagining that you had different constituencies, different kinds of users. How do those users want to consume your app if they think of it as having, I do one set of work over here and I do another set of work over there, that’s a pretty strong clue that you want to separate that functionality into different modules.

Charles: I’m with you guys on breaking it up according to concern. Unless it’s just a tiny app or it’s kind of silly to break it up. It just makes a ton of sense of me to just go, “Okay, I’m going to go over here or work on this or go over there and work on that.”

Ward: I think one of the good news pieces out of Angular 2.0 though is that, you can get it wrong at the start. You really can. Maybe because John and I have done this so many times that we’ve looked at something we’ve written and said, “Well, we’d like to split that in two or that didn’t really belong there, that goes over there.” it just doesn’t feel that hard to come back and make those decisions when they’re clear to us and to shuffle the deck.

John: I think what makes that easier, to be honest with you is, when I organized my app by laying in a folder structure which we can probably have a whole show on, when I organized my app and my files in a way that makes sense to me, whatever the way it is for you, you too. It makes it easier to decide later how to refactor. When you literally have a folder with 10 million things in it, it’s hard to kind of figured that kind of stuff out, for me at least.

But however it is for you to reason over your app, I think it make sense to try to structurally organize your code in your head in the app, whatever tool you use and then figure out, okay, how do I route here? How do I edit this other feature? How do I add new components or directives? When you think about your app in that kind of a way, it makes it easy to kinda organize it.

Ward: Yeah. I guess there’s not much you can do when somebody delivers that 2,000 line component at you. We know that’s going to happen because in every other technology we’ve ever seen, somebody has written that 2,000 or 20,000 line view. That’s a challenge for everybody. There’s just so little reason these days to make that mistake.

John: I’ll leave you with one quote that’s from a guy that I worked with, we’ll name him anonymous. He said just last week to our team, somebody who’s complaining about a technology and they are wrongfully accusing the technology for the flaw and he says, “You know what, I could write crap in any language. C Sharp, Java, JavaScript, it doesn’t matter what it is.” When you’re designing your apps, it doesn’t matter what you’re doing, I think there’s standard coding principles that go into any language and you can read any of books to figure them out.

Charles: True, very true.

Ward: Can you like crap in Ruby?

Charles: Yeah but it’s pretty.

John: We all know Chuck love his Ruby.

Ward: If Joe would here, he would tell us that you cannot write crap in Elm.

John: I need to dive into Elm because I need to see, I think Elm is going to slap my wrist if I do it wrong.

Ward: It probably has a three hundred line max. Simply refuses the compile of file. You know, that wouldn’t be such a bad idea. What if our language has refused to compile any file that had a three hundred and more lines in it?

John: That’s an easy problem to solve. We solved that in my office. If it’s over certain limit, we don’t let it go to the CI process.

Ward: There you go.

Charles: Cool. Are we about ready for picks?

John: Yes ma’am.

Charles: Thanks, John. Alright, let’s go and do some picks. John, do you want to start us off?

John: Oh, certainly, why not. I was going to pick the San Francisco 49ers because I wanted to hear Ward cry a little bit.

Ward: That is so painful. My poor team.

Charles: I was going to say that. That’s one of those squads of stormtroopers in Star Wars, right?

John: Yeah. But instead, I’m actually going to pick another team that’s close to our Ward right now, that’s the Oakland Raiders. I’ve been thoroughly impressed with watching them in the [01:04:43] this year. Watching Carr quarterback progress, they have a good team going on and it might not make it all the way but they should be proud of themselves and I know people in the Raider nation have long waited to have a good team again.

Ward:              That one, it’s a whole collection of thugs. You bring your family too. The Raiders used to have a reputation for not being a family friendly but I would say [01:05:13] has overall cleaned up the thug at least in that regard.

John:               I’m going to attack on Ward because I know you love this topic. There are some good movies that have just come out or coming out. One of which I saw with my kids is last week, it’s called Fantastic Beasts, it’s a harry potter prequel. I guess you’d call it. It was very good. It was actually more adult focused. It wasn’t about a bunch of kids this time. It was about adults in America. We really enjoyed it. It was a fun movie to watch. It has some good surprise, people in it, won’t spoil anything for people.

There’s another movie coming out called Rogue One which is a Star Wars movie, which I know Ward is dying to see. I think he’s coming to Orlando to see me soon, let’s take him to see that movie when it comes.

Ward:              They’ll have to shackle me.

John:               But if you like books, I have some books too. I’m actually reading a book called Catalyst which is a prequel to Rogue One, actually. I’m doing audiobook of it, all the way to work in the morning. It’s actually talking about Galen Erso who is the guy who basically designed the Death Star in Star Wars which you’ll learn more about if you go see Rogue One. It’s a cool book. Learning quiet about that and how it all came about.

Charles:          Nice. How about you, Ward?

Ward:             I saw a small picture last week that I’d like to talk about, that I think is going to be great for kids, especially young girls. It’s called the Eagle Huntress. I can’t tell if it’s a documentary or one of those fictionalized documentary things. It’s about a sport in Mongolia that involves hunting, using an eagle to hunt in the step where it’s freaking 20 degrees to 40 degrees below. It’s a long tradition. This movie is organized around the young girl. It’s an all male tradition in Mongolia but this young girl wants to follow in his father’s footsteps and become an eagle huntress. She gets her eagle, all this stuff. You know how it’s going to turn out. But nonetheless, you’re watching these lives in the Mongolia. This wonderful faces, this girl’s face is radiant throughout and she does stuff that you can’t imagine as you would being doing. It’s really a hard life to us but she’s willing to it. Riding her pony around like it’s a sports car and hunting and flying these eagles and they, I have to say the costumes are magnificent, the furs and stuff. It’s a great story and it’s one of triumph for kids that want to do something that everybody thinks they shouldn’t be able to do. Take your kids to it. Eagle Huntress.

Charles:           Cool. I’m going to jump in with a few picks. I’ve been travelling the last week or so. I am really excited about some of the stuff that I was able to go do and see. First off, I went to Nashville. I was actually out to the place called Evins Mill for three days and that was gorgeous, gorgeous place just out of the countryside in Tennessee. I had a great time.

I’m going to pick the person who organizes, his name is Aaron Walker. He’s from Nashville and he’s a multimillionaire. He helps guys like me do better in business and life. I’m just going to say that it’s been pretty amazing. He only works with men, I know that that bothers some people but I’ve benefited greatly from being associated with him. He does Facebook live everyday. If you want to get on Facebook and follow him, you can do that. He also has a community for men that you can go join. If you go viewfromthetop.com, you should be able to find all the information about that and about his coaching and things like that.

I was also in New York City, had a great time there as well. I was able to go out and see the Statue of Liberty and Ellis Island and that it definitely worth it. The ferry ride was I think $19. I actually got a city pass. If you go to New York City, I recommend that you get that because it’s actually much cheaper and allows you to see all kinds of attractions and stuff. Definitely get that. I went to the Empire State building, I went to Ripley’s Believe it or Not and I went to the 911 Tribute Center where they had a whole bunch of stuff from the World Trade Center that came down in 2001. Anyway, it went all the way from exciting and unbelievable to solemn and stirring but it was a great trip.

Honorable mention of Microsoft, they actually flew AJ O’Neal and I from JavaScript Jabber and Andrew and Jaim from the Iphreaks show out so that could interview some of their folks and we actually interviewed, or the Iphreaks Show, they interviewed one of their corporate vice presidents. Pretty high up in the organization about some of the initiatives there at Microsoft and how they affect developers. It was overall a great experience. I’m going to pick that as well. I just mention.

If you want to go see what Microsoft’s up to, go look for the Microsoft Connect Keynote. The Scott got three Keynote with hour so long and then Scott hands someone after that for another hour. Anyway, they were fun, they were interesting and entertaining just to see what they were doing. Talked a lot about tooling for all kinds of developers, they had visual studio code, demos. Chris Diaz who we’ve had on the show talking about Visual Studio code did a demo. It was a lot of fun, a lot of great stuff.

You can also go check out the episodes where we interviewed some of Microsoft’s folks over at javascriptjabber.com and iphreaksshow.com. Definitely go check those out as well. I’m also looking forward to Rogue One. I think it comes out two days after my birthday. We always go see a movie and get dinner for my birthday and I think that’s what we’re going to go do.

Ward:             That’s good. I’m swinging back to New York for a second. I’m suddenly reminded that I was arrested for trespassing on Ellis Island.

John:              Why is this not surprising?

Ward:             We canoed from New Jersey over there before they had rebuilt it up, it was totally dilapidated. We circled the Statue of Liberty and canoes and then landed at Ellis Island, we’re immediately arrested. You haven’t lived until you’ve been arrested at Ellis Island.

Charles: That was just a cover story for your immigration right?

Ward:             Yeah, I’m really that old. I immigrated. It’s a great place. If you can afford the ferry for $19, [01:12:37] ferry is free. It doesn’t [01:12:40] but you can see everything and it’s a great trip.

Charles:          Yeah, I actually went and visited Flatiron School as well which is a coding school over there. The guy there, he’s like, “My parents came.” I said, “We’re all going all to [01:12:52] ferry, you’re getting the [01:12:54] tour to see the Statue of Liberty.” Alright, let’s go ahead and wrap this one up. Thank you both for being here and we’ll catch you all next week.

x