Duration 40:12
16+
Play
Video

What's new in Angular

Kara Erickson
Developer Advocate at Google
+ 1 speaker
  • Video
  • Table of contents
  • Video
2018 Google I/O
May 9, 2018, Mountain View, USA
2018 Google I/O
Video
What's new in Angular
Available
In cart
Free
Free
Free
Free
Free
Free
Add to favorites
180.95 K
I like 0
I dislike 0
Available
In cart
Free
Free
Free
Free
Free
Free
  • Description
  • Transcript
  • Discussion

About speakers

Kara Erickson
Developer Advocate at Google
Stephen Fluin
Developer Advocate at Google

Kara is a software engineer on the Angular core team at Google. She is currently working on building the next generation of the Angular rendering engine. Prior to Google, she helped implement UI components in Angular for guest management systems at OpenTable.

View the profile

Stephen is a developer advocate on the Angular Team at Google. Stephen works to solve real world problems faced by developers and businesses, and to represent the needs of the community within the Angular team.

View the profile

About the talk

Angular has a flag that will cut hundreds of kilobytes off of your bundles, improve mobile experiences, and allow you to dynamically create components on the fly. Learn about these changes and what they mean for your applications.

Share

I'm really excited to be back here at Google IO for me Google IO represent a huge amount of innovation and inspiration and that's why I'm really excited to talk about some of the new things in angular. We're going to cover this in three sections first. We'll talk a little bit about the momentum that we've been building over the last year. We'll talk a little bit about what it's like to be an angular developer today and will cover some of the things that we released in the last week * 6 / lease and then we'll give you a sneak peek into some of the future things that we're working on to make

angular even better. So let's get started talking about momentum and whenever I talk about and you're in our our place in the ecosystem, I always start with r values until the end your team talks about three values in particular. We talked about apps that users love to use because at the end of the day, that's why we're building software. We're trying to build great user experiences for every person that comes to one of our applications trying to do something but we also care about developers making sure that we have apps that developers love to build developer experience is so

critical when it comes to productivity and when it comes to maximizing the outcomes that developers are able to deliver Lastly but not least we talked about a community where everyone feels welcome. This is really critical to being your team because over the last few years. We've only been successful because we have a huge community in a huge ecosystem and it's been building around angular not just the efforts that weird creating community over the last few months. If you look back at the end of last year, you can see it some really interesting

numbers and now most and your applications based on conversations. We estimate that around 90% of anger applications are actually built behind the firewall. So with no public presents and no visibility to us and so it's the best standing for the growth of anger that we can find is Doc's traffic. So this is the 30-day traffic to our documentation website and your IO the end of last year going from round 875,000 30-day active users to over a million. We're also very excited that starting this year. We just recently hit 1.25

million 32 actives on our Dockside is this is a huge amount of growth and we're very very thankful for all of the new developers that are picking up angular and getting started with it. There's a lot of really great applications built with angular and I want to reflect on just a few of them. Grubhub.com is an awesome app that is really about driving great user experiences. They use and your today and they're looking at a future where they can take advantage of things like server-side rendering and Progressive web applications. One of the biggest areas of angular applications that we've

seen is actually in banking. And so if you look at the Allianz fund Universe, for example, there are tons and tons of Banking and Financial applications built in angular. He was actually really great choice for experiences like this because they care about things like Rich user interfaces where they need to present a lot of information to users and then collect a lot of information back and drive Decisions by users into having a good Rich maintainable user experience is critical We also talked about Forbes as one of the great examples of an in your application. So whenever you

visit the article page of the forbes.com site, you're actually visiting an angular application. And so not only do they do this on the client side of the application, but they also do server-side rendering and one of the reasons we love to highlight Forbes is because they actually participated in Universal which is our solution for server-side rendering of angular applications. We also can't forget about Google. There's over 600 different applications and projects within Google that use and you're among them applications like Google

Shopping Express Google Cloud platform base and many more important reasons that we talked about Google using angular is because it's actually part of our validation strategy every line of code that anyone writes goes through get how that goes through the same PR process. It gets merged into angular. We also do a level of validation. So every commit before it gets merge into Master. He's actually validated and against all of 600 up plus applications within Google to ensure that it's going to continue working and we have a really interesting challenge because every time we want to

