These ARE the Angular tips you are looking for | John Papa

[Music] how y'all doing good I got the loud boys up front up here oh my i love the t-shirts folks i don't know if you can all see that but they all the t-shirts say i love Dan wah lean yes that's what you get for trying to play a joke on me so welcome ball to ng cough really excited to be here this year and as we were preparing talks I had a lot of things that I wanted to talk about but I thought about the people in this room first and all of you think about the combined brainpower in this room and how much angular you have all written together collectively I mean give yourselves a round of applause right here I mean you guys have done so much and think about all the problems and challenges you've overcome I mean that's why we do this right if it was easy everybody would do it but it's fun because you get to try things you're running the challenges you work with your friends if you have friends and then you can work with him and kind of solve the problems if you don't Dan's willing to be yours so what I'd like to talk about today was the people who are going to these challenges sometimes we get new people to angular and they have to figure out how do we solve these same problems that all of these experts are solving and even the experts end up having problems as well so let's talk about today three specific problems that you can have when you're working with angular and how you can think through solving these all right so today we're talking about these three angular tips the first we can talk about is have any of you here use this technology rxjs all right it's pretty cool isn't it and rxjs it does a lot of things well there's a couple different things along the wait you might run into when you're doing rxjs and we'll look at how we can solve some of those challenges the next one is state management thanks to Brandon and Mike brain Roberts Mike Ryan they did great work on this we have a great ngrick state management tool that a lot of us you there's some things along the way that can be challenging with this that you can overcome we'll talk about how you get through those and then finally cloud services how do we take our app and deploy them to the cloud when we're done and what do we really want to do because there's about a hundred and one ways to get it to the cloud what are our goals do we care about performance or scalability or security or anything like that do you care how much it costs do we make care of it's easy so we're gonna talk through these three different tips today first let's start off the rxjs one of the most common problems we run to is subscriptions we would create our own observables and we get all these subscriptions but we have to make sure we manage these because what happens if you subscribe to something and you don't unsubscribe anybody it's a leak yes it's a leak in the building so you get a leak with your application and these can add up and be a problem over time and there's several patterns for you to deal with this now I'm here to tell you that in demo world and I'm a presenter so in demo world everything always works right and there's always one subscription and you unsubscribe once but in real world apps you might have a lot of subscriptions what happens if the first couple you want subscribe but then you forget or somebody else looks your code it can become an issue so let's take a look here one technique to deal with unsubscribing two subscriptions is to just unsubscribe manually like this so here we're defining our subscriptions up top then we're setting our subscriptions to a variable and then we're going to destroy our subscriptions this absolutely works there's only two on here because that's all I could fit on the slide but what if you have more what happens when the next one comes in are you going to remember to both create the top variable and put it in the ng ondestroy at the bottom you're gonna do a lot of copy and paste magic I mean this works but it's a little bit more code that you might want to deal with so there's another option there's something called the take until strategy I made that word up it's using the take until operator and here what you do is you use a pipe and you put a take and till into it now this works as well but there's a couple caveats here so the first caveat is if you already have a pipe it's pretty easy to just tack take until it's a as the last one and you want to make it the last one in your pipe but what if you didn't have a pipe already if this was just get customers and then it would subscribe you'd have to add the pipe just add the take until to do this and you have to create like a notifier or some variable that you stick in the ng on destroy that does it all but you have to make this last or do you have to make it kind of last this works until it doesn't work so the rule of always make it last doesn't always work if you're doing things like a share replay and you can read this blog post by max ng wizard at the bottom of the page on his site and learn more about this so this take until works until it doesn't work and maybe you haven't run into this but you might maybe you've already run into it and read this great blog post so what do you do you stop using rxjs know we love our exchange and it works great does great stuff for us so how do you do this so a good friend of mine Ward Bell sat down one day when Dan Welling and I were talking to him about this but like you know it'd be really great if you just create like an array of these subscriptions we can automatically track that array and then just destroy them all at once and the code isn't that hard but being Ward Bell Ward bells like I can whip it out in five minutes I said name that tune and word created this great thing called sub sink so you can see here if you use sub sink you just create one sub sink and then you add all of your subscriptions to it and then at the end you unsubscribe so just to show that really closely all you do is add your subscriptions one at a time and then you have one line of code up top one line of code on the bottom and it cleans up all of your subscriptions in your code so the key here is destroys them all at once makes it super easy to do and there's really no extra repetitive code maintenance so you just npm install sub sink and give thanks to Ward Bell when you see with the conference if you haven't seen them yet you will if you don't know what I mean ask your neighbor so second tip we move along and I'll relate it to rxjs there's this thing called ng rx which is built on the Redux pattern and it helps us manage state nor applications and what I really love about Mike and Brandon the creators of this library was Rob Wormald is they always the first ones to say not everybody needs to use this there's a point in your app that you need to use it when you have a lot of state that you're sharing across it that's great but what happens when you have a lot of domain models so it's a great powerful state management tool but when you have two models there's a little bit of code when you have 20 the code grows when you have a hundred or 200 models you've got a lot of code in your application that you're managing so there's different things you can do and we all love the state management tool because we get this awesome Chrome extension the time-travelling debugging which I love going home and telling my wife like what'd you do today I did time-traveling debugging she's like that's cool now make dinner time traveling debugging is awesome we get all this great stuff with it but how do we get it without the extra code if you don't know what I mean by the extra code look here on the left here's an application running ng rx with two models villains and heroes from the tour heroes we have actions we have effects for hitting the database we have reducers of functions for our state we have dispatchers to fire off our actions wave action creators we have selectors and we have a chicken and a tree we've got everything it's all on the application what if we could do it in two files or one without all that extra code well wait a minute what do you lose in there so the key here is we have a problem we've got 100 models if each model has to have all those things there could be thousands of lines of code to manage those things which means every line of code you writes an opportunity for what a bug maintenance refactoring copy paste code which always works right copypasta you never really know exactly what's happening there I like the code blind personally so what can you do about this well a lot of that code is very repetitive so about a year and a half ago sitting down with my buddies Ward Bell and Dan valine and we were talking about this thinking it'd be really great if we could use this tool in our scenarios we have a lot of crud in our applications let's talk about crud you may not think you're using a lot of it but think about a lot of the apps you're doing you've got orders you get products you got customers you've got items you've got marketing you've got all these things in your app and you're inserting and deleting and updating and selecting from these things it's very common with your entity models to do this and it's very repetitive to have to create the same code over and over for it but you want the value of ng r x so using things like generics we can refactor away and make it easier to use the same code just using generics so we have all the actions effects reducers out of the box so with two files we can do this whole thing I mean reiterate to files so you can do the whole thing same to the ng rx so if your issue before the ng rx was too much code I don't want to go down that road but Mike and Brandon are such nice guys now you've got a reason to try this as well and this can really be a great use case for about 80% of the code that's your right so I want to show you ng rx with and your X data and without it and then what kind of show you where he can lead to all right so if we go back over to our code here here is ng rx in an app and I'll give you links to all the source code later that you have in this application we can see we've got a store over here and these are the code files we just looked at a moment ago so here I've got my hero actions and this might look familiar to you so here we've got a top our add hero with our add hero success and add hero error and all these different actions it kind of looks like scrolling quotes from a movie you know in a land before time and then at the bottom we've got all of our types that we just concatenate together with the Union so we can use those and again 124 lines of code to go down that road we got the same thing for villains what about our effects if we choose to use effects with it so we can talk to our database about 71 lines of code which are basically using our actions and firing off these actions to like a database or an API that can go get our heroes or villains or update them and then when they're done fire off actions for success or failure what about our reducers our reducers are another 130 lines of code we're doing a lot of fun dot dot dot Eng using the spread operator to clone our data so we can get our state out replace state delete state add state doing all the things that we want to do in our application if we go down to our services folder here you can see that we've got a data service to actually go get our data that's the HTTP calls we've got selectors because we don't always want the entire store sometimes we want our entire list of heroes sometimes we want just one we might have special selectors we have two right and all in total if you look at all that code again everything in that folder you're looking at all that now the one thing we have to do is a little bit of fixed code upfront as well so we have this App Store module you have to create and the App Store module just pulls in my store and my effects and calls it a day now let's take a look at ng rx data so ng rx data has a store as well here's the module for the store you'll notice the store code is the same in ng RX data as it was in ng RX but here the additional line you have is you also pull in this extension and g RX data does not replace and directs it's an extension to it you're building on top of ng rx it's not a wrapper you get every single feature of ng rx out-of-the-box in addition you get a lot of this that just takes care of a lot of that crud opportunity for you so the magic is behind this in the entity config let's look at that file this is the second file here every new entity that you add will cost you a whopping one line of code want products you just add them one at a time every entity you have takes one more line of code and the rest of it goes on convention it's convention based configuration where it's assuming that if you've got a hero then the models called hero and that you've got to get hero get heroes I get hero by ID update hero delete hero you get the idea it's going through those conventions well what happens when your conventions don't work well you can override those two and configure them because we know that things that do things for you they're only good until you need it to do something different so ng rx data has a policy in here where we can override stuff for example I don't want it to get heroes and just stick an S at the end of it make my function look like something like this get heroes that would look funny I want it to be like this so to do that we have an override here for plural names to say hero is actually going to be heroes in plural form then we could do this for anything we want we can override where the api's are in the backend by convention it's API slash heroes if it's not that you can override it if I don't like the reducer that's in there you can override the reducer if you don't like the effects you can override the effects either on one thing or on many there's plenty of configuration points in here to let you do what you need to do and again the key is there's 16 lines of code in this file and all you have to do is add one line of code to each one to get to this point now the best part of this in my opinion is that it helps solve a lot of the stuff where in your application you've got a lot of code and a lot of models and now instead of having a store with all the files if you're gonna see here on the Left I'll put them side-by-side you can see all those files there in the store now here on the right the only files you have in the store are those now would that make it easier I think so so ng rx data the big catch with it was hey this was written in a garage with a couple people right so is it real well I'm happy to announce here that thanks to Brandon and Mike Ryan that they've merged ng rx data in with ng rx it's now an official part of the library to be supported by the team and you can actually check out the docs right up on the next ng RX CO and it's actually in there with version 8 of ng RX so round of applause for Brandon and Mike for taking this on these guys are pretty awesome so for my third tip I wanted to share something that I really am passionate about scaling application is important getting a single app up there is important too but one you've got hundreds of users thousands of users millions or ten millions of them it's important to know how to scale your app and worry about redundancy and performance and security there's a new term well new ish term some of you may have heard of called the jam stack the jam stack is a new type of modern web application a design if you will let's come out let's talk about this bit so the jam stack the J means it's JavaScript you've got dynamic JavaScript this is our angular I think all of you are familiar with that piece right it also has a api's so instead of talking to like databases or apps service directly it goes through api's these could be third-party api's or serverless functions for that matter and it's also got markup this could be templated markup from a static site generator something like gatsby or a CMS or a build tool for web apps something like angular as as well so we know these things these are things we all do right now notice what it's not here servers no servers a lot of this based upon server list technology and the cool thing about server list is it doesn't mean you don't have servers it'd be kind of cool if we didn't but it does mean that you just think about them less so server list is really more about not worrying about the infrastructure that's in the cloud so we'll think about why would you want to go down this road first security what do people hack servers if the server's aren't something you're managing and configuring yourself you're letting a cloud provider do it you not to worry about it nearly as much if it's a static site or a CDN there's really nothing to hack at all so that helps out here too what else do you got you've got a broken clicker there we go high performance another thing we can do with the application so high performance for honest CDN right at the front super fast to load it we can get our API server less wicked fast is there as well highly scalable because these things can scale for you on their own server list is on consumption if you use it so it just scales up it can also have zero scale if nobody's using us you're not even paying for it when you're not using it things like lambda or Azure functions for example and of course low cost in there if you put a site up there and like a storage solution and you use it with serverless technology it could cost you less than a dollar a month which is pretty darn cool so this is the Y piece and what could it look like for angular what would you be doing so the evolution of modern web let's look at what we build mostly today we used to build like two-tier applications back in the late 90s then we got into this web browser with a web server then we've got like our app server model like with Java asp.net node etc hid in a database and that works good but we need a server or multiple servers to make this work with the jam stack it kind of works like this you've got a web browser and then you host the application from that and then you get your api's directly to it as well all up front in the cloud so it might look something like this in the application for us we got a web browser I'm gonna use Azure functions for it and show with a serverless API it's gonna use a proxy for manager functions so we can hit one URL and get a custom domain and use SSL if we want to and then which we should and then we can have an H to be trigger for all of our API routes instead of using node Express and we can use Azure storage to actually host the application which is just file storage so let's take a quick look at the code for this and how this can work for you all right so here's an application which I will show you the link to how you get here and you can try it all yourself later there's a github repo you can use there's a live site that you can hit and there's actually two tutorials that'll teach you how to do this up on our site so in this code what we've got here is a serverless function app in our application and we look up here there's a functions folder how do you create a server list function app easiest way to do that is if you use these as your extensions for functions all you have to do and I've got a great name here Papa funk one you come up here and you hover over these you can create a new project you click that project it'll create an ad your functions project run it locally for you and then inside of that you can create functions and here you can see I've got my heroes get function and here's my code for it it's simply just an azure function it's using typescript no doubt so we can get Oliver intellisense and we're just saying go off and call our heroes right there now the reason that I have a very small function is because I was using node Express api's before this so over here I actually have a server folder which I'm not using anymore in that server folder you're gonna see this is actually just node Express not as your functions and it's just making my node calls hitting my database doing what I need to do this file right here if I put it side-by-side but the other one no that's not side-by-side if I do it like this you're gonna see that those files are almost exactly identical other than instead of using Express up top I'm using Azure functions instead all the code is practically the same other than the one parameter here to get request and response changes from request response to pull it out of the single the context but every other line of code is exactly the same this allowed me to migrate my node Express app over to functions in less than five minutes which is pretty cool and without even being in the cloud I can come up here and I can debug it locally right through here I could say attach the node functions and run my functions locally or I can run my angular app with functions locally by clicking that button let's go ahead and do that and see what happens break the code John break the code now what's happening is vs code is compiling in the angular app it's compiling the functions app all locally no internet connection on your machine so you can run it here without hitting a cloud first so you can even do this on an airplane building everything up and when it's done it's going to launch the browser and here's the application and is the browser paused and it says paused in vs code it's about to get my list of heroes over here on the left there's my hair heroes component on the right there's my function actually that's the wrong function this is the one I wanted we'll put it over here so on the left is my angular app on the right is my function app and notice the breakpoint on the right is unverified the breakpoint on the left is hid getting my heroes that's angular I'm gonna let it continue and watch what happens now it's breaking into the functions so I'm debugging my angular app and my functions app all in one call in one computer all locally on my machine and you can see here you got both of them that you can toggle between in 1d bugger that's just pretty darn cool and then when you're done your applications running here and then when you want to deploy it all you have to do is go over to your application and I'll just minimize these folders if we go to the angular source files called dist I can right click on this folder where my app is and I can choose deploy to static website and in about a minute it'll upload it to the cloud and then I could also go and I could say alright just doing it a different way go over my functions I can hit this button here which means hit your head on the ceiling that button will push your as your functions up to the cloud as well and once it does both of those the final result is you get a link like this which you can try now if you want to pop a func as your website's net heroes and you can put a custom domain on top of this and if you hit that you get the application right here and that's running functions and the cloud with an angular application with no node servers no asp.net no app service no cost for a server at all pretty cool stuff using the jam stack there we go so the tips in this one I want to get through today we're really just how do you manage your subscriptions the sub sink is a great way to use that definitely check it out ng RX data is fantastic for manage your entities great for state management and the jam stack and that's promise you can try all these things at yourself if you take a quick screenshot of that or click on these links you'll get to them first the sub sink really is to use ng Rx you can check out the docs there's two tutorials for both the static site and the functions that you can check out and do exactly what I showed you today you can also go ahead and get the V s code extensions for deploying static sites or functions it just built right into V s code then and then finally if you want to try exactly what I did if you click that bottom link that's the github repo that gets you there and you can walk through everything that's up there and open up issues if you like to try anything else I hope you all had a great time here ng-conf and definitely share the great stuff that you're doing to everybody else because you're building awesome things with angular thank you [Applause] [Music] you

Channel: ng-conf

Views: 120,216

Rating: 4.9257884 out of 5

Keywords: angular, angularjs, javascript, ngconf, ng-conf, programming, angular conference, ng conference, angular javascript, angular tutorial, javascript tutorial, programming tutorial, computer programming, google angular, google programming, ngconf 2019

Id: 2ZFgcTOcnUg

Length: 25min 5sec (1505 seconds)

Published: Thu May 02 2019