Stand alone components - Class of 2022 "One of the next upcoming features to Angular next year is the ability to create stand alone components. This is a long awaited feature that was discussed for years inside & outside the team but finally got addressed now!
In this talk we will go through why we need stand alone components, what benefits we will earn and most importantly how it actually gonna work in the future." Eliran Eliassy -
Founder & CEO @ e-square.io, e-square.io Eliran is a Google Developer Expert (GDE) for Angular & Web Technologies. Experienced FE developer, specialized in B2C applications. Founder & Developer @ e-square.io Angular enthusiast, Public speaker, Community leader.
The last time I was standing on a conference stage was over two years ago on Ng China in November. You have no idea how much excited I am to be here today in front of a huge audience and my hometown Israeli audience and Israeli community. So thank you everybody for being here today with me. And today we're going to talk about the newest trend in the Angular community. You probably heard about it. I know that Maxim mentioned it. I think it's the most requested improvement for the platform that finally got addressed. It's standalone components. So about myself. I'm the founder and CEO of ESquare. It's a consulting firm in the Israeli market. I'm Angular, Google developer expert. I'm a writer and Angular Index and one of the Israeli community leaders. Today we are the biggest consulting firm in Israel that focused on Angular. I'm always happy to see more tech Giants joins our customer list. And of course I always happy to see who is today with us in our meetups. We have meetup called Angular TLV. You can follow us on Meetup.com. And of course everybody, we're also hiring. So if you want to work with me, send an email or catch up with me late. Once upon Brexit written. This top story actually starts two years ago. It was June and we asked Rob Royal for the last version of in person of Angular Act. And Rob had an extra day. By the way, was in the court in Angula and apparently under his hotel was the Gay parade and we both end Craig. We went to the Gay parade and we sat on the grass drink some beers and tell us all the secrets about what's coming up next in Angular and their idea of how they're going to change Angular. He mentioned a lot of great ideas that coming out from React, like React, Render, if anybody, by the way, working with React. I'm also doing some Reacts, I have to admit. So the idea was to take Angular and make it easier and learn some good stuff in React. And I remember myself sitting there together with him and writing note to myself about what's coming up next in Angula. And I created this, I think in August in Berlin. I called this talk Buy by Ng Models and introduced the community with the idea of going fully zoneless with optional Ng models. Then I felt it sounds too noisy. Also, I thought that the idea is not just about Ng models or making Ng models optional, so I changed the name of it to The Future of Standalone Components in the post Ivy days. I posted this blog post around 2019 in September and I think at that moment I thought that it's going to be the most significant change that's coming up to the framework. Once that IV going to be lend this talk and blog post add tens of thousands of views and developers from the community reached out to me. I remember my Twitter getting messages on a daily basis. And even though I told everybody that everything I'm talking about is experimental, I remember people asking me for help in production with standalone components and functions with the prefix with thetasign. I think that everybody was excited about what's coming up next to Angular and how Angular is going to be changed. And a few weeks ago, I think three weeks ago, finally, after two and a half years from that talk, the code team published this RSC standalone components, directives and pipes and how to make Angular ng models optional. It's official, one by the core team, and it's about to get released in the next few versions, not in the next version. It got released a few days ago. But before we go into a deep dive on this RC and what's coming up next to Envelope, I think that let's explain what I call stand alone components. Let's take this simple example of having one component in our case, counter component with the plus. And that can indicate you can increase the counter, decrease the counter, and show the current value of the counter. Now are we going to use it? We probably have the selector and we present it by using the HTML file, right? The thing is, in Angular, it's not that easy. Now to use the counter component, I probably have to create a model, right? Somebody using the Scam pattern single Angular components model? Yeah. No, nobody. You have no idea what I'm talking about. Okay. So in order to use the Council component, I probably have to wrap it inside my probably has to use the common module inside the counter module. I have to declare it and also export it right now. Next, or I have to bootstop my own model or I can import it in another model. Let's say a model and I can import countermodel. And then I'm ready to go. The following can be found in the angular. Io docs. A component passed below is ng model, and ng model for me is way more than just a simple component. Models as injectors they have bi, they have providers. You're declaring a lot of things inside the model is not just a component. And for me, and not only for me, ng model represents applications. The whole idea is we're trying to separate the idea of applications and components, and we want to have the ability to render one standalone component without being tied to any application. Right? So the promise around Iowa was to expose a function that we call Render component. Now it's still perfect with data because it's private function, but that's what the promise around either. Now the motivation is clear, or at least I hope the motivation is clear. Currently ng models, which is a core concept in Angular, acting like taking a key part of reasoning of reusing of components. Today library is publishing engine models, and today all the lazy Loading inside Angular is centered around the idea of having Ng models. The thing is, it's out with and about components directed and pipes in isolation. They have to be tied to models today. Let's take another example. Dynamic components. Let's have a look at this component. We have one component that's called dynamic user view component. It's another component that called User view component and it's doing dynamically just after an event. If we take a look on user view component, the component that rendered dynamically, we can see that this component has another dependency. It injects a service that's called User View service, and this service is provided only in the model level. The problem is that if the component that lenders dynamically this component not importing this model, we're going to have a runtime error because we need this dependency of this provider that's called userview service, but we don't have it. You know what? Maybe the key thing is that makes actually the way of rendering components dynamically. We actually can do it in a safe way. So we understand that components need models. Right. But we also understand that the current state caused some problems. The API for rendering a component is unnecessary complex today using bootstop model just to render one component. And it's easy to misuse how many of you use the view container ref create component to create components dynamically without really understand what it actually is doing under the wood. Moreover, if you take a look inside one component, you probably can't really understand what's the component doing without taking a look or what's the component behavior without taking a look on the model because some of the code or some of the logic is sitting inside the model. And again, we can't think about components in isolation. So what's the goal? The main goal is to move angular in a direction where components, directives and pipes are playing more central role. They are selfcontained and they can be safely imported and used directly. And other goals simplify the mental model of Angula, for example, how many few things. The Tangula today is easy for newcomers, my man. And make new APIs for using components direct if possible, how we're going to render components in a lazy way, and of course, improving the ability of Angular tooling to process code efficiently. Now let's go to the how they are going to change it. So the change is going to be under the wood or not under the wood because you need to do something in order to make it go. But I want to prevent what's actually going to be changed. And you probably can see a change in the metadata of components, by the way. You see the change. Yeah. Standalone. True. So I didn't even invent this, I actually stole it from the Angular code team. And you know what? Let's go to a short coding example of what I was going to look like. So I have a basic application. It's already running, currently doing nothing. It's not an Angular application, it's just a web starter. Okay. And as you can see, I have no Angular adjacent here. I have a main TF the bootstrap one model. Okay. I have all the dependencies of Angular. You can check my package to see that I actually have Angular, Career, Angular Common, those kind of stuff. I'm bootstrapping app module. And of course inside app module, I'm bootstrapping app components and app component currently is empty. You can see in the HTML account we have this app component and everything works. As you might know, the only thing that changes that is different in this project is that I stored one file from the Analog team that's called standalone. Ts. And this file is actually taking those component decorators, not only component decoators, taking the angular decorator, the regular one that you already know and extending them. For example, if you take a look on function component, you can say that I have everything here, but I also extended to have this standalone through. So I have this method. It's doing a lot of things under the wood. We're not going to dive into it if you want. By the way, catch me outside after the talk and we can definitely actually those things works. Okay. There is things called the virtual model, but let's dive to this because we don't have a lot of time. So let's start on the basic example. I will create standalone components and instead of using the regular component, I'm imported from the standalone chain and not from Angular code. Okay. Yeah, of course. Now if you take a look at something that's called standalone that I can set to true. And let's take a selector. Let's call it standalone component. And in the template, let's do an easy counter export class. My Standalone component. Let's create counter and initiate to zero with the plus function and discount. Okay. And here counterattack with a button that's going to increase the counter. Awesome. Now there's difference is I'm not going to declare the standalone component. I'm going to import it like it acts as a module. So let's import my standard component. But I'm going to use it's model. By the way, it doesn't mean that in the end it's going to look like that. Currently it's part of the RSA. And to make this demo work, don't take everything that I'm saying today and do it tomorrow in your production application. Okay. So now I can go to my app component and of course, take this electro and present our first standalone component. And we have let's add some text and we have our first stand on components. Amazing. Let's make it a bit more complex. So I'm going to add an input. Okay. And we love Banana in the Box. Let's add a Banana in the box. Angie Modern and let's find it to name. All right. Can you see the problem? What's the problem? But I'm in a standard component. What can I do? Import inside the component? Not in any other model. I'm adding the forms model from Angular Core and that's about it. And that's about it. I have this simple Angular component without being tied to any model. Let's make it a bit more complex. Let's say that we have another standalone component that we want to present in this standalone component. Are we going to do this? So I'm creating another one. Another component? Yes. Again. Component from standalone shame. Now stand alone. True. Select another standalone component. Component and templates. Another standalone component. Export class. Another standalone component. That's it. And now let's say that I want to take this selector and present it inside the standalone component. What's going to happen? Template another standard component is not an on element. What should I do? Declare input input. We are in standalone component mode. So I'm taking another standalone component. Refreshing. And I have another standalone component. Super cool. Now I don't have a lot of time and I have a lot of things to show you. Now let's create a model. Okay. Let's talk about providers. We all know. I know that this is exciting, but let's try to focus. Let's talk about providers today. We definitely can provide providers inside the component. Right. You can take any components with the current component decorator and declare any providers that you like. But let's say that I have a module. Okay. Let's create another model. Let's call it locating model. Let's create an Ng model. Okay. Let's call it export class locate model. And you know what? Let's also create an injection token export Const locate that it's going to be a new injection token injection token of string array. And now let's provide this location inside this model. So I'm going to add a provider's array inside the providers. I'm going to provide locate. Notice. Thank you. Vs code for the fabric use value en for example and multi. True. Right. Because now you will understand why we have a multitro. Let's create another one with UK for example. Okay. And let's say that now our standard component wants to import this locate. So I'm importing this one. Right. And now let's add a constructor. And by the way, I'm using the decorator inject because we are not in an Angular project and we don't really have the Di system here. So I'm using the inject to take the token. What's the token token is. Okay. Right. Let's import also import this one and protected locate string array. Now let's present them on the screen. So let's say we have an order list and we want to present with ng four. What's the problem? Both, but we don't have ng four. It's coming out of the common module and our component is not tied to anything. So I can just import the common module from Angularcore Refresh and have it. By the way, if you're curious if the I level is top in the standalone component level, the answer is no. We can go to our app module as the provider and also provide local use value fault. Let's add another one. Multitrue. The import is not correct. No, it's code. It's not me. And we have a file. So that means that the injector wood is not stopped in the standalone component level. It's climbed up to the app level. Awesome. Let's take directives for example. Okay, I don't have a lot of time. Let's do it quickly. So directive stand alone directive. Yes. Our directive is going to work exactly the same. So I can create a directive. Standalone true selector. Let's call it standalone directive. Let's just change the OST to have style border three pixels, solid, solid red. Okay, export class standalone directive or my standalone directive. So it's going to be cleared. Let's add it to our app model. And inside our app component let's add another Div that will actually use the standalone directive. So let's say I'm using the standalone directive directive and standalone directive. So I'm adding standalone pipes with standalone truth name going to be standalone pipe for class my standalone pipe and it implements the pipe performance. Of course, let's say that the value is always going to be a string and let's return the value to uppercase. Okay, let's use this pipe. So first let's go into the import array as a model and inside our standalone component I can add another disk which is going to have its stand alone, stand alone. And now it happens. Last example. I promise. Last example. A quick one. Okay. Lazy Loading of components and dynamic rendering of components. Guys, bear with me. Last example. So let's add inside our app component the constructor and I will inject two things. Okay, I will inject the view container private VCR and of course in jail. And let's reject also the component factory Resolver Resolver. I will create another view container F by the way that it's part of the Shim file. So VC ref Shim. Okay. And inside the constructor when I'm going to have everything, I'm going to just initiate this VCR. Shame to be a new view container. Shame that used the VCR and the component factor Resolver. And let's say that we have load component function. Don't click going to load the component. Load component. What's? Now I'm going to load this component. I can just use a new API that we're going to have inside the view containerf, create components that can just take my standalone component and render it on the screen. Okay, but I have another option which is always better. I can create the import statement to take it from the file itself to the file. Then I know that I'm going to get a component and now I can tell the VCR Shim to create component. What's the difference going to be? Lazy Loading of components. Okay, in the days of view container in the days of standalone components. Let's go back to our slides. Wait no second. Samuel, before we go, what we should take out of this one angular is changing. It's moving to be more linear and more simpler and it's tending to welcome more newcomers. It's going to be more easy to learn. Angular engine models are not gone, they're not going to be replaced in the next even few versions, but in the future you will probably see less and less ng models and they probably are going to be optional from version 14, but not before that. In this version, standard components are still zoned full so don't expect any zoneless components but more changes are coming. Keep in touch with me. This is my Twitter and email I have a website called you can catch up with me there catch me out during the break and thank you very much.