make a change the angular we're actually responsible if we break any of those applications until we're very cognizant of when we need to make a change the angular the impact that has on other developers and it worked that it's going to cause for those To stay up-to-date with angular. We're also very thankful to the huge amount of meetups in groups out there that are sharing passion and sharing knowledge about angular sues over 700 groups according to medium.com others. There's a lot of great ways to organize groups. It's a one of the ways that you can get connected to these groups. It says it

angular. Meetup.com. Basically no matter where you are in the world. You can probably take advantage of an in your community really nearby. We also look to a lot of different conferences to host in your team team. They're put on by Austin community members who we are fortunate to have them invite as to come to participate one of the conference's we really liked over the last year. Was that conference call Angie Atlanta. This is the first time conference. They focus on as part of their speaker lineup was including underrepresented groups in speakers. And so

their focus on making sure they had the top notch talent that also reflected the diversity of the communities that they serve what's really amazing and would love for this to be a model that other communities and other organizations adopt. There's another organization that I want to mention. It's called Angie girls. You can visit their website on NG girls.org into this is an organization that is dedicated to training developers and making it easier to get entrance into this amazing technology industry using Technologies like angular. So they're actually having a Meetup this Friday.

Unfortunately, it's full but if you're interested in having one of these Co organizing one of these events kind of anywhere in the world, if you're interested in getting involved definitely go to NG girls.org and try and get involved. This is a really great cause and we we love to support it. We also talked about how the angular team has a really deep Partnerships with a lot of different communities across the ecosystem on one of the world. We got things like webpack. Where is part of the web packed full release we were working closely with that team to make sure that we were getting the

source of capabilities we need but then also making sure that angular was able to take advantage of the latest webpack so that we can move the web for word together. We also have dependencies on projects like rxjs. And so while there are contributors that are on the in your team to rxjs. We really want that to stay as an independent project and then support it and collaborate with it to make sure that we're helping to push the web forward. Has anyone seen stackblitz sakowitz is one of the coolest pieces of Technology that's coming out right now. If you haven't seen it stacked what is a

web-based IDE that handles everything from npm downloads to spending of an environment where you can really just get started coding almost instantly. One of the greatest features that I love about sex with you can point it at an existing GitHub repository that has an angular CLI project. It's going to automatically download that into the browser on the client. It's going to install the nest three dependencies and get that application up and running very quickly. We're also working very closely with seems like nativescript nativescript is a way to build applications using JavaScript and

typescript using the V8 engine under the hood, but then rendering out to Native UI widgets on IOS and Android we're really working closely with the natives 15 because we want to create better and and experiences for developers. We see a future where for example the nearest refueling can be embedded directly into are still alive to make a single experience that allows developers to take their applications further. So we talked a little about the momentum of angular and now I want to talk a little bit about some of the reasons why developers really like the things that we're doing and

what are the things that we hear most is that they really liked our opinionated integrated set of tools. I'm going to go through a few of these tools that developers really like using the first one in most people are going to touch it the angular CLI. It's really built to automate and accelerate the workflow taking care of common tasks and making the things that you want to do make allowing you to do them faster their commands like Angie new to beat you up and running within existing application much faster, including things like Pat's ensuring that your application as you continue to stay

without is usable and maintainable give commands like Angie generate which take your application and we can add things to it incrementally. So adding things like a component with NG serve where we're going to take and give you a live dead server built on top of what it was all of your changes instantly. As soon as you hit files save takes all of our knowledge of the ecosystem in all of our knowledge of the industry takes your application and build it in a way that is very redistributable and very usable One of the things under the hood and Stacy light we're seeing a huge amount of

adoption of it's called schematics and schematics or what we use under the hood to make the changes to your project when you use something like Angie new or energy generated in under the hood. It's really really powerful because they can run any code that you want basically. So when I run into generate component by component, we're using schematics under the hood to do that, but not only are we just printing blueprints in creating new files in your structure in your application. We're also updating some of the files in your application to when I generate a new component. I'm going to get

all the files the CSS to HTML the typescript for that component, but I'm also going to be getting my module updated so that there's correct references to that application and we don't do this with anything like regular Expressions. We're actually doing a STD text tree of your application and making safe changes to it. And we do the same thing with Angie knew where we take empty application and we give you back if we printed out working application and there's other examples of schematic. Two example using a schematic you could create an NG generate command Will you pour your back-end

