Elements in v6 and Beyond - Rob Wormald

hey everybody so I'm gonna talk about angular elements today I'm Rob Wormald if you don't know me I'm now a developer programs engineer on the Google team I do angular at Google I used to be a developer advocate a developer programs engineer is the same job I just do slightly less slide decks and slightly more code so that's really what's changed as the guy said I started the Ender X project I don't really do much on that project I've handed over to Mike and Brandon they do an excellent job but running it and now cut him one of my main roles on the other team is dealing with web standards so I talked to a lot of the you know the browser team serving standards a lot of teams who are proposing standards it's kind of my wheelhouse now so we're gonna talk about elements today we're gonna talk about web components kind of in general we're gonna talk about what we're gonna release in the 6.0 release this week or next week and then kind of the future of elements and where we're gonna go with them and kind of how we're thinking about stuff so web components raise your hand if you've heard of web components in the room most of you that's more than last time raise your hand if you've ever written a web component that's a significantly smaller number okay so web components are a set and set is an important word here of web platform API is that let you create new custom reusable HTML tags to use in web pages and the important thing here is that they can use we can be used in any JavaScript library or framework that works with HTML and I said that word set so I like to say that there's actually no such thing as a web component it's kind of an idea they're made up of a set of standards and the one I want to talk about today is custom elements so custom elements are an API that basically allow you to create new Dom elements so we all use buttons and divs and spans and custom elements give you the ability to actually create your own elements right and so it takes two things you create an es6 class so we have a hello world class here that extends from an HTML element and then we register it with a browser through this custom elements API so we say to the browser if I do hello world on the page then go ahead and start up this class for me they have lifecycle hooks so this connected callback gets fired when you add this thing to the Dom or when it gets you know parsed by the browser if you removed it from the Dom or you destroy it then this disk did call backfires you can have attributes so Dom elements use attributes you can basically register interest in attributes and then you have a callback that anytime that attribute changes this attribute changed callback will fire and they also have properties right so you can set and get properties because it's just in es6 class right it's like any other class you've written and then of course they do events right so you know if you listen inside of a custom element then you can dispatch an event to the outside world so you just do that by saying this not dispatch event and creating a new custom event so angular elements the Mirage I've been talking about is really just angular components kind of glued together with this custom elements API and so if we were gonna write the kind of a very basic hello world angular component we would basically start with a standard a new component here we're gonna have a selector on it it's gonna have a template we've got a little bit of data binding we've got an NG model we've got some button listeners right so it's kind of a basic standard angular component and what we want to do is kind of package this up and turn it into a real Dom element turn it into a custom element so we do that by you know just like you do today an angular nothing new here you've all written components like this you know we have an NG module we bring in the import so we're gonna use the browser module here we have we have a declare that this module or this element belongs to this module and then we add it to this entry components rate one thing to notice is I'm not saying bootstrap this component right I'm not actually adding it to the bootstrap array instead I'm passing in this kind of ng do bootstrap call back and I'm not gonna do anything with it but what this basically tells angular to do is go ahead and start up this module right but don't actually start up the component don't try to render the component just start up this kind of context if you like and then what we do is basically we go ahead and bring in our platform right so I'm using the dynamic platform here create an instance of the platform and then go ahead and bootstrap my module if you've done this with äôt it looks almost exactly the same right so we use the platform we go ahead and bootstrap this module most people though when they're at angular apps today kind of don't do this last then call back right they just bootstrap because what happens is your app starts up right and then you're kind of in your app and you're running but because we're not bootstrapping a component here what we're actually doing is just creating a module creating an instant this module and we get this module ref right so this is returned to us and this is basically angular saying here's a reference to this context that we've created and Maximus talked would really covered a lot of this this kind of injector stuff but really what we're doing is creating the instance an injector here and angers gonna call us back so if we want to turn this thing into a custom element all we have to do is bring in this new custom elements API so this is from the angular elements package this is gonna come in to v6 there is only one function in this package this is create custom element package and we're gonna do two things here so the first thing we're gonna do is going to pass it into this create two custom element function we're gonna pass our component in and we're also going to pass in the injector that came from module that owns it right so we have to get ahold of this injector which has the renderer and all these different things and we're basically going to create this custom element and what you get back this con star this hello world element here on the left side this is that es6 class that you saw me do a few slides ago right so all we're doing is internally we're kind of minting a new class for you and hanging it back and then I hand that to the exact same custom element CPI right so I say okay browser here's an es this class that's got my angular component inside of it it's kind of connected to this angular context and we're gonna go ahead and tell the browser this is what this is and then you know there's another way to do this this is like a slightly more sugared way of doing that where internal to that ng do bootstrap method right I can kind of register it in there these two are functionally equivalent this is maybe a little bit cleaner because the one you started up you know all you have to do is this so this would actually start off the module fire that ng do bootstrap call back go ahead and register our element and then we're off and running so how do I use it I just put in the Dom right so put in HTML I can just put the tag in the name I can do attributes right and so this name attribute used to here is linked up to that name input that I defined on the component we've glued those two things together so when we change the name in the Dom that will be reflected in the angular component we can create them imperative lis right so we can just like you do with any other element you can document dot create element on it you can append it to the body you can set a property on it here as I'm doing you can set attributes on it right so again if I set the property hello world name that's gonna be sort of reflected into my angular component on the inside set that property and run change detection same thing happens with an attribute right we can set an attribute that will trigger change detection update the view we can add event listeners so we had an output on that component that was kind of emitting outputs to the outside world we linked those things up as well so when you dispatch from the output inside of your component you know people who are consuming this element can listen to it with that name via bat and again this is just a standard Dom out of nth listener right guy yep so again add listening you know it's very very standard stuff one thing that kind of helps I think if you've not used this before the mental models a bit interesting and really the easiest way to think about this is we've all used the host kind of idea in angular right we've done host bindings we've meant host listeners we use this word host a lot and in angular elements the host is the custom element they are the same thing so you know if I inject my element ref as we've all done before the native element that's on that element that is that custom element that's that thing we've created right so the thing to keep in mind here is you have your angular component it's exactly the same as it was before and we're sort of wrapping it in this this custom element this class also it you know if you do a hosts listener right what we're saying here is listen to clicks on this element so the person who's using this element if they click on it we can then propagate that event internal to our component so we can deal with it same thing with host binding right so we can take an attribute you know if this is a selected thing we can reflect that to the outer sort of element that's owning our thing and it keeps everything in sync and this is just a helpful kind of way to think about it that you can think about an angular element as just the host right it's a it's a real thing you've used this before nothing really shiny and new this is the first question that comes up right we all use angular because has stuff like dependency injection can I use dependency injection with custom elements or the angular elements short answer is yes we'll dive into this a little bit I'm glad that Maxim went before me because he did a really good job in kind of talking about this hierarchy and injectors and how they all get wired up together there's a very simple level you can kind of think about it as three levels we have their platform injector so when you do platform browser internally we're creating an injector and that engine actor owns things like the renderer and the sanitizer and then you have your module the little hello world module recreated you know it might have services that are kind of shared and typically an angular application you'd add your services to your engine module same thing works here and then the component has its own injector in that so we get things like the element ref and the change detector ref custom ailments or angular mounts worked exactly the same way it's the same hierarchical system that's why you know when we get to this kind of screen where we're creating this instance of the module and wire everything up what I'm grabbing is the injector here and this injector right is coming from the platform injector and then a child has been created from the hello world module injury factory so we've got the renderer and then any services in the module and then we're registering it with this custom element so that it's kind of baked into the thing that we're registering with the browser so why do we have to do this upfront why do we need to do this injector when we register it well the answer is because if you use a custom element like this there's no chance for you to pass in an injector right like you don't have any access to how this thing is created it's the browser that's creating all this stuff for you so you don't have any way to do it here so we have to register that that injector ahead of time right this is cool because you know if you had for example an NG or X store in your module you can actually share that across all the custom elements on the page so you get this kind of shared context which is a really really powerful idea so again we can kind of use it declaratively the other problems here I like in the same case if we do document our create element this is a browser API it doesn't know anything about dependency injection so we don't have an opportunity to pass an injector right it's already created everything's been booted up and we have no chance to do it and this is kind of one of the main reasons that angular didn't use custom elements early on in the design because we had this restriction where we couldn't really get the injector in where we needed it right one of the cool things that's come in the new custom elements API is a kind of slightly more powerful way of constructing elements so I'm using this custom elements get API and basically what this does is give me back the class that I registered with the browser right so I created that thing with create custom elements and then I handed it to the browser but any point I can say give it back to me right and I now I have basically this constructor on the left side I can then just new it up and create a new instance of it and I can you know pet that's the Dom or whatever but we've got this hook now that if we want to if we wanted to pass in a slightly different injector if I was in a different context you know a different life cycle hold my application I can actually just pass another injector in here so this is a new thing that comes to the new custom omits API they're really kind of opens the door for some very very interesting things so just to keep in mind right there are basically three ways we can do this we can create them in the Dom we just put an element in the Dom the browser will start it up for us we can use that document dot create element API which have used you know for a long time and there's this new slightly more powerful API that lets us pass in an extra injector if we want to the question that always comes up here is content projection or transclusion as you may know it this works right so this is if you've not done this before this might be what your template looks like you know you might have some standard data binding and you use this ng content tag to basically say to angular go ahead and insert anything that I kind of put in the the the child of this and that looks like this right so I have my elements and if I were to put some content in there that would then be kind of projected into that ng Content area in the page so the final result looks something like this right this is just cruising excuse-me transclusion or content projections we call it so this works as expected I put an asterisk here though there's a couple of gotchas just to be aware of here so the first is because we are doing this kind of not in a in a static fashion the way that angular does everything today is very static content projection works as long as you do it sort of when the page is rendered for the first time so we put this Asterix there the other thing that doesn't work yet and this is something we're going to look at solving between six seven is using content child or the content children queries because then they were they were sort of designed for a very static world and so even yet linked those things up but we think in general this should be useful for people and again we will kind of optimize these api's over the next six months or so there's another thing now this is the other part of the the web components API is the shadow Dom right so typically this is about view encapsulation and having styles that don't leak all over the page you know this as view encapsulation dot native and angular you're already using shadow Dom if you're using the encapsulation and part of these Shadow Dom API is this new idea of slots and slots are basically the native version of what ng-content does so this is super experimental this is the thing that you can try it today fair warning you may find bugs with this because this is not a thing that we've done a huge amount of work on again this will be something we get much closer to you with ivy but effectively you can put a slot on the page you must use native shadow DOM and so I'm just turning that on with the view encapsulation donative and then the same thing works right so I can use a slot on the page compose some content into it you know the other cool thing that slots give you is named slots so just like ng content you could have named content projection slots have the same ability so you can say this slot has a name and then you know target content to go into a specific one of these slots so this is really helpful when you're doing composition you know and I'll show you a couple of examples of this but this is something that you know it's useful when you're building pages especially that are being server-side rendered and you want to kind of say I have this shuttle that I'm giving you then I'm gonna give you some content we're gonna project into the elements so this works again this is something you can do today we have some optimization to do here and we'll talk more about that in the future why are we doing this so use cases I've talked a lot about this and the kind of previous talks about elements and I could talk for an hour about the motivation behind this I'm not going to you can go back and watch those talks if you're interested but we kind of broke this down into three sort of main use cases and we started in kind of elements in angular applications right so you're already big angular apps you're all doing this every day and there are things we can do with custom elements that make it better to write angular applications and we're getting me to dive into one of these on NGO but things like the dynamic components right you don't know how to use the what is it the component factor resolver about resolved component factory method right custom moments let you do the same thing in a much much simpler fashion and then they open up some new things for things like super server-side rendering and hybrid rendering Vikram is gonna talk about this a little bit later so that's worth checking out so this is the thing we wanted to focus on kind of as the first step so we started with angular do we use angular dye or our website to really dog food a lot of new things that we try out so like Igor did a talk on SEO this morning we learned all that stuff doing angular tile work and we did the same thing for custom elements so if you look at the angular website most of it is static HTML content right it's mostly a bunch of text that is just kind of written by our our Docs authors and kind of rejected into the page what's important to know is these are not this whole all this HTML on this page it's not an angular component right we haven't packaged this up it's not at an angular template it's just static HTML and we do that because it doesn't really make sense to turn all this static content into dynamically rendered things so we have a bunch of static HTML but a lot of the Doc's have little kind of embedded widgets to functionality right they have kind of dock blocks here so you know this kind of blue bordered thing you know we're we're rendering on the page it's an element and then we're kind of projecting content into it the tabs panel here right so this is like an interactive widget you know we've got tabs going on and we want to be able to basically use these elements in the page and let our Docs authors just say right this is a tabbed panel and put some content in it and not have to worry about how to actually start this up how do I bootstrap these components if you've ever done that it's a not a simple thing to do our Docs authors now all they really have to do is just drop this thing on the page and the custom element will go ahead and boot it up automatically so it's pretty cool the API list is a custom element this is the first one we built so like this is just the whole kind of page here is just a custom element the render it's got a whole bunch of really interactive functionality right it's got searching and querying and all this other stuff but it's packaged up being this kind of custom element fashion he was pretty cool you can actually check this out on the angular repo so if all of these things are now custom elements this took something like two hours to port from kind of the old style to the new style and we were surprised it really how easy that was and so this is actually on next on angular 2 IO right now you can try this out you can poke around all these little kind of embedded widgets you'll see our custom elements and this will become obviously part of angular do when we release the stable version so containers this is the kind of next part right so in the next part of this is thinking about applications and kind of packaging them up so they can be used in different contexts so you're right my you know you might write something like a chat widget or a support widget or something you want to drop in to another page it's a full application right it's got all of its dependencies do HTP all this stuff and you want to kind of packaged up in a way so that people can consume it this more or less you can do today there's this kind of new term floating around called micro front-ends right and this is something we think is pretty interesting so we wanted to make sure that these these cases were covered into these first two kind of elements and applications stuff like a IO and CMS and these kind of container ideas these are more or less ready to go today you can use them now we're already using them on angle I Oh system you can try out these are kind of the first two cases we wanted to attack the third is the one I've talked about a lots and this is this kind of video of reusable widgets right so date pickers nobody lights right likes writing date pickers it would be super cool if we could just use the material date picker and every app that we build and so this is kind of the third step of angular elements this is possible today if it's something you really want to do you can do it come and talk to me I can talk you through it but this is not the thing we're optimizing for today and really the main reason for that is size right angular itself as an application framework it's pretty big and so today it doesn't make a huge amount of sense that you'd ship a date picker and kind of bring along all this dependency right but if you were paying attention to keynote this morning we've talked about this right this is something that we're working on with Ivy to make this much smaller and so let's talk about that for a second so we have these kind of two really interesting projects that are going on at the moment elements which has been developed the past six months or so Ivy around the same they've been kind of happening in parallel the teams have been talking to her they're a lot like we're paying attention to each other very much and what I'm really excited about is when we get to converge these two api's so this is speculative but we're thinking it'll look something like this so rather than going through all of that kind of configuration we were doing in the earlier slides we want to be able to really just denote this is going to be a custom element and the metadata and it would be the compilers job to kind of download this to that define custom element call that we're doing right so this is kind of speculative but if we think this is kind of the direction we're heading so we'd like you to start using these custom elements say if it makes sense for you use cases give us feedback and we will kind of roll all that feedback into the next kind of generation of elements so we go back to this kind of hello world thing that I showed in the keynote this morning right when you have an application that is 2.7 K compressed then it does make sense that you have a date picker you can just bundle up with no external dependence and share that with the outside world so elements itself would add like maybe maybe two percent to these things so you might see like two point seven point five KB it's a really really lightweight wrapper because most of it's already in the browser so we expect this is gonna be a really really nice thing when they converge and we expect that to happen around v7 quick note on production readiness so as of today that is in chrome stable it is in Firefox is nightly so the we expect the next release of Firefox will have custom melts ready to go opera and even safari have shipped custom elements as stable it's in all the iOS devices now so almost ready to go our friends at edge have not yet shipped this there is an issue on their user voice site for custom elements if you want to go about that that would be cool one of the things I'm really hope for is that like angular is a big project right we have a lot of developers using this and it's my sincere hope that as angular starts to push into custom elements the edge team will go okay we should probably do that I think Sean Larkins here so maybe go pokes on Larkin and he can tell somebody as well in the interim we can't polyfill this pack to ie 9 there's a couple sets of polyfills one of them is provided by the chrome team one of them is provided kind of from open source we can polyfill all the way back to IE 9 I keep that asterisk there because again there are certain things that only the browser can do and we can probably fill sort of 95% of the way for most use cases you should be able to do what you need to do without you 9 so for me this is really just the beginning of kind of where we're going with custom elements we're super excited we can get this API to the outside world and really we want to see is you people start to play with it you know give us feedback on it what works what doesn't work what are we missing what are we not thinking about what use cases you have that maybe we haven't considered right so I'd love to get your feedback I'll be around the whole conference come and chat to me about this just a quick note so this is kind of new for the ink of the community it's not a new idea though custom elements and web components have been around for a long time but really I would say in the past years so a bunch of other teams out in the world so our friends at ionic and their project using stencil I don't if you know this but the new version of ionic is written almost entirely in web and because obviously angular already supports web components they dropped right back into an angular application spelt is by the guy who writes roll-up rich harris the polymer team has been kind of pushing web components for a long time skate jess is down there and bottom all of these teams I have talked to and worked with them over the past year they've all been incredibly helpful in teaching us what we should be doing we've been learning and this is kind of the beginning for us and they're much they're actually ahead of us almost but they've been really really awesome really really helpful people and I'm really grateful for that so I'm super excited that we get to add angular to this list right so custom elements will be available for use in 6.0 again any questions comments feedback come and see me thanks for listening [Applause] you

Channel: ng-conf

Views: 42,484

Rating: 4.9303675 out of 5

Keywords:

Id: Z1gLFPLVJjY

Length: 23min 7sec (1387 seconds)

Published: Wed Apr 18 2018