Day 1 Keynote | Jules Kremer & Kara Erickson | ng-conf: Hardwired

[Music] [Applause] [Music] [Applause] [Music] I need the web frameworks team here at Google and yeah this is sort of a surreal experience and definitely not how any of us or myself expected to be attending ng comp 20/20 like Darren said I'm coming at you from the beautiful state of Hawaii we're excited I am and still a little dark I'm excited to be here today and G comp is always one of my favorite days of the year and I know that our team looks forward to ng-conf every year to not because we get to talk about the work we've been doing but because we get to hang out with all of you and our community and so I know I speak for the entire team when I say that we all wish we could be together in person and first I want to extend the team's thanks to the ng-conf organizers putting on a conference in normal life is super hard and changing everything during a global pandemic to pull this off online it's just no small feat so we are so grateful for your effort I know a bunch of you stayed up all night last night and from our hearts thank you thank you thank you for all the work you've done it's also been super hard to figure out what to say today during what is an extraordinary time in our world and we're all dealing with Kovan 19 and the impact it's having on our families and our communities and the angular team is no exception we along with all of our Google peers have been spending the past month shifting to a new way of working where we're working fully remote we've been getting our home offices set up some of us are working in an office some of us are working from their garage and others are working from the front seat of their car in their garage and our priority over the past month has been to figure out this new way of working and figure out how we collaborate within our team as well as across Google unfortunately the angular team has a lot of experience as a distributed team we've always had team members and contributors that live across the globe and we have many tools that support virtual work like slack and github so all in all we've been doing pretty well and we even released angular version 9.1 last week personally I've been enjoying getting to see all the home cooks Fiat food that Googlers make since they're stuck home meeting the babies kids houses pets and roommates who join our meetings sometimes they join on purpose and there's been a few times that it's been completely by accident but we also have team members dealing with kids home from school illness or supporting their families and communities and we have some team members that are working on code 19 related projects at Google as well as in our open source community the times that we're facing are unprecedented and I'm encouraging all of us to prioritize the time we need for ourselves and our families I also want to thank the team for showing up every day during this crazy time and doing hard work as well as the community for coming together and getting involved we've seen just an explosion of collaboration between our contractors our contributors community leaders Meetup and event organizers and our gde team we're literally seeing the best of humanity come out we thank each of you for supporting each other supporting our team and angular itself so normally eyes be up on stage I'd have paid way more attention to what I'm wearing and I'd give you a bunch of updates and metrics but somehow today that just doesn't feel right with the world upside down and all of us behind these computer screens now more than ever it's important for us to connect as humans so today instead of doing all those updates and metrics I'm gonna share a little bit about more more about me why I'm here and what I've been up to at Google so I first joined the angular team back in 2015 as the leader for our developer relations team I was super excited by what I saw in angular and how companies could benefit from it as a Deverell person I spent most of my time listening and talking to the community and then taking everything I learned from all of you and influencing angular product direction after clears on the team I took a break to guide my children through the end of their high school to graduation and then off to college and just as I found myself facing empty-nest I unexpectedly had the opportunity to come back and lead Google's web framework efforts I had this opportunity to bring the angular team and our internal framework team named Wiz together and I looked at that chance it seemed like the perfect timing in my life to take on this leadership role as these two amazing kids of mine ventured off into the world and although he's gonna be angry with me in about two seconds I can't help but give a shout out to my son Gavin we were supposed to be attending ng comp together this year so hi honey call your mom as a leader my focus is on understanding the team's overall health and how to best serve our developer users both internal and external to Google and I'm a firm believer that as a leader the most important things that I can do are to listen observe and ask questions and while I was familiar with angular and I knew most of the people on the team I needed to find out what I didn't know when I returned and I needed to form a fresh new perspective so I held listening sessions and I observed the cadence and culture of our meetings I took a look at how our planning works and how the team was thinking about product strategy I wanted to understand angular its community where it had been and where it was going my laptop often looked like this at the end of every day covered in notes and reminders of things I'd seen or heard during the day and so while the team was working on getting angular version 9 released I began charting a course for what would come next in addition to all of our technical goals and our product goals one an important story that kept coming up was that our leads were wearing just too many hats they could be great tech leaders or they could be great engineering managers but trying to be both was a near impossible task this is Jen she is an experienced engineering manager who is joining us from the Wiz team jen has years of practice building and developing great teams inside of Google she's bringing new ideas on how we collaborate with each other and how we learned from each other jen has already rebooted the planning efforts for our next versions and has set her sights on how we have more transparency in our roadmap to all of you jen is just getting started and I'm looking forward to all of you getting to know her we've made some other important investments for angular we know how critical documentation to understanding angular so we recently hired a lead technical writer they'll be focused on making angular easier to learn and they'll be working with angular writers in our community that you might already you know like muna Halley and we're working with product management to better understand the web framework space as well as how developers use web frameworks and a new collaboration we're initiating with our data science team is teaching us ways to understand data signals and then incorporate those into our overall planning all of these things were doing and are focused on ensuring that we build an angular that works for everyone and sparks a little joy so just as we did with the core team Jen and I want to take a hard look at angular from the ground up and in every direction and that includes the community so we want to listen to your stories as well we heard that you want to contribute to angular and that's not so easy to do today we heard that the volume of issues makes it challenging for you to understand when a change you might care about is coming and we heard that you want a closer relationship with the project overall so in the coming months we'll be working on ways to build these connections and we're going to start today with our survey so if you haven't had a chance to take our 2020 survey invite you to do so now maybe not now wait until after an ng call for during the break one of the reasons that I was drawn to the angular originally was because of my background in the enterprise space I spent the majority of my career here building enterprise software when I was a new mom I was a software engineer building enterprise solutions when I returned to work full time I worked at Microsoft as an enterprise developer strategist and in my first role at Google I led enterprise strategies just as technology was moving to the web and this experience has led me to hold a strongly held belief which is that Google is just another enterprise for angular or enterprise customer for angular Google developers build the same types of apps that you all build they build consumer based apps small apps that grow to medium apps that grow to large apps some of those apps are on the public Internet others are behind a firewall some have large development teams and others are by just a handful of people some apps are in maintenance mode with all the complexity of a legacy code base and all the demands of new features and while Google engineers might use a slightly different tool chain or deploy slightly differently the use cases are primarily the same and so there's this intersection of concerns and it is in this intersection that we will be focusing on so that what helps Google helps the community and vice versa angular is now part of an organization called core developer at Korda were focused on building the best infrastructure for Google engineers and we are committed to the open source projects in our portfolio which includes angular our leadership team is very invested in angular success we have a brand new VP Michael he's so excited about angular that when we launched a blog post I can count the minutes until I have an email in my inbox from him near the end of last year we announced that there were more than 1500 projects using angular at Google today this number is over 2,000 and given powers many great experiences both inside and outside the company we're continuing to work with teams like Google Analytics firebase and Google cloud to work on new features and we have seen tremendous success since we landed angular version 9 externally more than 10,000 public domains have already adopted the latest version of angular and we continue to see success with our strategy of making updates easy on the eve of the release of 9.0 most public apps were already using the latest version since 2018 we've been serving thousands of developers about angular and while that 20/20 survey isn't quite closed yet it looks like we've continued the positive trend with developer satisfaction increasing 31% over the past two years I joined angular originally because I was excited to work with a team who understood that engineers outside of Google mattered I rejoined the angular team because I was excited to have the opportunity to not only leave the team but to be back here with all of you this amazing community that treats each other like family I've seen proof of that over the past month we face this crisis in the world as we've moved ng Kampf online and in so many other ways and as our team goes through this time of growth and evolution I know that we need all of you on this journey with us and that together we're gonna be more than fine we are going to be freaking awesome so thank you for your time this morning thank you for being here with us thank you for believing in all of us and now I'm gonna hand it over to Kara Erickson who's the technical lead for angular framework and she'll be going deeper into angular version 9 Kara um ok great bye so hello everyone I'm Kara as I mentioned and I'm here to tell everybody about what's new and angular version 9 so version 9 came out on February 6th of this year there is a lot to be excited about with this latest major and today I'll be giving you a tour of the features that I'm most excited about for version 9 and you may have noticed that our version 9.1 release also went out last week so I'll be discussing some of the features that are in 9.1 as well so let's get started so one of the biggest features in version 9 is the release of ivy if you haven't heard of ivy it's the new rendering engine for angular and it was released in preview mode in version 8 in version 9 we've made it the default experience we are over the moon the ivy is finally out it represents a huge effort from the angular team given that we had to rewrite both the compiler and the runtime completely from scratch to get the characteristics that we wanted and to do it in a way that was as backwards compatible as humanly possible we've essentially spent the last year polishing and grooming ivy to cover all the corner cases because we really we care deeply that the update experience is as seamless as possible for angular developers so this was undoubtedly a big project but we were willing to invest the time to get it right because it came out of things that we were hearing developers wanted we were hearing that developers wanted smaller bundle sizes so that they have better startup performance and could keep their users engaged that way we were hearing the developers wanted apps that were speedy to develop so that they could have faster compilation times for building and testing and they wanted code bases that were easy to debug and maintain over time especially as their code bases started to grow so the ivy project was designed to address some of these concerns and now that ivy is out I'd like to discuss some of the benefits of Ivy as they relate to our original goals to make angular smaller faster and simpler our first goal was to make angular smaller and we had a few different strategies for doing this the first was to make the framework more compatible with tree-shaking so in previous versions of angular we had many core functions that would reference each other in the critical path for bootstrapping and this made it difficult for tree-shaking tools like tercer to remove framework code that the app wasn't actually using because of all the references it had to assume that the functions were being used and retained them in the final bundle with ivy instead of having the critical path referencing all of the functions instead we had the compiler generate only the functions that you needed and this removed the references that were causing unused code paths to be retained so that allowed tree-shaking to work as it was supposed to work so that was our first strategy and this feature is going to have the most benefit for apps that aren't using the full feature set of angular and because obviously then you can remove the things that you're not using but it also paves the way for additional features down the road so that we can allow for even tinier bundle sizes for things like angular elements and um you know use cases like that our second strategy producing the bundle size was to be more conservative with how we generated code so when I say code generation what do I mean so when you compile your application with angular the compiler will analyze all of your components and it will generate among other things a function that represents the templates that you've written or the template that you've written for each component and then I runtime these template functions will execute which will cause your application to render if we didn't have this separate compilation step what it would mean is that we'd have to do all of that analysis that of your templates at runtime instead of at compile time so you can think of compilation or code gen as a way for the compiler to pre analyze your components in your application and send that analysis data to the runtime in the form of generated code so the more code that you can generate from this analysis the more the runtime can actually skip doing that same processing at critical loading times so there is a trade-off between the amount of code that you generate and the amount of processing that you do at runtime so one way that we were able to reduce the generated code is by tweaking where we are kind of on this spectrum and so if we push a little bit of processing to the runtime we can remove some of the generated code and it's possible for us to do this because with IBB also introduced a number of performance improvements to the runtime as well so we introduced more aggressive caching of some of the processing data we're more conservative about how we you know we're cutting down an extraneous property reads especially metamorphic ones and because of these performance improvements we could offset the cost of doing more processing at runtime and reduce the size of the generated code we've also had a bunch of you know with a long tail of smaller optimizations like for example method chaining so we didn't have to duplicate method names grouping together and similar instructions things like that reducing the size of property names that couldn't be mangled but all in all we were able to save about 30% for each component so apps with lots of components are gonna see the most benefit from there because for every component that they have they'll be saving around 30% on the generated code so we were happy to see the results in the wild for some of these changes that we made for smaller apps that could benefit from tree shaking we saw about a 30% improvement for larger apps that could benefit from the coach and reduction we saw about 25 to 40 percent improvement depending on your specific app and then for more moderately sized apps we're seeing kind of a flawed or diff because the benefits are being offset by a slightly larger fixed framework size and this fixed size is something that we can continue to reduce over time it's just a longer time frame to make some of those changes um yeah so we're really excited about this results it means you know a better startup experience for users which means more conversions for application authors so everyone is happy and I'm just here's some example of some of the feedback that we got from developers after version I am it out this is from hacker news someone says I just updated my mid-sized app from version 8.2 to version 9 with Ivy and the total es2015 bundle size decreased from 973 KB to 669 Kb and over 31% improvement with no effort on my part so the critical part to see here is the quote no effort this is one of our most important goals is just to make angular better without causing any extra work for anglish helpers so we were really excited to see this okay so our second goal was to make angular faster and by faster one of the things that we wanted to improve was build speed we were hearing from developers that you know as their apps got larger the build speed just wasn't as fast as they would like it to be um so we had a few strategies for improving the build speed the first one was simply asking the compiler to do a little bit less work so in the previous compiler we would always compile the application along with its tendencies so any libraries that it was using and this is kind of wasteful right because as you're making changes to your application your dependencies aren't likely changing as often unless you're continually re npm installing and changing your versions but we would still recompile your dependencies every time we recompile your application so that was a little slower than it needs to be so with Ivy we introduced a tool called an GCC or the angular compatibility compiler and this is a separate tool that we use to compile dependencies and so with Ivy what we're doing is we're only compiling your dependencies when necessary so we can kind of cache that data so as you're developing your application and you're changing your app code we're only recompiling your application and we're not continually recompiling your dependencies as well so that makes the build faster another strategy it had to do with removing the neeps who operate on JSON so this is kind of low-level but basically with the old compiler we were getting our two sources of data that had two different formats so we had your you know application components that were written in typescript and then we had your any libraries lorac was using and we got information from those libraries using the metadata JSON files he had JSON and typescript and so what the compiler would do is it would take our you know the application components type scripts and converts that into component JSON so that it could share some of the same code between compiling libraries in the application and so it could feed the JSON into the same process so that conversion from typescripts into JSON was kind of expensive so with Ivy we don't even have metadata JSON files anymore so there's no need to do this conversion we're operating a taught typescript entirely and so we can kind of avoid the cost for this completely so with these two improvements and again like a longer tail of smaller optimizations we were able to see a sizable action in built time and if you're wondering what I mean by build times specifically and we measure build time as kind of the time that it takes the angular compiler to run once you remove the time it takes for the typescript compiler to run because you know angular wraps the types of compiler and we don't really directly control the speed of that so we measure the overhead over typescript so for our own documentation app angular do we used to have an overhead of 0.8 X and with Ivy we had 8.5 x overhead which is about a 40% improvement um and this speed-up is super useful because it means that for the first time ever we can use a OT for even dev mode builds which means that when you ng serve you're going to be getting the same compile time checks that you would with production builds which is pretty great for developer experience we also made tests faster and we were able to do this with one big change which was to be a little bit smarter about how we recompile components between tests so in view engine or the previous version of angular and we would recompile all of your components between every single test execution which again is pretty wasteful because you know it's likely that your components haven't been changing that much between each tests so with ivy we don't recompile components at all between tests unless you're using some of the override methods so if you have a component that's overwriting a components template then we'll recompile that specific component but we won't recompile everything and in most cases what this means is we won't be recompiling at all between tests so this was able to make a 50 to 40 to 50 percent improvement in test speed lastly we were able to make internationalization faster and we were able to achieve this by moving the translation inlining process from the beginning of the build pipeline to the ends of the pipeline so in version 8 if you were trying to you know in line translations that would happen as part of the compilation step so while angular was compiling your application it would you know at the same time substitute the translation text for whatever test text you you know wrote when you're developing the app and what this would mean is that for every locale you'd have to go through the entire build pipeline separately so if your build was thirty seconds for every new locale you add you'd have to add another 30 seconds because it has to go through the whole process so with Ivy um we've moved the inlining to a post processing step so what this means is you compile with angular just once you go through your entire build pipeline just once and then and you only do the translation and lighting part for each locale so again if your build is thirty seconds and your translation in lighting process takes five seconds then you're only gonna pay for five seconds for each locale instead of the whole 30 and so with this improvement we saw about 10 times faster writes and bolts which is pretty cool okay so our our last goal was to make angular simpler to understand and to debug I'm and to show you this part I'm gonna jump into a quick debugging the ball because these things are kind of more fun to see in action so um I have a new CLI project here like that I created I haven't made a whole lot of changes to it but you can see here's the defaults you like template in here I've added a few bindings and however if I serve this you can see that I coated in a bug unfortunately and so I'm getting this expression changed after it has been checked error which is probably an error that you've all seen before and so I just want to show you what it would be like to debug this error with ivy so you can already see um the message text is pretty similar but if you look at the stack trace you can see this is completely different than what we had before if you go up a few frames in the stack you can see already from here that the air is being thrown due to a text interpolation you can see text interred plate one and you can also see which component it's in it's in the app component and this is the template function that we generated based on the app components template so if you wanted to see the exact line that's causing the error we can go ahead and click on that line and it'll take us to the exact line that's throwing the air which is pretty cool so I'm gonna pretend like you know I don't know how lifecycle hooks work right so we can debug this as if we're debugging this real so let's say so in my ng after viewing it hook I changed the value of this property so I probably say okay let's put a breakpoint here and let's put a breakpoint you know at this particular binding so I could figure out which one actually happens first so if i refresh the page it's gonna stop at the binding and I might wonder okay so at this point what is the value of the title binding so I can do a trick here by reading the title property from the context and I can see okay so the title is ng comp keynote right here so that's pretty cool so I know that it hasn't been changed yet to add the exclamation points which is what I had wanted to do here right and the Lysa clock and also while we here I can show you another quick trick which is you can just kind of look at the whole context if you you want see everything that's on there okay so let's say cool it's on the first value and drop keynote and I skip ahead and see uh the lifecycle hook it's being it's being executed after so obviously this isn't gonna work because the value is being changed after the volume has been checked as the error had communicated so that's how I would deal ugh this I also want to show you one more thing which is you can also debug things through kind of inspecting elements directly this is kind of a has a more feel - what debugging was like in angularjs so if you were to select for example the app component routes you could actually you know what I'm gonna do let's finish debugging rope right okay so let's do it here so again I'm going to select the app routes and then I can use this global ng object um to start you know inspecting my angular application you can see we have a bunch of new methods here that you might not have seen before so for now what I'm gonna do is I'm gonna grab the component that's on this element so get components and pass them in the elements you look at what hop is you can see that it's the app component context here and then let's say I want to change the value of it so I can do something like let's change you title to something new so you can see that obviously in comp the title has changed to something new but in the actual UI you can see that it still has the old value here so if I were still debugging maybe I'd want to run change section forward a frame to see the new values so I could do something like ng changes and then pass in the components and then you can see that it's updated UI um so we have a bunch of really handy utility methods like this so that you can kind of inspect elements run change detection and the stack traces are hopefully a little bit easier to read so I think these features are actually really exciting I remember when I was working on the angular components team a few years ago and I'd be building like a select dialogue or something like that and I'd run into some change detection issue and I'd have just such a hard time debugging it because the old stack traces would just kind of throw you in the middle of framework code execution aid have no idea kind of where you are in changed texturing or what had triggered the change detection and it was just so disorienting the way that it was the way that it would go in the previous version of angular so I wish that I had had methods like this that would help you kind of inspect where you are and help you debug change direction in a more imperative way so I think these changes are super excited okay so that's the demo so to summarize kind of what we just saw we have simpler stack traces in Ivy we no longer have just all of these frameworks specific functions that don't tell you where you are you can now walk up the stack and go directly to the template and that's causing the problem and again like I showed we have a new ng or an umma number of methods on the ng global I only talked about a few of them in the demo the apply changes and getcomponent but you can see there's this whole list of things that you can use like get listeners and get injector and we have docs for these in the emulator documentation so I highly recommend checking this out okay more cool things and we've also improved build errors with ivy so previously if you wrote something your template that wasn't in your ng module so I have not an existing component here um you get a little bit of context like the element above and the element below but it wouldn't tell you you know what template this particular code snippet was in which can be kind of problematic if you have a large application it's kind of hard to figure out where the error is coming from so it was ivy and we've made this a little bit easier so you can see exactly where the error is occurring it's occurring in the template of app component and you can see the specific line that is occurring in so it's on line 377 specifically and we've also made a number of aesthetic changes you can see that we have color coding for the first time and just formatting changes and it just makes it a more pleasant debugging experience in general we have also made type checking a bit more intuitive previously there were some things that we just didn't type check with the new strict templates mode we're also going to type check things like directive inputs event objects we had previously typed rekts local references to components and directives but now we're also going to check local references to Dom elements as well and template context types so whatever you're passing into structural directives like ng4 and i'm not going to go into too much detail about this one because we have two great talks coming up in the conference about tablet type checking so we have Alex's talk tomorrow morning about stronger type checking and tablets with Ivy and Brian's doing a lightning talk later today I'm also on top of type checking so definitely be sure to check these out if you want more details okay we have a few more things that we also made simpler for example style merging so one of our longest-standing issues in github is an issue about how when you bind to class directly like this like the general class that it's destructive and will overwrite any other classes that are on the same element and with Ivy we've made the rules regarding style precedence more comprehensive and intuitive so generally speaking the more specific a style is the higher its precedence so in this case and the highlighted binding would take precedence over the class by name because it's more specific which addresses that issue so if you're curious about style precedence again we have a guide in the angular Doc's so if you search for style precedents you should find it and we also made module definitions a little bit simpler so over the years you've seen a lot of confusion with entry components specifically because if you don't because previously if you didn't put a component in it template directly it wouldn't be compiled so you also had to add it to this entry components array but with Ivy it's no longer necessary to add things to entry components as well as declarations so the entry components array specifically is deprecated and you no longer have to add components to it okay so hopefully you can see how I Ivy has achieved at schools to be smaller faster and simpler but I also wanted to mention that there are a bunch of things you know in addition to these shiny and fixes like the fact that we fixed dozens and dozens of bugs over the last you know two years we through all of the compatibility testing compatibility testing that we did through Google and all of the testing that the community is done through our C periods we found a ton of edge cases and that's caused a mass addition of new tests for the framework to make it more stable we've removed literally years of technical debt and just overall angular as a project is healthier than it's ever been and as a team we've you know as we've been doing these rewrites we've had time to really think deeply about the concepts of angular and how we can make it simpler and more intuitive and easier to use over the next few years and we have so many ideas on how to make life easier for angular developers so um yeah I think we built a really strong foundation for the next few years so I'm really excited about that okay so in addition to IV version nine has a number of other improvements that I want to talk about one one big thing is that we added support for typescript 3.7 and in the angular 9.1 released last week we also added support for typescript read about eight so this keeps us up to date with the ecosystem and allows you to take advantage of new types core features like the optional chaining syntax here so check that out we also made a bunch of improvements to angular Universal for our server-side rendering story and we added a new pre rendering tool and we've gotten some pretty positive feedback about this these new improvements for example this tweet he says the developer experience of angular Universal is infinitely better now but again I'm not going to go into a whole lot of detail about Universal because we have a great talk coming up about that later today by Wagner angular Universal in our new pre renderer so definitely check that out on the component side we also added test harnesses um which is pretty cool because it's an abstraction layer that allows you to test whatever material components that you're using without having to rely on implementation details in HTML and CSS so this means that you know you don't have to worry about a class being removed or something material because you can just use the harness and be confident that that your tests will continue to work we also added a bunch of new components for example this new YouTube player component that embeds YouTube videos and this new Google Maps component that embeds Google Maps so um how do you get all of these amazing features and benefits you can use our handy dandy ng update experience and so first you'll want to update to the latest version of the CLI tooling and then then you'll want to update angular core in steel I normally we've gotten pretty positive feedback about the migration process um from so Craig McMurray from Dick's Sporting Goods said I got the email yesterday at 4 p.m. EST that nyan did oh final was out and by 4:30 p.m. it was up in our staging environment that's a true demonstration to the hard work that you were all doing to make it easy for us to migrate so we love seeing things like this and hopefully everyone has this type of positive experience but we also have a number of tools to help you through your update so if you're updating Tanai and definitely check out update angular at i/o um it has you know some options that you can use to customize the instructions that you get but basically it has a list of really detailed instructions to help you update your progress your project we also have a dedicated guide to updating toover angular version 9 and that lists things like breaking changes deprecations troubleshooting advice basically anything that you need to know so I would definitely check that out as well so now that the 9.1 release is out we're gonna start working on angular 10 zero and that's coming next oh there's a lot to be excited about so stay tuned thank you for your time [Applause] [Music] [Applause] [Music]

Channel: ng-conf

Views: 4,711

Rating: 4.7798166 out of 5

Keywords: angular, angularjs, javascript, ngconf, ng-conf, programming, angular conference, ng conference, angular javascript, angular tutorial, Javascript Tutorial, Programming Tutorial, Computer Programming, Google Angular, Google Programming, ng-conf Hardwired, ng-conf 2020

Id: Uz2D8QjQAIE

Length: 40min 32sec (2432 seconds)

Published: Mon May 25 2020