Video details

Revisiting a Reactive Router with Ivy | Brandon Roberts


Brandon Roberts

The release of Angular Ivy opens up new possibilities of routing in Angular. Optional NgModules, lazy loading components, and dynamically creating components on the fly. The Angular Router is very powerful already, but what if we took a fresh look at a reactive router in this new world. This talk talks about the history of the router, and the process of building a new reactive router.
Watch all the ng-conf: Hardwired presentations/videos at
ng-conf is a three-day Angular conference focused on delivering the highest quality training in the Angular JavaScript framework. 1500+ developers from across the globe converge on Salt Lake City, UT every year to attend talks and workshops by the Angular team and community experts.
ng-conf: Hardwired is brought to you by: - - -
Follow us on twitter Official Website:


And so this is revisiting a reactive, rather, and I've been wanting to give this talk for a while and research this idea for a long time, so I'm pretty excited about finally being able to give this talk. So my name is Brandon Roberts, you can follow me on Twitter at Brandon T. Roberts or our tweet about gifts that we got, gifts that talk about sports. And sometimes I'd like you to eat some barbecue because that's really my thing. I'm a software engineer right now. I'll be fine, I'll talk about them more in a second. I'm also a DJ and Angular and a maintainer on the injury project. So as I mentioned before, I work I know well and we love what we do, we help software development teams build large applications to better away. We offer consulting, engineering and training. We offer best practices. I have deep knowledge and angular engineering and other frameworks. So if you need some help, just reach out to us. Look at our services page, take a look at our source project index that you probably heard about and just talk to us. So let's get into the agenda here, so I'm going to talk about kind of the history of rooters and negligees and angular. This is kind of, I think. We talk about HIV and how it applies to routing and the things that I came across and building a building a router. So who's ready to hear some hot takes? Nobody. OK, but I do want to give some shout outs, though, to the people who have entertained my ideas about rooting along the way. And some of those people are bringing forward. Of course, Victor sat in on our all team, Victor Machain and Jason Hadyn, just to name a few. Sure. There are others who came along the way and a shout out Rob also. Right. Well. So first, I want to talk about angular JS rooters, because from my experience, a lot of angular developers may have started using using an after version 2.0. So they are a couple of routers primarily used in angular J.S.. There's the first one in England, Jess, which is a module named ingroup, and this module provides you with an interview directive to render Ausmus and in most cases, you only had ever had one interview in the entire application. So there's this one has been used. But if you're like me and you built a few angular JS applications you most likely use are router. You are Rueter gave you a review and had more flexibility in languages applications, almost like a community project. You are right, it was built on top of promises because that's what we did in ANGULAR just right here, support for multiple owlets resolvers and guards' life cycle events. And it was just about rendering components. Next to cover the Angola two, as it was called back then, router, which was being developed at the time, which is probably around around about the time I got involved with using a building things with angular. So the Engelhard to Rouda had a lot of interesting goals, it was written primarily using promises as its primary interface and I know what you're thinking. We're supposed to be in this reactive land where observables are becoming more prominent. But one interesting to note is that that Rootes deal was using observables underneath. It just wasn't exposing a publicly. So back to where we were USA's problems is it had a tree of rooters at each level in the hierarchy as opposed to one single ruler. It was also just about component's as there were no injuries at the time. And it was going to be back ported to anchorages. Along while this was happening, we were looking at, you know, because, of course, we all like to build things and of course, me and Mike, Mike Rann are addicted to building routers. Mike and myself built injectivity independent of the angular router because we wanted to take a fresh look at reactive with reactive. So, of course, using observables and for everything from route traversal to route rams and Rams, support for links are out of use and it was just about loading components. And you can see how these these things may sound familiar to you. So if we fast forward to English router version three, the team wanted to make sure it kind of fit. Look at this. What we were doing and wanted to make the angler out of more reactive to fit into this new world. So you know what happened next, right, him was like, hey, that's a pretty cool, right, right. You got there and then I let you fill in the blank here. But if we're being serious about it, we met we did meet with the English team about the shooter and they appreciated the concepts that we the concepts and that we took in that approach and wanted to follow those kind of steps into the framework. So me, my Victus, Afghan and others went back to the drawing board and redesign the angular router with the concepts of injuries rather than mine, so enjoy. Fruita goes to Vladivostok and comes, gets a fresh rebill and comes back as angular rueter. All these repos still exist today, so if you want to go check them out and dig deeper, they're still there. The one thing that was added with the integration of injuries router as the angular router was engy module's. So one thing to note, if you ever wondered why there was never an angular version three, now, you know, Angular Rueter was reintroduced in version four and is what most of you know today. So now that we have more context about the history of the rooters and angular JS and the writers upcoming and angular as, fast forward to today. And that idea has landed officially and now we can really start to rethink some of the things I think some of these ideas and angular rather mean one of them. So I won't rehash completely rehash all the new things, and I'd be as much in care. And Alex did an excellent job talking about those. Well, just cover them in general. I will, of course, bring the new rendering engine where components only bring in what they need. There's this concept of locality where they have the instructions that they need at runtime. And also has a brand new power with many new features, including better type checking to go along with the new rendering engine with ATV enabled by default. So the question is, what does this do for what I do for routing angular and how can we leverage that for a fresh look at a reactive Rueter? So feeling does me for a second. Let's talk about the dream and of as far as rooters are concerned. So prior to IVI, when I talked about the current rounds of we're looking at the roads and bridges and even the earlier ones and Angola, they were all of our components and modules. And Laveaux versus Angular, we're all about injectors because inject the energy modules were the way that you got these injectors and the context needed for a compilation of components. But with Ivy, we're moving towards a future where you can primarily work with energy modules being optional and we can rely more on the components that have an injector hierarchy themselves and the components have the context themselves needed for their lifecycle. So we can get back to a place where routing and angular is just about using components again, which simplifies the mental model for new users of antibiotics as well as experience, which is what we want. Right. In a reactive, rather, I mean, what does that actually mean? What what do we mean when we say it needs to be reactive? And I heard this time from Rob and I agree with this term, the term is observable and observable out. We want extremes. We want extremes of Earles to surrounding extremes of euros to be transform our map into a stream of components. We also need streams of information from the router for things like wraparounds, inquiry programs. Any active role? So once again, you've seen this picture before from Wal-Mart, and it still remains true today in my mind for reactivity, everything is a strain. So, as you know, at least with the current, the anger, the root of it, there are many things that we need to consider when if we want to be able to react router that's reactive. But we'll just keep this going to a few things for this top. So do we need we need a way to interact with the history with API, which is of course worth driving, driving unknowability, single paid apps, apps provided by the browser to control the history stack. We need, of course, the router to have the content that global information, including a stream of your changes. You need something the faster you drill into a structure that we can digest. Unlike say that global information such as Kuwait ramps or the past a fragment. A way to register rallies without matching and rendering of components. So as I mentioned before in the history, API gives us where we want to listen for your changes, as well as browser events such as push statements. So the angular location service gives us some of these things already out of the box and you get to interact with the browser API so we can leverage that. So it's not a routine service, we would inject the location service and listen to your real changes that we push through the framework and events that happen through the browser APIs that push those in as part of our stream. Next, we're going to talk about how we passed the euro and I'm a big proponent of using Web more Web APIs, and there's a relatively new Eurail Web API for passing euros, according to the SPIK. So it gives us less code. We have to bundle into application because it can be used in the browser. And of course, it could be extended for configure, for extensibility. And it gives information like the path where it ramps and the fragment. So this is just a small example of how we could pass our location to this Web API and return that information back so that we can use it in our group matching. So, as I mentioned, this is all about components, so let's take a declarative approach at defining a router and roots with this way. Because the water contains roots and the current activated root, and if we're thinking of this in terms of streams, we want to take the latest euro and our set of roots. We want to find a match and set that root as active. So there's a component for that. Also, we want to register these routes using components, also the component parts to important parts about the path and the component that we want to bind to. And there are many different strategies to use to match the current path of euro with the route. But in my research and from previous experiments, I chose path speed because it has a powerful pattern matching under the. So to register the route, you dropped the right component inside the router, inside the contents of the router component in the rod is registered with this parent and able to match roots as they are past. So each wants the rooters listening to the changes and it finds a match, each route itself has a place or an outlet to render that component if it's a match. And this is where Abby comes in, we have this component here and we have an outlet for it and is pretty much as simple as using the render component to render component API and angular. You see the symbol in. In the slide here, because there's a semiprivate API that will become public, hopefully in the future. But it's still a work in progress. Also, if we wanted to use root programs for a particular route to pass to the component, this just as the same way as passing that to the path and letting it match on that. So we have a router, we have our roots, and we still use that first match winning strategy here. If we look at the Dow component, we can see some of the streams that we can get out of this, the rapporteur, MS, is a stream on its own because everything is a stream. The router also contains streams of global information, such the euro group and the hash so that we can compose and combine these strands together easily within a component. Also want to talk about Lindsay Lohan, because dynamically loads, dynamically loading components has become much simpler with Abby. We take another look at the rap component here, which is buying to a component itself combined to the component itself. And if we were looking using an Anglo router, you could use low children because we're so used to using energy modules or want to get back to using components and use low component instead. So to show what that looks like, we have been to a variable in the component class, that's low component. And then the component class itself, because Ivy lets us take advantage of that locality, the component has everything it needs to render and we can render that dynamically. And we've all written this before to Whybrow providers. So you can imagine the future to where we're just using the root providers itself to inject the interests of the router or a with the new injectable APIs, we might not even have to just drop our component into our template and go forward. So as I mentioned here, there are still some things I didn't cover, things like guards and resolvers, if we're taking a fresh look at this, are it strange that can be pushed down into the component? Because I want to drive home that we're keeping this idea of components and streams in the front of our minds. So to recap, you talked about Angler James rooters and angler Josh as an angler rooters talked about what Ivey is and how it enables the dream of getting back to just components for routing. We talk about what being reactive means, observable in an observable out and covered idea of what a declarative reactive router could look like. If you like to see a demo of what I discussed during this talk, visit to GitHub Repo and try it out, I'm really interested in getting some more feedback on this because I would like to see this become a real thing. A couple of last things we mentioned he announced earlier in the year is coming now is coming to me two days, 20 speakers, November 5th and 6th, not just about state management, but also the deep dive topics on reactor Bangalter would be covered. You can find more accommodating Judge Daryle and tickets are currently on sale. And also, we just lost for hour while we just launched an X cloud, and this helps you speed up your ability at times by up to 10x so you can sign up today and get a free 24 hour time saving coupon. You can find out more next hour. Thank you for having.