Angular Today, Angular Tomorrow, Angular Forever
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.
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.
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.