YTread Logo
YTread Logo

What’s new in Angular (Google I/O ’19)

Mar 14, 2024
I am very grateful to have everyone here. This is one of my favorite conferences. It really connects me with the community. Thank you so much for everyone being here in person and thank you so much to everyone who is watching this online. We spend all year working on Angular and IO is one of the few opportunities we have to really summarize

what

's been happening in the Angular community and really reflect on where we're going, that's

what

we're going to do today: we want to share a little bit about the things I've been doing and I really share what you can do with

angular

so my name is Steven fluent.
what s new in angular google i o 19
I lead developer relations for the Angular team. Our team is really focused on two things, helping developers and organizations succeed with Angular and reflecting their needs on the team. so that we can make the right kind of product decisions as we continue to evolve the platform now, before we get started, I really need to introduce you to someone. This is my son Daniel. He hadn't done it about six months ago and was terrified when we found him. I found out we were going to have a child, but I had a friend who told me everything would be okay.
what s new in angular google i o 19

More Interesting Facts About,

what s new in angular google i o 19...

Children go from being born to crawling, walking, driving and leaving the house. They give you time to adapt and reflect. I really understand what's going on and the reason I put it there is because technology is not like that at all. Technology changes every day. It changes faster than any of us can keep up. There are new APIs, gentlemen, new capabilities, there are new best practices and So keeping up with this can be really challenging, so our talk today really has two points. First, I want to keep everyone up to date on what's happening in Angular, and second, I really want to talk about how Angular works. make it easier to stay up to date in general, so let's get started.
what s new in angular google i o 19
I want to start by reflecting a little on the last year at Angular. If you look back, we really believe that everything we do is informed by our values, so we care about three things we care about the apps that users love to use because if we're not here for the users we probably aren't here. focusing on the right things we care about the apps that developers love to create and we care about a community where everyone feels welcome and that's why even last week we were in Utah, we had the whole team out to give a Lots of presentations and connecting with the community and we loved interacting with the community.
what s new in angular google i o 19
We really strive not only for that. Why great technology but also? listen and participate because we are not successful on our own, we are successful because we have so many great people who work with us and build with us. We actually had an interesting opportunity earlier this year. We were able to connect with about 22 public companies. who are using

angular