server figure out the shape of a p i and they create a local service and this is something that we're seeing the community starting to adopt Maddox is an open platform that other people can use and we're taking this much further in V6, and I'll talk about that in a second. And you're also helps developers with a lot of the comment ass if they have do we have a router so solving the common problem with taking the state that exists in a URL from a the URL bar. If your application understand what route to use her once with her intent is and then mapping that into local application State

going the right components during the right views. We also have an h-2b clients that is able to give you back Jason type Jason even if that's what you're asking for. But also are you should be client is really focus on testability. So it is easy to mock out. It's easier to include in this integrated environment. Forms are really important part of building applications because every time we build an application, it's really a conversation with the user. We want to be collecting information from the user for the same time as us collecting information. We wanted to giving

them feedback about the validity state of an application and what they need to be noon be doing next and angular forms helps with that. Animations are also a key part of building great applications think about the stylistic in the brand side of things when they talk with animations, but I'd like to challenge that I really think about building better user experience is like giving these are subtle hints. If you animate the route transitions within your application as the users navigating across the hierarchy you're going to give them a more intuitive understanding of what's going on in your

application and howdy application is reacting to every change that they make this is very helpful and really drives better user experiences. We also Caravan internationalisation. A lot of applications are building for a global world now until we have the attribute that you can add your application and the i18n placeholder are able to extract by our tooling and give you an industry-standard file format like Excel IF that then you can either translate or pass to a translation house and then we can fill that back injury Wrangler application at Bill time. Do you have no performance

head to do internationalisation? We also want to help you write better code in for a lot of developers. This means writing really good tests. And so we focused a lot on tools like protractor and Karma and making sure that it's easy to do both end-to-end testing with anger applications across a number of different browsers, but also be able to do unit testing so they can ensure the component or the pipe or whatever. I'm doing on a more individual basis is going to continue working in matching the logic I expect as my application continues to grow to hundreds or thousands of

components and hundreds of Developers. Another piece of helping developers write better code is our language service Services. The thing that helps the Ide at the understand what's going on in your application and the most noticeable part of this is in your templates, if you're adding an angular HTML template we can actually pull in the variables in the properties from your component. So if you make a typo if you make a mistake, we can actually give you those very nice red squiggly lines that tell you to go fix that mistake. What is the additional tools we have is in your Universal.

This is the tool that I mention that we collaborated with Forbes on for server-side rendering is really important. If you're delivering some of your content to machines with a lot of us do that could be a web crawler for search engines or they could be a social crawler for something like a social share where I want to have a share button. I'm application because a lot of those crawlers a lot of those machines are not capable of running client-side JavaScript and to be rendered with something like anger Universal not only gives you that machine readability, but you can also give you

benefits in terms of the perceived load performance of your application where users think the application and it looks and it feels more interactive faster than it is while the application is bootstrapping in the background and this can really help things like conversions. What do I want to talk about is angular material in the component devkit be heard a lot at Google IO this year about material design until the Angry Orchard Ale Project is really designed to take material design aesthetic design system and manifested as a set of angular components that are easy to use and while we were

building out material design. We just started seeing the same sorts of patterns the same sorts of problems happen over and over where you had to solve things like bi-directional input or accessibility for creating overlays until it was done is as we filled out in your material and as we talked to other component Library authors, we baked all of those capabilities in for component desk it so you can apply them one by one. So if anyone is building a component Library out there, which makes me every company were talking to does we definitely recommend the cdk cuz it'll help you go faster

and will help you deliver better experiences to a wider variety of audiences. So if you look across this cute set of tools, you're going to see a couple things you're going to see that we are definitely opinionated because we want all of these things to work together and we want to be a really good default. But at the same time we're not taking away your freedom for any of these tools. If you want to do it a different way you want to go use another third-party Library. You absolutely can do that. So in the last week, we actually launched 600 of angular which we're very excited about.

One of the things that we're really trying to do is to make updates really easy. Someday. We actually want this version of her to disappear so that we just talked about new features and then everyone automatically gets them and one of the ways that we see that Vision coming through these by making the update process easier and so is part of this latest version. What we've done is to focus a little bit less on the framework side of things and more on the tooling side of things focusing on the end and developer experience. And so we really want to give developers a balance between stability

