What’s new in Angular with John Papa

hello everyone and welcome to our webinar today just as some background as people are coming in uh we've had this event scheduled now for several weeks and of course uh john papa's computer decided to give up the ghost literally last night or this morning is it john about 20 minutes ago yep so so john is going to is going to carry this whole webinar on his ipad which i think is a first for us and so if this uh if this flops horribly we'll we'll reschedule and chalk it up to a learning experience um and if it succeeds this is going to be john papa's michael jordan flu game so we're excited to have you all here um just as a little bit of housekeeping before we get started this webinar will be recorded and we'll be sending it to you after the event um to the email that you signed up for this zoom webinar with and so expect that in about one to two days you can also go and rewatch it immediately after on our twitter or youtube channels and also um we do have a a full calendar of upcoming events that you can go find at pluralsight.com events and when you when you register for one of our zoom webinars you'll have a chance to give us feedback on what topics you want to see us talk about in the future and that input is so helpful for us to put on events just like the one we're doing today um so again visit pluralsight.com events and then register for one of our events and and leave us some feedback um so with that said i really don't think i need to introduce our our guest today um he kind of introduces himself and if you're here you you probably know who he is so i'll just say two things really quick um the first is that i checked uh john's twitter this morning and he is at 99.6 000 followers and i really feel like we need to get him over to over the 100 mark today so there should be enough people in this event to get john to a hundred thousand so um if and so go go and follow john on twitter um if you're a developer looking to skill up john shares a lot of tips um he's always talking at events uh it seems like everywhere in the country um so his twitter profile is a great place to go be part of that community so go follow him and let's get him to a hundred thousand today and uh second as you can tell from john's background he's a huge star wars fan so i'm gonna turn it over to you john uh i want you to introduce yourself but i'd love for you to start out by telling us how you celebrated uh may the fourth be with you this year oh thanks for having me here and i love these are some of my favorite webinars to be honest uh you guys always have it so together and today i'm the technology deficient one with my dead computer behind my ipad so yeah i've been doing uh web development for many many years the one big thing i love is that it seems like there's a lot of star wars fans out there in general and they cross over with like web development and technology quite a bit uh and i actually uh put a joke up on twitter the other day it seems that disney is hiring star wars lightsaber wielders right now and all you have to do is be able to act out being a jedi and you can go be with their new lightsabers they have lightsabers that actually like they'll actually glow out now so i'm thinking of leaving this technology career and joining disney to be a lightsaber wielder that's how i'm celebrating may the 4th uh so with that i guess let's let's kick into and as you said um the presentation today is all gonna be in the ipad the good news is this was going to be a very um slide driven uh conversation today i've got a lot of code but it's all in the slides as a backup as a seasoned presenter this stuff happens so we're just going to see how this all goes for us now we're going to share my screen if everybody's wondering i'm using an ipad with powerpoint so you're going to see some interesting new icons hopefully there we go so when i talk to pluralsight about saying you know what do we want to do about this angular webinar instead of talking about advanced enterprise features or how to get started or a lot of the things that we've covered in the past what i wanted to do is talk about what's new and i want to hit this from a couple different angles if you're like me you could like disappear out of work for a couple of days and you come back and you feel like your email box twitter and social media everything's changing from technology way too often so one of the things i like is to know what's new that came out recently and then also sometimes there's been features in the last couple of versions of a product which maybe you just didn't know existed so i'm going to spin on a couple of those different areas today to talk about that we're also at a very good inflection point where angular version 12 is coming out imminently and if you've been following their change log on your github repo you can see some of the new features coming and if not i'm going to share laws with you today so my name is john papa and i work for microsoft and i'm a huge disney and star wars fan as you can tell and i really just love the web so let's get into it and talk about what's new in angular so first of all there's a bunch of debugging features that were introduced in angular in version 9 and 10 and i want to cover what some of those are and some of the ones that are not even angular specific that you may or may not be aware of that are really really powerful to use and then we're going to talk about what's coming in angular 12 which is coming imminently or soon like very soon then finally some topics about what's coming in the future for us all so we'll talk about first the debugging aspects and there's two ways i like to split this up there's the browser debugging and then there's angular specific debugging so browser debugging techniques first of all you may have found yourself inside of ie sorry edge or chrome or firefox and you're doing your debugging here we all know where the sources panel is and we can set breakpoints in here but did you know that when you're in here you can also use the file navigator to go around and find your files you can use the code editor to walk through explore your files or like redesign it with prettier inside there that's what those little curly braces do and you can also use javascript debugging right inside of chrome so it's really really powerful to be able to do this right inside your favorite browsers and inside the code editor there's a couple things i really rely on the first one is right there i always collapse the file navigator and instead of searching through a hierarchy instead i like to search for the file using command p on my mac i believe it's ctrl p on windows so if you hit command p you can then pull up a list which is what you're seeing in the bottom here and you do partial name file matching so you can find everything that's got like dash list dot ts and then you select that file and it'll bring it right up and then just like inside of vs code you can close open files or go search for a file too now breakpoints are great but i also like inline breakpoints because we do a lot of asynchronous programming inside of angular so we have async programming sometimes we have comments or sorry commands that run together and you're not sure where to put the breakpoint because the breakpoint might be an asynchronous pattern or might be inside an observable with a subscription so here's an example of using the or operator and over here we've got we're saying all right can you deactivate is the function and we're checking two different conditions first and then if both of those are turn out to be true then we're going to run this modal service activate function now notice that that activate in the far right has got a breakpoint inside of it so a couple things to look at we're detecting if a name has changed on the screen and if the name has changed we should not be able to deactivate so first we're checking is there a speaker or not yeah there is it's right on the screen second is the page dirty or not well we change the value so it should be true so first what we do is we tap here in the gutter over by the 40 to set a break point and then you'll see a bunch of those little blue arrows kind of faded out they're kind of translucent and then you can click on one of those blue buttons to make sure that that blue button brings up a break point and that's what you're going to see over here on the right as an added bonus even though i've got do not disturb on if you follow me on twitter you're going to see your name pop up on the screen it looks like so right over here on the right hand side you can see we can tap on the activate and what happens is that breakpoint will not get hit unless the first two conditions are true and because it's asynchronous underneath it's not actually going to run that third line um unless those first two happen which is kind of cool now once you're inside of there you get the standard buttons which are right inside the same window down at the bottom and i just blew it up here so you can see them over here on the left you get your continue button to run through debugging you've got your step over you've got step in and out you've also got disabling breakpoints i do this a lot when i've got a bunch of breakpoints but instead of getting rid of them i just want to turn them off for a minute so i can run through the code then turn them back on and then of course is the break on exceptions this is super cool because if i'm running through my code and i'm getting an error message but the error message is 18 levels down and a call stack instead of actually tracing through that i could say break on an exception in the first place that exception occurs it'll actually stop the code for me so i can see what's happening so i find i use this quite a bit and then inspecting with the console is really cool too so let's say i'm broken at the same line of code what i can do is open the console you can either click right here or you can use the escape key which actually pops it up and then you can run a function so i'm broken at the modal service dot activate so i can run a function called is dirty i wanted to see what was the result of this dot as dirty and it came back with yeah the name field is dirty and it only works because i'm stopped at that line of code if the if i wasn't stopped a line of code is dirty would be out of scope and because this dirty came back is true that's why we ended up coming into the activate now a couple things you'll see me talk about is the console quite a bit there's a lot you can do in there now everybody uses console log but did you know there's other great features that you can use in the browser so console object has a bunch of these and you can use emojis like pizza or party and i do this a lot actually for logging out so everybody knows you do console.log hero.name but what if you want to do an error message you actually want to show the error message in a different color for example or you want to filter by errors you do console error you can also do console count do you want to find out how many numbers of times a specific thing has been called console account will increase it for you in the console window and then my favorite is console table console table will take a list of data or an object and print it out into like effectively an html table inside the console window i find this incredibly powerful especially when i'm getting back a list of data from an http call and a lot of times i use emojis in these to kind of differentiate have you ever written console log messages and you're doing it you are here or now you're at this point you kind of make these messages so you can debug through and figure out where you are sometimes i use the emojis to tell me is this an incoming call or an outcome i use an incoming arrow or an outcoming arrow for it or if it's an unhappy um if it's a happy thing that's happened i'll use a happy face if it's an error message i'll put up like a exclamation mark or a warning sign with the emojis so the emojis can help you when you're debugging speaking of http one of the things i like to do is detect and pause on specific xhr calls so here i wanted to make sure that i could break on a specific call to my api for heroes so what i did is i put a pause on that specific api now how do you know if you're going to break on which http call well that's down here where inside of the window you can set up and debugging inside the browser on a url that contains what so i put a matching partial url right inside the browser and anything that's going to api heroes is going to pause and break so then we can set watches so inside of uh i'm using chrome in this case but it works with edge as well i use both of those quite a bit we can set a watch here and you'll notice this watch it's hitting my break point and then what do i do i can go ahead and i can set up a watch on this dot editing hero and i can actually see the values that show up as i'm going through the code so kind of zooming in on the scope there you can also see the scope of the code here we've got scope window we just pop into that instead of watch and you can see all the variables that are local to the scope that you're actually looking at now this is really nice because sometimes you think that there's a property in an object but you're not quite sure so it kind of gives you an idea of how to get there pretty quickly or you can change values right through here too i also find it helpful to look at this state as things are changing in my application and see that i actually update the object i think i updated now we're going to try something new here i'm actually put a video together this is my backup of how you can set conditional breakpoints inside of chrome as well so we're going to make sure this works and we'll see if the video actually kicks off it looks like the video is not going to work but i will make sure we share this deck out and you'll get the links to it so what we can do is we can set conditional breakpoints inside of the browser where the breakpoint turns orange and it only works if a certain condition is true so you can say only break if the is dirty flag is true for example and this one i'm sad i can't show you here on the ipad but this is also a video it's useful call stacks how many of you have been debugging your angular app and you're breaking a line of code and you want to see where the error really happened and you look at the call stack and you see like 30 different calls and about 25 of them are code that's like inside of rxjs internals or inside of angular internals or inside of zones internals and you're like that's great but i don't really want to look at that but what you can do is you can turn off all of those or hide them it's called black boxing so there's a feature inside of chrome and edge inside the browsers where you can enable and black box certain calls in the call stacks and say anything to zones or rxjs for example let's just hide those and then my call stack will only show my code inside of the browser and you can always turn those right back on if you want to inside of a setting inside of your browser so again i'll share these two videos out later at the end of the with the deck as well through pluralsight and for the next section so i kind of whizzed through those because those are all chrome and edge debugging techniques or firefox but those have been around for a couple of years and the browser is constantly improving and that's what i use to debug quite a bit it really helps but i want to show you some specific features that angular has for debugging as well now all of these have been around since version nine which is about two years ago currently around 11 and 12 is coming out and they're about on a six to nine month release schedule so let's take a look at what we can do in angular first template errors the template checking has gotten a lot better inside of angular and the whole thing is how do you make sure that your templates can have no errors in them at all well in angular 9 there's this iv compiler that's been coming out and it's now out it's improved all the template checking for us and we can do things like enable strict templating so this allows us to really check to make sure all of our templates are much more robust now the key is in your editor like visual studio code you want to make sure you use the language service extension which you can get from this link right here so how does this work so you're going to see errors the first time you turn this on you didn't even know you had a while back in angular before this existed if you had a situation where you had like a customer dot um address dot city property if you're inside of an ng4 it was not very good with angular in this language service to be able to tell you if you spelled the the third property in that you got customer address and then city if you spelled city wrong maybe it was city address it wouldn't tell you that now with strict template checking it will it goes all the way down it'll also tell you if you have improper function implementations like you call the function incorrectly so here's an example of an arrow you are you might see now with strict template checks here inside this component and saying that oh wait a minute this function is not assignable to the track by function which is a hint that is in the ng4 and now you'll notice here the track by functional calling is tracked by hero but the track by hero is looking for something that's expecting both a hero object and an index and it looks like i didn't pass one of those in so i can go fix that and then model properties is another thing we can look for so notice here i put in hero dot capital id well it's actually lower case id i did that on purpose to kind of show where this was but it's showing now where when you've got properties that are dotted inside of your templates whether they're in an ng4 or an ngif or not it'll actually tell you right inside the message what you did wrong so this is in the console window when i build angular but it also works inside of vs code with the angular angular language service so here's the example if i fix that track by i had this code in my code for a while and then when i went over to angular 9 and i turned this on the strict temple checking now you can see that the index we passed first so that was the correct way to implement the function and i had a bug for a year without knowing about it so you can also inspect angular in the browser you can do things like debug the current state of your app you can use the ng namespace variable you can find more out about this at this link here and we're going to see how some of this works you've got to be in development mode because all this works only when you don't do a production build but what could you do so let's say you're inside the browser again and you want to run to see what's going on with your current at a break point with your current code you can use dot zero or dollar sign zero and ng dollar sign zero gives you the currently selected dom elements which is very cool so then you can run a code like this and say okay go get me from that element in the dom get me the context of it for angular which means go give me the hero component maybe i'm on a heroes page and then maybe i want to go get the component that owns that that's the parent of that component i can actually go up the chain by saying get the owning component of hero component so now i've got the hero component and i've got its parent component called heroes component and then i can just say herocomponent.hero.name and i can look at the properties so i don't have to inspect the dom so much i can go through the dom to get the angular elements and look and inspect anything i want to inside the browser which is incredibly powerful when you're debugging okay so that's looking at elements what about changing or calling functions so we can do that too let's say you want to change values there's a function called apply changes you just pass the component's name to the supply changes when you want to call it all right so where might this work for you imagine we've we had the code before and now we're changing the hero's name to madeline here we set that up we changed a model we're going to notice it didn't actually change if we look at this comparison now of the hero component madeline and say is it equal to the fourth one in the list from the parent component we're going to come back and see you know what's the value and those values will be different but what's on screen is not yet reflected why is that that's because it changed the texture in angular so we change the model but there's no change detection running when we do this so we have to tell to do that so then we can call the save hero function in my code which imagine that goes to http and saves the hero and then finally we say okay now apply changes it effectively kicks the change detection into gear and says now go ahead and update the ui using angular so it's really powerful that we can actually test things out right inside the browser to make sure things are working the way that we expect it oops and we've got some links there that's a bad slide sorry so i can help you get past some of the debugging you want to look at what some of the new features are in angular 12. now these are pretty cool uh all this stuff is public knowledge if you go look at the github repo and scan through their issues and prs and change logs but i try to put together a list of some of the most popular features i think you're going to be interested in standardized errors oh boy this is great everybody gets errors at times angular now has a list of runtime errors that's what the r stands for here and these are right in the docs and you're going to see these standard error messages for things like no provider found you're also going to see compile time errors things like missing tokens or invalid elements now there's a certain format to all these error messages and how they work and what you can do to learn about them here's how it breaks down this is right out of the angular docs the error code is on the left then you get a message and then a link so right here the w is for the different types you can the run time is zero or it's a compiler error one through nine then the x that green part is going to show you what kind of a category it is an internal issue a template issue a styling issue so that's what that number will mean and then the third section there is the index code and then after that we get the error message which is a string and then a link and the link will bring you right to the angular i o errors page in the docs when you click on that link it will go right to the page for that specific error which is based on the screen i just showed you before this and in some cases there'll be a video up on youtube which i linked to which explains in about two to three minutes what the error is and what you can do to resolve it which i find incredibly powerful so you can just click on those video links when you get those errors now inside your console and it'll tell you exactly what you did wrong another new feature is that the angular team said they started looking at how many people were creating strict mode by default when they created projects and i believe the number i heard from the angular team was like 70 of people so they said why don't we just make this default then because strict mode does what i mentioned before about increasing the type checking and showing you more errors for things it's not as loose well you used to have to say dash dash script to do that well in angular 12 you won't have to it'll be turned on by default so strict welcome to angular 12. so how does this help you things like strict templates that we already talked about injection parameters it also enforces all of type strict type scripts strict mode as well the big thing for me is it's going to help you with future ng update commands as you're all aware there's an angular cli and you can upgrade one version to the next by running ng update well it does a much better job if all your code is running with strict mode because it can then determine what has to actually change for those changes and you won't introduce new errors i talked with the language service a couple times so let me hit this again inside of a template and explain kind of what it does you're going to get improved intellisense so this will work whether it's in separate files or in the same file like a single file component so you're going to get better syntax highlighting you'll notice i have a template right inside of my typescript file and it works whether again it's in the file itself or a separate file so here as i do a drop down hero name i'll see description id name and i can select those now you'll notice i could actually my fonts move sorry you'll notice that i've got the hero name here i'm gonna go back one slide to show you again look at the hero name in the top and look at this title string inside the movie component i can get more specific now i can say you know what hero it might not be there so therefore i want to make sure this is an optional object i don't i try to execute hero.name if there is no hero and title i want to default that to string so we can actually get more specific with our templates right inside of components now the language service will help us do this another thing i really like is inside of angular 11 and prior it used to be the default and it's no longer is where when you run ng build you had to specify dash dash prod in angular 12 it's going to change ng build will run production by default why is this important well when we're in dev mode think what we do we normally run with ng serve we don't ng build and run it in devmo we normally run ng-serve we crank it up with webpack we make our changes we get that fast dev experience when do we run ng-build mostly when we're about to commit or run unit tests or put up in a ci cd and kind of push it off to a server and for those who want production which is the bigger deeper build well the problem was what if you were running to neglify or sell or azure static web apps with angular if by default you ran the normal npm run build command or just ng build it was going to build a dev experience build and push that to a web server why is that a bad thing well the average dev bill for a small application like the tour of heroes can be five meg of assets in a dev build five meg so you push your 5 meg app up to a web server whereas the production build might only be like 80k because it trims all that out with tree shaking and so on so people myself included saying me here a lot of times would run that build and it would push it up to a server and it'd be 5 meg instead of 80k and all we had to do was turn on production that would solve the problem well now we don't have to make that mistake so now we have production builds by default so you'll get faster by default on things like netbefore for selling azure static web apps we can also do things like inline sas so inline sas is pretty cool because now inside the templates you'll notice i've got my html up here but i've also got things like css that i can run but now i can also add sas this only works in version 12 forward before in version 12 if you put sas inside your inline styles it wouldn't compile the sas parts at all so this is going to really improve that single file component experience that we have and this would look something like this and now we can use styles right inside of here and those styles would just use all the features that we normally use all right that's not proceeding let me check here there we go so we can use those inside of v12 for single file component experience another cool new thing is that t.s lint used to work really really well with angular and it was great but the problem is that eslint kind of took over where tsl was going and it didn't make sense after a long time that we had t t.slint and eslint since the typescript team now has adopted eslint as well so what do you do well now thanks to james henry personally community who's developed this we can automatically add eslint into our angular library just by running this command right here these two creating a new project there and what it's going to do it's going to help you use eslimp directly inside of angular and again thanks to james henry and friends for doing this it's a library up there in public on github it's a great community contribution and we're doing this because tslint has been deprecated as of almost two years ago now those of you out there who like css and like things like tailwind sport it's now support of the version 11.2 moving forward it's great there's actually a great video up from ng conf which was uh two weeks ago up on youtube you can learn more about this what you do to use tailwind now is you can install it directly in your app running npm install for tailwind css the dash d means development and then you create your tailwind config js file in your project root and then the angular project the build system will automatically just include tailwind why is this new like you could use tailwind before but it was more work why is that if you're not familiar with tailwind to a tailwind does a css it pre-processes it so it actually looks through the code before the build process so because of that now we've got the angular build system is automatically aware of where that tailwind config file is before it runs which is pretty cool there's a bunch of other new features i'm going to highlight just a couple more uh to talk about here but you can check out more in the in the blog post i'm sure will be coming out critical css and font and lining is now part of version 12. this is going to make the browser experience on first load much faster why why is this important you can always google these features of course but what critical css is is imagine you're loading a website your user looking at it and you are not seeing that website come up quickly because there's so much css loading well what angular would do is it'll take the critical css the parts that knows it needs to render the page it will inline into the page so it's not actually downloading a second file same thing with fonts that are critical to the app so it'll actually make those things come first the parts that are critical and give it a faster user experience webpack 5 is now being pulled used by angular 12 and this is important because it's going to make the bundle smaller and faster because webpack 5 has some new features coming out and once those are implemented angular will automatically benefit you're getting improved messages we've seen error messaging already the cli has greatly improved the messages as well and trimmed down some of the noise that's in there so you'll see a lot better messages when things go wrong and when things go right another community contribution was there's the min and max form validators so you can now use these as part of angular as well so when you're using angular forms there's now validators that'll work for minimum and maximum values and a highly requested feature was this hd http request metadata so you can do things like inspect the request to get the full metadata to find out what's being cached or not and then influence how http is actually being cached using things like interceptors and one thing i really want to focus on is request voting so if you want something in angular i mean they have hundreds if not thousands of issues inside of angular right big product lots of community if you want to work on features you want to see them in the future they have now defined a new process where you can actually vote on the features inside of github and based upon community feedback and that voting that's what they're going to consider working on first which is really really good so it's not just going in and adding a comment saying i want this there's actually a voting process that they're trying to use they can help prioritize what's coming in future versions and the last topic i want to talk about is less angular and i did a lightning talk on this topic at uh ng conf and i wanted to at least address this here because i think it's really important angular is a very opinionated guided framework and it allows you as the pros of that to always know what's my path to getting from zero to production but because it's very opinionated there's a lot of things baked in again it's good good side and bad side of that because all these things are baked into angular like dependency injection and http um rxjs you kind of know where you're going to go but you don't always need those things and all those different concepts like decorators and injection and things like that they add to the cognitive load of learning anger we don't always need all that stuff like do you always need an rxjs subscription when you're getting your hdb data i'd argue that you don't always need sometimes you just want to call the data and get it back and you're done so a couple things are going down the road with this possibly in the future we're already seeing single file component support sfc and for those of you who might be thinking gee single file components why would you ever want to do that we want to separate our concerns our concerns our html css and typescript well i'll tell you this separation of concerns is not separation of files we say that again separation of concerns is not the same as separation of files think about why we separated our files a lot of times frankly it was because the files were not supported by the tooling so when we started with web development years ago we didn't have great editors like visual studio code we were using tools that couldn't support angular language services it didn't even exist so how are you supposed to combine these things it was just much easier on the tooling to separate another thing that happened was we didn't really have this wave of componentization what i mean by that is we now take components we try to split them into smallest possible components and use those components to compose applications and the result of that was we used to have these really large components with thousands of lines of code now we have much smaller components so by keeping in one file first of all the tooling supports it second you can take an application that's got 100 components and 300 files and now you have 100 files instead so you're reducing how many files in your app which mentally to go through an app and maintain it now we can see 100 things that are 300 it's easier it also means less folder structure to support that so you don't have that expansion and for me the big thing was this when you're inside your file in single file components i'm constantly editing the css the template and the code at the same time if i have to do them three files i'm constantly flipping back and forth between the files and that's not really great for my productivity and you might be thinking yeah but you know we've always done it this way if you look at vue react or svelte three of the arguably other competitors out there in the web framework world they all use single file components all of them react as a single file for javascript view they've got the sfc down with their files as well without view files stealth also does this and that's kind of where everything else is leading towards so angular is moving forward with this with more support in the tooling and today you can do everything you need to do in version 12 with sas if you don't use sash you could have done this in version 10 or 11 as well the second thing is optional ng modules there was a time where we needed these but there's actually a lot of progress moving towards where i could see this is not entire yet i could see where the angular team is already making proposals and considerations for removing ng modules or making them optional it wouldn't be a deprecation type thing it's more of a if you don't want them here's another way to solve the problem because if you think about modules and what they do what they're really doing is helping with lazy loading you can still do that with routing they're helping you with having uh telling where the declarations are for your components like what's in this module you could use a component to do that they're helping with providers we could use components to do that as well so there's other ways we could accomplish this and have one less thing in our application because again you look at what's out there in the other web frameworks they don't have this concept it was invented by angular to solve a problem that existed six years ago so it's the evolution i could see them going off zones it's been talked about for a while now that possibly getting rid of zones are making those optional in angular and then just less angular overall and you might think yeah john we're not going to get rid of those things but look what's already happened angular just announced that protractor will no longer be supported out of the box thank you and they're considering what they're going to do in the future or maybe just support third party stuff like cypress or what's it storybook and other things like this so you can have different options for third party eslint is now taking over for tslant we can now do sas inline and do sfc instead of mfc so a lot of things that existed don't necessarily have to be the way we do it forever just because it was doesn't mean we can't evolve and i mentioned http did you know that you can do everything you need with http by using a tool called axios which is third-party library it supports all the http calls works in all the browsers most of the other major web frameworks generally use that by default and you can use http interceptors with axios and never actually pull in the http client library with angular like why does angular have to have http it's something that everything needs right it's not an angular thing and if you don't even want to pull another library in you can use the fetch api inside the browser works great and i'll give you a link to a demo at the end of this that shows you how to do that another thing to think about is if you use fetch or axios you don't actually have to pull in rxjs so you can make your http call and say async await my http call i'll get my data back and i'm good so if you're struggling with rxjs to get out of the box or the team that's just getting off the ground or frankly you're just writing an app that just needs to go get data and bring it back you don't need all that rxjs offers you could simply just use promises so there's a lot of cool things i could see coming to angular where optionally if you want to there could be less of angular to learn and still get all the full features that you get today now i promise that i give you a demo of this uh this is the demo i was going to show you today but it's all up and get a repo and it obviously doesn't run well on my ipad but when you pull this down on your machines using vs code or webstorm or whatever your favorite editor is go check this out it's called angular what if and there's two projects in there one called mfc for multi-file components and one called sfc for single file components and you'll see some of the differences between those inside of there and i believe they're both using axios to show you how you can do this and as a special bonus there's no dependency injection none at all inside of the no services no providers inside of the sfc application why is that just to show you that you can write the app without it and i would argue that in some cases it's actually a little bit cleaner so imagine yourself in the future maybe future versions of angular having optional dependency injection in providers and wait a minute let's think about that when you learn angular you learn components we'll still be doing that you learn services http client decorators what those decorators mean you learn rxjs you learn class structures what if you didn't have to learn all those things instead you just learned components and you just write javascript with functions if you take a look at that soc project inside of this angular what if let me know what you think put your comments up on twitter and i'd love to hear from you now when you're in the q a awesome thank you thank you so much john this was this is really helpful i can tell that the reception is really good um just both from the audience but also we didn't have any major tech technical difficulties i think that's worth celebrating um so just as a reminder to those watching we will be sending a recording of this uh to you to the email that you signed up for the event and we'll make sure to get you uh john's deck with all those demos and videos as well john maybe to start off matthew had more of a comment he said i'm so glad someone with clout is saying less angular i've been arguing this for several years now on my teams do you want to add any more color to kind of how important it is to have that kind of conversation yeah absolutely so first of all i want to i want to acknowledge that there's other people out there who feel this way matthew i believe is one of them right there but also on the angular team there are people who feel the same way as well so this is not like the angular team has i've dropped something on them that's been like oh my gosh what is he talking about there are people in the angular team who've been thinking about this for a long time just because they don't verbalize it doesn't mean it's not there with that said there's been discussions for a while that me and other folks from the community have had with the angular team and that's why you're seeing these topics like optional ng modules optional zones that are being considered it's also why things like eslint with the deprecation of tslent came about it's also why we can do things like using fetch inside of an application with angular and use sfc so i think the problem is that we all get into this mode of we love angular and i love it and we love the features that are there and just because we get comfortable using a tech and knowing where it is sometimes we forget how hard it was to get up that hill in the first place if we go back seven or eight years i think using angularjs the biggest reason angularjs was so popular was because it was so easy to get started everybody could jump into it now it's not angular that's hard it's all the stuff around it so we start peeling away the pieces we no longer need for building applications that ramp becomes super simple again and to me it gets angular back to wow i could show this to anybody and get them started right away so i'm really passionate about this now i'm really glad to see a positive reception yeah that's great so uh brandon asks when passing objects to an ng template is there a way to tell angular the type i find i get lots of compile warnings about type checking i know you can create a cast method on the component but it seems odd to add code that will execute at runtime to fix what is actually a compiler issue i think i'd have to see a specific example because i don't think i've run into that because most of the time when i pass objects to components like a hero object those are already typed for me uh and then the strict type checking if you turn on strict type checking it will automatically catch those things at compile time or dev time for you so i had to see more specifics feel free to reach out to me or to the google team up on twitter you can just tag at angular and at john underscore pop-up another attendee asked how or sorry not how have the language service improvements enabled single file components with sas scss or is it css only still so in version 11 which is the effective current version today you cannot do sas online but with version 12 which i've hinted several times today it's coming imminently uh you will be able to do sas with a language service with angular 12. in-line components that's great this is already waiting for that for years so so thomas asked and i'm not a i'm not a developer so i'm probably going to botch how i'm supposed to say this but he said about angular strict templates do you have recommendations on how to manage the strict typing errors that pop up from obs dollar sign slash async which types the event as t undefined if that made no sense to you john you might want to just go look in the q a panel no i get like i get what he's saying i'm not sure if i've got recommendations on how to get through that that would be one of those things honestly it might be one of those cases where you if you can pull a reproduction together of how this works up on stack blitz which you can just create on stackblitz.com a quick repro of how this works and then you tag either me or the angular team up on twitter we can take a look at that and work through it when you're getting specific errors like that it's a lot easier to look at an example and then we can see does the strict strict template checking actually work for you in that case so tony had more of a comment maybe if you want to comment on this he said i actually like the class structure and di coming from a c-sharp background this makes sense to me i think that's great and that's why it's all optional so for me i came from c sharp um i actually prefer functions in javascript just because i felt it was less to deal with i'm not a big fan of i've never been a big fan of object oriented inheritance but i do like composition like implementation of interfaces so there's no reason you have to get rid of classes my personal favorite is i like classes for components but for services i just want a list of functions most of my services don't maintain state they just go get data they manipulate data calculate information etc and to create a class for that with functions to me felt like overkill when i create view and react in stealth apps i just create a i create a javascript module with a bunch of functions i export those functions and i import them where i need but to me it's great that we're going to have choices down so you can do it either way it's just that when somebody's learning this stuff now we have options and i think that's the new thing here we're introducing in angular is i'm trying to make it okay for people who want to use classes and use di to do that and just as okay for people who want right functions and don't want to deal with the audi to do the same thing and do not disturb does not work on the mac or the ipad i can tell you that right now we're learning this is a first time experience we're learning so kate asked can you please give an example of what kind of code to run outside zone ah you know that's a that's an interesting question so personally i don't like the idea of having some codes running in zone and some code not because it makes me have to then think about it i waiting for the world of i'm going to run zones until i have an app until i have an app where i can run the whole thing without it so what needs to be in zones or in general anything that's got something to do with change detection if you're manipulating something that's going to end up on the screen in some way you want the zones to be able to capture that if there's code that doesn't have to do that you don't have to run it through zones but it really gets kind of quirky to me so it's hard to give you a specific example for that stuff because maybe even though what you're modifying isn't updating the screen directly maybe it's indirect so i'm really waiting for how can we get to a world without the zones at all otherwise my personal recommendation is i still keep them on yeah so it looks like we have about three more questions um before we get to the end of our time so daniel asked well first daniel said he really appreciates you taking the time today john and i want to echo that and then he asked uh for those of us who have to package our angular app with the monolith and have the tooling to debug locally can we build with source map and still take advantage of a9 plus debugging still take an a9 yes so i think what he's asking what you're asking daniel is can you take advantage of the new angular 9 debugging features um and you still package the source maps yes so the source maps will still work that the key is you if you want to use the the ng feature for example that i showed in the debugging you need to do a development build there's certain things that get included with angular when you do a development build besides not getting rid of all the dead code and stuff um making the bundles as small as possible uh there's certain angular features they get bundled with a dev build so you can do the debugging if you do a what you do is do a dev build with the source maps turned on and that would probably get you what you need so someone else asked i work for a large company that creates a large number of angular libraries that are pulled into a number of angular apps migrating to a new version is very large task do you have any suggestions on how to handle this efficiently for example can our angular libraries multi-target versions so we can upgrade and applications as we get time yeah this is one of those things where it's if i was still consulted it'd be a lot of fun to sit down and go through it all with you because i worked at a company that had lots of libraries that my team created and the version control is always fun general recommendation would be to have the libraries first of all when i do the upgrade ng update is great i always make a new branch i always commit my changes first and then i run through to see what actually needs to be updated i do it through step by step make commits i do my regression testing before i actually merged in and pull it now you can take a library that's written for a new version of angular and run it with an older one as well so there are ways you can do that too but to make the cross version compatibility it does work but it definitely requires regression testing so you have a large matrix of those libraries and your apps i'd want to make sure that every time i upgraded my libraries maybe i've got a dozen or five dozen of them i'm regression testing against at least a core set of the applications to make sure that they still work uh and ng-update should handle most of that stuff for you now if you're trying to run angular 12 against angular 2 i'm sure there's going to be problems but you know if you're running one or two versions off it shouldn't be a big issue awesome so bruce uh this will be our last question uh so bruce said i'm looking at the angular what if repo sfc services how can unit testing work with globals we typically mock our services but how do you do that when you have global services imported uh that's good so it's it's not technically a global service right it's an imported javascript module so you could just use um there's a lot of javascript libraries names are escape me because on my computer it's black screens right now um but there's different libraries you can use to mock javascript modules where you just replace those with a certain interface api so maybe you've got a service that gets data you want to mock it so you don't actually hit the http calls you could just pass that in create a mock library for it and then have it set up their mock return values so it's a similar process what we do with angular it's just with angular and di and services some of that stuff's handled for you in the baked in library but the javascript world at large has lots of different mocking tools that you can use to do that awesome great questions though it's new right we haven't thought of these things before because it's like angular does this out of the box but the funny thing is the entire ecosystem has handled pretty much everything angular does like did you know you can actually use dependency injection with view react or cells you can there's libraries that do it same thing with rxjs awesome thank you john again for your time for those that that kind of joined late uh john had to do this entire thing from his ipad because his computer went to put today and uh i think it it worked really well so we learned a lot uh someone said that do not disturb only works when the ipad is locked so there's that last little piece of knowledge for us today um john do you have any final takeaways before we before we end this webinar yes always have a backup for every presentation if you ever go into a meeting that's what saved us here because i think it literally died 20 minutes before the hour so awesome i think that's as good a piece of advice as anything you've shared even about angular today so

Channel: Pluralsight

Views: 5,934

Rating: 4.9055119 out of 5

Keywords: tech training, dev training, IT training, tech skills, tech skills platform, technology learning, technology learning platform, pluralsight course, pluralsight, angular, angular type-script

Id: ZrONy6PWyXY

Length: 53min 18sec (3198 seconds)

Published: Thu May 06 2021