and one of the first things I did was go around the room and we said: Hey everyone, why do you like angular? And the answers we got are almost universally in three categories. Number one developers love our CLI.
It helps you go faster, it helps you automate all the things you should be doing, but often we as developers forget about the second one. We have a very stubborn architecture when you go from one team to another, when you go from one company to another. Angular applications are often seen as the same, best practices that one Angular developer knows will probably be the same as others and this is really helpful in encouraging adaptability and flexibility as you can really focus on your product in instead of how you are using angular and a third party that they value. the community, just as we talked about how we enjoy the community, we're actually hearing that some of the most valuable parts of using angular are the connections you get with other people and there are actually a lot of places where you can do this. there are over 800 meetings and then there are a huge number of big conferences around the world and even just looking back at the last 12 months, eight new major conferences have been announced or started, from ng de in Germany and G Spain to ng China and G Sri Lanka and ng Malaysia, so if you haven't attended an Angular conference, I definitely recommend you check it out because almost more valuable than the content, almost more valuable than the slides and the presentations, is the talking hallway clue. other people who use angular and really understand and share their passion, their challenges and their successes, one of the graphs and one of the ways that we have used to measure how popular angular is because we have seen a huge growth in the community.
It's actually traffic to our documentation site, so in 2018 we saw a 50% growth in our traffic and our community, and this is huge. We love that new Angular developers appear every day. How many people here are new to Angular? Awesome, welcome one of the biggest offerings for Angular developers is the technology we call schemas, which is why we've talked about this in the past. Schemes are a way to perform arbitrary tree transformations in an automated way. When you create a new project, we do this thing where we take a void. file system and we give you a structured application and when you take an existing application and want to add a new component, we will automatically create that component and update the references to that component.
Schemes are now really central to our long-term strategy. because schematics work to solve ecosystem-wide problems now, to illustrate this, I want to poke fun at ourselves a little bit because across the entire JavaScript ecosystem, even on the angular team, we have a little problem, this may seem a little familiar, This is the Angular Material web page with a six step process to get started with Angular Material, you enter the terminal, run to install commands, enter your application, add some dependencies and then start using it, take a couple of steps and add themes but all of these steps are relatively automatable, they're the same steps every time you don't take the time to learn, you don't take the time to customize anything for your app, so asking developers to follow these steps is something which we don't do explicitly.
I don't want people to have to do that and that's why we introduced a command called ng ad which is really based on this idea of ​​adding capabilities to your application very, very quickly using things like code and third party tools, so I want to give a A couple of examples of this example are from some of our mobile partners, so if you're looking to add and build mobile capabilities and want an installable app that's in the Play Store, for example, there's ng add in angular slash ionic where you can take an existing angular app and add an onic to it and then if you want to invest more and want more native widgets you can use something like a native script very easily by running ng ad in the native script bar schemes but there are many different ways to do it. can empower developers one of the areas that I think is really emerging and really exciting is the idea of ​​full stack development using angular and there's a really great package called Ness j/s if you haven't heard of Ness Jas Ness It is a platform really to build the backend of your application if you are creating microservices that you want to connect to a database Jeaious uses the same principles as angular such as being type-first, using decorators, having a packaging system, having providers, injection dependency, all these cool things that you know and love an angular, they are using those same principles on the backend and what they have done in the last few months is they actually created a scheme that allows you to add SJS to your application, so if you run ng ad in an SJ s/ng universal you get a few things so obviously you get their microservices framework so you can build the backend and frontend of your app and the magic part here is that it's in the same app as this. a single NPM executes the service command or the nth thread service command.
I'm going to activate both my backend, my services and my frontend from a single project and this really helps developer productivity because the installation and configuration is much less, but I've gone a little further than that, no They not only configure my application for live service, but they also do server-side rendering and in fact, this is the first time we've seen this where you go into a live reloaded environment, the backend and the front. -end and the entire application flows through a server-side rendering pipeline without having to do a ton of tweaking and configuration, so this is really cool.
I'm very excited about where this is going in the future; In reality, there are hundreds and hundreds more. The ng add commands what we're seeing is a lot of adoption throughout the ecosystem, where anyone who wants to add to applications more easily and wants to automate that set of configuration instructions that we all have, can do it with schemas and ng add and the mentality Mentally, the change you have to make here is that your dependencies have to do more work. We often talk about this idea that a lot of times when we want to update our applications, I'll run an NPM update and then I'll see what's broken and then I have to fix everything that's broken in my application and maybe I'll have to check the guide, so again I'm going to make fun of ourselves a little bit, so if you take a look at the angular fire documentation, we have this very good guide and if you want to upgrade to version 5, these are the steps you need to follow, these are the concepts you should know, but this is another area where we want to automate things. and we want you to help us automate these things when you create dependencies when you create libraries, so we have this ng update command that every time you update an angular application we have been doing this on your team for a long time. over a year ago we want you to not have to follow a huge set of instructions to update your application, we want you to run a single command and then let the authors of these libraries and dependencies do all the work for you, so there is no a lot of companies that do this, but I want to mention one narwhal in particular because they are doing it with their NX tool and scale and enterprise apps and allianz is really interesting because when we think about all these tools in the ecosystem being built most of the time they do it without our permission so I've never heard of this. until last week when I was in ng-conf and someone came up to me and said, we're building something really cool and keeping our entire company up to date by using schemas in ng update and that blew my mind.
They were able to keep hundreds of developers in sync using these capabilities. You can always check and see if a package is using an ng update by looking at your package's JSON file and if you see this ng update key, that means it has update. capabilities and are probably trying to keep it up to date. There is also a really good tool available if you visit ng x dot tools. This is a site created by the community to take advantage of the day we have. NPM and github, where it actually analyzes the available information and makes it searchable, and then you can see what packages offer schemas, what packages are available for addition and update capabilities, so this is a really great discovery tool that I'm also very excited about the future if you look at the NPM tools J is calm and ng Angular team, this is something we're seeing a lot of broad adoption from the community.
If you really think about our strategy, we're investing here to keep you up to date, take the burden off your shoulders, and keep you up to date. date and putting our own a lot of times we use this phrase it's just angular because people talk about version numbers and we really want to get to a place where we are beyond version vs. we want to get to a place for the angular evergreen tree for developers and we think we are really on the right path to achieve that and a great example of this is actually a blog post written by air france-klm where they talked about how they updated version 7 in a single day so They made this giant enterprise app with millions and millions and millions of users in a single day so they talked about some of the strategies and it relies heavily on tools like ng update and I love it this graphic they included in the blog post.
What was the update to version 4 took them about 30 days, so a month of your team's time to stay updated,then version 5, version 6, it took them about 14 days and now they use the latest capabilities using this mindset in this culture that we have around. Everyone stays up to date and is together in the ecosystem. They were able to do this in one day and hope to do it even faster in the future. There are many different ways we all benefit from Angular and you. We're really focused on this idea of ​​helping you move faster with a set of built-in tools that help you scale better using the knowledge we have from Google.
There are a lot of cool tools that come out all the time that I'll talk about later. and we really help you go further on more devices, more capabilities, we have a full set of tools built in from our CLI, forms, HTTP stuff in the CDK, all of this helps you stay on the happy angular path and we really focus In this idea of ​​having a really great built-in option without removing your flexibility, you can change any of these tools and do it all yourself if you want, but we find that most Angular developers find the tools they need or start contributing to us and that's something we're excited and passionate about, so what's been new over the last year.
I've released a ton of features. I'll just highlight a few of them. We released some very nice drag and drop support in our cdk or component development kit, so if you want to have something a little bit higher level than those. low level primitives that exist in the browser, we have a drag and drop feature that supports previewing, so when users drag previews will appear in the right place when you drop them, they will bring back all that kind of nice stuff that you expect To be able to do it with the cdk, we also introduced capabilities for virtual scrolling, so if you need to render a list of a million items, I would wonder why you are rendering a million items, but you don't have to do it all at once, do you?
TRUE? having a very small subset of those in Dom at a given point but still having good displacement capabilities. One of the things we've been working on with the Chrome team is really focused on performance, so one of the capabilities we're introducing is performance budgets just to raise the level of visibility in your app when your app is running. getting too big for the community again and their console, which is a really fantastic graphical interface on top of the Angular CLI, is now available in Visual Studio code and we have diffs. polyfill loading and I'll come back to this, but differential loading is a really great strategy to send less JavaScript to the browser as long as the browser is capable of doing so.
One of the partners we work with a lot is called stack blitz and it's a really cool idea - all of our documentation is based on them and what they've done and what they announced at Google Cloud NEX, it was actually the ability to building applications in the cloud, so using technologies like Google Cloud Run, you can now create almost a VM Instance and do a production build after you get paid, all online, which is a really exciting capability and we're very excited to see them implement that feature in the next month or two. We also work very, very hard to stay up to date. we have a date with the community, everything we do is a balance between stability and innovation and for us, staying up to date with technologies like Typescript, Nodejs, Rxjs is key to giving all developers new and exciting capabilities without losing everything from the beginning. past, so let's talk a little bit today, so as of now we're at 8 0 0 RC at 3, which is the preview build for the upcoming 8 0 build that we expect to arrive sometime in May and this has a ton of A couple of really interesting and exciting things I'm going to mention, so we expanded differential loading, so I talked about how in the past we launched differential loading for polyfills, which meant we shipped only the right polyfills, now we're expanding that to his principal. package and its lazy loaded fragments, so no matter how much code you write, we will now effectively do two builds, one for legacy browsers including es5, which is what we've always been shipping up until now and we'll ship one. using modern JavaScript and the benefit here is that we can really save a lot of the package, so for example, angular IO we switched to this because it's automatic for anyone who opts for version 8 and just because of the change in the language we ship. in the browser we saved 41 KB and based on the feedback we received from the community, depending on how many new language features you use and how much transpilation we are doing, you can save between seven and twenty percent of your package size, which is just It's huge that we can offer this to you automatically by simply changing the way we build your applications.
We also introduced something called Builder api so that Builder apis allow you to access commands like ng build ngserve and other commands in the same way that historically, skim junkies have allowed you to take advantage of things like ng generate or ng new. We're really excited about the potential for builders because once you've done a process like this where you build, as you can see, you call the create builder method. passing a function that returns the promise of a constructor result, it's relatively simple when you think about it, we actually just published a blog post about this, but the potential for this is huge and in fact we've already been working with multiple teams so firebase Google cloud Azure and a few other people so if you run ng run deploy after installing a package that supports these build APIs you can not only do your build but you can also do automated deployments.
We think this is a really essential step to take. Kap's Angular apps went from being great JavaScript to being great JavaScript that serves itself very well. We've also introduced web working tools in an improved way, so historically you could do this with a bit of hacking and configuring webpack on that sort of thing, but now we've included them as their own thing, so now our angular CLI is capable of separating worker fragments like the separate JavaScript file, loading them at the appropriate time, we have even connected it to our CLI using ng generate so that you can not generate a web worker and get a separate web worker to perform intensive tasks processing or anything you want to get out of the UI thread, one of the big deals that's coming up for angularjs developers that people have been asking about for a long time is that now our dollar sign location service essentially we can share the url between angularjs and angular applications.
This historically was a challenge for these hybrid applications. If you were doing an incremental migration from the old version of angularjs to angular, this could have been a challenge where basically the two frameworks were fighting over location, but now they can share that using the angular router, so we're very excited about the things it unlocks. We also announced that we will be renaming the team from Angular Material to Angular Components. team and the first thing they're doing is part of this kind of new team structure, it's really focused on collaboration, so they're working with the material design team specifically around MDC web components, which are a set of JavaScript components in HTML. and CSS come from the material design team to manifest material design on the web and what we have done is create angular wrappers around them and by collaborating more with this team we will have better feature parity with the rest. from the material design team and you will get new features and new capabilities faster, so there are actually some experiment components that are available today if you want to try them and this will be essential for our long-term strategy of working with the community works with the ecosystem to ensure that we are providing consistent experiences across the board so I really want us to think about investments because we are not just investing in angular but we care about investing in the ecosystem because as I started Instead of saying we can't Doing this alone, we are successful because of the community, so to think a little more about these investments, I want to invite Vikram on stage, who will tell us about some of the new and interesting things we are doing.
Ivy and Basil, as well as what they unlock and what they allow for developers as they land in the future. Oh, hello, how is everyone? Okay, first raise your hands. How many of you are technical coders in this crowd? So, most of you, then, yes. Today you will go over a lot of technical details, so it will be good. I'm Vikram, I'm a software engineer in Google's Angular team, I lead the server-side rendering team and one of the fun things we've done in the team or last year the first server-side rendering project was implemented. node.js base inside Google, which is a Google Shopping Express, so today I'm going to talk a lot about the future.
What I'm going to show you today is still something we're exploring and experimenting with, but we're very excited to share this with you so you know what's coming and can plan for that future. What does this future imply? Basically, we want to provide the same developer experience you're used to with Angular, but with much better performance than the modern world expects from the Internet on mobile devices, so I'm going to show a demo, but before that, I'll Let's go over some points to set the stage and some of the theories behind this, so the first thing I want to make clear is why we are doing most of these things.
You're going to hear the same thing. There are things in this whole lecture and different web tracks expressed in different ways with numbers and things like that, but I just want to filter it so it's something simple that you can remember and take away what we want to do as framework developers is essentially load the bare minimum. amount of JavaScript to get your app into Traktor quickly and load the necessary live JavaScript, so you'll see this over and over again as I explain the different performance strategies. How many of you here know Ivy? Many of you, to give you some background on Ivy, it's our next-gen rendering pipeline and Angular, and we've been working on it for the past year and it has a lot of benefits, but again here I'll focus on the savings on the JavaScript side. that Ivy breaks, so there are three essential strategies that you can use to make your application load quickly, some of them are very common and some of them are not so common, and we will see how IB facilitates each of these strategies. in some cases and it is possible for the first time in some cases, so the first thing we will see is the shaking of trees.
Tree shaking is a very common strategy that is essentially used to bundle only the JavaScript used as part of your application, so it is essentially the concept of pay for what you use correctly, so before Angular IV it was still very good bundling just the JavaScript that you use from different libraries, different service channels and things like that, but the angular framework, the core of the angular framework itself, was always included as part of your end. bundle well, so the first thing I want to essentially say as an advantage of Ivy is that you get a smaller subset of the angular framework itself just based on what you use right, so you get like I can rephrase it as just getting the parts of angular. that you use in your application and which may be much smaller than the entire core Angular framework, the next strategy is to split the code again, this is common and the concept is to essentially split your application into different parts so that you can load them as needed. particular feature, so it allows pay as you go strategy, so before IV, I mean the best practice we currently have in angular is to split the code based on paths, but again I want to emphasize that even before IV . although libraries, services especially, we are getting much better code splitting and the service ended up in the fragment they are used in, the core angular framework itself always ended up in the initial package, so the way IV helps is somewhat similar to what we saw and the tree shakes, but it is different, so with Ivy we can split the angular core framework into subsets and use them only on that chunk, so we can better distribute the core into different chunks and this makes our initial pack sizes much larger. smaller than before, the other thing that ivy now allows is essentially that it now makes sense to think not only about thepath level splitting, but since our packages are small we can think about component level splitting, what if each angular component you write could end up in its own fragment, so with that we can think about loading your application in really small chunks, so here, instead of doing it at the route level, we can think about even in a single drought you could have a shell, a navigation bar, and On some pages, each one can go on its own. snippet and there's something else I want to think about is that now we can think about splitting the code not only into different components, but even for the same application or component we can think about splitting the code in a meaningful way in your application.
Over time you can think about progressively improving your app by first loading the initial version of your app which loads quickly but uses a smaller subset of Angular and we can differentiate the loading from the rest, such as things like animations, which you may want carry. in the background and we can essentially incrementally enhance your application to its final complete state where it is using the entire feature set of angular and again since we can split the core into separate parts this becomes a viable strategy now with IV The latest The strategy I want to talk about is progressive hydration.
This is again more experimental, but it ultimately brings together all the different strategies we talked about and allows us to load our Angular app in a very fast way, which is why we saw Wells shaking the trees. where you pay for what you use code splitting where you are ready to pay a Segoe and progressive hydration is where it really makes all of this come together and let's see how you load your application in a very granular way to show this will be essentially showing you a demo that shows all this together and we have two versions of the app, the one with the light team is our current angular application and the one with the dark team is essentially the same application created with Ivy with all these strategies that we talked about and to explain more about what you're seeing, this is essentially the demo app breakdown for the way this is the new intro app that we're launching as part of our a dot oh, so it's somewhat closer to a real app, although not It is a real application and uses different features of angular right, so it is not a simple hello world program. it uses different features of angular so it has a root and the top bar and we have a real router there which chooses the current route and loads the component for that particular page and this particular page has a list of products and a button to show. an alert so we have set up this app with all current best practices where we could split by path of course we compile and minify ahead of time and on top of that for a faster first panel we have also set up side rendering of the server in This example is correct and we want to compare the best of what we were able to do with what we can do, so the demo starts with a static HTML version of three renders of the page.
In this case, there is a node server that is running when the request arrives. and just to show you that the static I like to show it in gray, so what happens before IV? This is how the app currently starts without IV, it starts as a single synchronous step and angular takes over its page and its page. becomes interactive, this has two problems: the first problem is that you now have to load JavaScript for an entire route before the page becomes interactive and the second problem is that maintenance itself is waiting until you learn, analyze and execute everything . of this JavaScript and make this route interact so that even though the strategy works well today, we are thinking about the future where we want to scale our applications even better, where this strategy does not scale that way, so what can we do with Ivy?
I'm going to talk about two different strategies here, one we thought of was a simpler version of progressive hydration where we've done all the hard work, as you saw before, of shaking the tree and splitting the code at the component level now same, so now we can think about not loading as a single synchronous step, but we could start this application one component at a time, this is an improvement, but as you can see it still flows from top to bottom, this could be more comfortable in the model we use. we're used to it at the moment, but we think we can do better than this, so we went back and thought about how we can make this even faster, so this is the current strategy we're thinking about, which is more of a online strategy. demands hydration, so you can think of your user as a load on your page and they're trying to properly interact with this page and we want that interval to be as short as possible so that instead of hydrating from the top down, we can hydrate where The user is trying to interact and on demand, so let's say I click a button in the product details component.
Can I start that component independently first and then continue with the rest of my application? If you saw, we are trying to start a company independent of both its parent and child rights, so again we did all the hard work of splitting our application code at the component level. We think we need the strategy to really take advantage of that right, so if the product details always look for the product alert, we're not making full use of that, so we're thinking about: can we really start one component at a time? independently without your parent or child?
So you can think about them, the app slowly hydrates in the background and becomes your full app, so let's switch to the demo, so I want to show that this is actually running so we know it's a real thing, so can we switch to the demo please okay okay so you can see it so I'm going to compare. our current version of this demo runs on the current version of angular with current best practices and then we show you the strategies that we talked about right, so this is the top bar, this is the product detail showing three products and this.
The Share button is part of the product details component, so if I click on it, it shows. Hello, the products that we share, this notification is actually a secondary component of our product details and when we click on it, a different one appears on the right and if we see. what's happening behind the scenes for this one, so we actually render this page on the server side and so you can see there's something that shows the server side rendered and here we are again using all the best practices including the shipping es6 code for modern browsers and you.
I can see that the code size is around 217K for the first initial load of this application, so if I reload it, it will be delivered here and then all the recent loads and your application interact correctly, so let's see more about the new version IV. and the strategies that we've been talking about, this is an induction to show that it's a future and this behaves as far as the user is concerned, it behaves the same way, right click on a lot of things, but what happens same, but let's see what happens behind. the scene, so again, this is server-side rendering in the same way as before, but the difference really here is that we don't load almost any of Angular as part of our initial package, we just load some facades to load the rest of your application as the user interacts with it, so if you look at the packet sizes, it's a really small thing, so in our team we essentially consider the uncompressed minified size so you can see that the initial sizes of the mountains are 11 and maybe let's say 15 KB, so with this Now we've set up all the things that we need to make this app interactive, but right now it's not really interactive, so let's see what happens when I click the Share button, like this I'm going to clear this so we can see the incremental loading, so I'm going to click on the share button, so what's happening at this point is the initial chord that we loaded, it's started the page so you can wait for the user interaction and then upload the necessary code. to respond to that user interaction so this is really the first time we've brought angular into the picture and as I told you with Ivy we can code sleep better so compared to the previous example we can bring a much smaller subset of angular as part of this, so you can see we brought in just 46KB of angular and then we can make this a pin tractor and again, if I click elsewhere in the app, this is where the parent has boot, but the child, which is the notification button, hasn't actually fetched yet, so to interact with that is when you go and incrementally fetch that part of your app and if you see those sighs, they're 962 Kb, we really shouldn't be.
By compressing this, the size of the compressor is more than 962 Kb, but you can see essentially as we have done it, now we can split the code of this application into such a small size and load it incrementally, which can give our users a Much better experience, so I just go. to click on different parts of the app to see more examples of lazy loading, so if I navigate to a different route, we are actually loading the router only at that point, so you haven't paid the cost of the router until now and now. is the time when you're actually bringing a router and we're not actually bringing a big router, we're bringing enough router to be able to do the rerouting properly and again you can see that the code size is almost like a magnitude smaller than what We saw in the previous example, so if I go to the checkout page, similar very small snippets so you can see the advantages of IV that it brings here, not only can we break down the code at a very granular level, but now it also allows for strategies very advanced for you to load this application in very small chunks, this we believe will make Angular ready for the next generation of loading and publishing for Angular, which is much faster, so can we get back to the slides?
Please, okay, to recap. I just want to review, so we saw how Ivey allows us to use advanced strategies that are now possible, like code splitting using tree shaking and frozen hydration, and we believe this prepares the angler for the next generation net and to summarize what that Stephen said and spoke. about the amazing angular community and where the angular ecosystem has evolved in the past year and where it is now and we are investing not only in the present but also in the future, and the only good thing that the angular team does is that we really want to bring everyone from where we are today to the future that I just showed you, so thank you all for using angular and taking this journey with us.
We are very excited to have you at this race and we will be available after the talk outside. And we will also be available in the web sandbox. Very well thank you.

If you have any copyright issue, please Contact