where you can continue running angular applications day after day, but we want to bring to you all of the Innovation that comes from this vibrant and exciting JavaScript ecosystem. And so the command that it really helps with this called Angie update until you run it with Angie update and then you give it a package name and what this will do is this will apply schematics under the hood to not only do the npm install, but it was okay. Your project up-to-date and so we're already using this in rxjs. We already uses in angular material and more and so let's talk a little bit about how this

works. And so if I run a command like Angie update at and where at in your / core is one of the angular packages in my project to do a few things. So if you look in the package Jason of angular 4 you're going to see this thing called a package group. This is a concert that we developed and built into our ceiling update one of the packages within and you're Associated packages. That should be locked in place. They're all going to be updated together. So this is something that we would love the package manager has to do and we use the package managers under the hood to manage these things

but the state of pure dependencies isn't exactly where we want it to be yet until we taken care of this problem for developers. So when you run an update on your psychic or we're going to give you all of the latest framework packages is well as all the dependencies that are required by that. So when you install the 360 update using the command, you're not only going to get that you can hear the latest. As long as you're going to get the latest or the correct version of typescript as well as rxjs. The other thing is going to happen is for each of the packages that we update. We're

going to look in those packages and see if there any schematics we can run they will automatically update your application and migrated to the latest version. So we saw this with rxjs. Swear. If you use energy update to install the latest version of rxjs. We wouldn't just update rxjs in your package. Jason will also install RTX compat as a dependency so that we could ensure that it was a smooth update process to using the latest version of rxjs and give developers and more time to update their applications and do using the automated tooling that we're working on. Another see like a man

that I want to talk about it briefly. It's Angie add. So again, we're going to call Angie add package and this is going to be roughly two things first. It will download that package from ATM using whatever package manager. I've chosen and then it's going to look for a run an NG a schematic in that package until great example of this is Angie at angular size pwa. So this will work either in a brand new sample application that I created with Angie new but it will also work in existing applications. And this will not only install the angular service worker package and configure it in your

project and give you a default config file. It will also set up an application manifest for you to help you get started building a pwa faster. Another thing that we've been asked a lot about recently one of our in your laps project is angular elements. And so inversion 6, we actually landed the first version of angular Elements which were really excited because it allows you to take angular components and ship them and Vine bootstrap them using the custom elements Machinery in the browser is so if you look on and your IO we're actually using and your elements today and example here is

code example, one of the problems you have an angular is when you have content that you also want to include Rich functionality. So historically if you wanted to embed Rich functionality and some of your content you have to dynamically bootstrap that functionality into your app bio, but with angular elements now we can ship code example, which is an angular component. We can ship it as a custom element in our application today instead of waiting for angular or the developer to find that bootstrap that a component. We're actually relying on the browser. So the moment that we load this

content into the Dom the browsers going to Strap that component Amarin to see this Rich experience for code examples where we get things like Coke coloring you the ability to copy and paste that component. It's really really easy to do as a developer. If I take a component that I've built in angular, I pass it to this create custom element method and that is a customer that is ready to be defined by the browsers custom elements. And so he's a really easy to get started with their available at 6 o within and your application for you have an injector and we're looking

at a future where we're making it easier to distribute these things and build more tooling around it so that it's easier to say. Hey give me a JavaScript bundle. I can give to other developers maybe even using other Technologies who don't want it may apply angular project. We've also included some updates to rxjs. So I talked a little bit about her automatically applying a compatibility layer, but there's a lot of exciting things that happened in rxjs 6, so we updated the application so that it's faster and more trees and we've also updated webpack. So it is more predictable as

well. Sealine one of the things when you do your energy update is you'll see the CLI format will change a little bit and now we have a work Spaces Project Targets in configs until we're able to represent more types of projects as your application Grows by default. Everything will look the same one of the areas where we take advantage of this is with NG generate Library, where now for the first time we've introduced the ability to generate a library directly within the CLI and we support building that this work is built on top of the work of Angie packager, which was another great open

source contribution. So we talked a little bit about the momentum of angular and we talked about the state of angular today. And one of the reasons why people are using it as leading the future of angular. Hi everyone. I'm Kara Erickson is Steve inventions, and I'm one of the engineers working on this new project called Ivy so as soon as I mentioned, I'm here to talk about the future of angular. So this project is still in its very early stages of development, but we were really excited about

