Video details

The State of NgRx | Mike Ryan | ng-conf: Hardwired

Angular
06.15.2020
English

Mike Ryan

Get ALL the ng-conf: Hardwired videos for FREE at www.videos.ng-conf.org.
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.
Follow us on twitter https://twitter.com/ngconf Official Website: https://www.ng-conf.org/

Transcript

So I'm really excited about giving sort of the state of NJ our exit this year, energy costs. But first, let me introduce myself. My name is Mike Ryan. You can follow me on Twitter and get Hubb at Micron's of. I'm a software architect at Sun Apps, where I'm working on making North American manufacturing more sustainable. I'm also a Google developer, expert and regular web technologies. And I am one of the co creators of indirects. I want to talk about Jarek's four minutes, and what I want to do is I want to start off by reintroducing indirects to all of you, because you get a little bit of history with Hendricks's. It might help you make sense of where indirects is going. So indirects was founded by, at the time, angular team member Rob Wormald, and the mission was to build out a reactivity layer for Anula. That's what the name comes from, ANGULAR plus our Express Gierek. The first library that we created was one that made us famous. And that was store. At this point, history store was really just a reactive implementation of read books. There's only the one library, and it was built to be completely compatible with Redux from Reacts Land, but built with observables underneath of it. Library number two was a router. You saw Brandon Roberts talk yesterday about reactive routing, dirty, a little from the history of this project. I won't go into too much, but the goal was to create a routing API that was ergonomic to use essence of the angular router at the time. It was also fully reactive, embraced observables underneath the hood. And the third library that we had way back in the day was the one that you are least likely to have actually heard of at this point. I was in Jericho at. It was reactive library that wrapped the index API available on browsers. So you kind of think of it being like superpowered local store. So what happened, these libraries for many of these, you're going to say, well, I only knew about Andrex estate management, so I didn't know it did all these things. Well, the router grew up, the router became the angular router at the same time, Straw really started to pick up in popularity. Now, I like to say that stores really, really popular because it was borrowing so many great ideas from other languages and ecosystems. But I also kind of need to admit that it was really, really getting popular because it was the only state management library for ANGULAR for a long, long time. So we had to really focus our resources on the store and the router to help grow them and make them successful. And we had to let DBI kind of fade in the background then really desperate. Back then injects, he was much smaller. Let's scrap. We had to be a lot more selective with what resources we had. So we let TV go to the background router, Letha org. And that really just left us with store. And it stayed this way for nearly three years. So I'm not terribly surprised that when someone says indirects, they think about our state management solution first. But over the past year, we've begun to stretch back into our original mission and we're trying to explore other ways. Make the angular Eco-System or react. So before I get into all the new goodness that we're bringing to you, I can't well, look back at twenty nineteen. By the numbers and see how the products doing. Based on our stats for in Gericke CYO, over three hundred and fifty thousand developers are using some library within the indirects ecosystem. Altogether, developers have downloaded in Gericke store, just store over twelve million times in twenty nineteen alone and over twenty five million times across the lifetime of the library. These two numbers represent 30 percent growth for the indirects project. That's nearly twice as fast as the growth rate for Angular. That means more and more angular developers are getting on board with Engineer X and using some of the libraries that we've published underneath the platform. We're also seeing big adoption within the enterprise space, within Google alone. Over 300 of the angular apps rely on indirects for their state management solution. And we've kind of built this up, the support of our community. We're proud that in twenty nineteen. Over one hundred contributors from the community helped make indirects as big as it is today. That's our contribution story that don't talk about for a second, because we could have pulled off these amazing numbers with a little help from a few of our friends. First off, I just want to highlight the team that builds and Durex sometimes a little fun to see the faces behind the project. And in particular, I want to highlight these for folks, because in the past year we've added Alex von Ward and West to the indirects. Alex is a software engineer, Firebase and Google, and he brings a lot of great architectural mindset to the project. He's really helped shape the technical direction of indirects since joining the team. He's actually the maintainer of indirects within Google. So he helped support indirects for the 300 plus applications I mentioned. And he brings all that perspective back to indirects to help us succeed at an enormous. Donna Ward brought us Durex data, and I'm excited to share a few slides about that project. It's a minute. And lastly, Wes. He's a software engineer at Norwell. West's creates a lot of great content friends direct and spends his time helping developers be successful. But. What I like about this team is the vibrancy of ways in which these members have gone on to the team. It shows that there is a path for you to get involved with the project. If you're excited about trying to help us out, whether it's being a great developer advocate for your ex by creating blog posts, giving talks and helping developers of meet ups where you're contributing architectural guidance or you actually writing code, there is a path to get involved this project and be a member of our team. And so many of you have contributed GoED. There are just a few of the top contributors to Anjar X within the past year. Each of these bases here have helped deliver Anjar X over the past year. And we couldn't be more proud of how many people we get. So that minds, I think 20, 20 is going to be the year of injera X getting back to it. We're going to start embracing reactivity in more ways than just a manager. What I wanna do is I want to introduce to you indirects in three categories. How is indirects tackling state management? How is indirects dealing with reactive data and how is Energetics pushing observables into the view layer? First in Gericke State. Indirects state is focused on providing integrase, enterprise grade state management and side-effect isolation reactive Anula agent. It's comprised of five libraries or affects entity, router, store and the store of tools. And we're really excited that we released Version nine last month bringing full support for angular Ivy into our state management solution. The sun's the last energy costs. What's new? What do we change within these tape management libraries? Well, I think the thing that I'm most excited about are the new creator functions that improve type safety and reduce the amount of code you have to author successful within Jaric State. Let's take a look at a few of these new creator functions and see how they reduce. So before an engineer acts, you'd have to write a lot of code just to get started with actions. This was TOTUS appointment. His actions really are the fuel of the indirect ship. They're critical to getting an indirect state application be successful. And if you're asking developers to write a ton of code, just for the most critical part, the developers are immediately going to be turned off by our solution. With a new creator functions the amount of code you have to author right actions is far reduced. Now you can focus on declaring exactly what your actions are and avoid a lot of the ceremony we had together last. Previous version it types in your applications. We brought the same code productions to producers, so beforehand, do you again, you had to have a lot of ceremony types, you had to use these big switch statements to become hard to make and over time. And as overall, a lot of code, a lot of ways was developers could hurt themselves here. So the new creator functions so much that code's gone. We can take care of that for you. Again, letting you focus on the business logic of your and your expectation. When it comes to effects, not much has changed here. We've introduced a creator function and it's not going to reduce a lot of code here. But we did use this as an opportunity to make the API more consistent with the rest of indirect state. And also to improve type. For example, here in this example effects, you might notice that there is a bit of a bug on this line where I did not map the result. One of my observable calls back in action in the previous format and the previous API is we couldn't detect this air forward until runtime, but with a new create effect helper, we can raise it. Type error way earlier for you and help you get this six. So if you've avoided in Gericke State due to code volume, I'd highly suggest taking another look. The team's done a lot of great work in reducing how much code you have to write to be successful. Then Gericke State. Speaking of success, we've also introduced this idea of strict runtime check. And these strict runtime checks are really there to help developers adhere here, the architectural constraints in jokes relies on applications fast and easy to debug. Well, there are a few runtime checks that are now enabled for you when you start using an gericke state. The first is a mutability checks indirects wants to make sure that you are not mutating state or actions when you're implementing the architecture. This is so you can leverage things like the on change or the on push change protection strategy. Once one thing, your application. We also have checks now to verify that your state is serializable to serialize ability here means that we can run. Jason does shrink a file on it. And then Jason got pass on it again and get back the same value that we originally serialized. And this is important. So we can show you your application state and things like the redux step tools help you get insight into your height and how your application is running. And lastly, we have runtime checks now for change in. So developers sometimes get caught up with Zone J.S., they might accidentally dispatch an action in a context that's not being watched by Zone S leading to them to be frustrated when they've dispatched an action. They've reduced it, but their UI is just not up. So now in Gericke state will warn you if you dispatch an action and you aren't in zone day as. You can configure these in your route application module so you can opt in to or opt out of any of these strict runtime checks. And again, they're just there to help you be successful. So that's a brief update on an gericke state. Now, let's for turn our attention to in Jarek's data. Indirects data is focused on abstracting the data beat of your view layer away from the mechanics of actually retrieving that data. Today, there's only one library and the data family, and that is in Durex data. And we're really excited to bring in generic data into the family. As I mentioned at the top, this is a library created by John Poplin Ward Bill. And for a while it existed independently of platform. Since then, we've brought Andrex data into our Monov rebo. We now publish it. All right, the indirects name, we give it all the love and attention we give. Well, brother Jarek's libraries. And the goal, this library, is to really separate what data the client needs from how you retrieve it. Let's take a look at a very bare bones component to get an idea what I mean here. This is a component that's going to consume a list of authors. We can tell it consumes list of authors because declares that as part of the data that will be available on the template. This is the data that this component needs. It needs a list of authors. And in the constructor, we can see that we are wiring this up using a call to some API. This is the mechanism of how do we actually get that data? Now, the indirect state, we can actually decouple these two. We can have components, just consume data, not have to rely on the mechanics of getting that data into application. So in Gerrick State, the way you do this is first you declare some actions, you have an action for entering. Maybe the authors page. And then an action. We're getting all the authors successfully with your offers. A guy. And in your author's component, you would select out the list of authors from the store and you'd say, hey, someone's entered the author's page relying on what's called an effect to step in. Listen for that interaction and actually make that API call for you. So this strategy allows you to decouple how you retrieve data from the way you're consuming data. But that was kind of a lot of code. And so what we've found is that in Gericke state may not scale well for really data driven applications that maybe have 50 plus entities. It's simply too much code to have to write. If you're dealing with a really broad domain. So enjoy your status steps in, and it offers an alternative to abstracts away the mechanics of how data is fetched. But it does it in a much different fashion. So the fear to rebuild that same application using indirects data will start by setting up what's called an end, a collection service. So here I've built an essay collection service for all of my authors on my application. You can see that I'm extending a base class and then on my constructor, I'm giving it just enough config that we can use all the defaults so that energy, Eric's data. What's really cool about this is because we're relying on those faults within it, within indirect data. This is going to scaffold out in the background. All the methods and services we need to start interacting with our API. So from here, we can take this entity collection service and we can inject it into our authors component. We can read an observable of those entities right off of the service and at any collection service will expose a get all method for us. NORAD knows how to speak to our API and that's it. That's all the code I have to write. And what's really great about this is that it's completely built on top of it, Jaric State, so it's reactive underneath the hood. It's performance. It's dealing with immutable data structures. But you don't need to use indirect state to make use of Anjar X data. They play great together. So if you want to leverage the benefits of both in Gericke data and in your state state within your application, you can. But if you just wanna use indirects data with some other kind of state management solution, that's totally fine to. So now we've looked at in Jarek's data. Let's talk about the newest part of the Andrex family, and that's in Durex view. View right now has what I'd say to libraries in its though I should mention that these are not libraries that have actually been published yet. The first is in Jarek's components. If you've not seen my talk at Angular Connect. About rethinking reactivity with Ivy. I would strongly recommend it gives a really detailed introduction into injects component. What we're trying to accomplish with this library. And then yesterday, Brandon Roberts, to talk about reactive routing and how we might rethink parts of that, too, in the Ivy landscape. I'd recommend going back and watching his talk to get up to date on how that library works. But for now, I want to give you an update on component. Where is it at? And whereas it came in the past six month. Blush to warn you that we're really at the bleeding edge of Anjar X, so you can use injects component, but it's not published NPM. We're already publishing Night Liesje of it. So you can assume those knight. At least we have some documentation published. Mandrax video. Don't start bargaining it. And I know that there've been a few twitch streamers like Mike Hardington that have been going through using this library. You want to start digging into some samples? I would say. Within your rights component, we're trying to rethink how change detection works for angular applications. So the phenomenologically change detection is it is an element of the angular framework in which ANGULAR is going to figure out what data or state and your app has changed and then make that determination if there was changes to that data on how to update. Why? In an angular app zone, G.S. is the default mechanism. Angular uses to run change detection. Zone J.S. Monkey patches all of the ways and a async API is that are available in the browser so that when you're angular app communicates with one, those async API is Aylor says, hey, I know they've reached out, maybe made a network request, maybe they open up a web connection. We should check to see if we need to run change detection. But we found that at scale there are a few flaws with this approach versus that zone, J.S. isn't going to have patch. One hundred percent of the browser, the. So as new and experimental like Peizer available to us as Web developers to use Doanh, JSC may not be up to date enough to have actually patched those new guys. Additionally, if libraries are using native async away within the browser, Jass is going to have a hard time actually patching and understanding when those libraries have done something interesting. Finally, if you're using a library that has some kind of scheduling built in, like our express can be easy to accidentally escape zones and start to use it. Async API is that Angular is not aware that you're going to call. So we wanted to do is want to say, hey, can we use observables as our mechanism for determining when to run? Infection? So today, injects component has two API eyes. Let's take a look at them. The first API tries to address the async. Casing pipe and angular as a mechanism of allowing you to use observable values directly in the template. But we think that there could be a few improvements to where the aging pipe works. So what we're gonna do is we're going to use a drop in replacement from the Interex component package called Indirects Bush. Like I said, injects push is a drop in replacement for the aging pipe. It's going to do the same thing. It's going to let you use values that wrapped up in unobservable. But it's going to differ in that the push pipe, unlike the async pipe, will actually schedule change detection for you when you push new values through it. Well, what this means is that if you have modeled your application state using observables and you rely on a push pipe throughout your entire angular app, there's a chance you could be successful in using an angular app without zone gests altogether because you've modeled your app in such a way that you can landform angular and observable API. Hey, my data has changed. And let the push pipe schedule change attention for you. Our second API tries to address a similar problem. If you've used the async pipe before, you may have run to the situation where you wanted to use a value wrapped up in an observable in multiple places to your template, it leads to some cumbersome syntax repeating yourself, often using the async pipe. And well and good developers have been a little clever and they found a workaround for this. It turns out you can use NGF to unwrap that value and then you can start to use that value in your template. This has become a couple of gotchas. First, if the observable you're passing into NGF happens contain a false value like false or undefined or null. That's actually going to trigger the other behavior of NGF where we'll show this element at all, preventing you from using observables that might contain these types of values. This way. The second is that NGF doesn't let you handle things like the completion notification or air notification that observables might be coming off. So that's where indirects let comes in. It's a structural directive that works kind of like NGF, except it's not going to show Rawhide content in Cherrix let exists just to help you unwrap values. You pass an unobservable and then you can declare a template variable that points to the latest value coming out of that observer. You can then use that in your template, just as you'd expect, adds additional hooks for using the completion and notifications coming off the observable Assam. So check out the documentation. If you wanna see the full capabilities of indirects, let. Literally Kozelek directive, just like the push pipe, is that not only is it going to help you use observable values, but it too will run change detection for you. So now, through a combination of the LED directive and the push pipe, we're trying to make it as ergonomic and friendly as possible for you to use observables and your templates and to hopefully unlock a developer path for you to use an alternative change detection strategy from Zohn J.S.. This is just the beginning for indirects component. In order to be truly successful, we have to start thinking about ways to handle things like local, state or components. What are you maybe don't want to rely on a global state management solution like Gerrick State? We're also have some ideas on how to expand the injects component API to make even more use cases easier to use. If you want to do them, react. There's a brief update on state data and view and Jerick state continues to be a robust enterprise grade state management solution, granular applications. We're continuing to improve it by introducing new ways, few to build state management code that is wholly smaller in code size or type safe and helps you implement the architecture successfully. And Jarek's data is our newest collection of libraries to help you handle things like data retrieval. How do you get data from your API? It can play great within Gericke state or you can use it on its own. And lastly, enjoy your view. It's our collection of libraries that we're pushing out this year. It's going to help you use observables in your regular templates and explore ways to do change detection without Zohn J.S.. Be on these three projects. We've also got a fourth one. I'm sure you all heard about it a couple of times at the conference, but I'm going to mention it again. We're holding a conference. It's called Indirects Confidence this November. If you're able to do so. So definite. Come check it out. Completed a community organ organized. And we'll be excited to see you there. So a few thank you's. Thank you to the team for putting together all these great releases this past year and continue to build out the platform. Thank you to our sponsors, bugs that wear Oasis Digital Narwhal. Lucas Rubell Key. Karradah. Your financial support has really helped our project. And lastly, most importantly, thank you to our community. We really appreciate all the value. You lied to us, whether you're creating blog posts, sharing articles in intox, contributing code to help make joins us with that. Thank you all. I hope you have a great rest of.