Angular 13, by Aaron Frost

[Music] yeah i appreciate it i'm excited to be here um thanks to everyone for coming i'm here today i did my best to prepare a talk about a framework that has not been released yet angular 13. so this is my best effort i hope everyone enjoys it um i'm going to take you through where i would learn some of this stuff and how you can start playing around with it too so um let's dive in uh my name is aaron everyone calls me frosty though my last name is frost ever since i was a kid just frosty i don't know why i like it though because there's too many errands um in the world so frosty is great call me frosty i'm a google developer expert like they said starting when i started working with angular team with ng-conf i got nominated and um it's been an amazing thing i i don't think i could ever thank google enough for letting me be part of the gde community i'm also with ng conf like they said uh we've been doing that for eight eight almost nine years now and um love working with the community love love learning with everyone and being a part of uh something you know my friend bill said the best the second best thing on angular is angular and the first best thing is the community and energy conf is a place where we can come together and i love it so i'm also part of the angular show if you've never be if you've never joined the show it's a podcast we release about weekly episodes just go to ng.show in your browser and you can you can you know or open your podcasting app and and be a part of it but we do we do shows and series on testing series on state management and a lot of other things that are affecting the community so join us at ng show and uh my co-hosts are jennifer wadella who's amazing and brian love with live love app who's also fantastic so head over and check it out also i work with hero devs i work with skully i work with xlts i know it's a lot of things to do but scully is angular's jam stack platform xlts is is extended support for it for angular 1x and herodevs is a consulting company where we help some of the biggest companies in the world solve hard problems so that's that's where i spend my time and um we're also we're actually looking so if anyone is like hey i'd like to work remote i'm anything i'm an angular expert or a react expert please reach out to us go to hero.dev and click on careers and let us know so i'm going to take us through angular 13. we're going to go through uh the rc0 we're going to talk about some new features some breaking changes the dev tools that were released in may but not a lot of people have heard about we're going to talk about the road map what's currently in progress and what's next and then we're gonna do a sneak peek of the rfc um there's a there's a really really really popular rfc right now that i'm gonna kind of take everyone into and hopefully you can be a part of that as well so let's kind of dive in uh cool timing for this conference rc0 of angular 13 landed last night which is rad uh so it's it's officially in the next so if you want to go ahead and download um um angular13 just uh head over to your terminal ng update angular cli angular core and use that dash dash next flag and it's going to drop you into it's going to upgrade your project and run the latest schematics for getting you hoisted up to the latest version angular 13 you'll be on the rc-0 the cool thing about being on the rc is if you have any issues with your project the angular team is very attentive to the feedback from people testing it out in the rc if you're if you're a year behind and you're going to go to 13 next year well the angular team's moved on to 14 and 15 by then so now is a really good time to attempt to bugger with a new angular 13 because the angular team is very attentive and watching and making sure that things are working so head over to check it out my talk is based on the rc so some of this stuff may change by the time it goes to production please don't add me on on twitter and be upset i'm doing my best um and it's based on the change log so there's no official release notes um it's just entirely based on the change log from angular's repo and if you ever tried to parse the talk out of a change log it's less easy than it should be but i've done my best here and these are also based on conversations i've had with angular teeth so i'm going to share a bit of stuff i've learned along the way so let's let's let's dive into some of the features for um for angular 13 make sure i'm good on time okay so we're going to talk about some features for forms we're going to talk about faster builds there's a language service feature some stuff going on with a router typescript ie11 support and some testing features and let me let me walk through these real quick so starting with forms there's two things that i think are worth calling out in forms there's a new form control status which is simple or let's talk about it we're also going to talk about some updating validators functions to update your validators on your form controls so let me walk through both of these real quick to start you've got your form control status so previously on your form control class you've had status which is a string and you've had status changes which is as an observable of a string and that's that's fine but um a string they've typed it now so that on your form control your status and your status changes actually have to be part of this form control status class which it looks like this um valid invalid pending or disabled so we're getting more type safety on forms and and statuses and stuff so i think this is this is a win uh i normally i like to see how these things are implemented i check out the tests and i'm going to show you some of the tests from your team on this one there were no tests which i think makes sense so yeah there was no test harm in the production of this feature so that's form control status it's it's it's the status is on your form controls now let's talk about updating validators um and there's four new methods on them there's set validator add validator remove validators and has validators and i'm going to walk us through those real quick um the abstract control class has these these actually eight new functions because for every set validators there's also set async validators because every control has async validators as well and one thing to note is for set validators you can pass it a single function you could pass it a validator function array or you could pass it no if you just want to wipe out all the current validators and set it back to null there's add validators where you can add one or many there's remove elevators where you can remove one or one many and then there's a has validator function as well all those same functions exist for the async validators as well this is a new piece of the form control that you can start using uh for it more advanced and custom form control to kind of show you some tests on how this works if we create a new form control and we pass a required validator we can call has validator and pass it the required value and we can expect it to return true if we remove the the required validator then we can expect it to not be there anymore and um and when we call house validator if we add it back in it's back there again so this is how these has validators remove validators and add validator functions work um this is uh this is a piece to show also you can emit your form control without any validators then you can say hey does it have the validator validator required no if i add it doesn't have it yes if i remove it does it not have any more yes so this is how you would this is how i would learn to use this is by looking at the test and so that's why i'm showing it here um if you're ever wondering how to use something in angular uh checking out the test is is one of the most effective ways to solve my talks to me i heavily leverage that um so let's go on to the next feature the faster builds so um there's a there's an issue it solves issue four two five six two and uh it's really interesting what they did here if if a file has no angular behaviors in it and and i'm not entirely sure what they mean by angular behaviors i'm guessing annotations or something angularly or importy about angular then it doesn't get um it doesn't store its its pre-compiled set and so every time that we rebuild and do an incremental build has to rediscover that there's nothing in there so rather than rediscovering those files having no angular in them and re-parsing them every time and re-re-transpiling them it's going to cache those and make that a bit faster so our rebuilds our incremental builds should be quicker the interesting thing about this this um this feature is there's 19 lines of code added right and four of them were comments so there's really only 15 lines of code and they deleted five other lines of code so it's like net like 10 lines of code to get a faster build and this is what i love about angular cli having worked on projects where uh the webpack build takes up um a third of my year i love having angular cli with these types of enhancements for us all let me talk about the language service so the language service you can now get auto completion inside your templates for string unions so if you look over on the left here you've got this my string union which is foo or bar and i have a component that takes input of foo or bar now on the right you can see where i would use this in my editor or in my template to um to pass in a foo or bar value into that that component once i start typing foo it will start to auto complete in there it will suggest to me hey did you mean foo if i start typing b-a-r it would auto-complete the bar so it now it's going to have auto-completion for you string union types inside your template so that'll be really nice for all of us using vs code or webstorm which is what i use because uh because of the integration with the language services in both of those all right um and if you want to look at one of the tests for this in the test you can see on line seven it's got the pipe that's where your cursor is um when they when they pass in foo uh it should it should mention back to them are you trying to auto complete tofu and the answer is yes so anyway um that is how the language service was updated let me talk about the router there's some cool stuff next feature router there's some cool stuff going on the router i think it's interesting um in the past if we look at this test in the past if you had two question marks in your path um the angular router would kind of trip over itself and it would drop everything past the second question mark so if you look at this based on this on this test here we've got path to first first is equal to abc with question mark baz is true and then there's a second query parameter of second equals one two three in the past that second equals one two three would have just gotten dropped as a second query string and so um but now going forward it properly handles question marks inside the query strings themselves so that's a new feature that could be a breaking change potentially depending on how you're you're doing things but keep your eye out for it there's also new is active change for router link active directive so you can now subscribe to when you're when your router link becomes active there's an output on that now so you can subscribe to that and you can be notified when a link on the page becomes active you could do something um you wouldn't change the class because that's what the router link active is for but but you could do something else so anyway that is um that's a new change as well for the router in the past another one is if you if you put null onto a component as the router link so if you say router link is equal to a a null it would leave the href on and it would treat the null as an empty string which the a href would just be an empty string but now in angular 13 it will remove the href from the router length if you pass in null or undefined so that's a change that could be breaking and we'll kind of come back to this in breaky changes section so this is an important thing to to see and this is the test inside from the angular code base that that tests for this um to make sure that it does remove the href on on these items on the router leaks all right let's talk about another feature typescript so they've bumped typescript to v4.2 which is exciting because the 4.5 is out it's officially been released and maybe maybe by the time angular 13 goes prod uh you know to to general release it might be up to 4.5 it's currently at 4.4.2 anything older than 4.4.2 uh is no longer compatible uh so if you have any like custom tools you'll need to check that out and we'll revisit this in a second when we go through breaking changes also they've removed ie support in angular 13 which is really interesting and that's not in the change log but um it is a big deal if you're on a project that supports ie11 you now get to use this as a reason to the business hey uh business we're either stuck on angular 12 or we have to drop ie 11 support which is good because microsoft stops supporting like it's a good thing it's a it's a responsible thing to do but there's a lot of things you're going to take advantage of now and you need to do some reading things like web apis web notifications webgl um webrtc there's a ton of css goodies that you can take a care you can take advantage of now like css variables flexbox grid so now that there's no ie level support a lot of us who had to support i11 there's a lot of learning we get to do now because we now don't have we're not we're not handcuffed by that anymore so let me talk about testing they've added a thing to make testing less more fail proof okay and rather than talk about it i i uh one of the the a great leader in the union community i mean a smart one one of the architects in the community that puts out a lot of good content his name is lars he wrote a blog about it last night so rather than and create slides about i was like hey let's send people over lars's broad blog and learn about the testing module tear down that you can turn on by default in angular 13. and it makes it so that things get torn down more reliably so you have less spillage from one test to another so go ahead and check out google this talk title improving angular test by enabling angular testing module teardown by lars and check out that feature as well i think it's i think it's a big deal it'll make testing easier more reliable all right let's dive into breaking changes so we've got router link in-flight navigation changes there's some service worker changes node support uh versions have been bumped old type script and we'll talk about low children that's been deprecated as well so let's get in there so router link uh we talked about this it it removes the href on no that's a potential breaking change and so i people need to keep their eye out on if their app currently has a null if you click on it that may be one uh it may it will have a different behavior now that may mean that your test should break that may mean that you have a actual production bug so you do need to check out or watch for or just at least have in mind as you do the upgrade undefined and null now removes href from router leaks and that's an important thing to know all right um there's this concept of in in-flight navigation changes so if i have a route change happening and another route change starts that's it that second route change start it's called in flight navigation change so uh you're basically clobbering the existing change with a new one and that's fine to do i'm not criticizing anyone a lot of us haven't need to do that but i will say uh it can cause a flicker in the ui which can be problematic but now going forward it's not going to create a flicker they're they're taking in that into an account and so uh you won't get a flicker on an in-flight route change like this anymore this is the test that kind of walks you through it um my time is running out so i'm just going to skip past this but if you want to check this out down at the bottom left of my slides by the way is the link if you want to get in there and come back and revisit this slide um for service workers there's a smile there's a slide update that may break some stuff for you for active update for check for update and for um uh activated these these items activated is now deprecated for sw update and then activate check activate update and check for update they used to do promises of void they now return promises boolean which shouldn't create a bug but it may create it may break your build at least um so yeah all right breaking changes node node 12.20 is no longer supported so if your company has a dependency on a legacy version of node uh that's going to conflict with your angular 13 upgrades so you're going to need to address that typescript 4.4.2 is default older version is unsupported if you have custom tools plugins linters stuff like that if anything you've built that depends on older versions of typescript you are going to need to potentially refactor some of those into the newer constructs of the of 4.4.2 all right and then low children in low children you used to be able to say low children and pass it a string that was pointed to it was a reference to a module this hasn't been how we mostly do it for the last several years um i think it started it two years ago and maybe in angular 8 or 9 that we stopped passing a string like this and you actually did the the code on line four where you actually call import and you i pass it an import function um uh the string version is no longer allowed so uh what you see on line eight if you have that in your code and you want to go to angular 13 maybe you put an ignore so that doesn't fail because you know it works that's being removed so um you you need to update those now if you're going to go to angular 13. that will be a breaking change now if you haven't already addressed it all right dev tools when i was on angular 1 brian ford was one of my favorite people on earth because he built batarang and now we have the angular dev tools again and there's been a couple attempts at angular dev tools that were never as good as battering but there's now a proper righteous angular dev tools that you should go check out me minko did a blog on it back in may uh introducing your devtools google you'll see it it's over in the chrome web store there's you know tons of users hundred thousand plus downloads and some other things that you'll notice when you install it it's like you have a new angular tab inside of the dev tools which which shows you some of that stuff um and uh like you can see the entire tree of your of your component layout inside and if you click on them over on the right you can actually see your inputs your outputs your properties and you can actually live edit the values of your inputs or or or the values of your properties which is really really cool all right um let's talk about the road map um there's if you want to read the roadmap for angular a lot of people aren't aware that it's there just go to angular i o slash guy slash roadmap and it will show you what they're working on but these are the things that are currently in progress for them so for people going what is the unit team looking on they're improving testing times they're removing i11 support they want to make the default compilation language es2017 they've got a real focus on building up a new material as it gains popularity like crazy they're improving accessibility to to be more uh compliant with the standards they want to fully implement iv and remove view engine entirely and then there's an optional optional ng modules proposal and i'm going to talk more about that in a second that's what's currently in progress coming soon is out-of-the-box microfront and support stricter type on forms i mean if you go to the angular repo and you look at the top voted issues i i don't know over half of them are about types on forms so stricter types on forms they got 7 13 i'm sure 14 and 15 will continue to improve on forms they want to make things simpler for some people who are focused on performance and get rid of zones js so they're working on making they want to work on making um this says in progress by the way my slide's wrong these are the future ones so optional zone.js is is part of what they want to work on they want to move the angular compile to just be a typescript compile plugin so that it can be faster currently it's not easy to add direct you can't add host directives to your host element but they want to make it so that you can from inside of the component not from outside but from inside the component you should be able to add directives to yourself and and they want to be able to make that happen and then they're working on the cli to make code splitting more effective that's the roadmap all right i'm going to walk you through a new thing called standalone components this is an rfc all right rfc means request for comments the angular team is asking us to help right now is the time to give feedback they open it up recently and if you wanted to go and comment um i think at the end i'll have the the url but um there's a ton of conversation happening it has for the last few days around this stand-alone component and the rfc around standalone components i'm going to show you what that might look like so you could have an idea and you can have an opinion and maybe get involved in the conversation so yeah if you if you just google standalone components for on any other github you'll see this lots of people participating pavel opened up the issue and there's been a lot of conversations i want you to imagine if you just wanted to ship a component as a package but you didn't want to include it in an ng module so we just want to ship components we want to make things cleaner we don't want to have to just create an ng module just so i can ship a component but i just want to ship the component by itself so the proposal that they're gonna that they're floating around is standalone true so if i made a standalone true in my component declaration this is a standalone shippable ship target that i could ship out and integrate with my angular app it would go into its own bundle without the need for an ng module to import it but if i wanted to import other components other directives other pipes it will have an import section which angular components already have an import section we just don't use them very often um but but you would you could leverage that to bring in your own like in the template here it's got a baz pipe you could import pipes this way rather than importing them in the module that no longer exists you can just import them directly in the component but it would still stand alone so you could still integrate by putting your app component into sorry if you had a standalone component rather than declaring it you would import it like you would a standalone module so they would be imported differently rather than be declared they'd be imported because they're standalone inside your component you can import the common module for example to use like ng4 or the ac pipe those are both provided through the common module if you want instead of load children for a route you could say for this route load the component standalone component and um that would load the standalone component so it could integrate directly with the router to create that that standalone ship target or entry point you could dynamically load it by calling import on it and then using the view container ref to create the component and put it into the dom uh pipes could also be standalone so you would need to create a module just for a pipe directives could be standalone if you want to read more about this head over the discussion happening right now on github thanks to again thanks to the jetbrains team organizing conferences right now is is brutal it's hard uh and i just want to say thanks to them for focusing on the community focusing on us during these hard times if anyone has questions for me aaron frost on twitter my dms are open aaron hero.dev and again don't forget to listen to any of the show ng show and be part of [Music] you

Channel: JetBrainsTV

Views: 9,354

Keywords: JetBrains, software development, developer tools, programming, developer

Id: PUxNiC6Qye4

Length: 24min 50sec (1490 seconds)

Published: Thu Oct 21 2021