everything that we're seeing. So we wanted to give you a sneak preview. So what is Ivy ivy has the initiative to build a next-generation rendering pipeline for angular? So in other words were rewriting the code that translates your angular templates into whatever you see rendered in the browser. So why are we why are we taking the time to do this to this was a project that was conceived specifically to tackle some of the problems that we know that angular developers face. We've been hearing the same things over and over from our developer community and We've

been hearing that developers want smaller bundle sizes. So they're only paying for the angular code. They're actually using they want great start at performance. So they're absolute quickly even on slow mobile connections. Anyone apps that are fundamentally simple to understand and debug even as their applications for larger over time. And that's what project IV is all about. We want to make your apps smaller faster and simpler. All I require no upgrade effort from you. It was really important to us that we make this change without requiring any changes for

existing applications because he wanted to make sure that everyone can leverage the benefits without having to do a bunch of things. So this might sound like an ambitious goal and it is but the thing to remember is we actually done this before so in angular 4, we I completely rewrote the rendering pipeline from angular 2, and we were able to do this with the zero breaking changes. And the way that we were able to achieve this is through an extensive vetting process. So Brittany use the same vetting process when we upgrade

everyone's IV. So we have over 600 projects inside Google that are already using angular. So we'd the first turn on the flag for all of these 600 plus projects to ensure that we don't see any breaking changes and these are real world applications like Firebase in Google analytics and Google Shopping Express. So these are apps that we absolutely cannot break and that have a lot of real world use cases. So once we're satisfied that all of these apps have no breaking changes we can go ahead and make the run to the default for everyone. So as I've hammered in by now, all of these changes

are too angular internals. So how's an angular developer? You actually don't need to know how everything works under the hood, but I'm going to take the time to kind of explained the new design because we'll for sale because it's really cool and also because I really want you to understand why you're going to get better results with IV, then you would with angular today. So when we're redesigning the rendering pipeline, we knew that there were a few characteristics that we wanted to have. We wanted to design it to be tree Shaker ball. So you're only paying for the angular Co they are

actually using. And we wanted it to be local and it's a fact that I as a developer as are developing your apps. You only have to recompile the components that you're actually changing. So I'm going to go into each one of these in a little bit more detail. So let's start with tree shaking. So what do I mean when I say designs with tree shaking in mind? Well, if you haven't heard of tree shaking it's essentially a build optimization steps that ensures that code that you're not using doesn't end up in the final bundle that you ship to the browser. There are a lot of different tools out

there for tree shaking there's roll-up which uses wife code inclusion to ensure that code that you're not using is never added your bundle in the first place. There is other tools like oglaf I say that picture already bundled code and tries to intelligently delete dead code from it, whichever tool you decide to use their efficacy really depends on how you're writing your code. And this is because tree shaking tools. I typically use static analysis of references to figure out what code you need and you don't need in your bundles and static analysis by definition is something that

tries to figure out what's going on in a piece of code without actually running the code. So there's some limitations to that. And sometimes it will have to kind of assume the worst case in your code to ensure. The resulting program is correct. So, what does it mean to write code? That's friendly the tree Shaker? Well, I'll give you a few examples. So let's say that you have this piece of code in your application and you're importing a few functions from third-party Library. You're calling sum function in Maine and you're not calling unused function anywhere. Patricia controls would

actually do a pretty good job of analyzing this it would see that some function is being referenced in Maine and that would stay in the bundle and it would see that unused function isn't reference anywhere. So the trollingwood know that it can safely remove unused function from the bundle. Let's take a slightly more complicated case. Let's say you had something called you wanted unused function to be called. But only if some arbitrary conditional check past control to have a little bit more of a problem with this setup and that's because remember they're relying on static analysis

of references. So here they would see that unused function is being referenced in Maine, but they don't necessarily know whether that code path is going to end up being used at runtime. So to be conservative this unused function symbol is going to stick around in your bundle. These are the types of patterns that we want to try to avoid. You want to try to avoid hotas that you're not using and conditionals being and being in your bundle even when you're not using them. Until you might wonder how can we possibly avoid conditionals? They're part of programming and you'd be right, but we can

