Video details

Mighty Decorators in Typescript | The State of Angular's Prerendering, SSR, and Deployment

Angular
05.20.2020
English

Valentin Kononov & Minko Gechev

Valentin Kononov - Mighty Decorators in Typescript - what could we get out of it?
Minko Gechev - The State of Angular's Prerendering, SSR, and Deployment NG-Poland

Transcript

Huh? Hey, guys, so welcome to another Anjelah online session. So, as you can see, I decided to go back outside. You have Diamond right here. You see right here. So beautiful weather in Hawaii. Just, you know, show it on the beach, bringing you some sunshine. So it's exciting. You're there at home. You're back again seeing all of us here. We have some exciting news and an amazing presenter's. We have our Boehland team. This seems to be ready and I mean car that's just getting ready for you guys. So, once again, aloha and welcome to another event. Enjoy. OK, Kate, thank you so much. Can you hear me? Perfect. Thank you so much. So it was always great, great introduction, great music, introduction. OK, so now we start officially. We have two guests today on the said. And first in the line is Minko hamming go. Can you hear us? And Minko. Can you hear us? OK. Can you hear us? Oh, yeah, I hear you. Okay. But if I'm working with connecting my headphones now. Yeah. Yeah. OK. Yeah. So now we can start. All right. Yeah. You were and connecting my headphones. Yeah, no problem. Ski, can you repeat the song? Maybe, but just the background noise, sending arms to the lava. It doesn't quite work yet. The power of music works. I wonder for you guys online how many of you actually play any instruments or, you know, picked up a you. It's an awesome thing to do in your spare spare time. Just really easy to learn. Four strings. Come on. So. Yeah. I don't know. How about Minko? Did the music help and you're connected. I think me cause, you know, the music hopefully gets through and there's some really I'm looking at his reaction to me. Can you hear me? I mean, we can start with one with volunteer first. I want you guys to have some technical issues. I think we can start. Valentina, what do you think about that? The floor is you. Yeah, sure. Why not? Yeah. Let's go. Ready? Hello, bro. This that's not a problem. So again, I go and actually share the YouTube statement in another room. So that's nice. Okay, let me share my screen where I can do this and zoom. Yes. Here. There was some talk, Zumthor told me, that was disabled at Andy's screen sharing. Yeah, yeah. And the. Dennis Complaint's. Cool. Everything's fine. We can start. So hi, everyone. Once again, so we've had a kind of interesting start. Was all the songs and that's not not a nice thing. So thanks a lot. First of all, a little bit about myself. My name is Bullington Corner and I must be working with a typescript. And I had experience with Angola was there was a lot of different stuff. And and others think I do. I try to attend some conferences and speak about interesting things. And today we are going to speak about decorator's in typescript. Actually, just because this is so interesting things, that it was a kind of a basement for Angola. And so it's heavily used typescript and decorators and other data and stuff like that. And another one, Cinq, which is NSG. Yes. Which is heavily inspired by angular and lattice framework. So much that I did several API for the work. Was it. So we'll touch base just a little bit also. So I'm writing a book at the end of the space website so you can check out some of my articles there. And I was sure all the links to this presentation as well. And just a couple of thoughts on working at the moment at my box company with a lot of mapping and navigation. Interesting stuff. So let me know if, you know, if you want just to know information link to the slide. Slide deck is here and there is a link to an article where I have most of. We'll be talking about right now today. So let's stop. Right. It's what is it, actually? So when I was thinking about it for the first time, I was think like something like that. And this is actually real for that taken by myself when I wasn't Daylon for the first time. But getting back to business, to some development and general, we are thinking about the characters like. Have an exact symbol and some work. And what is that, in fact? So what what will happen under the hood? I got into the documentation. The character is a special kind of declaration so that we can add some additional behavior to function to some accessor, to some parameter or function or field or maybe to a whole class. And we can read a lot of documentation about it. And we can also remember the Book of Four Gang four, and their definition of that like character is something which adds additional behavior. So in TypeScript, it's a function. It's just a function. Most of the things we have in typescript is just a function. So the character is also the same. So let's take a look through a couple of samples. And just to get into a little bit more context. So here we see the entry model module, the character in ANGULAR. So with that, we can specify a lot of needed meta data like which module we import, what we export sponsor for us. Another sample for the components. So we define some settings exactly for the component. And these settings will be used by angular compiler. When the court will be handled and will be compiled, the JavaScript, with the help of this method data and go to Renderer will know what to do. So maybe the sample is a little bit outdated. So I did it one day. The latest version was an. But it serves them. And another sample is from one of my SJS projects. And it has decorator's from class validated, validated library. The primary purpose of it is just to define some validation rules or to define, for example, if you use Diepraam, you can define how this field will be mapped database. So a lot of different cases from different laggers, which we all know about. But it's it was dimensions that I don't I don't know. TypeScript is here on the stage since 2012, but decorator's and metadata data is still a part of experimental features. So you should make sure that you turned it on. So in your test config file. So, OK, let's go. We already have the characters. So we're done. But we can create something special and something practical for ourself by decorate. So let's think about some practical cases which can which might not be covered heavily by other libraries. So, for example, we can create some custom decorating for a person looking. So if you want to have some special logging behavior so you can do it. Another area is validation. So we already have that glassful data library. It a lot of stuff, but you might want to have some special something for it. Just it. Forget business. Lucky luck. And in general, it helps to transform how you write the web applications to some kind of metaprogramming, step the declarative programming style and all that makes your code a little bit more readable so you don't need to see like. OK. This function called this function. And the result is part of this function. You see just a small little decorator with some parameters and you can read it and it's it's just nice. OK, let's do this up. This is one more question, actually. And one more interesting thing in current version of TypeScript. You can do garbos. You can try to add decorator to a function inside the class or you can just write a function. But in this case, this will not work. So decorator can then be applied to just a function without outside of the class. In the current version of TypeScript. Yet just this year, it is possible. It is so because of the nature of current version of TypeScript, because it's heavily use reflect the data and all this related stuff. And it needs something like a prototype or something to store this method better, as far as I know. So if you just write a function without class, you don't have this. So it's a current alimentation. Just nice for a lot. OK, let's just try to write some code. So my idea is that we tried to write the log down decorator, which will be which we will be able to apply to any function inside any class. And it will put to council look the time spent for this particular function. So it looks like that. What's interesting is say, first of all, the character is a function and its function. We should townsen as a function with some specific arguments. And these arguments are target some property name and description. In fact, the property name is just the name of a function. And Target is the instance of a class where this function was called. These arguments will be filled by execution, execution, environment. So when we compile it the JavaScript, we will see actual code of this lock down function and these parameters specify. We'll take a look on one of the slides. Excellent. This group, there is another interesting thing here, because the value of property over this capital is our initial function. And we can save it. And for the Fisher House and we can then replace descriptor value with our function. And by Z, we can decorate and we can modify the initial behavior of the function. And it will behave a little bit different. So, for example, in this case, we use console time and console time and to check the time and using the method apply. We can actually call our initial function. And a return result, of course, if we don't return this result, we'll just lose it, actually. So this is the sample of four. Function decorated once again, function decorator receives target. It's an instance of a of an object where it was called. It received the name of a function. In case you needed maybe you would like to put it out somewhere. And the descriptor or which are several things. But the main is the reference to a function which is decorated. If we compile it to JavaScript, so interesting things are starting to go on. I actually relied on that assumption in typescript and see what happens in JavaScript, actually. And it's sometimes it's nearly the same. Sometimes it's just go going crazy. And if we compiled the code of decorator itself, it is pretty the same. So don't you think we lost all the types? Right. So we don't have the properties in the string as a type of property name and so on. But in general, we have nearly the same structure function, which it sounds, and as a function descriptor, the same. Yes. But if we take a look to the JavaScript code, which uses this function, which we decorated before, it looks drastically different. So when we define the class, was that function the glass itself, Nero is the same. But after that, we see that decorate with double underscore function, which is a system function and not system, but it's some function created maybe by typescript compiler, which actually calls our decorator and puts there all the needed parameters. Like what is that function? No, no. Here, that target. And it is exactly a prototype. The name of a function which we are calling and something else. It. It's nice and it's it's it's good to know, because when you writing a decorator and when you're applying it to some function, you should know that it will be call of dysfunction somewhere. And for a case of a function, it will be called each time when the function is called, basically because because of this decorate was to underscore call. OK. OK, moving on. If we have several decorators, that's fine, you can use it one by one. And in a JavaScript they will look nearly it. The same JavaScript also will put them in the same order one by one. Inside the double on this call, the correct function. Ever since. This is the same. And let's let's move on. We've been talking about the function decorator. So how we can add additional behavior at the function. Another area for the decorators in typescript is a class decorator. And for this for this topic, I would like to suggest to implement that little tiny personal dependency injection. So just seems like we're starting angular 10 years ago. We want our dependency checked. So let's try to write it. First of all, I would like to sink how it should look like from a developer's perspective. So I want to have some kind of service with constructor, with some other functions, maybe. And I simply want to add some decorator and want to specify, is it a glass? Should be single tone or it should be able to have multiple, multiple instances. That's it. So I would. There are some additional tax. But the main thing I'm looking for right now is this one. So just to modify, can we create several instances of this glass or can. Let's move on. What we need for this. So we need to implement the decorator itself. And in fact, if we take a look to some angular decorators or some nest chairs, decorators, in most cases they will do one thing. They will just put some method data somewhere. And that's it. So decorator for glass in most cases is not actual behavior. A modification is saving information for this glass, how it should behave. And this information will be used by some other consumer. It can be compiler. It can be other code. Doesn't matter. So for this case, I want to save some metadata. So I like to typescript. So I created an interface with all needed properties and I created the custom, whichever the character itself, which receives the metadata, which I put it in. And what should the term of the class decorator? The same, it should return the function, but the parameters of this function will be different. In fact, the decorator for fun, for class should receive just one parameter which is constructed of this class. That's it. And what we do for this case, we just need to put the netta data somewhere and we use reflect the defined with the data. It's a typescript library used a lot in different places for this purpose to put some math data for the class or for just any scene, actually. And basically, typescript itself uses this library. So, for example, during the compilation of a function, typescript puts the method data to reflect metadata information about the function parameters from a design. And basically you can read it and do something with it if you want. Moving on. So just once again, this is a reference to class constructor, which the decorator will receive. Let's compile it after completion. We see a slightly different picture from what we've seen before because here is our basically closed definition in a JavaScript. And again, we see the double underscore the great function. And we put there our customer care function. We put there some additional meta data and that's it. The interesting thing that this all will be called only once, right after. Right after JavaScript engine with a radio code, and this will be executed only once. So function decorator will be executed multiple, multiple times every time you call the function. But class code of class decorator will be executed only once during the first reading of a file with your was code of your class. That actually with No. I think we skip it already talked a lot about how we use it, how we use our dependence injector. So basically what we might think about, we need to have the kind of map where we will store instances and we need to create the function, get instance, which will and a positive type. So the type of the type instance of which we want to create and this function, we'll get the metadata which will registered as a decorator. And by this method data, it will understand. OK, so this fun if this is if this glass is a single tone, OK, we need to check. Maybe we have already instantiated it. And if yes, we can just return it. And if not, we can create and use that. But if it's not single tone, we just return the new instance of this type. And that's it. So at the bottom, you can see the court, how it can be used. So, for example, when we want to have instance of our test servers that go glass, we just go get instance and pass. Is there the name of a class? So that's basically it. That idea and main purpose of this slide and this sample actually to bring the information that in most cases we don't have the behavior modification inside the decorator itself. In most cases, decorator serves a purpose to store some data about how this behavior should be modified. And this data dismantle data will be used by someone else, for example, like this. Yet the instance function. Morgan on. OK, Roberta decorated. So. We've been talking about the function, the greater about the glass decorator. There are also decorators for properties. And the primary area of usage for this is a validation. It's very convenient to write some code of class and to put information about how this class should behave, how it should be validated right inside of it. Like this. For example, this is a sample I just made up for this slide. For example, I have the class person in my database and I want to validate that the person I store had has age from 18 to 60. I don't know why. Maybe it's the rules of my local government. I don't know. But I just want the easy way to validate. So let's try to implement this kind of decorator. Again, we are writing a function called age here in the sample, and we're put in two arguments here. What we actually expect and what we will do to the court by ourselves. And again, what we're doing site. Oh, yes, an interesting scene that we, again, have a new signature of the return function. So for the property decorator, the return functional should receive prototype of for this glass. And the property name. So are jealous. People will put this information for you. And you will know which property you are in right now. And what is a prototype. So you can get them, for example, name on this class you want. And again, by this code, we just put some method date. So we have that from and to and we put we define the data for them for prototype constructor. It's actually it doesn't matter what you put here. But it should be something stable. Should be some stable reference which will live through all the life of your application. And it's actually a meta data will be linked it. So we saved the meta data for the H validation. And the. We can take a look to the JavaScript code, how it looks like. And again, we see the glass definition in JavaScript. And then right after that, immediately after that, we see the code of decorate function with our parameters, with our 18 and 60 parameter. And with person, that person, the prototype was surpassing that as an object was passing the edge a string H as a name of a property. This is important because once again, look into this got to understand that the quote of the curator will be executed just once when the JavaScript engine will look to it for the first time. So now it doesn't execute multiple then. That's why I don't think we can do we can put some information about our case somewhere like the metadata and use such a word will be something different. So usually some libraries like Quast Validator will implement the function simple function called validate, which will reshift object, and that's it. The idea is that we do not pass too much information to simple validate function, which is just one object. And that's it. Of all the validation information you need, it will actually can get by itself just from meta data. And so this code is about it. What we can do. We can list all the properties of an object using this one for each property. We can get our method data, which we define, and we can actually generate the heat. For example, we have several properties. We can put meta data for each property separately. And so by. Having a combination of things we can define different Medidata for different properties. And basically, that's it. We're just checking that you have the data for this property. And if you have it, we can do actual comparison. We compare our value from object. We already have the instance of an object having the bureaucrats name. We can just get access to it and we can compare. And that's it. If if validation is best, that's okay. We don't need to do anything. If it's incorrect assumptions wrong, we can throw in your error or do whatever we want for the case of our application. So for example, the like in the bottom, this sample will pass, will be fine. But if we if we put someone else likes 61, we will see the validation error. So this is a very simple code. It's just targeted to demonstrate the basic idea about all the oldest. This. If you want some. You know, a more comprehensive solution. You can check out the existing glassware validator library. It's very interesting. It has just a lot of stuff for, quote, validation inside, like is a mail. Is it the integer length and so on, so forth. And how it works is the same. You define the civil validator, deep validation decorator's for the entity itself. And then you just called. You just call this simple functional debate. Was it? It tells you a promise on a Zen handler. You are OK on catch handler. You have errors. Maybe I'm wrong, but you can also catch errors and received the least of elevation errors and show the user some symbol or whatever. And. Yeah, I was thinking so much about it. I was thinking so much about the typescript and validation so that I created a small library and put it to MBM. And the idea of ZET just for basement was like, okay, I want something super simple, super easy, like one decorator without any parents, which I will put a function and it will check that the actual arguments which was which were passed to this function equal to what I expect in a typescript. So I used I created that decorator. I use the metadata a lot. And there is a simple version so you can just download it and try. But I found some limitations of the current version of TypeScript. For example, we don't have an app debated for the right items or again, we can not define the decorator for a function outside it. So that was interesting. Right. But it's not perfect, unfortunately. What else? I think we came to the very end of my presentation, but we didn't talk about the force type of decorator's. It's a decorator's for the function, Peranich. I think it will be a good homework. So if you will spend, for example, ten, fifteen minutes reading documentation today and we maybe tomorrow morning and we'll implement something very simple decorator for the function parameter, which will, for example, check that the argument, the actual argument simply is not now Rundfunk. I guess so. It can cold required. I guess it's nice that you can try and just get a feeling and hands on experience how it works. So just to sum up, we're talking about decorator's and that they help to bring some customer behavior either directly if it's a function decorator or by putting some additional near-term information to mitigate. And all that will help you to practice that kind of declarative programming for metaprogramming and make your quote much more readable, at least from my standpoint. And heaven knows, that helps you to enjoy your quote much more and write the better, rather than just spending time for some debugging and some issues. I think I'm done. Thanks a lot, guys, for attention. Thanks. That is for invitation. It's a great pleasure. And they're so much richer and I'm really proud of it. Thanks. Thank you so much, Valentine, for this valuable inflammations. Great presentation. Thank you so much. So Next in line is our guest from us this time. And it is a Minko income, can you unmowed? Okay. Yeah. Oh, yeah. If you give me. Well. Hello. Hey, do you hear me? Well. Yeah. Again. See. And you see my screen. Yeah. Perfect. Let me just minimize the zoom. Two bars. OK. Yeah. So, yeah, hello, everyone. My name is Ming Creative. I'm working at the end team at Google today. I would want to share with you the current state of the anger, the deployment server side rendering and pre rhetoric. If you have any questions, feel free to ask them in the YouTube chat and I'll be happy to answer right after the presentation. So in this presentation, we're going to go through all the very old days when the Web was to a brand new think. We're going to talk about different rendering strategies, client side rendering, server side rendering and pre rendering. And we're going to treat this evolution of server side rendering over time until we eventually reach out to currency. That's angular as in right now. So back in nineteen ninety one, the Web was a much simpler place. It was to a fascinating distributed architecture where we had different Web servers delivering static cased, you know, pages to the browser. It was false tolerance because, well, it was distributed. We were able to navigate across all these different. Web servers just by folding hyperlinks on the Web pages. And this was serving the purpose and filling the needs of the users pretty successfully for quite some time. Well, right after that, folks notice that it was really heart and even impossible to generate the Web page on the backhands dynamically, depending on who's requesting it, for example, or accept user input. That is why a bunch of different developers came up with the idea for the common gateway interface. And this is just an interface in the Web server which accepts the user requests and forwards it to an external program which can handle the request and return a response. This external program accepts the request and it can do anything pretty much. It can fetch data from a database or from the files system, and you only can save some data coming from the user in the body of the request or coming through parameters of, let's say. Let's say a head or a get request. So, C.J., I was working great. And as you can see here on the slide, while these the request, the page, we're running a bunch of scripts on the back end. There are fetching some content from a database that say and right after they're rendering the page. So at this point in time, the user already sees some useful content. This is the LCP marker here. LCP stands for the largest content for paint, which is a user centric metric that is coming from the Chrome team, which estimates when the page is useful for the user. What is it? I'm seeing just useful. It doesn't mean that it is interactive in the same see it in the same sense that JavaScript pages become interactive. Once you load a bunch of scripts, Doozer or just can engage with the content, they can learn something from the page and they see something. So they're already able to get some value out of the page right after the response. The drawback of this approach was, though, that each page requests each page. Action was requiring an entire page reload. Do you have a poll on the page and you just want to submit your vote? Well, this would require the browser sending a post request to the server. The CGI script handling this post request and right after it, regenerating the page again and. While the browser. Re re rendering this dynamic content that is coming from the server. So this is not very convenient, especially for such tiny interactions or incremental Piech volts. That is why with the evolution of Web standards like coming weeks, I frame. Ximo sphere request. And Stephen ActiveX, an Internet Explorer. Different folks were able to came up with the idea for Ajax. Ajax is just a combination of different technologies. That's provide some like incremental AT&T improvement of the European experience for the Web with AJAX. Things are slightly different now. First, these are still sending requests to the Web server, which is forwarding this requests to, let's say, a deejay program, or which in the era of Ajax. This was more likely a. Request coming to an Apache server that was forwarding the request execution to a page script, and right after that, the user was directly getting the largest content, full payment and the pages completely useful for the user at this point. Later on, the page was often referencing a bunch of scripts, a bunch of JavaScript that will just attach attaching key event listeners to the dome and making the Web app more interactive so that when the user engages with the pulled out, we discussed in a bit like you a few minutes ago, instead of reloading the entire speech, the JavaScript associated with this poll, we're just able to send an Ajax request in the background, perform to vote. And right after that, we're able to recompute the results in the browser and display them without reloading the page. So this year is a time to interactive. First, the page. This being useful for the user when we get to the largest content will paint and try. After that, we're making it interactive. Once we load, all the associated channels could put it. Well, this was around the time when I first goods introduced to Web development. This must have been around 20, 2006. And that's the authentic kowa of the first book that I rhett's in Bulgaria. This stands for. Development of projects for WEAP with Puchi in Moscow. This is the first Web site that I developed. One of the first Web sites, in fact, it was an entire CNN system and one of the Web sites that I dealt with, it was the small teens, adults, askey all digital ORAC, which was pretty much the Web site for the local like mountain chain that we have in Bulgaria. And Ivan presented in front of a jury in front of these two people. It was a very exciting moment for me because for the first time I was presenting my work in front of other people who were actually very competent and they were able to give me an excellent feedback. This is thanks to my high school teacher as well, who pointed me to the right direction and helped me to grow the set of skills. So at this moments, there was another raise, a lot of rice of the front frameworks originally like backbone for a showed up and right after that angular gests and they were attempting to make the web applications get even more fluent desktop like user experience and put some structure onto the spaghetti code that we used to ship in the browser with Spaull. Thank you. Are on backbone. The way we started building web applications changed it. Now, instead of using server side rendering with something like CGI or Puchi and buy it and patch it, we started just shooting a plane index e-mail file to the browser. With this e-mail file, we're referencing a bunch of other JavaScript files that were in Amy attempting to make the page interactive. So first we'll have to download the e-mail file from our Web server or a citizen right after that. The president needs to sense start the sequence of requests in order to download all the associated JavaScript with a page. And finally, once we. Get these gentle scripts we executed. We're able to render a speech and make it interactive. This does May sounds good. Because at the same point, we're making the page interactive. And we're also getting the largest content for paint. But on jetter sites, the user sees nothing than a blank screen or a loading bar for quite some time. And you only think as developers that we can Zener to shrink this time, to reduce us to make the Web page a lot faster. You just. Well, to reduce the number of bytes of JavaScript that we're sending to the user. And this this is not like an obvious thing how to do at certain points. We as framework developers and the anger team, we're constantly aiming to reduce the size of your applications. For example, we have this joke on the anger team. That's by version five point four. We'll be able to make Angerer bundle size negative. So you will be kind of learning bandwidths when you're building applications with anger. Of course, this is unrealistic. And we still have a long way to go until we achieve the ultimate Bundall. Seitzer. And your applications. But at certain points. Well, you should just ship some JavaScript right where we're shipping some functionality to the user and this functionality we're implementing with JavaScript. So there is no way for us to just ship zero zero kilobytes of JavaScript to the browser. That is why in order to speed up rendering with Fronton frameworks, different folks started thinking that maybe they can perform this kind of client side rendering on the server in a similar way that we do in CGI. But this time, by using the entire logic of our application of our client side application. This was also the race of Nall Jess. So this must have happened. Her 2000s and then I'll say. Or 2012. With server side rendering, the browser is still sending a request to the Web server. The Web server, this time it has it is able to forward its this request to like we have this action and application server. So the browser is sending a request with the application server and in know just environment, we are running car landside application orphans. Instead of providing a headless browser, we're just providing Catania's shim, which emulates its own. But it's not the real deal. It just tries to satisfy the requirements of the framework so that we can run our clients at application on the server and try after threats. We're providing the standard content to the browser together with a bunch of scripts, and we are rehydrating the application. Does the process of required gracian here we have the render content and now the framework takes over in the browser. It attaches different event listeners and makes the beach interactive. This was around the time when I gave my very first international talk in Vegas in 2014. I talked about how we can use musical data structures with angular jazz back then and how we can productive would be productive without our super nervous to be there. In fact, after my talk, I went directly to my room and I look myself there until the very late afternoon on this conference. I met Patrick and Patrick and Jeff about two months after Engy Vegas, and they came up with the first version of Angular Universal, which is the first server side rendering solution for Angular together with community. Since then, we kept working on Universe in order to make it a very robust industrial solution that is currently used by a large amount of projects, like hundreds of projects worldwide. Some very high traffic Web sites, such as Krunch Base are constantly using CANGA reversal in order to speed up the initial little time for their users. But over time, two of the biggest challenges that we hear about. Thank you, Reverso, for developers using it are the change for first time and the deployment's the change for first time refers to the time between saving a file on the desk and right after previewing these changes in the browser. So that's why we developed an angular SIRF SSR builder. This is something quite similar to and you serve with for anger and you projects. So we're watching both the clients and the server. And when we notice that there is a change in Inyo, then we're rebooting both the client and the server. And refreshing your browser after that. Notice that this is not a complete replacement of Angel's serve because we're doing more work and we can not be as fast as Angels turf, but it is to a decent way to improve your development experience when you're developing pieces of your application that impact both the clients and the server. Taking advantage of this feature, all you need to do, just use energy updates and just update your and Universal Express or hockey engine depending on what you're using. This feature was developed in collaboration between our community and younger teens. So Alan from Dangerous Helike team, worked very closely with Manfred, was one of our very committed collaborators in order to make Surf SSR available for everyone. The second, I think, is deployment. So there are very well documented tutorials or like guides on how to deploy an Angourie versus application to difference on demand computing ages. And Jess, cloud functions. Or firebase functions. Cloud drum. And so on and so forth. These are really like grade goodnights, but at the same time. They were requiring quite a few manual steps. And, well, we wanted to automate the process. That is why we combine forces here. We collaborate very closely with the FIREBASE team in order to deliver Engy Ploy for Angerer. You are so applications you should first run engy at. Anger. Fire and try to throw we're going to install a bunch of dependencies and check your projects. In this case, since I run engy ads in an angry reversal project. And your fire is going to ask me whether I want us deployed as a far base function so I can just agree when I press. Yes. We're going to install a couple of other dependencies and fetch the projects list from your firebase account, when you select a project, you can just type energy deploy. And that's it. We're going to Buell's, both your client and your server. What's the most SYK optimal production settings? And from this point, all you need to do is just wait a couple of seconds until we deploy your static assets to firebase hosting and your server sets logic to firebase function. Now, when you click on the euro, you should be able to see a. Server side 200 Dangar application. We can verify that by looking at the source guilt. So this way, with just two steps, you can go from developments to production pretty much. You just need to run on energy at Angora Fire and try to after that energy play. So when you deploy your anger application or like any server side rendered application, really to a server in general, there is one very common problem. Now, imagine we have user, a user, a sending card requests for a specific page. This means that the server needs to server side transit or to speech and try to after us return to static e-mail to the clan's. Fuser, be Opel's the exact same page. We're going to repeat this behavior. We're going to render a page on the server and return it to the client. And this can repeat quite a few task. Imagine you have a very high traffic Web site with hundreds of thousands of users. You're going to render the same page all over again, doing the exact same thing. You're going to lose a lot of research. It's computational resources. So while your bill at the end of the month is going to be pretty high, what a lot of people do is introduce a caching there. So when you send the request first it goes to the cache. We check in the cache whether there is a response associated with this request. If there is one, you can directly return it. Alternatively, we're forwarding the request to defer to the firebase function. Let's say it is rendering the response. We're putting it into the cache and try to after delivering to the user. This is another solution. The problem here is that we are introducing one more component in our diagram here. So we are making things a little bit more complicated. And at the same time, we also need to think about what keys are we going to use from the requests in order to implement this caching? And also, how are we going to implement this caching consolidation, which is often a big problem when we're using any caching strategy for anything, pretty much from memorization to server side rendering caching. That is why in such cases, I very frequently. Recommends you use pre rendering, if possible. And not only for applications that they're requiring server side rendering, but for most of them, even if you pre render just a tiny bit of your Web site in the form of an app shell pre rendering keys to an excellence option. So pretty rendering is something similar to server side rendering. But this time, instead of rendering your application on the server, you're running at this part of your beaute process. That is the only difference. In order to use the prior entering that we introduced in angering you, first of all, you need to do just run engy at first. And Universe Express Engine and Phytophthora just run engy run the name of your project, prettier under. And that's it from here. We're going to first beaute your application and try to, after read, discover all your rules. We developed parameters in your app and pre rendered and generate static HTML files for them. So, yeah, this is the exact same thing. And you're you are still but this time we're running this part of the build process and the same you. We don't really need to have any complicated server side logic that is performing server side rendering because we are generating static kimmo pages that we can deliver from ABC and. We also played with this in order to make it optimal, so for 800 pages. We need about two seconds to pre render them and some folks push this even further. So Steve here rendered 10000 pages for 75 seconds. I will say this for a rendering. Use about 15 to 20 seconds and the arrest we spent in due time. But that was pretty decent result. With pre rendering, we are even having native support for pre rendering. We're an even better citizen of the gem stack. The gem stack is this new paradigm for building, quote, applications. Remember, previously we had the lamp stuck with lunatic's Apache Maskew and. BHP, now we have the gem stack, which is also even more simplified because we have JavaScript, API and markup. We need to know the JavaScript, we need to know how to interact with different API sets a stripe and she'll be fine. And we also have markup. This is the static email that we are generating out of our clan site trend or tap. We can do that with anger reversal. There is also a community driven solution called Sculley. This is the static side generator for ANGULAR that is developed by here defs. They're using a slightly different pre rendering approach. Instead of using Universo, they're using headless browser, which makes things a little bit slower in terms of rendering. But at the same time you can use all different API. Is that you want to. In the browser and Scalisi, you're going to use because remember, we're not running the application in no Jayce environment and in no just environment, we need different shifts in order to cover all different Dohm API that they're not available in lodges with Skully. All you need to do is just run in the shadows browser. That's good. Is going to do automatically for you and output a bunch of static personnel files. So both have their tradeoffs. And Selda recommend you to pick the one that works the best for you. I don't know if you noticed how many times I mentioned calibration and working together in this presentation. I'm really excited to be able to work in this environment where we're driving the technology forward just by working together. I was on all different sides of this. I was working very I was working through remotely in the anger team just as a third party contributor or just contributing my spare time. Later on, I joined a little bit as a contractor and s I worked from a slightly different perspective. Later on, I kept contributing in my spare time. And now I'm contributing as a full time member. So I really enjoy this active collaboration in the open source. Not necessarily anger in general. Open source is a great way to share very distils amount of knowledge and work with fantastic folks everywhere. So yeah, that is everything I have for you. I'd love to answer your questions if you have any. And also, if you have some feedback about my top, please just open MGB telltales. Let's talk Eldora. You love to hear your thoughts. Thank you. Okay. Thank you so much. Minko, thank you for this great presentation. We've got a lot of great stuff, especially their photos. I like it. OK. Anybody have any question? Just you can use them to chat. We have, I think, on questions so far. I'm sick and. How about serving on my Linux server? Yeah, you can. From. Hi, Sean. Yeah, you can use on Prem solution as well. And I'm usually recommending something like a unconfuse engines that OnDemand computer engine s like Asia functions or like firebase functions or cloud run because you have to think about your thinks you can definitely surf and getting diverse applications from your angry work. So your Unix server. So. OK. The next question is Anglong also has pretender. Then why we need Schooley. Yeah, that's a good point. So there are the two main differences. Ah, that's clearly provides also a plug in infrastructure so you can fetch content from different sources. They have kind of adapters from four different content providers. You can play your and your application to a WordPress source, for instance. And the second is how you're doing pre rendering. Well, he's using it here right now. And they appear wondering is kind of more complete if we use kind of terminology from programming language. It is more complete because everything that can run in the browser, they can prerana their anger universally slightly more restrictive. And because of these restrictions, respectively, anger reversal performs faster. But, yeah, you can pick between these two. We are working closely with Kelly so that we can optimize their pre rendering as well. Maybe adventured at some point you'll be able to choose between different pre rendering strategies. OK. Can we just use parenteral bill to achieve the same goals? Yeah, a talking about that song and other questions. Yeah, for social media. Course, you can use pre rendering cues, pre rendering. I would recommend it to use Perea rendering all the time if you can. If you cannot, you have very dynamic content on your page. That's the case when you should use server side rendering, but pre rendering. That's my favorite because you just generate a bunch of static e-mail files on your machine as part of your build process. And that's it. So far from server side rendering and pre rendering, you get the exact same benefits in terms of its e-mail and social media crawlers. And it could be potentially even better if you use pre rendering because you're reducing the time the largest content, full time content will. Time since you can deploy your pre rendered assets directly to a CDM instead of delivering them from a application server. So that was the answer. I'm sure that when should they use pressure on their inquiry server side rendering? Should we always use SSR or. Yeah, it depends if you're building an internal. Internal system, for example, where performance doesn't matter whether where most folks are opening your Web application through a local like local network. And they can afford to wait one or two seconds for the application to load, you don't really need service rendering. All recommend to juice, just your client side rendering. Yeah. When should I use as a siren and when Clance site? Usually isn't such a good idea for most cases because except when I mentioned that you are in a not performance critical system. If you're using a content web application where you generate a lot of content, like a documentation Web site or. Like a bloke or like something in between these lines or even an online store, then server side rendering is very important because you need to make your application really work really well with social media. It needs to be very credible from like search engines and so on and so forth. Also, when you're working on something performance critical where you would want to get the fastest possible largest content for. I'll definitely recommend it to yours, SSR. And can prayer under it once use dynamic EPA? To change the metadata of our app depends what you mean by if you're referring to the metadata that you're attaching to the HMO. Then. It's not going to work. Well, you can update them, but probably at this point, the Social Media Corps will have already read the previous text. So you cannot for dynamic things, server side rendering. We'll do better four pages, which don't change that often where you're not generating generating anything dynamic on the server. Eldrick community is pure rendering. Yeah, and there is a question. Do you see any benefits from using Ketter Sara Prete rendering for back coffee software? Time is not relevant. No, no, no needs. We're just going to bring extra complications. You combined Paedo A. And as a saria, you can have service service, spites rendering like ENSA. Service worker. And there is one last question when you said Ceasar. Then we also needs. To execute JavaScript would, but we. But doing it on the server instead of the browser. So. Is it really a big advantage of using it? It could be. It could be. Again, if we are viewing something which is really performance critical and you have a lot of static content on your page that you would want to be to work great with social media and search engines, then you probably should consider using server side rendering or even better, pre rendering if you can. Alternatively, it can be adjust a little bit on the expensive sites issue. If you don't like it, if you don't need server side rendering at all, there is no need paying for firebase functions. Well, although firebase functions, you can use them for free for quite some time. So if you don't have very high traffic, you can use them for free, probably forever. But even maintaining a Linux server or just paying for the server servers, is it for a server? If your application is not worth it. All right. Oh, okay. So big round of applause for Minkow. It was a great presentation and a lot of great informations. One more time. Big applause also for Valentin. And thank you so much, guys. It was a great, great, great to see you today. I will also invite you in two weeks. We have another session with Mincome. It is a Q&A session so you can prepare some questions or and ask it. So I'll see you in two weeks on the next Angela online even. So for today. Thank you. Thank you. Thank you so much. Thank you. Thank you. Bye bye, everyone. Bye bye, everyone. Thank you so much.