Video details

Manfred Steyer: How Ivy Will Improve Your Application Architecture

Angular
07.15.2020
English

Manfred Steyer

Watch all the ng-conf: Hardwired presentations/videos at https://videos.ng-conf.org
ng-conf: Hardwired is brought to you by: - https://thinkster.io/ - https://herodevs.com/
ng-conf is a three-day Angular conference focused on delivering the highest quality training in the Angular JavaScript framework. 1500+ developers from across the globe converge on Salt Lake City, UT every year to attend talks and workshops by the Angular team and community experts.
Follow us on twitter https://twitter.com/ngconf Official Website: https://www.ng-conf.org/

Transcript

So thanks for having me. This will be about Ivy and architectures. And let me start with a question. Did you ever wonder what Ivy does behind the curtains? I mean, we've heard a lot of IBS so far. We have seen that Ivy leads to smaller bundles and so on. But how does it really work? Well, let me give you a small example. What you see here is a simple logo application with the title that is Stop the Bomb. Within that, then that's between two H1 backs and then Ivy is doing its work. First of all, that typescript compiler. It's down levelling that component to Muscaria 2015 or two eight. It's ECMAScript five equivalent that looks like that. And then Hiva is adding Samatha about that with its components. And this metadata is basically a bunch of static properties. I think the most important property is DCR component definition, which holds a lot of up to about the component. And as you see, it starts with this prefix. It looks a bit like rich thatta. And this prefix is telling you that to be out dealing with private briber. If you look into this metadata, you will find that type of the component that select stores and you will find at them that function. And this template function is basically your HDD him LDM. That's compiled by Ivy Intouchables. If we look into it, we see it has two parameters. The first parameter is the random flag. It can have two values, namely bomb and two. One means we are in the creation phase two means we are in the update phase. Well, integration phase angle is creating your damn plan. It is creating all your HCM Outbacks like my H1 back. And in the update phase, it's performing the binding. It's updating all the context. Here is nothing else than your component in stones. In our case, the instance having it that if we look in here, we check for the random fleck or Ivy the IP, then the rate that's code checks for Derinda Fleck. And if it's one the our integration phase, we will create an element here. It's an H1 element. We will create and release Holder to place Holder gets the IP one. And of course, we are. They'll behave. So we built Keigo with these H1 rendering phase two in the update phase. We are chumping to the element with Dieties one and then the are interpolating here something, namely that title. The title is written into the place holder. And that's basically what IVC is doing behind the curtains. So as you see, Europe, because they are very close to the dome, we have less codes. This results in smaller bundle sizes and we are just using functions here as we know functions are Tricia Kaboul at least more to reshape cable than methods. And this is by I.B. Is SPAD that reshape? I want to use this knowledge to explain how I'd be built, influence our architectures in the future and for this time prevert several stuff I believe talk about lazy components. I will talk about them. Chemic make components. I will talk about high. All other components svi less about stand alone. So first of all, let me introduce myself. A month that I am a train and consultant for Angola. I'm doing a lot of in-house trainings, for instance. This one here which you support enterprise applications with Angola. It's an advance training and then also bog of that Angola community. So let's start before lazy component saying this. This guy here is really my soul mate and the soul mate of short likes lazy loading, I guess. And when it comes to lazy loading components, it's really easy if Ivy. Because all you'll need is this. That these dynamic inboard introduced with ECMAScript 2007. So you point to the final before your component and then you'll get back an object representing the whole file. You are getting out there, right? Export here. It's that that's what Dyle component. You'll need a component factory resolver. You can get all Dolf by dependency injection. This gives you a factory for this component. And then you can instantiate this factory with great components within the fuel container. This you can get hold of the fuel container. By using this fuel child. That correct. Hey, man. Let me show you an example. Hey, man. Can you hear me? Let's move out here. Beverage. Can you hear me? I can hear you. We think that you may be flying by like a photon source or some sort of space anomaly because the left the right half of your face is totally lighted up and we can't really see it. Well, on the stream is anywhere. You close the blinds on your window. That's because of the sunsets. Give me one seconds. Yeah. Yeah. It's crazy what happens in space these days, right? Like you're just flying around. Yeah. On your spaceship and in like a photon. Like someone locks on. Phaser said that I've talked to engineering. Yeah. Yeah. No. Yeah. That it's bad. All right. I'm turning it back onto you of a. You took care of. Thank you. Okay, great. So let's come back to lazy loading. Both we see here is this example. The have tiles and all the tiles here in this dashboard are lazy. Load it. Of course everyone can gain that lazy loading except here. So let me prove it to you. Let's jump in to our efforts. Well. Let's go to the network that lets kick at style and. Oh no, it's already lazy. Load it one more try. Let's kick to at Dyle and here we see it. This component is really lazy. That means we just get the component and nothing else. So perhaps you're wondering why this works with Ivy? Because that did not work before, didn't it? So it works with I.B. because if I b b have cells describing components and that means that the component has everything B needs to ram it, that's runtime. Think about these components. Mad about the field, which is just the static property. And the angle of beam is also calling this locally principle. And so we need just to load the component then to be a good store. Ran that thought that was not possible because before the matter about that, like this was part of and modules and this is the very reason why we had to load and she modules. Assume the deal on top of the presentation. Is this one? OK, great. So this brings a lot of potential. Of course, we can do lazy loading in the very fine grained way and this is also the key for partial hydration, partial dehydration, which means you'll just get an index aged in a static index, edged metal and everything you need will be low that just on demand. So for the rest of this presentation, I have one word of warning for you and the rest of this presentation, I will directly use right about 80 eyes. And as you can guess, using Brive of the API is in production is not the best idea. I'm doing this to show you the potential of I.B. and its potential for future versions of Angola. And I'm also showing this because it makes me feel like they have the ability if I am going. If Brye about API as I like it, if people say, hey, look at month, wrap this all Tatem. So let's get started the dynamic and tie up a lot of combos. If you look at this here, this is a function creating a dynamic component. And for this with IAB, we just need to create a chaos which works on the fly. If typescript and travel script and then everything we need to do else is we need to add everybody that looks like both. I'd be good at comp.. I am, for instance, this component's method that the property. And when we return, this component, its components can be used as every I.B. based component. Now, let's go one step further. Let's assume they are bussing in here and another component and let's further assume we are calling this component as part of our template function. In this case, we would have a higher order component. A higher order component is just a component that is operating with other components. And for this, I have prepared another demonstration for you. Let's move my example for this. In my example, I have to stash what beach components. Let me show it to you in action. This Dashboard's Beach component takes a parameter which is called Europe. Let's make your forecast for nineteen ninety eight. I found out they they're making forecasts for the boss. It's a bit easier. And as a senior this year, number is desperate to hear it. We look into our components. We see there is no trace of the route at all. There is just some inputs. And as we all know, the route itself cannot work with inputs. It was discussed then Ango level spilt, but we've decided that we bound to use the route, the explicit. And so what you normally need, if we don't want to use the though, if in a component, a rap component, a rap component, talking to they're out there, they kill all the barometer's and busing them to input's variants. Of course, we could have tried it. I have a better solution. I've written a higher order component for this. So let's switch to our EP file. And you see, I'm just pointing to my dashboard beach component and I'm passing it to this function before rude and rude route is basically creating this dynamic highlight a component which bias this component to the rock. O kay. So also, this is a lot of potential for your future architecture. It provides more dynamic. I mean, creating dynamic components has never, ever been as easy as that. And if you ask me, it's the key for a lock. Framework extensions. It allows us to hook into the framework and extend stuff on the fly like we have seen before. I think we will see a lot of open source libraries using those extensions. Interview. Let's also talk about standalone components. Honestly, I'm very excited about this topic. It's one of my favorite topic, standalone components. Also means we don't need entry modules anymore. But if we don't go if engine modules, there is one question that arises. Namely, how does this component know that it can access other components here? It's borrowed components showing it blue, green and red bar. And honestly, it is quite easy if I.B. because I.B. has these components mad about that. It's a static replica. We've seen it before. And there is a directive. That's right. And this is where we can blaze all the other components. We are allowed to call I am calling this the neighborhood of that component here, that bar components would be the neighborhoods of the Desh. What that component, the official technical term is that compilation complex. And now you need to be strong, because I'm telling you that Ivey's at runtime not taking care of your components. It also needs your components. It is not the referencing your components. The compiler is at compile time for inserting all the components into this. Very simple. Saying this just for the sake of simplicity, I've removed some type assertions on this slide. Normally it would be a bit more complex, slightly more complex due to type assertion. If you ask yourself how you can group components with the engine module, they'll just they can array like here and export this arief wrong within a barrel, for instance, from the thing and index. Yes, fun. That means that your barrels, your index, the s files to replace, hopefully. And she Marchal in the future saying this replacing is perhaps not the best term because they will become optional. At least this is the idea. But they will not go invade because if they are removed, this would be a breaking change. They did not make good experiences with breaking changes in Angola. Coming on the day, if you ask me. So don't be afraid. It will be an option for you. OK. So Minko, get chef, who is meanwhile part of the Angola team, wrote a proposal for all this. It is just a prototype and this prototype shows that it might be possible to extend that crate. Those like the component that create the buy and abandoned seats array. You can just mention all the components you'll need for these components. You, if you'll cook mentioned to me it is just a proposal. So we will see if and how this will land in a future version of. Let me show you a demonstration foots the SO for this Beeville move back to our application. And in my application, I have here these components. Note this dash for dialogical. And as you see here, for the component was Rochester alongside that. What tile component? So the dashboard component was capable of using the components. This is not the case anymore, but it works anyway. So let's have a look into our dashboard component. Let's find out why it works. Well, it works because I've written this directive, this directive which is taking the bar components array and richest the ring. It's both in the matter of is very what come home. So basically I'm doing what I mean, could it but viff out for cheap angle. Kate. So let's go. They can also bootstrap standalone components, which is quite nice. Charles, call this Arenda components function. It's still at Prabhat one boss, your Angola component, and that's it. It says a lot of potential, if you ask me. It's Bill Influenza, a project structure in the future because we don't need any modules anymore. We can structure big applications with libraries, for instance, with an X libraries and all of if barrels spiff indexed. Yes, files exporting everything. And of course, standalone components are a big deal for that. Components. If you like this vote you've seen here, check out my block. I've written a lot about those possibilities. I b will provide for future versions of Anguilla. And if you did not like the stock, check out my blog anyway. Perhaps I'm writing bad out then I'm speaking on this. So let me come to a conclusion. We've seen that we can do lazy loading in a very fine grained way. And this is the key for Boxley hydration box or dehydration. We have seen that we can go with anemic components and if higher order components. And at the end of the day, this is the key for a lot of framework extensions. Also, a stand alone component provides you obey to structure your application, justice barrows and libraries. And also, this is a big deal for that component. So we are reaching the end. But before I'm too old saying I want you, I want to give you a side. Aside from my most famous scientist, perhaps you know him. He's Emmott's Brown be achieved. This is how he looks like nowadays and he saves your future. Hasn't been written yet. So about. And that's meant is that we see a lot of features that are possible because of I.T.. But currently we don't know exactly how those features will end up in future versions of Angle. But we know I have been written with all those ideas in the hat, but we don't know how that operating API look. I'm quite sure this was spot Emmet's brown bond that took that loss at the end of Back to the Future free. So here is my yeah. My contact startup and you will find my slides and all my examples in my product in some minutes. Thanks for having me. And have a nice day.