kind of restructure our codes to make sure that they're not quite as necessary. So just show you what I mean. I'm going to start by explaining how a rendering pipeline works today. And so they kind of have some contact for the change that we've made. So let's say you've written the standard angular template. It's just a hello world inside of a Dev. I'm so today. What you would do is you'd run that through the angler compiler and the angler compiler wood poster template and it would generate a set of Highly optimized JavaScript that represents the structure of your template. So you can

see an example of the generated code here. We have an element def that just creates a data structure based on your elements and a text us that creates another got a structure based on your text node into this kind of just is a purse version of your template. At runtime this data structure is then passed into the angular interpreter and Daniel their interpreter tries to figure out which operations it needs to run to generate the crack dumb. And then hopefully it renders the correct thing. Let's take a step back and look at this anger interpreter stub. You might have noticed that this

pattern looks slightly familiar. Right? We have all of these conditional checks in the problem here is that at all angular templates are going through the same shared code path. So the angular compiler doesn't know ahead of time what kinds of templates it's going to see. Is it hot the kind of check, you know based on the data structure which operations it needs to run? The sum of these conditional checks will be false that run time, but it doesn't matter because Scenic Outlet because Tricia controls will see that there are referenced in this function and all of the symbols will stay in

here bundle. So this was the problem that we were trying to solve. So are we had an idea so instead of parsing the template and creating is data structure and then passing that structure into an interpreter that needed to know how to do everything. Why don't we just skip the stuff and just generate the instructions directly that come naturally from a certain template. And that way we don't even need an interpreter at all that will have all of these crazy conditional checks in it. So if we look at the ivy pipeline for the

same template hello world. We'd still pass is it in the compiler but instead of generating a set of data structures instead regenerate instructions. So here we have elements start and it's creating active. We have text which creates text node and if you look at the actual implementation of elements start, it's just doing the work of creating the dogs just creating a div so we don't have any of those conditionals anymore. They're just a hemorrhoid in one more time. If if you're not using certain features, like listeners or pipe store containers that code won't be

generated from the template that you given the compiler and so they won't be references and if there aren't references then tree shaking tool can effectively remove that code from your bundle. So we've taken a strategy and we've applied it to as many angular features as we could think of. So if you're not using again queries or lifecycle hooks or whatever. You don't actually need to pay for that code and your anger bundle. And it's important to note that this also has implications for code splitting. So if you haven't heard of post letting it's a process by which you split your

application code up into smaller chunks and then you can lazy load them on command typically by Route. So like tree shaking tool code splitting tools used static analysis of references to figure out which code end up in which chunk. So can I have the same set of problems? So with angular today you'd end up with most of the angular features inside every route. What does restructuring though? It's much easier to split the angular code apart. So each route will only be loading the angular code that you're using in that route. So a good way to think about it might be that tree shaping tools.

I will remove color that you're not using anywhere in your application and code splitting tools will remove code that you're not using right now in this route. So obviously this is great for large applications or applications that are using more of angular features that way, you know, you're paying for fewer features for trunk. Okay, so we've talked a lot about how to make your angular applications more efficient, but we also wanted to make angular developers more efficient and our strategy for doing this was by adhering to a principle that we like to call locality

The by locality I mean the idea that each component should be compilable using only the information that's local to that component. So its own class and annotations. So if you know that you can generate the correct template instructions for each component using only its own information as an input. Then you know that you can compile each component completely independently of other components and this has great implications for the speed of your build process. Sophie take an example one more time. Let's say that you have an app and its template. You have a header and you have a flutter.

So you can run up to the angular compiler and it would generate a pin code for each of your components, right? The later if you need to change in the header, since you know, that each component is compiled only using information for that component, you know that the app in the footer can't be affected by any change that you made in the matter. You can confidently just regenerate the code for the hatter by itself. Another way of saying this is it has the potential to increase the Inca mentality of your builds sewing from Italia's just the idea that your bill time should be proportional to

the size of the change that you're making me not to the size of your whole application. So if you have a thousand typescript files, you should only be free generating the file to change not your entire project and so structuring it this way at least after rebuild. So this is not actually how angular is configured today. We have a different strategy. So once again, I'll explain how he lyrics today for context for our making the change. Example of where we have an app for the header and footer and this is a template once again header and footer. So

this is the code that we might generate kind of the simplified version. So our strategy today is to try to do as much processing at at compile time as possible so we can avoid doing the same processing at runtime. One of the strategies that we use to speed up the processing of the component is to inline some information about that components dependencies and it's generated code. So here you can see that for the app component. I have some information about the header. First of all, we have the information that it's a directive at all because we've already done the

