Okay. Everybody thanks for coming I. We're in talking with ego elements the talk. Title that's on your agenda is definitely, not stolen, from The Hunger Games so just. Ignore kind of the talk title it's. About this we're gonna talk about elements today, my, name is Rob Wormald I'm a software, engineer on the angular team at Google of all places I also. Started the MGR X project which is a kind of redock style state management system for angular and. I'm also angular's. Rep in terms of web standards so kind of upcoming web standards, I'm angular's, representative, in these meetings talking, about new standards things like that. So. We're, gonna kind of do this in two stages I want to talk about what angular is doing today kind, of some new stuff we've got coming out in our new release and then talk out a little bit about the future. So. We just shipped angular 6.0, last. Week we shipped that came. Out a little bit late we wanted to make sure it was nice and polished for people there's. A ton of really cool features new year. Things, like easier upgrades we've done a bunch of work to make angular 6 even, smoother than the previous release. And. This is kind of the way that we positioned the talk that I'm gonna do here so at this, point angular has gone through kind of five major version iterations and we're, pretty happy with where it's at for building kind of big single, page applications. All of our documentation, all, of our tooling, is kind of built around this this concept of building s.p.a, is got. A really cool tweet the other day that the windows admin, Center is actually an angularjs or it's an angular application so it's kind of served from the MSI so this kind of thing we're. Really good at but. Anyone. Can be a little bit more challenging, to use in scenarios, that don't fit this kind of single page application, model right and. This is really because we, built it for single page applications, this is we get paid at Google to build you know SPS. But. Part of my job is talking to developers talking, to teams for using angular and we get all kinds of feature requests. Use cases that people are doing with angular maybe. Don't fit that SP a model so the one we get all the time is this kind of I've got you know existing, HTML I've, got a server-side render an app and, I kind of would have enhanced it with angular, angularjs. The old version of angular was really good at this, but, in angular we kind of took some that functionality, away we did it for a good reason but. It didn't take away the use cases, people had for this kind of stuff so this, is like the most requested, feature feature, request that I get on and go right now is I already, have an app I already have HTML I already have some server-side rendered thing I want to put angular into it you can do it but, it's hard it's not easy to do. Things. Like CMS is kind of fallen this this similar kind of example right where you have some system where you've got content in databases you've got kind of non developers, writing HTML they. Might be composing, HTML pages and, really they may, not be framework developers they may not be JavaScript, developers since, the MS is another case we hear a lot about, and. Then things like widgets right I want to build like a little calendar widget or we've. Been talking to the Microsoft SharePoint framework, team right and these are kind of little mini apps so many widgets again. Angular can do this today but it takes a lot of angular specific, knowledge it's not easy to consume these things so. You know widgets are another case that come up kind of all the time and, this, is the big one this sort of mixed environment, right so when the first version of angular came out almost nine years ago we. Were one of very few JavaScript. Frameworks out there right most people picked angular or backbone, or, knock out something like this and nowadays there a lot more right, there a huge amount of you new frameworks. Niihka system we've got angularjs, of course is still around things like polymer, and pre-act and react, you, might just ill be using jquery, you might be just using vanilla JavaScript and, so. We talked to a lot of teams who are doing this right they have a lot of different technologies, and they, want to stop basically, rewriting, the same date picker every time they change frameworks, and.
We Have this problem at Google right Google has, sort. Of half a dozen internal, framework so got Ango and anglers I asked polymer, which you know about angular, Dart which you may not know about whizz which you definitely don't know about with is what Gmail is made with with Docs is made out of Wiz so. We've a bunch of internal teams who again have the same problem the outside world does write the. Rebuilding, stuff they're doing a lot of duplicate work they're, not able to share code between these, different frameworks and so we end up building the same thing again and again and again. So. We wanted to see if we could maybe do better and for the past year or so I've been leading this project we call angular elements, and, the ideas really want to open up angular to a whole bunch of different use cases we, really want to make it more approachable for people who may not be developers, may not be you know hardcore JavaScript, developers and we're. Doing that, kind of connecting, up with web standards, right I work, at Google the chrome team is just across the way from us they've got a lot of work on things like web components, and we want to see if we can really make angular a little more flexible. So. Web. Components is really the kind of core of this idea raise your hand in the room if you've ever used or ever heard of web components to start with that that's. Maybe half of you raise your anything you've ever written in a web component. It's. Like five of you maybe. So. Not many right but they're out there they've been around for sort of five years or so, if. You don't know what component is they're. Basically there are set of API standards, that. Allow you to create custom, reusable, HTML. Tags so that thing the button the span the day of you know web. Components are designed to let you create your own versions, of these, and. Importantly they can be used with any JavaScript, framework library that speaks HTML, angular speak HTML, react. XHTML. React, speech HTML, and anything that's a custom element should just work in these environments and. Part. Of this web component spec is this core, custom, elements API I like, to joke that there's actually no such thing as a web component it's kind of an idea, and really what we're talking about are these low-level, api's, like, custom elements. So. If you've never created a custom element for, they're really really simple to do you start with a basic es6, class you. Extend, from the HTML, element you could extend from the HTML input an element from a button element whatever but, it's just a simple es6 class and, then, you register, it with a browser and you tell it you know when I put hello - world as a tag on a page go, ahead and start up this class for, me so this is the lowest level API it's really really simple. They. Have lifecycle, hooks so you can get a callback when this thing is inserted, into the Dom you can get a callback when this thing is removed from the Dom this connected, disconnect tells us that. You. Can also tell I want to I care, about attributes, on this HTML so when the name attribute, changes I also get a callback that says you know this is changed, to give me the old value the new value. You. Can have property setters that means you can actually just you know say this element dot, name give it a value so, this is how pretty much every doll element in the browser already. Works right inputs, have attributes they have you know you can set the type you can set the placeholder you, can get a hold of them programmatically, you can set properties, on them so. The cool thing about custom elements is really they allow you to do exactly what the browser does to kind of extend the native functionality the browser this is a very very powerful powerful, thing.
They. Also do event handlers right so you can spit out native events so I can add an event listener to this and then listen to them so you can dispatch the, same sort of events the browser does. So. The question becomes like well if you've got all this in the browser we've got this API like why do we need frameworks at all right why isn't everybody just building everything like this all the time and the, answer is really that there's a lot of other stuff that comes with building of applications, right so angular is this platform we have a bunch of stuff we have things like a really great forms API and we need a routing. Hdpi. 18 and all these things that are really hard to do yourself this is why people use frameworks. Right and web, components custom elements don't, really change that idea and they're not competing with each other it's just kind of a new facility we can add add to the browser. Cool. Society, of angular elements is really taking the, power of angular angular components. You know you go templating, all these things if you're an angular developer you know how to use already and. Kind of merging, them gluing, them together with custom elements so that we can maybe get the best of both worlds. So. This. Is a standard angular, component, a laser. Pointer cool it's got a selector at the top right you've got a template it's got some data binding there we've got an NG model we're. Gonna event handler and then we were selling basically from the outside world give us the input of the name this. Is how we I made an event to the outside world and say the name has changed you know we can set up an event handler here, so that when we click the change name here we're gonna fire this and then kind of emit an event to the outside world, so. This is a completely standard angular component, typically. You'd register that an NG module, right so we've got browser, module, this is our dependencies, this is the angular render, this is kind of all the machinery that angular needs. We. Just kind of create a module a little baby app if you like and we say cool we you know we're gonna declare, that we own this hello world component, we also want to make it available as an entry component, don't worry too much about that and. Basically we're going to say is cool. We're gonna take this sort of baby application. And we want to kind of make it available outside, of angular. So. This is how you extract an angular app today you, bring in our platform, you bring in the module and you basically you know kind of spool up this platform go, ahead and bootstrap it and that starts your application, up the. Same thing works in a ot mode and the head of time compiled mode right you, have a module you compile it you, start it up in the application, kind of starts out so. The elements we wanted to see if we could make this kind of same thing you're, doing every day is an angular developer. Available. To people who are not necessarily angular. Developers right, so. We've added a new API in angler six it's this angular elements, package it's got a single exported thing this creates custom elements and basically. What we're saying is instead of kind of automatically, bootstrapping, this application, this component, we've just created what. We're actually going to do is not bootstrap, the application not. Complete strap the component, apologize but we're gonna register it with the browser we're gonna tell the browser here, is this kind of this, element that we're creating and I want to register it using that custom, elements API so. The new angular API how to create a fill and returns. Us that es6, class I showed you in the first couple of slides and then. We just tell the browser hey this HelloWorld, element, that angular has minted for us go, ahead and register it with the browser using the standard API and now it's just a hello world element, and I can do whatever I want with it.
There's. A little bit of a shorter hand to do it again this is not a thing you need to worry about if you're not kind of deep into angular there's a shorter hand a way to do it but basically we're doing the same thing getting. All of our component, we're getting a hold of an injector and we're just registering, our kind of generated, class with, the browser. So. Again we can do this in IOT mode pretty straightforward thing and then all I have to do use it is just put it on the page right I don't, have to kind of say like I do an angular or react or pre act review or any applications, kind, of connect this class to this Dom element I've already done that using the browser api's so. Literally all I have to do is put it on the page I can send an attribute on it that name attribute, there will get linked up of the name input that I put on the components. And. Now that it's just a standard Dom element, so, anybody who does HTML, or JavaScript at all already. Knows how to use it right so I can just say basically document create elements is a completely, standard browser API gives. Me back an instance of this hello world components. And then I can just append it to the document right just document Dhabi appendchild, I can. Set a property on it and that will basically when, I set that property, angular, listening for that it will go ahead and update the internals of the component, for me I. Can. Do the same thing with attributes, right so again totally. Standard Dom API this. Is the kind of programmatic. Equivalent. Of in the HTML, saying name is equal to whatever. We. Can add event listeners right so again totally, standard browser API you're gonna hear me probably say that a dozen more times it's important, this is just a totally standard Dom API, adding. An event listener for a named event and then you know we do whatever we want when that event comes out. We. Can also this is a new API in the new version of custom elements we, can programmatically. Create these things so I can say to the custom elements API giving me back that, constructor, that I gave you can, do this at any point in the application it, gives me back the actual constructor, I can, just create a new instance of it there and then again you know it works like any other Dom element I can append it I can add event listeners to it or whatever so, it's pretty pretty standard pretty simple stuff. If. You're an angular developer, what. We're really saying here is this thing you already know the host element, the kind of element that your angular, component, is bootstraps, to that's. What an angular element is right we're kind of just making this a first-class citizen, so. For example I can't inject, my element ref here this is my host element and now. I can from the inside of my angular component, which you'll notice does, not extend, from the HTML element does not extend, from a base class it's just a vanilla JavaScript, class, and, our. Custom element is sort of wrapping it right it's just a wrapper around this anchor element this has some nice benefits because it means we don't have to worry about for example using, this thing on the server or HTML, iment might not be available makes. It a lot more flexible, it makes it really easy to test but if we want to we can get a hold of the actual Dom element, just by injecting it there. We. Can send listeners right so if I want to have this set up with a button, for example I can say listen, to click events, on the kind of host button, there that's a hosts listeners doing and then, you know do something instead of my component, I can do the inverse so if I have some property on my component, I can say go ahead and reflect, that back, to, the Dom element so we're basically keeping. This, kind of internal is active, boolean, in sync, with the actual, Dom attribute. So. Again. If you're an ego developer this is really all we're doing it's just gluing together kind of two concepts, you know how to use already. Dependency. Injection this is a big reason that lots of people use angular this has been kind of the one, of the biggest reasons we think that, custom elements web components, have not really gone mainstream, because you can't use things like di in general we, have a lot of work we wanted to make sure that all the kind of facilities, of angular were available for developers to use so.
Di Still works exactly, as you'd expect it to, in. Angular we kind of had this injector hierarchy, so we've got a platform injector, and that holds things like the renderer and the HTML sanitizer, these, are the kind of platform, level and then, each individual, module each individual kind of angular application. It might have things like services, right you might have a storage, service you wanna have something that's kind of talking to a remote API then. Every component has its own injector as well so you get this kind of nice hierarchy, of things, angular. Elements works exactly the same way instead. Of having a component injector, we have an element injector but it means that things that you provide to the module things that you provide to the platform, things you provide to your application, can. Be injected into these elements, so it gives you again kind of the best of both worlds right it works like a standard Dom element but. You get all the power of angular inside of it which is pretty cool. You. Have a little programmatic, control here and just to show you what we're doing so we're creating that platform, that's that top-level, injector, with the gun bootstrapping, our module, which gives us kind of our module, level injector, I like, to think about module, and kind of act as a similar concept right a component is just a UI thing, an app, might, have more things than just components. So. Boots tripping that module gives us an injector right and then we're just gonna tell angular, when. We create this custom element go ahead and stick the injector, from the parent into my custom element so this makes anything that's available at, the module level available, across all, of my custom elements which is cool and. Then again I just kind of register it with the browser Rogers, normal. So. Just, to go back to this again right once, this thing is registered, it is just a standard Dom, element, there, is no other code than this to get this thing started up I could put two of them the page I get two instances of it set, the attributes that the properties it's just standard. HD. Again. Same thing standard. JavaScript, API is creating, elements. One. Trick though if I wanted to inject a different injector if I wanted to for some special, use case I'm doing this in the SharePoint integration I'm running at the moment if, I wanted to give like in a different injector, to every single element if. I do it this way I don't have any place to kind of pass in arguments, right the browser API doesn't understand. Dependency. Injection doesn't, anything about that so, I can't use this document dot create element API what. I can do is go to this brand new API the, basically gives me back the constructor, and then I could create an instance of it but what I can actually do is just pass in a different, injector right and this, gives us really the kind of flexibility, that we need at the lowest levels, so for most cases you'll be able to just do the kind of create element thing you. May never even call this right if you're using asp.net, to render stuff from the server you'll never have to call this all you've got to do is stamp out the HTML send, to the browser and these things will start up but. In the DI case where you want to do something advanced you. Always get a hold of constructor, and just, go ahead and Jack the injector that you want and everything kind of works as normal. Content. Projection, raise. Your hand if you know what the word transclusion, means. Three. Of you your angularjs, developers for sure so. Content, projection or transclusion is the idea that I have an HTML element right and what I'm gonna say is this, is the template and I'm gonna put a space, on the screen that basically says I want. To project, some content, from the outside world and I want you to put it in this area in my template this. Works exactly to expect it to so. You know I have my hello world element, I put an NG content, thing in the template of this element and then, I can just put content, in between the two of the attila mint tags here and angular will go ahead and take that content, and project.
It Into that slot and the template that i gave it this, is flexible and this is really powerful for composing, you eyes again, if you're building a CMS people. Who are not angular, developers, who may not be JavaScript developers don't have to think about this they just lay out the HTML as they expect it to and then, you're just kind of handles it. We go so, that's like the net output looks like this right we start with this we have a template that looks like this and, the final result in the browser right, we've got our kind of internal template and then the stuff where you put in the outside world has been projected, into that slot in the template, I put. An asterisk here, this, works but. It's not dynamic, right because angular is only able to know ahead of time what, you expect, to give it so. Part. Of the web components API is this new idea of slots slots, are effectively, the native version, of transclusion. And. Slots and shadow down work exactly, you should expect them to an angular elements, so. We can do the exact same thing right we've got a template again this, time you're gonna use the native slot API and say when, I give you content from the outside world go ahead and stick it in this kind of space in the template we. Turn on view encapsulation, native this isn't baked in angular for a couple of years this is the native shadow Dom API. And. It just works as you'd expect it to so. Again now we have a kind of internal template we've got a slot some some, part of the display where we want stuff to end up, we. Actually use the element in the Dom like this that. Content that we're projecting into, the inside it will get inserted into thatthat space on the slot you can also have named slots so you're able to say basically I have an eight sort of a main area I might have a header area and the, from the outside world I can say go ahead and put this span into that slot and put this header into my header area of my template so it's a very powerful way to do composition, at, runtime, again, with no code any, kind, of server-side, rendering, framework can spit out the HTML, in the structure you expect it and then the browser's were kind of wires that a lot when everything boots up please like. So. We'll jump in have a quick demo of this just. To kind of show you that I'm not making all this up. So. If you've not used this before this is a stack, let's stack, books is built on top of the Monaco editor the thing that builds up in in vs code working.
With The team we run slack stack blitz it's got typescript integration it's a really really powerful kind, of web editing setup I'm actually in a browser here, which is pretty cool and then, I've got my, kind of hello world element, running in this other tab, so. We'll just jump in real quick I'll give you a quick tour around the code we. See that you know so I've got an app components, very simple it's. Got a template right it's just got a a P tag and hello a little bit of text interpolation as I've. Written my component, here again saying this is the selector for it here's, the template if I've got style as you know and I'll show you the Styles here. I'm. Able to do things like go ahead and say style the host this is the host syntax, I'm shadow Dom go, and apply these Styles to the angular element itself style. The P tag this way, it's. Again very very simple element here and I've got this input which is basically, saying to angular I'm, gonna pass you values, in from the outside world right. And if you're in an angular application you, just pass these two in your template this is how you pass data down through different components, we. Just hijack this basic Euler angle excuse. Me it for angular elements and we just kind of wire these things up so. If I go to my app module. This. Is where I've got again my dependencies, from the outside world coming and I've got my browser import so this has got things like the renderer all that stuff is important to me angular work I've, got my actual declared component, and then inside of this app module, and so this is like my kind of baby app if you like I'm just, injecting, the injector and keeping a reference to it and, then, I'm going head and again calling that new create custom LAPI passing. It the app component passing, an injector, there's a couple more options you can pass in are not really important at the moment I get, back in this which is Justin again it's an es6, class, it extends his ng element constructor which under the hood extends, HTML, element so, the thing I'm getting back here is again just a standard es6, class extended. From h2 element and then I register it with this browser API, this. Is the custom element API it's built into any modern browser that, supports custom, elements, so. This, is up and running now I can jump over my other tab here. Cool. So it's very simple not, a whole lot going on inside of this element here but what's cool is I can actually jump in here and unlike, every angular application, basically unlike any JavaScript, framework that's out there I can, just go to my dev tools and I can mess with this thing so I can go in here I can edit and I can say hello build, 2018. And. It will sync that up I didn't do any code changes here I didn't change anything in the JavaScript world I literally just wanted to dev tools and modify, it I can, do the same thing so, I can get in here and I can say go ahead and give me an, element. Say. Document, dot create element. I. Think. I called that in my app will be paying attention Maya. If. I could spell my app that would be even better right so. I can L back if I kind of log this out you'll see it's just a standard Dom element, right and then I can say document, body. Dot. And. Child. My. L and. It's on the page and, then I can I just go mess with it here. Go. Put an attribute, and it says, name. Great. So that reflects through I can. Query for that so I can say document, dot query selector. Give. Me my. - app. Sign. That to a variable. Again. I've got a hold of that thing this is the first one and I can say a dot name is. Bill. 27, throwing 18 exclamation. Point. And. Again that will reflect in, I can say great a set. Attribute. Set. The name. Those. And. That should work exactly the same way so again what I got to get across here is that internal to this component it's an angular element you know we've got templating, going on, we've, got host listeners and host bindings and all this angular machinery, going on internal. To the component, but that's the consumer, of the component you have absolutely no idea it's an angular component you have to think about it so, any designer any developer, in any environment it can just drop this thing into the page work.
With It when it kind of works exactly it expect it to which, we think it's pretty cool. Back. To my slides here. Cool. Sets just go back to this use case this real quick, so. This big one is enhancing, existing angular applications, one of the things on the angular team is we really do try to dog through these things before we ship them to the outside world we. All we have all kinds of kind of good ideas all kinds of crazy ideas all, kinds of bad ideas and we try to make sure that they're actually validated. Inside of Google on a Google project before we shift into the outside world so. For us really. The biggest application, we maintain as the angular team is our, website angular, do. Angharad, io is an angular application as you'd expect it to be it wouldn't be very good PR if we were using our own framework for a website. But. It's, different because unlike, many kind of interactive. Angular applications, where there might be many components, with many forms, and lots of stuff going on the. Angular website is mostly, static HTML most. Of the documentation, is written as HTML. Or markdown, on disk in our github repo and then, we kind of run a bunch of build tooling but we spit out standard, HTML, because it doesn't make sense for us to turn a bunch of static HTML into. Components, right you're right wasting. Really a whole bunch of cycles that are a whole bunch of energy a whole bunch of time it's. Not the right model for static HTML to. Be made out of pure components, whatever the framework really but. We. Do have a bunch of interactivity, in these pages right if you scroll through our documentation, you go through one of the guides as, you kind of scroll through these pages you'll see these violins, of interactive, and excuse, me interactive, kind of functionality, right so. This is a code snippet here and. We're doing kind of styling, here so the developer who's writing this this documentation, doesn't. Really do anything other than write to code and then our component. That wraps this so this kind of blue box on the screen here where my laser pointer go this, blue box is an. Angular, component, and it's doing content projection as I just showed you and it's kind of enhancing, that with this styling. Another. Example there so like this is a tabs thing right we've got a couple different tabs you can flip through the code so, this is interactive, stuff but, it's like two or three percent of the application, right it's not the 97 percent static, HTML it's, all over these pages. Here's. Another one this is the kind of API listing and INGOs this has got search interactivity, a whole bunch different stuff and. Historically, we. Have had a bunch of really, really gnarly code, inside. Of the angular angular, o repo, to. Wire these things up and effectively what we had to do was basically every time we change the HTML page we. Had to go query that piece of HTML find, all the elements that we cared about right, and kind of manually, do this really gross bootstrapping, process where we said to angular look I've got some kind of widget on the screen here take. This angular class connect. It bootstrap it into the component, go ahead and pick up all that HTML, that I've projected in and kind of wired it up and it's really not very nice I used to have the code up here it was too gross so I removed it, when. We shipped this when we shipped our first version of angular angular, elements, it took us something like two hours to port all that stuff whoever because most of the work was literally just deleting, a bunch of codes this is kind of validating, for us that this, worked. So. You can actually go, to the angler to our website right now all that stuff that I was doing where I was getting a hold of the thing and document dot creating elements and you could do that today angered. IO is now shipping with custom elements the first thing we've shipped that uses them so we're pretty excited about that. The. Other thing that we talked about a lot and I don't really have a good demo of this but this is what we're talking to the SharePoint team about is this idea of using an element using a web component as, like, a packaging, format right so you might want to write a really rich interactive. Application, but, you're going to embed it into you know SharePoint FX into, into, an NG upgrade application, again maybe, you want to have a bunch of different, teams writing a bunch of different kind of widget functionality. They might be connected to a back-end they might be using functions, whatever you. Want to assemble them into applications, kind of at runtime based on you know metadata, whatever, you want to do we.
Kind Of call this the container case and this is the thing we're also really wanted to make sure that worked pretty seamlessly we, are ready to go on that today you could start using this for SharePoint I'm, actually put in SharePoint Conference in a couple of weeks talking about this so we're pretty excited about kind of a new world that this opens up for people writing angular apps. This. Third one is one, that's really close to my heart so raise. Your hand in this room if you've ever written a date picker a. Bunch. Of people raise, your hand if you enjoyed writing, that day picker, nobody. Literally nobody in the room right but. We do this all the time if you're going to NPM you search date picker there something, like 750. Date pickers on NPM right that's. Because everybody rebuilds, them because I'm using a react and my other you know my colleagues using angular and somebody else is using view, and. Because they're not really compiled for each other we end up rewriting, the code we had a brewery doing the work again and again and again and. Obviously we think that this is not ideal as. Much as we'd like everybody use angular for everything, we know that that's not really feasible in the modern age right so maybe would be better if we will plate a little more nicely with others and so this reusable widget case is kind of what we're gonna be tackling for the next six months really. You. Could do this today with, angular elements as we shipped it in six point out the, main problem is code size here the main problem, is that basically, because. We're shipping kind of angular which is this big project puts on a lot of stuff it. May me it may not make sense for a date picker quite yet because you don't have to ship 50k, of code for a single date picker right. Just. A quick note on production readiness and kind of support here so. All, the big browser except edge so far have kind of said we're all on the custom, elements train and, just seems to be positive about this there's a user voice issue that you can go up vote if you think this is a cool thing the. Good news is there are polyfills, maintained all the way back to IE 9 I put the asterisks, there just in case you, can do it 99 it, gets a little more slow a little less performant, but the polyfills exists, you can do it if you need to obviously. This gets better on modern browsers the, faster the newer the browser is the less Paul it fills you ship and kind of the smaller and better everything, is. So. What. About tomorrow we. Think this is really cool stuff again. We're using it on our website already we're. Talking to a bunch of teams in turtle to Google who are using kind. Of the early api's of angular omelets already so. We're pretty excited about where we are today that. It's usable it's functional, there's a lot of really good use cases for it. But. One. Of the other efforts we've got going on so they're kind of two main things happening in the Ingo tape at the moment the. First is this element API which just shipped and the, other is this project we're calling IV, an IV is basically, a code name for our new rendering, engine we've. Changed the rendering engine and angular a couple times already if, you've been Ingo developer for a couple of years you may have noticed that when you went from version to version, 4 and you recompile your application, everything just got much smaller for free this, is a big part of the angular story we're evolving the framework kind of under the hood but we want you to be sure that you can just continue to write and not have to change your code every week so, IV is the next generation of our rendering engine. My, director bright green a year, ago or so our last big conference, kind of put out this target to our team and basically said look we're today at 36, K this is compressed, right it's kind, of uncompressed something like 150, 170. K this. Is we are today we. Want to get down to it to a level where basically we were under 10 K so, that people can basically use angular without thinking about this at all.
So He promised he'd bake us a cake that's what we call it the cake threshold, this, is how he gets us to do anything on the angular team he just bakes and baked goods and we go okay that'll work so. We're, pretty excited that at our last conference a couple of weeks ago we introduced the first kind of demos of ivy Ivy's, rendering, engine you can see this is the kind of code size now for, a teller world angular application, with Ivy this. Is all in there are no dependencies there's nothing else on the page little, you have an angular application doing, hello world in just under three K. So. This is cool right so what, we're gonna be doing between v6. And v7. Is really. Integrating, these two ideas we have angular elements which is useful today kind of using if you like the kind of slightly older version of angular and then. Really, this new IV project is being developed kind of in parallel so what, we're thinking is, rather than all that code that I was doing on previous pages where I was bootstrapping, and creating modules and all that stuff we, wanted to feel like you basically say when you create an anchor component, just make this thing into a custom element for me we'll. Pass it through the compiler and kind of do all the hard work for you. Don't. Worry too much about this but this will basically when, we take that decorator, that you do here we, down level it to a custom element definition, so now you've got your angular component, that's got its angular element def kind of connected, to it so you can just work with it. I've. Got a demo of this just, to show you real quick so. I don't have this one running on stack wits because this is a little bit more experimental, so. I'm in the angular kind of main repo here I've. Got a very simple to do demo app that I'm working on here, pull this up, great. So. Standard. Angular stuff right we've got a basic, kind of to do interface here we've got service which is our to do store it's got some data in it you. Know things like filtering and removing and adding all the stuff you do in a standard kind of angular service, below. That I've got a kind. Of basic standard angular component, who's got templating, it this is kind of using all the features of Ingo that's got you know ng ifs and ng fours then she repeats and all that stuff that we like about angular. Pay. No attention to this kind of mess in the middle here this is us still working out compiled API is this. Is ng for ng if these are just directives you know how to use and. I have a very simple call at the bottom here which is just defining that to-do app that we created as a. Custom, element right so same kind of idea, and. I think I have this actually running up here somewhere I, do maybe. I do cool, so. This is not, actually running on the server, my. Server here so, we're using basil to build this so you're not heard of basil this is the tool that we use inside of Google to build everything all. Of our development work works with basil this is what we use it gives a really nice turnaround time but. You as an angular developer could use this in web pack and angular CLI all the tooling, you know how it works already go. Back over here. Running. Cool so this is now to do MVC application. It. Works we're, demonstrating IV elements now so let's check that off the list great. And. If we go into our dev tools here. I'm. Gonna actually drag this thing up the screen there we go, I'll. Refresh that you've, got some CSS but, the actual bundle, for this application is 12, k minified. No dependencies, where do my network could go. You. Can see it's 12. Points UK this is for a component, 3 are three components of service CSS. All that stuff is baked in and it comes in under 12 k this. Is the level where you don't have to think about anymore but it's not a page it's, smaller, than every framework that exists, it's smaller than most jQuery, widgets at this point right at this point this is a very very micro, piece of code and.
We Think this is gonna open up a really interesting world because at this point you killed you could build a date picker this way and at 10:12 k5k, who cares right you can ship it out for the NPM people can consume it and importantly again. You see that I'm not like loading angular, in here I don't have a bunch of angular script tags coming off of NPM the, entire application and all the bits and pieces this thing needs from angular are bundled in that pack and that's it so it makes it very portable the, only thing you have to do to consume this thing is if you look at the index of HTML, you. Literally have that one bundle I've, got my little elements wrapper running at the top and, this is all you would need to do you don't need to get on the web pack you don't need to do a build tool you don't need to do anything other than just put the script tag onto, the page this is important, because again what. You want is people who are writing JavaScript, applications, web applications however. They're doing it to able to consume, the stuff you're building with angular but, not have to know anything about how angular works so. We think this is pretty important. Cool. So I just want to show the slide off again because I like really showing that number there a lot this is like an order of magnitude smaller, than anything we've ever built with angular before. And. We think we actually have some Headroom before, I got on the flight to come out here yesterday mieszko our our team lead pinged me and he said hey hey I've got that number under a thousand, bytes I was like wow okay so. We're really close we expect ivy to be basically out in v7 of angular which is now about five months away before. We ship it to the outside world of course we will make sure that we can run it inside at Google without breaking the world the goal of the ivy project, importantly, is everybody, who is writing angular applications. Today you've. Got thousands of lines of code and obviously we do not make you want to make you rewrite that code ever again so. Ivy will be completely backwards, compatible, literally. It would just be a compiler, tag you flip recompile, your application and you see fairly, significant. Savings, in your code size. So. I like to say this is really just the beginning right this is a brand new project for us we, were working on kind of six months to year or so but. We think this is really the beginning of something really interesting not just for angular but for the web as a whole we'd, really like everybody, get out of there kind of tiny silos, that we all work in and begin to share code, we.
Working Quite closely with the ionic team if you know them they. Build this really really amazing, it. Was actually, built on top of angular, and they moved everything over to web components which is which is great because it works for everybody but of course because angular already supports web components, every, day on ik everything I on it can sense a bill just work right back into angular Savelle, is written by the guy who writes roll up the, polymer team obviously at Google been doing this for quite a long time and I've been telling us for years hey. You should just build stuff this way and I think everybody's kind of beginning to realize. Maybe that's not a terrible idea. Skate j/s which is in the bottom there they are a project which is basically, wrapping all the frameworks who aren't doing things like angular elements, so, skate provides wrappers, for pre-act and react and all the different frameworks and. I'm super excited that we get to add angular to this list today. Cool. So that's everything for me I'm. Quite happy to take questions comments, concerns about this I, said, this is kind of really new for us we expect over the next six months to have even more coming out and it. Is something you try out we'd love to get your feedback we'd, love to hear from you we love to hear if you've got a use case that maybe we haven't thought about something. You think oh maybe this will work in my world I'd love to chat with you about that so come, and see me whenever thanks, for listening.
2018-05-09