Web Components with Angular Elements: Beyond the Basics | Manfred Steyer

[Music] let me start with a question did you have recently had a fine dinner a nice rest around several classes nice starters a nice main menu and of course the most important parts desert I really like desert so if you ask me Angola itself is a lot like this dinner it contains a lot of things a lot of courses probably more than you can eat and everything you need for your full flexing of each application I don't know about you but I do not eat a fine Tina every evening mostly because of a lack of time and so sometimes everything I want to have is just a greasy pizza just a greasy greasy pizza and when we take this metaphor and when we transfer it in the world of Angola we will find out that we don't need a full flexing LePage application all the time sometimes everything we need is just a component and that's why the angular team created angular elements angular elements is about providing web components which are framework independent components you can write them once and reuse them everywhere to be more precise it is not directly about web components because web components is an umbrella term it is about the most important standards behind web components namely custom elements which is implemented by all the modern browsers nowadays this brings a lot of possibilities one possibility is you can create a component library you are able to reuse everywhere you can also enrich existing applications for instance your PHP application your asp.net application or your chava server faces application you can also enrich CMS based website and you can dynamically loads them dynamic loading has never ever been that easy as with web components and this is what this talk is about first of all I will show you some basics to get everyone into the boat I promise I will just invest one slide into this because I have promised to talk about advanced stuff and then we will talk about dynamic early acting elements as well as lazy loading them and then we will try to push the boarder of what's currently supported we will try to use external elements and I will also talk about the most important topic here its bundle size but first let me introduce myself I am manfred I'm a trainer and consultant for angular I'm helping a lot of companies nowadays I am part of the Google developer expert team and of the collaborators team my current product is also about angular it's a workshop for angular and architectures in the end the prize it contains a lot of advanced stuff ok let's get started with the basics as promised just one slides so angular elements is just about wrapping angular components it means you take an ordinary angular component you call this function here this function great called create custom element and this function exposes a custom element that means your angular component goes in the custom element goes out and then you can register this custom element with this browser API called custom elements define and now the browser can just render your component it is as easy as that to get started with standard conformed components so now let's talk about the first advanced topic let's talk about dynamic elements the named aquila creating a element is really easy you can leverage this 20 year old API document create element perhaps you remember it and normally you are putting in you're the name of a baked in element table image form something like this but the nice thing about elements is that the browser treats them exactly like baked in elements so you can use the same API to create your own custom element in this case it is a - bottle then you can use the same old API to define properties to define attributes to hook up even listeners and finally you can add it to another element so it gets displayed perhaps you are saying now hey man threads what we do to you - here you are using the document object it is kind of forbidden in Angola well yes and no so in the past a drawback of this was that the document element does not exist for server-side rendering but since some versions Angola is using terminal to simulate this document object on the server side and so you are on the safe side with this of course I'm not recommending to do this every time but when it comes to highly dynamic scenarios this really comes in handy let me show you and Emin stration for this I have prepared this sample application with a dashboard and when I'm clicking here then just my dashboard tile is dynamically created it is dynamically added to my page and this is really fun hey I could do this the whole day yeah nice so I will show you more regarding this demonstration in some minutes let's go one step further let's talk about lazy loading by the way a good friend of mine told me I'm very authentic when talking about lazy things I'm not sure what he meant but I think it was some kind of compliment anyway so normally when we talk about lazy loading we are talking about lazy loading routes but here it is not about routes here it is just about lazily loading bounine and this can be done in two steps first of all you have to register your module with the lazy component in your angle Acheson and then you can use the ng module factory loader to load it just on demand let's have a look to the code this is what it looks like when you register the module in question in your angular Jason there is just a property lazy modules and here you puts the path of your module and then you need some code for loading it for this year I'm using a service this service gets the ng module factory loader injected it gets a method with a constant path it is also pointing to my module in question and then I'm calling load a load I guess this is what what happens when you are taking object orientation too seriously you are ending up with load a load the buckety back lock a lock here it is load a load I'm passing the buff and I'm getting back a module factory and this module factory has a create method and when I'm calling it's my module is instantiated as this module is providing custom elements I can use them immediately just by leveraging the document object we have seen before it is really as easy as that without custom elements this is far more difficult without custom elements we would now have to leverage some low-level api of angola but here we are good to go just use the document object so let me also show you this in action here I have my dashboard again let's reload it and if I click on at lacy my lazy tile is just added let me prove that lazy loading took happen for this I'm switching to my network tap to my network tap come on here it is I am pressing at lazy and here we go yeah this is my lazy bundle it is quite big the seal I created it for me after registering the module with the Angola Jason and as you see here it has quite a big name but no berries this is just in the back mode in production mode it has a tiny name in production mode it just becomes a number then we look at the bundle size we also see it is quite tiny 7.7 K and this is in debug mode so in production mode it would be about the half so this is quite okay if you ask me please keep this in mind for later we will need this number a bit later okay let's go one step further let's talk about external elements this is where I try to push the limitations of things that are possible or at least official supported nowadays so when I speak about external elements it is about having a first project with some custom elements your widgets or your things you need for your design system then I want to compile those elements to a bundle and after that I want to reuse this bundle with several other projects by loading it perhaps a load a dynamically or I load it just when the application starts as mentioned before this is currently not officially supported and I will show you why in some minutes but if we wanted to do this nowadays we needed three steps first of all we needed to create an own application that just contains the custom elements and then we have to compile everything to a self-contained bundle and this bundle can then below that into our consuming application I am just calling it the consumer you and when you do this when you compile your application with the custom elements it looks normally like this cinder CLI you are getting five or more bundles five or more bundles so this is okayish for a full flexing debate application this is not okay for a tiny element for a tiny widget for a dashpot I'll no one will buy this so what we need is some way to get just one bundle and there are several workarounds for this I have provided one I have provided one using the open source project ngx build plus which is extending the CLI it is teaching the CLI new tricks and you can install it that way just and she adds it to your project and when you did this you have this single bundle flag and this single bundle flag is doing what it is supposed to do it produces just one single bundle you can then load into your consuming application when it comes to script loading there are several script loaders out there here you see the most simple one it is just creating a script deck in a dynamic fashion it is assigning the source the source is pointing to the bundling question and then the script tag is added to your page so let's have a look at this in my - plots demonstration so here I'm clicking on add external and hey my external tile is loaded very nice it is really also loaded on the mount you see it here it just entered the browser then I click this button but you will also see something that is not funny when you look at the bundle size as even you look at the bundle sizes do you notice the difference so our lazy bundle just at 7.7 K and our external bundle had 427 K which is a bit of a difference and now think about having not just one of those bundles now think about having several of those bundles this would not work for a highly scalable application so we need something better and this leads me to the last topic of this presentation where I want to talk about bundle sizes so what happens here as a matter of fact each and every bundle got it own dependencies its own libraries each and every bundle with custom elements gets its own angular version its own our X chest and so on and so forth and I don't know about you but I think that's loading angular several times is not a good idea so we need something bad here and one solution to this issue can be perhaps IV so at least in theory IV will solve this issue because IV is capable of compiling your codes down to something that is very close to dome and JavaScript we will see in some seconds in which circumstances this will work and in which circumstances this won't work but I think we all know these statistics where the angular team showed us the potential of IB so that it is able to compile everything down to very tiny tiny bundles not much of angular will remain here this is one solution saying this the IV integration is a post angular 8 thing it will come after Angola 8 but when it comes then the question is then can it help and the answer is it can mainly help with you I based widgets with jets that are using ng if ng 4 and she style and data binding then you are on the safe side with IV then this can down levels to code that is very close to JavaScript when it comes to libraries Ivy will not help much because Ivy cannot make your library disappear when you have a big authentication library the angular Alta or if you have something like let's say a Bitcoin algorithm it cannot make this library disappear it can just try to do tree shaking but this is everything the CLI is capable of to do so when you are using UI based which hits you on the safe side BIF libraries you need something more and in this case you could try to share your libraries this is what you have done with jQuery you have loaded jQuery once and then all the other libraries have reused jQuery which was sitting in the global window object this can be done here it is not officially supported by the CLI but my community project and she expelled brass provides a solution for this saying this there are also some drawbacks it increases the complexity and you will end up with a non-default built so please just use it when you really really need it otherwise you will just blow up your complexity okay so let me sum up we have seen that we can reuse angular elements with other technologies we have seen that we can turn Amica li adds them to a page for instance to my dashboard we have also seen that lazy loading is really simple we have seen that nowadays we can try to extend what's possible we can try to push the boundaries then we are loading external elements and we have seen that I be able to hopefully a good job when it comes to your I paste code in this area and for other codes we can try to share dependencies so one last thing and please always remember this sometimes all we wants to have is a greasy pizza I think this is the K key takeaway of this whole presentation sometimes we just need elements if you like this doc I've written a lot about this and you can look up everything in my block and if you don't like this talk well I'm writing better than I'm speaking who knows saying this tomorrow I have a workshop regarding this where we will go more in depth so if you want to know more about this if you want to try out everything just make sure to drop by at this workshop so that's it have a nice day and thanks for having me [Applause] you [Music] you

Channel: ng-conf

Views: 14,648

Rating: 4.858407 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, ngconf 2019

Id: E9i3YBFxSSE

Length: 18min 33sec (1113 seconds)

Published: Thu May 02 2019