directive matching at compile time. We also have some information about the header directed specifically. So this isn't this number just essentially represents a bunch of different flags about the directive and I know that it's on you because the start of the life cycle hook there is a bit slept and we got this number, but the point that I want you to remember is there is implementation details about the header in the generated code for the app. So this is fast because it's it has its own copy of this information and it doesn't have to look into its dependencies that run time and

try to figure out you know, all of its characteristics but it's also leaking implementation details of a component into its parents and what that means functionally is once again, I can make a change to the header then we not only have to recompile the header but also the app component because it has its own copy of the same information. So with IV, this is slightly different. Stars you can see on the right with the same template. We just have an element start for the header and almond start for the footer. We don't have any information about either of

these components. I'm all of their implementation details are completely encapsulated inside their own generated code and see what this means is. We have a situation that we want to write. You only need to recompile the header. So there's no other side effects that come out of this restructuring one is that if you can compile all of your components independently, then you can ship a third-party code that's already pre compiled which is really high, but it's really useful because not long enough to build it with your application code. We no longer need meta. Jason's anymore because once

again third-party Libras can just ship they're going to redeem code and so they don't need to ship any other information to help us. And it enables other things like metaprogramming because we're doing a little bit more run time, so we could possibly do things like crate directives on the fly. So pretty cool. They talked a lot about the design you might be wondering did it work? So I have some early results and remember it's just kind of early stages of the first goal was that we wanted to make your bundle sizes smaller and so are Benchmark with a Halo World

application with angular today. That would be 36k be compressed. With IV were able to get this down to 2.7 KB. That's a huge Johnson. That's a 93% reduction in size. We also wanted to make your apps faster. So I'm we ran our hello world through webpagetest. Org / easy, which is a test on a mobile device with a slow 3-g connection and our Baseline was a static HTML Hello World app, and that was one point five seconds current angular was 4 seconds. And Ivy was just 2.2 seconds. So you can see if we're making huge strides. We're already 45%

There's already a 45% reduction in Low Time. And remember also with your bills being more incremental and save time in the development cycle as well. Our last goal is to make angular simpler. So if you go back to the slide from before you can see there's a whole lot less noise. You can kind of see the header in the footer. There isn't numbers and nose and stuff. It's a lot easier to read. And it's really help when you're trying to debug out. So I had a quick demo prepared. I don't know if you still have did you not have time to show it but will be in the west

and box after this. So anyone who's Curious by the demo, I can see it there. I'm so really quick on the road map. We're still riding the runtime of the compiler. Once that's ready. We'll try to get an early preview out. So you all can come to try it out and give us feedback. And once the verification process is done, then we can go ahead and make the renderer the default. So to summarize we're so happy with the growth in the adoption of angler the top in the last year. Thank you for being a part of our community V6 is really exciting. It just came out. Hopefully you guys can give

it a try and we're so so excited by Ivy, and so hopefully you guys are too so we want to hear from you will be in the west and box because I think over there I'm so please come talk to us. Thank you very much.

Cackle comments for the website

Buy this talk

Access to the talk “What's new in Angular”
Available
In cart
Free
Free
Free
Free
Free
Free

Access to all the recordings of the event

Get access to all videos “2018 Google I/O”
Available
In cart
Free
Free
Free
Free
Free
Free
Ticket

Interested in topic “Software development”?

You might be interested in videos from this event

September 28, 2018
Moscow
16
159
app store, apps, development, google play, mobile, soft

Similar talks

Steve Orvell
Software Engineer at Google
Available
In cart
Free
Free
Free
Free
Free
Free
Tom Greenaway
Senior Developer Advocate at Google
+ 1 speaker
John Mueller
Software Engineer at Google
+ 1 speaker
Available
In cart
Free
Free
Free
Free
Free
Free
Michael Bleigh
Software Engineer at Google
Available
In cart
Free
Free
Free
Free
Free
Free

Buy this video

Video

Access to the talk “What's new in Angular”
Available
In cart
Free
Free
Free
Free
Free
Free

Conference Cast

With ConferenceCast.tv, you get access to our library of the world's best conference talks.

Conference Cast
558 conferences
22059 speakers
8245 hours of content