NG to TiNG Journey – Johan Compagner

So I have an average percentage again and this is a little bit of combination which I already did a little bit before but it's a combination about two things. Mini camp I did it. Everyone wants to wear it and this is a little bit of combination of that one. So that's what I was just going to do. I hope I also felt something new to somebody who was there. But else you can take your laptop and do something else. First, first I want to start with the story of this is how we get to NC1 and try taking it in the energy or taking it over that day. We always felt many times internally in NC2 but it was not allowed by marketing. First, first of the first but I thought maybe first first why did we have NC2 in the first place and how do we get there? And I think back then in the most largest room in Amherstport where the most shocking came from, I think was far away but still here is every day and now and then people came close our door and went back again. But it was me, you're open, you're ready. But we're talking, okay how can we have a web client now? How can we make the UI better than this not so tight to set a void? Because currently we watched my client that had a fixed set of components. And we had web client that copied over those fixed set of components, we were also tight. And I think about it and then say okay how what can we do and we should try to hide it away the implementation of components from set of void that we just talk into properties and to reset some stuff. But the component tells us what it can do but we don't know the rest of the component. That's completely gone way or something. We already looked at the frameless, we also looked at the reactor a little bit. But back then Anglius was really kind of on the topic and it really made it better. It was a nice to see that it has some prototype. Okay that's nice and so if the prototype started I think 240, maybe if the update was already here but he had traffic jam. He could say maybe it was a little bit thing but I think it was 214 that we started before prototype. So we made spec files the event the spec files the account set that says it's the clue between the component and the and set of void to say what it is. Maybe we looked at how the communication will be in fact okay we can do web service because then the nice thing about that sort of it is it's a constant thing. But we talked both ways constantly in the web cloud we had kind of a polling mechanism that calls every five seconds. Is there something new on the server, is there something new on the server and based on that it did the broadcast. This is instant. If data broadcast comes in from the server from all the stuff it will immediately fire over the web socket and to all the clients right away. So that's that was nice and so we started prototype we started building it already for quite a bit. So we actually client came alive we had a lot of servers just going back and forward and most servers like that is you could see we have to found set that's one of the biggest ones. The found set thing is something at the server that Tor has a lot of API with where you guys talk to that as API in Yava. But it also has a complete implementation in the browser. So the browser part also have a fully complete type which if you select a row it fires a selection and it knows how to talk back to the server to get there out of the selection. So that is a lot of Yava script. It was angry yes code but not always protecting the yes but a lot of Yava script code for it. So we wrote that all kind of stuff and then I remember one day I still remember yesterday and now actually calls 2014 happened. And it was even we were I think 6 to 8 months really in development already for entry client. And then actually comes had one thing I think they had an image and they said a few things and I said wait a second that's what we use it get what we use it can it has a little bit on it. Oh no and it's cross the king is that long lived the king with promise we were that king no this game. So that was a little bit tricky for us all right get say that first. So I came back the next day in our meeting and I thought did you guys see the YouTube of entry call what they say that and you may was still gone. I think I think it's still okay now they kind of killed everything but we are now kind of building the concepts are the same but that's about it they have components they have services they have. attributes and directives but they are completely doing it differently so back then already we thought oh wait a second we need to do a rewrite so we all kind of from this. Let's say half year of year of the start to be really building entry kind we already know wait a second that is the time. That we need to also do a rewrite and then was yeah it was kind of sharp but yeah we kind of continue we had to continue that was we could not do it do much about that. So prototyping of titanium entry client there was already in 2017 I think our first brands we have a big brands feature brands kind of we have a long time ago. I think almost more than a year was already there that has all the prototype of that but the thing is it's still entry client because sometimes it's moved to titanium. We had an how do we call this new client I said yeah but he still should say entry client that's why I press because. Service side is exactly kind of for 95% the same client but you talk about the component structure the yeah because they're pretty much all the same. It's no different between and he it's the same client for us but it kind of has completely new from the top of it so all the other script is it's changed it's converted over all the components that over everything so that was a lot of work. And the other version of changes for that but I will talk about that take it a next slide. But we waited for it's constantly to wait for okay and you're nice much your to be able to do that because it. That they are now to the 2014 with a thank you to the 16 of 17 they really started to have the first is talking about it was it took quite a long time and promise. What we we can be also building on top of a lot of components who's their components calendar components back then yeah so it's a great we had and that kind of so all the stuff also need to first jump before we could jump else. We can jump to something that's not there yet so we need to wait for that also and so we started already product targets are not doing stuff okay let's see how the code but we needed to wait until they kind of said okay that boost of entry boost of is called I think it's completely poured over a kind of they duplicate the angry yes very quickly after that I said okay this now all forward remove so we already know we have need to need to jump. Also when that's how it happened they have a great part for Angular. But problem is that every part was exactly the opposite but we needed that every part was like this they said you have I get their point of view there's an angry at case no server this pure angry at the base of the angle yes to so anchor one of the one of the X. They say what you do is you take components out. Look at those put those back into the core of the still angry yes and then the close to all the components the problem is we are kind of a reverse we can do the core fine. And then the components were a problem for it because we have a lot of components but who has just component here. There are quite a few hands and I thought wait a second we are all going to break those because yeah those needs to be completely rewritten that was the problem for us. They could. They are a great part but not for us because we easily could write all the different codes and the cancer from below share for you like the found stuff the coverage the web socket part and all that the application share with the doctor clipboard stuff where I see. I saw your eyes closed. Yeah yeah yeah am I so boring. So happy. Yeah that's true yeah yeah yeah yeah yeah yeah yeah yeah yeah so they're okay part we could use because we needed to just be we did go from exactly the opposite way that they are saying that they could do so we started to do. We started to do that what is the difference between the two clients so. And gee what we did was we had a kind of big controller what angry yes called controller code which is big yaw file the yaw file which generated this had all the stuff and besides it we had an HTML file that was the other and that was especially if you look at the she's and the file is pretty simple it was this. The component tax and software and the angry yes file is too good over and that is what we feed it into the browser. So angry the angular it's so now it's a little bit different it's now that's compiled out upfront for that but it is because the. And angular a cell of took away the compiler in the browser they had a compile angry yes has compiled in the browser really you feed in a template like a piece of HTML document and that document is completely fancy coded to them to HTML to to JavaScript where they create the elements for so they kind of say okay you want this structure we take the answer from it we pass the code completely and then we know execute a we know what to do so you can also look through their code and the generally join push. that's 0.3 here, because we generate JavaScript for NG1, and we push it over the line, we didn't evolve. And everybody hopefully knows that E-roll is evil. You should not do it. So I'm not assuming I've talked with it. So I can also enhance our CSP protection. Because now we say E-roll is not allowed anymore. That's nice when it's going to show it. We could even, I think, a few more stuff. We could pull it a little bit. So that was nice that we could do it now. So the problem again is a pretty compile time. So now I restart the interest rate effect, but how are we going to build this there? And that's why we need to shift node and the M. We need to have a build console, because else nobody could ever tell us what is wrong. It's something that's wrong. And sometimes something for a desktop run, that I'd matter if OPP does not release. My mic is almost never the first. Next time we do the first, because Clobus always beats you. Clobus is within one hour of OPP release. They say, ah, yo, something broke. And then it's like, oh, no, big. Yeah. Then let's just start the work. No. Yeah. Yeah, man. Start. But you're in the same time, so all right. I like that stuff. But the problem, yeah, to have a little bit of OPP thing, maybe some of you did, that you have some sometimes OPP did the release. And micro version releases. And micro version releases. They have typing difference already. So our builder is then surely going to the zerg, because they are saying, hey, because I'm trying in the packages, I'm trying not to really fix to versions. I'm trying to say, yeah, if you do an NPM build, micro versions are allowed, because you get security passes down at that kind of stuff, without us doing constantly releases. And it has a nice thing. If two packages or three packages, use the same component, they all need to include it. They all need to be on the same version. And that's not problem with OPP. So I now fix the B. So it doesn't happen again, I don't know. So now that is it. But I have a big discussion with them. I think, why are you guys constantly releasing code? There is constantly even in micro versions, breaking API. Yes, I don't expect that. But yeah, they did it a few times now. And now I'm done with it. Now I'm a fixed version, it's hard. And yeah, that has a problem. So if an other library also includes it, it needs to be on the same version, because the angle compiler can't really handle that well. If two packages says I want to be one, and the other package says it will be two, and they really want both of them, you can really weird code, because it really includes the bolt. And then you have the same name spaces, kind of colliding. And that's the, oh, sorry, this goes for that to handle. So that's something sidetracked, I guess. So we created the build console that I guess everybody now can't have seen already, because we have the wait for it. It's on time, it has errors. But hopefully that gets faster, because they are in the process of going to E as built, instead of using the depth back bolt. And the E as built on my system is at least three times faster. I still have an idea why depth back at that slow, and E as built can do it three times faster and have the same output. But the problem is, yeah, it's not, they say, don't use the production. So let's not be with that. So what I suggest, because for the set in the first point, the years code of Angular is the forum code, what we have, that is generated the hours of code, that the E for the server, and also templates that E for it, that we pushed to the server, and the angry yes passes. Now, photos are pure years old. They are just a structure of code. This is how you should build a code, and we have just kind of repeat this of templates that just quickly repeats over the days of structures and place all the components. So that is now nice, because now at least solution model, because one that knows me, I'm not the biggest fan of solution, but especially how some are using it. Yeah. Yeah. Yeah. solution model is fine if you lose it, if you use it, also lose your open everything up front, and that never again. But many people use recreate UI. That is, we have now for the first time, smart time was pretty fast, every create UI. That kind was already slower. And he tried because of the first statement, was already really slower. But now it's the opposite. Now, and he tried this one recreate UI is, I think almost the fastest, because it's his own level of smart time again, because the only thing we need to do is, push over some JSON, angry picture there, and just looks what this change, and just puts in the changes directly in the models. So it's how pretty much as fast, I think global stress it for me, and they say, yeah, it's one third of the speed to do the faster. But that's a nice, nice stuff. But we still need to do a tight skip of code generates. We don't really generate code, we are just a little bit code. That is because instead of forums being JavaScript generates the stuff and templates, we have now something else, and that is our components and our services, because those needs to be hooked up in the build system of the Angular compiler. So now they have, if you install a package, that's why you update the package, or you update the service, or you update your server for server version, yeah, the build calls all happens. But normally, you're still back then at your main thing, I'll open it. You should already, hey, it should not build. It should not build. If the component stayed the same, it should not build. But it should, yeah. But then it says why it is. Then I wonder sometimes if you say, hey, why does it build now? It says what files are changed at the bottom. So I wonder what it is then. But it should not build anymore, because only when you update packages, because the packages has templates that we inject in short types of files for our big protocol monitor, because Angular does need to know all the components that are on the monitor, and the templates that belong to a component. But that is what we in our generate. That is still what we in our generate, and that's why we have to compile it. Same for the servers. Oh. That's good. Same for the servers, but that's a little bit easier code to generate. That's just one file that says include these smart rules and these servers that are in the system. But that's why we now have a build system. And yeah, if you have a big solution with a lot of components, it can't take well. But I hear if you do, if you buy a new Apple, I make it very faster. Right? That's not it's a faster stuff. I agree. So I said now one time, so I set off the code. So what we didn't put, can you skip the, what we didn't put was the table view, the kind of bit that's still in, actually what? It's still there, but we already did really promote it anymore. It was already kind of gone because back then I launched a customer that was already, because how the team of you works is hard for the browser to really do. And for that, because it's all the components and the real components, the real text fields. And that is that it's hard for a browser to really constantly pass and do. So we had already a read only mode for this. But then anyway, we had an integrated based on agent cluster, which is very fast and there's a lot of stuff for it. So we include that one now. So that's kind of the replacement. Let's use the list for the point. I guess also, Shannaker showed you the show that already. So they also have my tundra's gone here. So it's not the show. And also, yeah, this one also, Shannaker already showed the third point. This is the EV also, because I think Shannaker already showed you the data target stuff. And that's the replacement of this one, because you cannot have HTML, the JavaScript, but JavaScript are of links back to the system. Because if you click on it, you get a browser error. Hey, can I do this? The, you can't have JavaScript injected. So that's all security. That's now closed off. So you're gonna do this. And that's right now, I think, go back to Sanger's thing, have a label, and do that HTML and have the data target. So you know where to click it on. So that's a little bit of a lot of change here. Especially if I think more than what, especially styling that faster, but in for our components that we know are really changed for us. I thought this really would be different part of it. We can't be don't support now anymore. And last one, I said yesterday also, a lot of stuff is important, but maybe if you got something, maybe we should do something. And maybe we don't do it anymore like Google charts. Of course, we have no actually I'd charge, but yeah, tell us what you think, hey, we made some stuff that we still want to have. But I think that we also do the block UI idle, again, campus that will all still be released or are released, that's what I think. We pretty much covered it all now, but sometimes I'll live it more obscure. And we don't know what the, that the customers are really all using it. So yeah, what is that, with components, what is that, the difference there? Now, the, the game you use angler and it comes completely with typesets. So it's completely the kind of, it's not JavaScript, it's a, a total of the typesets. It's kind of our set of a code with our years. Docs is them, but then nicely in the language, I agree, I, if ever all Yav developers, if you ask, hey, this is typesets, they all have it because that's really close to what we are used to. So our lead team is, is loving the typesets there also, because it's for them, very close to what we use to. Yeah, it's, it's a little bit moving away from the MVC into pure class, but it's actually because I did this show later on, I think we got the type of initial code. Yeah, it allows way better inheritance stuff. So we have booster components, sometimes extending a few components that all inheritance are probably so the finer component owns almost have nothing. And that cash is, it's pretty clear and very, very nice. Also one thing, Yay query, also for personal components, do not use it, don't try to embed a Yay query in that those stuff, because Yay query was kind of for browser, that were kind of making all the browser equal, but nowadays, if the evergreen browser, they are really fast, thank you, it's not really, it's still handy for tools, but most of the stuff can be held, and anglers that already don't do it, because it's kind of what we do already for all of the stuff. So, coding wise, which I also will show in today, if I type it in a bit more, the two way, they binding it, they binding it's a little bit different, how they're good, because you don't really have washes, what we have in angler, yeah. So, back then, if you make a component text box, and you say model, this is the value, is this, is this empty model, then it already did two way binding for it, because it pushed the way, because the component, the model pushes already the way back into the model, and we have washes in our system between, what we build, what's the angler, what's the entry-clide, and the data browser is, and we detected that, and pushed it back to the server. That code, that is not, that is not do it, that they don't do it anymore, because the data flows are different. The data flows really are top down, so it comes in, and it goes over all the component three here, it nested the down, and if the events go up to the data changes. So, and the events that go up, is something that the component needs to trigger, so the component needs to tell the system, here, failure change, it needs to emit the value, and it needs to tell it, and then emit the failure goes up, and over the line, back to the vector, but that's a little bit different. Oh. So, the spec file didn't really change, I can't point you a little bit change, because we have a few small changes here and there, that are more like, you can't do, you can't enhance the system a little bit, like a style sheet, but this is really titanium, with a blanch with the team, or even a sub-scrip thing, we have a few components that show change, like a DB3 view model, and a few others that had a completely different service-scrip thing, because components can also have a service-scrip thing, so components have a client part, HTML, yeah, for the end of the game, for the end of the time, and the client-scrip file, which is just a regular browser, but it can also have a JavaScript part, that's really at the service side. And we noticed that to get everything really correctly, that for some components, this really changed quite a bit, we need to be more flexible with the service-scrip part, or even service-scrip part can change now, they can just switch between between the components, between the service-scrip part. That's why I think I also shocked people how to work on playing it. I hate it, John. Because I think you had a DB3 view as the first component show, and then you're doing a browser, the S-GONE, and that doesn't work, because the component was already loaded, the service-scrip part was already injected, and the end-to-one part was already loaded, and that doesn't work with the end-to-two parts, so that was a little bit of size. And for the most part, like the spec files, some stuff you don't need anymore, if you would purely entity or titanium, it's you don't need to work with them anymore. Let's go to show code, then. All right. But, what's next for you? What? What's next? No, no, no, what I select. Exactly. So this is still the service-workable, and I'm also going to do the block UI compile service, so that it helps you a little bit how it shows. Yeah. I think it's a little strange. It's just a dark UI. Oh, wait, you can't go in it. It's not. No, no. Look. You are in the front. Yeah. I think it's more because of the code of the end. Yeah, I think it's the end. No, no. Yeah. No, no. Yeah. So yeah, this is still the spec file. In this scenario, it didn't change at all. This is purely the end of the spec file. So these, these, this is the search for scripting for this component that works at both scenarios. You don't override it. This is the definition file. This is Angular. Yes, definitely. So that's the, that's the end of one code. That has also no meaning for the reason. I wanted to show you this, still because we are going to see these kind of stuff. And that is, and, and, and the hamburger standard kind of stuff that is differently implemented. So let's, but what we always did is we starting to, to, we have now the base converter, right? And now we start to do the component of it. But we always did first. We start from the template because then I do. That's one. Is that words? Oh, that is it. I can scroll a little bit. But that's the, the, the, now it's really big. This one was it. You're left side? Yeah. The, it's, it's, it's an angry yes code. So, and you want, when the right side is the, the, the type thing template, this is kind of what we did. We took the template of anyone. So the, the left side and we just go over it. Okay. What do we need to do? We need to change the stuff like this becomes this. And also that's a little bit different. Records are out. And the, and the, and sometimes curly records are over brick, yeah, these. Those are actions. That's action. And the other one, the other one is data. So that does it a little bit special. And this one is how when in TypeScript, you can point to that component and you get a reference to that disk. You get a reference to the component. So you can then, if you get that, you can then say anything on that one that you want. You can do a classes and a tab. But this is, the element is also important because our base component that we have, that pretty much everything extends. Kind of once did because it really wants to know what is your base stuff. And based on that, it tries to do all the default stuff already that they can't do. So this one is pretty important to have because if you don't have that, that certainly you think, why is my mini not called and that kind of stuff? You get that. So that's the, that's the binding. And the binding now is between. So in the end, it's not that different. It's just a few this year here that is a little bit different. Same for the, but then we're getting it for a travel. and the class. Yes, here this one. And now with the funny part is, also you see, but the button I think you see here, and the class and the button doesn't have it. It doesn't have it. Where do we do that? Because it's kind of nice because now it's a nice do you? Oh, you know, it's a, I did the booster, that gets released I think last Friday, that exactly fixed this day because what is here, NC class is field star class is a bug. Yeah. So I'm showing you a bug because I'm not really proud of it. Now I can tell you that's a bug because field star class can be in the property few class space class. NC class does expect that. NC class expect the case of yet over any of yet class classes. It does not pass it for you with spaces. So this one will break immediately at the moment you are typing two classes. One class, no problem. Two classes, a problem. And I can also now maybe we can flip you go to the codes. Because yeah, this is the angular code. And now the, it blows up a little bit. I have to watch you because this is the, the angular years code. That is because a lot more done and I'll strip you related to what we need. So all the stuff here you have to feel the book class again and the field class again, those are inputs now. And inputs means angular knows them and angular will feed them in based on the tag. We generate, I told you before, but we generate a template tax of the components. And these field class is an attribute of the template tax with our model that is coming from the server. So we push in there this day and angular makes sure that that field class is gone. I just told them the set of work part has a bird. Yeah. The this xy class field class is exactly the last book you put you, you report the booster components that are fixed Friday. So, so we've got a bit wrong showing is one of our here ago. But the bird in the car is a little bit different. I guess I can scroll that. See here you have kind of the same thing. We are in S-F-E on changes. And S-F-E on changes means if something comes in from the client, from the server, probably spoos, this is called for every property that it's that it's that it's just a string. And then we see, oh wait a second, there's a bit, the bird class is changed. We need to do something. And then what we do is we take it. We need to first remove all the classes of the previous value because it could be that you did class A, class B, and then class B, class C. So A should be gone. So the age we go over the array for each is split it. And then go to the array and then remove all the classes that were in the previous value. So, and then later on if the term also has current value, we do the exact same thing. We split it so that it becomes an array and the at the classes, one by one on the native element that we are given on the on the button. And now you also can see why it is called button. Because how do we get the reference to the button? That is because the button here it is as this has. And then in the types of codes, we have this button that says of it, I guess here is a few child with button. So this needs to be in check. So you get the reference to that element and you can then do anything you want with it. So this is how we now are sure I did it. And also if I go to commit that we did for an A, certainly it's gone from the template and it's removed and it's added like it would potentially and it maybe does interesting to see if we could have changed the little bit more else. Because we could say why are you not not doing. Let's get here because it makes an array then it's fine. And I guess then I should also do stuff like this to make it a little bit better. Right? But one problem with this one. This one, anger does change detection. And every time the component gets a push or you go with the mouse over it, it does change detect that means this expression is constantly right there. At the moment you move mouse or it gets an push from any field, it doesn't have to be the field start one because then we then this happens anyway. Then this is called because it checks all the stuff. Hey, is there something changed? Is there something it should I do something? Should I do something? This problem is this code generates all the time. This split will run all the time. This split returns a new array all the time and the class thing is then wait a second, you wear it and it do something. And all the time it runs a lot of code and yeah, for one component that does really matter, but if you have run this component on the screen, it all does it and you move in the mouse or you do something, then it's constantly, all the components are execute way more code than needed. So that's why this is not so good thing to do. The bottom thing is the best the best stuff to really say how this is how it works. But that's the thing that we of course learn on the way I need to do because yeah, you need to know how angular works because we already say it there, say it gets angular that it should be and not in a default boost strategy, but only in this one. This one makes sure that we only do on push. If you don't add this on the component, it is in the default mode and that means it checks pretty much all the time when it needs to do. It is something changed somewhere in the models that it detects or you move the mouse, you get focus, you click on something else. It will do change detection on that component. So checking all those values, how you change, how you change, how you change the concept. So it tries to do a change detection all over the place constantly to edit classes to update yeah, anything you want that the software stays in the concept. So this is kind of difficult for us because we know we are pretty much in control. We know what we do, we know it's really only when you get a push from the server that you really need to do something and if the component needs to do something else, it clicks itself, it has a mouse click and it does something and especially when there's a timeout, then sometimes it is like if you develop a component and you see hey, you click something and then you don't do anything, I expect that a component does and you do bit of mouse and shouldn't it is, it changes? That means you have to have somewhere the change detector of angular and yet in your code and say, mark for changes or detect changes. So that you force push a thing or a mark for change or a detect, detect all changes and then it goes over all the squad. But we are way more in control and we know when when it happens. So we already do that now and then for example, if you see new photo did go mangane. Yes. Hey, how else this did one? Yeah. Yes, but this. Yeah, but did I agree, I kind of agree with this one. That's correct because this is even a cause, but this one doesn't matter because this one, yes, calls it with the touch constantly the same up here. So it's immediately seen as yes, you can do a problem to get a bit of a compiler. It's smart. That's right. So it already could a yet to get to it. But this one is as an example, it's a bit worse. Yes, because this one makes it constantly new string. So this this idea thinks it's constantly changing. Now is for an idea is not that big of a deal because it's got really do a lot more code. It's not split and that's it. But yeah, things like this is even if you want to match the performance is do this kind of one time in a property assigned at this level and it just properly looks like it's not changed. Yeah, this one doesn't matter because self-marketity makes sure it's actually a thing. But for this one, you are correct. That's. You're okay. Good guys. Why can't you just put swear brackets from the ordinary flat set to do and bind directly to the allowed spaces? Yeah, that's a good question. I don't completely for sure. It could be that that also can work just fine. That's yeah, because in the end, it's just a class property and you can set it. But I guess we kind of do it also sometimes for both scenarios. So that's why we have it now like this. So it can be an array. But anyway, we don't really do that at all. But because we now really make it don't myself. Yeah, in theory, that's because any kind of ID or attribute that default don't have, you can put and because that's not the modern this right? That's the default attribute. That's the code in the type script. Yeah, that's true. But yeah, it's it's sometimes that we don't know what exactly it can be because if this should be isn't array, then that doesn't work anymore. That's so it's it's a bit. But yeah, you could you're correct. Where was I? Yeah, so yeah, so I out and then I about to the the two way binding allowed it. This one is setting the value. And also having the like transform as a form of the second could be executed that kind of stuff. This one sets the value, but this one puts it to value. So this is two case that I just thought about data flow coming in that is picked up by this one and that go update the inputs value and those more stuff because it the empty model can have a lot of a lot of local stuff. This one is what empty model attribute thing has and that fires in event. Hey, I am changed do something with it. So in this scenario, what we then need to do is the value changed. And then we emit the data. So that is the events going back up to the system to the top over web socket and the reckless of that. Yeah, for this value. But this is something that we now need to do. So that that that is now different than the than what in and you are and you want it. Why? Because that was kind of automatic because we did kind of we did this in the mood. And now a component needs to be doing it. So it that the implementation without the no pair component because that is how now it kind of how Angular now works because you don't really have watches anymore because I told you were very expensive. That is what Angular has made slow all those watches that is really this kind of change detection, but it overdrive kind of. So that's the that problem. So what is else? Oh, yeah. So you can say why is this so much yeah, compartor. So one is the the the change, but also model properties. Those are now really input problems, but I said those are all gone because for the normal tab that you see, those are all on the. Find one. The. Or the answer one. So you know, most are what I need to get your player for. So the model and now they are not so that that's a little bit more. Yeah. More more more visible for for you. But they were really if you're looking at the JavaScript for this one, you see, they were really on this thing. So that kind of included all the properties, all the model properties that had used them all and this one had all the handlers. So it's it's short. Get your something, but the thing is we really wanted to be an actual Angular component, and not have worker access and short to around that. So we just made sure that that now we are using the the inputs. Again, for example, handlers are also inputs. This just this just pushes. You can already see it here a function up there. If you can call it like that. So this is this is a clip function that it just called by the by the browser. I'm not sure if you do it directly in the HTML or if you. Yeah, you can. Yeah. See, if there's a click handler in the in it, this is called because we have the element in the in it. You say, hey, there's a click handler because this does not change at the same time because all the handlers are design time properties. You can help be set at runtime certainly. So we say now a listen. You can put a click. No, no, because that is them bracket. That's certainly that kind of a watch again. And we know this kind of stuff is a design time problem. We only need to do it once. You can check it once. There in the in it, which is called once. And then we add the click handler kind of you could do it with click. And then said that with that to me that the click handler is always there and always will check it. It was there. And we have a lot of handlers like a button has a right left and double. But for most people here, you only do one. So and the right and left would that still be in the template and still check out every time. And it's all the time. I mean, if we were you then it's just to replace me and you're in it. Yeah, that's because we do a little bit special for that kind of stuff. So we know when the component really is a little bit more ready. And that is because the the extent is sort of based on. You could do that. But do call super. Because if you don't call super and you do accent based and everything kind of breaks. So it's better to do it as we don't need because in our base code, we have a little bit more code that we know we wait a bit more to that we know it's really component is really there. It's because sometimes we need to because I know some of you guys are playing maybe already but you're actually underneath and see after in it after few in it. Yeah, it's full life stuff and we make sure. Are you replacing all the more? Yeah, we kind of replaced look. Oh, now it is there. We now see that it's there that we think, okay, now it's ready and we call it. And so we do the most of those stuff we have checks for that and then we call S can eat once. So that's why we it's better to extend the base component and have S we don't need instead of finding it. Yeah, so that is a little bit the the stuff and then yeah, also back to the server. It's it's now this all all the set of API I think. And that's kind of the same in the post kind of the same in the anti-clients and both clients that that is not really that different. Not really a difference. Yeah, for that it's a little bit more coast, a little bit more of a boast but it's. Oh, yeah, this is also a nice gift saying. But it is a little bit it is nice of it's code complete. It knows everything it's a that kind of stuff. You need to be careful of search therefore to do stuff that for sure to especially with the click handlers and it's a change that you don't. Yeah, don't make a lot of watch this guy because they are still there but they are a little bit different now because they are really in the template. Yeah, not really in a code anymore. A little bit of change. So that is a little bit component there so that is what we concept we were doing taking the template from the front end to one component copy paste thing into the different location. Oh, making it the brackets make spares make defense work and then add the inputs go over the same code and yes, it was some time it does just copy paste a lot of stuff especially the template and code is getting bigger than also for example inside functions like call server that we have here that's you can copy paste for the most part of stuff that that's because it's still JavaScript so that will work. The only thing is that the APIs are a little bit different. So if you get to the that that's component but we also have services so we also have what is the question about that? Yeah, we have the falcher listener beakish there can be a little bit out in between because we are moving. Oh, no, but the thing is yeah, yeah, yeah, yeah, but I think the best thing is learn by example, that's that's really and we have a few don't go to the end secret sort of grouping rate. I would not think that as an example because that's the most complex thing that we have and it's yeah, I think as a component by far maybe full calendar is yeah, I've got that just a lot of API but yeah, it's a huge component that we have a using on top of it. So that's cool. But I think if you have that's why it's a render that stuff. There you have found a project that by all of me that I think are still pretty basic. And those are very nice because yeah, the found in the face is completed. The nice thing is now in times we were completely code complete and so you if you type it like it is found set that you get complete complete you can set a select you get you get an ask for more roles and ask for a better view what that got to. Now that's huge. So let's do it. Let's do it. Let's quickly how much time we have there I cannot be but you know no. Do me this. Oh. No. No. No. No. No. No. But where's your way? This coming. Oh. But yeah, any end to have much check that the services, the block you are stuff. Yeah, you see a piece of code that's actually do on it. You see how internally we still call it. Sorry marketing but that's the day. And there you see we have a little bit more configuration specific to where to the Institute with this big. You can also have this for components if you have certain stuff either like these here for scripting. You have also sized something like that. I would also say something is better to have the components that to look at simple components that have the stuff as an example like for like oh for a component of stuff. So this is a little bit tricky for a little bit. Yeah. The stuff that you need to do when I bear it is shop surface just for how we can get to stuff and so on. The block UI is interesting because that has a few methods. See if we can't make it that. So especially services I think is way cleaner than I said if you have to. Because services is a factory with stuff and it has functions and it needs to return the API calls in the factory method and the models there's also now and then used like yeah here you see the delay. If you look at the service itself is it for me it is way more straightforward because what you do here is you can have public delay but what we do here is I'll get a sense of service. The concepts are one big. Found is because if you would say I want to I want to do something when a failure is changed. You can do it here. So this is your watch. If you say somebody set some set delay and you want to immediately do something from the service or service I did here plugins block UI delay is done. This is called directly at client and you can immediately do something with a delay. You don't need a delay because it's really used in the show but that's it. So you see if it's just if you're looking at the spec with it the spec you see where the it's really nicely properties now. It's nice. It's readable. It's directly there. And same for API API is now used a function on the service. That's it. You don't need anything more. It doesn't just show me the show at the year file. It's very different. That's really somewhere else that you get your return now it's really part of the stuff. This part then you change the path to UI then and now I'm going to get a little bit too. Because this is the template of the UI stuff. This is the template of the UI stuff and this one is what I want to say because software already said hey I have third party years files. How do I do that? How do we include it at? Rafi. Yeah. So this is the block UI which is already a third file thing but this block UI is a third party Angular thing already so that's a little bit integrate even easier. And this is just a template that we show for the block UI nothing more. And the block UI component is this one. So that has the delay that all added gets and videos called block UI. And the only thing that we needed which shows for it and we just include it in the package JSON, the block UI. Try to do that. If you're third party each third that you want to include go to MPM, check if they have release on MPM and use that as MPM. Sometimes for a little bit obscure code that's not possible then you need to sometimes include it. It is possible to include your JavaScript if you want. I think CT editor does it because that's a special goal for that. So that's our smart talk and that kind of stuff. So yeah, we'll do this is possible. Just include MPM and then it's there and then you can use it. Then you have several modules that say I'm importing it. There's some kind of the module import like this. This is the import. This is how I say I will use it. And then in the block UI, yes file. You import whatever you want from it. And you use it and just start. And that's just nothing more like this. And just following the template that we have here. I need to be able to look as fast but jump is really starting to end. Getting on my nerves. Yeah, it's a good thing around me. Any questions? Can I, can I? Yeah. Yeah. Any more questions or I'm here for five times. Oh, still so you can ask me that. Do you want me to open a lot of you? Nothing further to camera. So thank you for listening. I hope you didn't fell asleep. So, so you and I have one question. Now, we're not even going to do a session that I can also understand. That's very, oh, now I do want to use the word. That's very tricky.