Video details

AngularNYC & Angular Minsk - Pre-rendering, Scully, NGXS


Konstantin Malikov & Ilya Ryabchinski & Aliaksei Kuncevic

Angular Minsk @ Angular New York
We invited our friends from AngularMinsk, Belarus to speak at Angular NYC :)
⚡️ Konstantin Malikov - Prerender it easily ⚡️ Ilya Ryabchinski - Scully - A New Way To Angular 📢 Aliaksei Kuncevič - Progressive State Management with NGXS


All right. Hello, everyone. Welcome to the angular and racy and angular, it means means that we're doing this collab together, which I'm very excited about. This is also. Hello, everyone. The ocean with an angular and angular omniscience means yes, as you've noticed already. Probably this is our first time doing an online meetup. So let's see how it goes. I'm very excited about that. We haven't had the meetup since February. I'm going to share my screen in a second. We have a slight. In Spain. Perfect. OK. Knowing it to find them somewhere, here you go. Here are the slides. So welcome to this angular and let CNN go, immunes. Meet up together, have code of conduct. Basically the place to chat as we don't have anything in person today. Here are the organizers who made this happen. I also want to help Alexi, who do a lot of work on this is stuck glass that you found the speakers. And he is also, like I can say, he is an organizer. We do need help to make more events happen. So if anybody is interested in organizing events, please talk to me. And maybe next time you will. Because doing this event, this kind of event, this is on Angular Kotler. This is interactive online tutorial for beginners. So if you're interested in learning angular, this would be a great place to start. Just go to court. That fun? It's interactive and it's a quick way to get yourself started. The angular I would like to thank and digital, which Bengel from Zanjeer still started this up and keep supporting us. And I would also like to thank Narval, who was our sponsor. They create tools which allows developers to develop like Google. Check them out. We have social media, Twitter. We have YouTube. This is where you can see us now. And we have a slack chat, but he is welcome to join. We have three amazing speakers today. All of them are from Minsk, Belarus, except Alexei, who is right now in Sydney. So you get to wake up at, like Dorje, 3:00 a.m. some crazy time. We'll talk about surrendering. We'll talk about Skully do lightning talks. And then the last thought. Look at it. Say about and Jeff says, progressive state management in the end will also have a raffle. I'll show this on the screen during breaks but have not just one, but I think it's Thor three because we're talking about combining our jet bringing licenses angular. Also Tembin source. Go to this thing and then sign up and we'll raffle out your licenses. You'll get them email from us. This is the last flight. It's further eyes you. I would like to introduce Konstantin. You can see how a press buttons removing this. Huh? All right. Hello, Constantin. Can you hear me? Hello? Yep. I can't hear you. Konstantin straight from means. Go ahead, Konstantin. Yes. OK, great. Hello, everyone. This stock is about surrendering your angular up easily and arison about it. My aim today is to show you some examples, some recent cons and how to easy to integrate it in your project. Yeah, oh, everyone is a bit tired of the just the naza angular line feature. But believe me, this one is worth the mention and make some explanation. Yep, that's me. I'm a full sec def from Court X company, which is based in Minsk, Belarus. OK, let's start. Let me just remind you, based in the exit to my file, which is used by Westpac to put bundle links to put the bundle file as links in there and. Let's check how this works in a pure, angular app. First of all, browser request our site. We get basic in the mail, which is similar to the one from the previous slide. As the links are in, then the build this file, we have to wait until our of our scripts are downloaded and we are waiting. As you can see, we are still seeing some like a preview of our site. And after that, we have to wait. Our scripts are executed and all of this time we are waiting. And after two hours later, we are able to see our page. It takes about one point five seconds to do Ariston and you start to work with our cycle. In the Russell loser way better like how it works. Press the wall. We do Eric West to our center. We wait until it's rendered. Basically, it means that there the whole page is rendered and we'll real a to receive a snapshot from several. But it is not intractable yet. Of course, we need to request our scripts to wait until downloaded and then executed. And after that, our patch is alive. It takes about six hundred milliseconds for us to take the first shot of our page. Great lesson one universal Brender approach is even faster. Let me give you a core concept. Snapshot files. Some shortage them out. Files are picked, compiled during the build time. I mean that every page you have is rendered during your continuous integration process. And the cool thing is we don't need to wait while batches rendered on the server because it is. It's already done on the server. Doing it. Doing build time. OK. And then we can see that our page is fully. Like visible just in sody milliseconds. That's great result. Just a couple of words about performance. Looks like that after the mile download at the site is visible, but not on track to be at. So taking into account our. Taking into account that our. That our Internet connection is perfect. It will take about one one five for pure angular, about 600 milliseconds for a universal and so milliseconds for Brender. Just because Brandreth files are static files. There are some things. Things to think about is difference between the universal and grander version. OK. So what is dynamic is this are good for the main advantage is it is suitable for EPS with dynamic content. But at the same time, if Betcher is not cached server generated response every time and also additional server for serving our content is required. OK, great. The next thing is static rendering. Or why it is good for us? Basically, it is easy to do, it is to start with citizen, to start on citizen. And the advantage is we don't need to have a server because all of the files are filtered, doing them build time. Unfortunately, it is not suitable for EPS vs dynamic content, but it is only there half of the truth because you can use. You can always use hybrid approach. It can generate as many pages as you want. And so on. And so force. If you want to start with Skully, if you want to start surrendering, you should check out Skully. I'll give you a couple of points. It's possible to use Jason and Mark down as page content. And the main advantage is. If your application uses such objects like document window navigator or you use some sort to libraries, which you access, isn't that dumb? It's completely fine because Scully doesn't think about it. But unfortunately, it is not possible in Brander because your your your application should not have all of these objects. The main advantage of Andrew Brender is it is very. Plus, it is just insane that you can generate about ten thousand pages, Dustin. Seventy five seconds. OK. Just to summarize, it depends really, because all of the techniques work pretty well and you need to check all options before choosing one. Let's check how to break it. I think that everyone knows about energy supply. And there is another feature which we can use is energy. Ed, just is this one line that arresting the whole Necesito thing for Universal will be will be installed in your app? Just for example, there are roads and drove Muldrew. And, of course, also links. For you to know, just pass, there is a special tool which is under the hood of energy prender. It will check the your application and it will find all of the static pages. That's how it searches and creates. And like doing all of their necessary pages just. But of course, we have some dynamic content. We have products. We have articles. So that's why Brander allows us to put all of this dynamic content pages into roads. All right. That's why that's how you will handle Dan and Cross. OK. Do not forget that AZO important point is Townsell and is Transource fate is TransFair state. You really want to avoid executing your API twice. That's why you should use it. Do universal four dynamic pages, just as from my experience, I can say that. You always used this approach. I mean, hybrid proprietory had it, but just for static content. And we had a dynamic SSR for dynamic where just. And you you should know that guest pastor is not an Arison pastor. It is just the tool bar. You should handle everything manually. OK. Who needed? These to these brands ring is. And SSR most commonly is used by those who are handling blogs, e commerce, news websites and any content Web site. So basically, it is very important for. Social media, for example, we want to share your link and social media will check this link and try to figure out what kind what content it can receive from your page. And so if you have server side rendering, your social media will help you to. Make your site more popular, and, of course, it is for those who want to peacefully receive performance. I mean, if you have followed lot of there's a lot of customers and you want to and want them to show your side very fast. Of course, you need to consider about the stalled. Gay about what? About Conn's. Brander doesn't know about dynamic worlds, angular bond still should be downloaded. Because if you want to do some epic API calls, if you want to some to do some interaction with a page, you need to download angular bundle. Jurors will be shocked. It is for sure. And it is not for internal EPS. I mean, you should not waste time for using it on your head panels and all those boards and so on. OK, guys. Thank you all for our attention and I hope it was pretty useful for you. All right. Thanks a lot. Konstantin. Great work on that rendering. I'm looking forward to the next talk where Ilya will elaborate more and talk about Scully. And one thing I would also like to mention is that for some of the speakers, this is their first time speaking English. They're like English is not a native language for anybody in Belarus. So everybody is like many people are learning new things today. I am also learning things. A learned culture shared the right screen over the next time I ask you some questions in the chat. After all the talks, we all the speakers will get together and we will answer all the questions from the child. So please keep asking. Now, without further ado, I would like to introduce Ilya Kinsky, who will talk about Skullion. Hello. Can you hear me? Yeah. Your life and we can hear you. OK. So hello everyone. Today I'm going to be talking about Jim Stack and Skullion, what this brings to our life since angler deaths. We have not so many times. So it's my talk would be mostly introductory in basic. Uh, yeah, Thurston, about me. I've been working on some solutions for several years as a front end developer. Most of my experience is connected with Engler and also from time to time I give talks at Engler means. So thank you for having me here. And let's quickly kick off and start with gem's tech. So I hope mostly of you are familiar with this one. But honestly, I was surprised that in our area, James Tech is not a popular approach. I would say that it's a new way. It's the way how to build modern aesthetic Web sites with modern tools. Previously, we usually use tools like seamless, like WordPress, Drupal, et cetera. And sometimes some teams use its deal and it works. But I believe I think that it's not a very performant solution and scalable way of doing static sites. So Jump's stack has come to fix all these downsides. Yeah. Gen. Stands for JavaScript, API and Mark-Up. It's easy, JavaScript. It must have dynamic functionalities are handled by JavaScript, like in certain some blocks in your DOM tree or starts in animations. Yet there are no even restrictions on using some JavaScript library in your project. Then API is about server side operations. It's about some Swedien or Lambda functions for server side operations and markup, usually with Jim Stack, your markup, your sites, your pages. I serve this HMO files and their sources. You can use some markdown, see US, TV or Jason or anything, and you can also automate the deployment and build procedures in the vent to your that would fit your needs. For example, you can start deploying or building on some new comments in Slark or on chametz or merges to your get lab branch. And, you know, big companies are also using Jim stock successfully, for example, Smashing magazine. There is an article where they describe how they do it and why they immigrated from World Press. So this article will be available at the end of my presentation. So why why it's such big companies choosing gems. So first of all, it's cell friendly. Yeah, you have your HMO markup pre rendered. And the Google board or other crawlers can understand your content. Then again, it's performant because you don't serve to your union, sent to your clan just to give just an empty gif. You have all the content rendered. It's cheap and scalable because you can use some lambda functions or maybe Sejin website services like Natalie Fye. It's like you're. Yeah. Because you don't need to handle such network and stuff like SSL certificates. To Pierce it would be handled by your. By this. Services like Citizen for example, and jump's that currently has a rich community support in all around the world. A lot of communities. And you can check it on their Web site. And it have been growing. Yes. Jim Stick because system is really huge. I was jealous because the most popular tools are connected with Reactant View. For example, Gadsby is the static set generator. It's regen based, has a huge community and tons of plugins for forever it tastes. But we've been waiting so long for four Engler's based solution then. Congratulations. Now we have it. It's called Skully. It's the static side generator for your angular applications. Yeah, it's a bit similar to pre render, but it has some conceptual differences. So we'll cover it a bit later. So just for your comments, I'm going to show you how quickly it's to a project. It's just to put you in the context and to see it in action. Yeah. First of all, we generate 10 more projects or we have existing one. Then we add Scully with such comment. Then we can use a built in schematics like for Block or they have schematics for markdown source in there or predefined it. And already implemented here we have new I generate module just for testing purposes. And here, I'm gonna show you the one of the main entities in Scarlet's. It is a road service. It's can be used by you. It usually extends basic angular rotor. And you can use it for Chauvin's navigation menu. For example. So how to build it? First of all, you need to generate your angular SBA but bundle for a single page application and then run Skully or Scarless sort of command for foreign production bundle or for running it in development. What? Again, just. Quickly dive into some some Scali pirates, some scarlet core pirates. Here you can see it's called a configuration file. You can play with it to change some Scali output. For example, you can change your unhandled throat. Yeah, it would be helpful if you need to have some pages that should still remain to be playing plain old single page application. Also, core of Skylake consists of some other components. The first is that I do monitor service. What it does, it talks into zone G.S.. And when an angler goes idle, usually it means that all outgoing HGP requests are finished. Triggers puppeteer to render to pre render your pages. And then, as I already mentioned, the Rohter is the thing where you can get all Scali roads in the right time. Then we have Scali content. This company does this component, it inserts Scali output from puppeteer to your HMO. It's just the would be just a string. Yeah. And they're very important to mention that it it's not working with NGF DirecTV, so please don't use it together then transfer state service. It's usually like similar, like angular universal has have four sentence some state from your server to clamp and utility functions. If you want to do some applications after Skully is done this rendering this then you can also use utility functions to note Azal or dimension to skalla uses puppeteer for rendering puppeteer is the no just library that provides like API for headless chromium over dev tools. You can also play with that skully config can change some some configurations for puppeteer runtime. Also, Skully embraces the plugin system to help the developer, to extend Kalhor, to teach it to handle some functionalities. That is not implemented in core. Rotor plugins. File handler plugins, for example. The most that I found most useful is the Jason plugin. It's all original core. Yeah, you can use this plugin for getting all the data from your back and services and then just virender it. So it means that when you send to your pages to a client on your back and you already have all, all your sources, all your information bundled into pages I generate. And of course, you can write to your plugin, too, for example, to Minify, H.M. Will, or to source some data from CSC or other formats. Anything that you want to do. Get almost the last thing is small comparison between Universal and Skully. Yeah, lucky me, because cosseting console already done it. And yeah, Universal works like that. Yeah we have a application reference. When we when our app Angular App goes to stable state, we render the page in the context of no G.S.. It means like we have some universe or we have some express server to render pages. Then we'll have it surrendered and sent HMO to a client. When when somebody navigates to our euro. And Scarlet's it works in a bit different way, so it's separated from your angular application as the older set you have a scarlet quantic. You have puppeteer to render your pages. And it uses its internal services like I do, monitor services that they already cover and navigation and talk from Rotar to know, is it okay? Is it ready to start puppeteer? Then when the picture is done. And we have some events like Angular paraded on the window. Yeah. As Konstantin already mentioned. We have to have an access to window or other Web API. And when the picture is done, we enter, we insert our output in our H terminal and send it to send it to a client. When when somebody navigates to our You URL. Skully goals. Yeah, I found this information from one of creators of Skully. Yeah, it's usually like for most of Jim's tech solutions, goes there to be performant, to be scalable and cheap, to do it for one hundred percent of angular apps. Yeah. As they already showed, it will require almost no effort to integrate just a few comments. And you can surrender your app also to support markdown and other content sources that it is also usual approach for James Tech solutions. And of course, again, Eco-System, you can play with it and teach Scali to do some stuff of that. So in conclusion, I would like to ask a question. Is it a production ready end? I don't know, honestly, because you may consider using Universal because it's more like a more stable solution. Scully, so fresh. And yet currently we haven't introduced it in our team for our project, but we are still thinking about it anyway. Everyone has a chance to participate in Skully involvement with contributions to Skelley itself, for you can also build some fancy plugins that everybody will use. So here are links. First, this jump's tech website. Then some scarlet docs. But to please put a lot of most of your attention to the last one. It's the webinar from one of the creator of Sculler. So hope for this talk with these two chiros. Your curiosity on the subject of Jim Stack and Scali and thank Tengku. Oh, thanks a lot. Yeah, nice talking. Actually, I have a project where I would like to trace spelling. So I'm excited. Just a few slides before we transfer. Let's see. First of all, I would like to talk about angular and nail conference, which happening on July 24th. It's a line. It's critical. And we are going to ruffle one ticket. So you have to go to this website up to the next slide. I have to go. Just go here for community. You can put angular and nice here or angular Minsk. There were things more appropriate. And then whenever other fill out one ticket per community, that's my understanding. And we'll have our own raffle. As I mentioned before, jet brains follow this year. Well. And also, there was like one speaker which participate that the day. But I didn't have to introduce. And this is Bekesi. You might have heard big during Konstantin Thuc. He had a lot to share. So here are some photos. So now Pixie has a face. Yeah. So one more time the Raffo link is here. I it for five seconds actually. They'll have to do it because people can just crawl back. So then I'm going to switch to Alexei about that. About and J. S s. Let's say hello everyone. I hope you can hear me. I can't hear you. Go ahead. Right. So yes, it's my first stock at 3:00 a.m. Basically, I'm as you probably know, I'm placed in a stroller and it's too late here today. I'll talk about the progressive state management and Jiegu sense. But before we get into that, I'll tell you a little bit about myself. So, yeah, my name is Alex Sequencer, which I am an angular expert, mentor and independent consultant. And companies are adopting Gillings the most efficient way by adopting suite architectures and best practices. And most organized in England means cango Sydney. And from then take me tops. So I'm running an online and offline angle workshops and teaching angular it could say we of def. I must say, creator of Frontin, Bush should use an online resource. We can learn more about modern frontin frameworks and see the recent trends. And yeah, and also part of an Jicks has Cauchy. And I want to thank you everyone in Jak's escort team who helped me to prepare this stock. So back to our topic today, where you talk about progressive state management. We'll cover a common problems with a single page apps and how to solve them. They're not focusing on the old problems. Just a few specific questions related to the talk is then I will introduce reactive services approach and then we will talk about state management and how to take you up from reactive services to injects this and also show you a couple of demos. So reactive state management is a development. So you might wonder what's progressive state management is above about, right? So progressive state management is a development process when you progressively enhancing the functionality of the application state in a way it won't affect existing dataflow and structure of your application. You know, there's a term basically I come up in the last months. And basic idea here is just to keep things simple and to use the right tool for the right job. So initially you start to visit reactive services that will grow over time until you're ready to opt in for state management solution. This approach is good for any small to medium size ups, but it also depends on your use case. Also, this approach might be very useful for those who are new to Angola and who are new to state management. So what is the most common problem we face when developing single page applications using angular? Please comment in the chat. I just wonder I'm curious what you think about that so much. Here today, we're talking about component communication and that awful issue. It's the one of the top problems we face in. One component initiating a change, everything in the application that rely on the change need to updated accordingly. Normally, our ups have nested component structure like that. All components within the structure interact with each other in a different manner. Or you might also have a sibling component. It needs to interact with other components in the structure. So, yeah, the components communication can get really crazy. Here's a simple example of filtering. Take it from Angela. Go to your site based on the search term in the filter component. The result component need to be updated with a new data simultaneously. Sometimes we can solve this problem using input and output mechanisms. I think and go build wealth, prosperity, family. But in case of nested components, which you probably have to avoid if you can. But it could be quite tricky. So in that case, is hard to solve. The component communication problem just by using input and output mechanism is also require. If you do that, it's also require a lot of bullet plate that you had to maintain going forward. So there is another solution for that use case. Let's use reactive services. Rexy services just a rapper on top of Eric Harris behavior subject. Using this approach, we can solve the component communication issue very easy and quite elegantly. Let's see the demo and today demo. We'll be looking like this. So just a simple application with a couple of components in need, nested structure components. Yeah. So basically, we can increase the counter in parent and child in the little child here in our container component. We can see the sum calculated automatically and we can resent it. So yeah, that's very simple application. We're going to be. Looking today. So let's see how reactive this service actually implemented here. So how is this glass cold reactive store with a number of functions here? So, yeah, it's pretty simple. We can have some functions. We can set state. We can get state as a value. And we can get state as an observable used in this. Using this state door sign property and so let's create a react, let's extend this reactive store. Let's create calm counter store based on that. So here we have our store represented by this interface with a number of properties on it. And what we're doing here, we actually have a number of functions which set their properties. So one and two and so on. And also their function, which summarising the values. So how we can consume it inside our components. Those it's the components of my application, child with child and parent and the container eventually, which is active service component to them. Demo. So this they can look into child. Starting from a class first. So we inject in counter store in the inside our component. So how we get Zweli updated? Very simple. We have these. We have to call their set value to function on the store. And how we would get the latest, will you? We can just subscribe to the state law sign, so the template is looking like that. So here we can call update, will you, with my passing minus one, which will decrease the counter of that? Well, there is one which increase acounter an hour where you draw a sign with us and swipe. So we pipe in it here. I think, you know this technique. So we are automatically subscribing to observable and when component destroyed, the will get automatic unsubscribe. And all the rest components will look the same. So we update is the way you subscribing for the way you. And so on. And in our container, a component is pretty much same idea here. But here we don't have to update anything from this compound. We just have to subscribe for some. And also, we can reserve the state. So that's it. That's how it looks like the reactive services approach. They are here again, to recap. We can increase the counter, get all the data magically updated across. The application, which is very, very useful approach in this particular scenario. Right. Let's talk about state management now and how it could be helpful to simplify component communication and that the fall. What better way? I wonder, what's your favorite state management solution? Please comment in the chat. And boom. So the four state measurements, oceans for angular. Excess and generics are key to any. Yes, you can use my Becs with Angular as well. I think you probably I really hope most of the names and probably used some of those. So what are the benefits of state management use in state management? We can simplify as a component communication and implement predictable that data flow in our application. This way it made it make it easier to test. And the bugs application. Also able to roll big state, so called time travel. So really, these days, if you want to time travel, no need to wait. A time machine. Just use a state management so you can throw is political. You can also apply the same consistent practices across the teams. And as a result of that, your team can become more productive and ship new features faster. So now let's talk about energy access, energy access is actually, in my opinion, qualified as a progressive state management for ÀNGEL application. And you soon will see why. So what is it, features of NJ Excess and J. Six is a simple to learn. It has a minimum boilerplate and is all about angular single thinking or angular way. Right. So as a dependency injection and decorator's as a first class, the citizens of NJ excess. Same as in England. You can even use premise based. I think Operators' for some H cases. If you need. And Elsa, Angie says, baked by a great community, that you can reach out on the slick if you have any questions or want to discuss anything or just say hi. Sex and excess provides you a global immutable datastore, components can dispatch actions to mutate the data. You can handle the actions ones they dispatch. You can select pieces of store data using selectors as an expose. The data in a form of observables selector is actually a very powerful concept in engy access. And if you want to learn more about selectors, you can always destock code. The Power of Selectors by Matyas Kanata. I willing I will link that in the final slide. Also you can see and Gick says, as you can see and Gick says, gives you a predictable cycle and it's very beneficial in complex ups with a crazy dataflow. So at some point, you might realize you knew you had enough with Corrective Services in your application, so you don't want to deal with them anymore. And you decide to move away from it to a proper state management solution. So let's see how to convert our reactive services to energy access. So that's the next block of them on. I am referring to the same similar application. So it's exactly it's looking similar, but to work in a little bit differently. So again, it's acounter here. Increasing, decreasing ZEWAIL use. And we get some. But under the hood, it's everything is the same, except now we are using and jicks us. So we stopped him from St.. That's how our state is looks like again. Fibular counter interface with her. It's the shape of our state in that case, number of actions. Every action is marked with the action decorator, which accept action class as an input parameter. So here we have four separate file. Was all your actions actions in just a class? We just started property and the constructor was optional parameter. So it's pretty easy to create connections this way. And yeah, as I think Elora dimensioned curious, Securus is very. Interesting, interesting part of it, Jake says, and it's very powerful, as you can see, as I don't have some action action here because there is no need to do that. And if you open a curious so I have three curie's, so I'm interested in the WELI one. Will you two. Will you three. So I created Securest and I created this magic selecter here. So which is actually looking at the Willis and summarizing them. So I don't have to write anything. A summary in my state. So, yes, that's how the state is looks like in that case. And let's see how actually my components get changed. And they actually really stuck my change. So the you change to The Selecter. So before we were subscribing on energy in it. So just let me just remind you that. So before we got that. So where are you. Which we subscribe on Ranjini. And yeah. So that's a difference now. And you have we still have this update, will you by now instead of actually calling state method this way? We actually despatching an action which updating which of these we use child component. Little child components. Same idea. So and parent company and same idea here. And if you look into our template, nothing change much. I mean, doesn't change at all in this particular case. So see child here. So remember that. And in case of using injection, stop. Look, it's all exactly identical. But now the story gives us most more power for this particular example. I mean, there is no need to use the state management. But if we spoke about if you talk about meat to big size ups, there is lots of sense in doing that. So, yeah, that's how it works, magic, right? And just now, let's talk about Angel excess plugins and Jicks, as has such a thing called plug ins and anti's, where's a progressive part comes? The in system allows you to tap into the state, change its life cycle, so you're able to extend the core functionality. Here's a list of plugins built by community that is currently available as NPM packages. So you can just simply npm install that into your upper up and get the benefit of it straight, straight away. If you want to learn more about plug ins, check out this Yoro and I will show you how some plug ins works in action. Later. Ellson, here is such a thing called an angel excess called Angel Excess LEPs. It is a separate organization on GitHub that exist to test out and prototype new ideas and concepts that potentially may become a part of them. And GICs has core functionality or an official plugin in the future. There is a list of seats available right now. And Jigsaw's laps that you can play around and some of them actually production really. We want to learn more about injects excess laps. Check out this Eurail. And now as the last thing I want to show you and says data, which is a part of the AJC, says LEPs. And she says data is at Persistance API based on repository pattern. It has a lot of magic stuff in it as a main benefit of an Jigsaw's data is added. It has even less boilerplate. So once you use the energy source data, you're right. Even less boilerplate. If you would, just using Kaura and Jigsaw's. So if you want to learn more about in Jigsaw's, then you can check out this Jerrell. Also, if you want even more about in Jigsaw's, you can check out the talk from Marks even off the author of this library. I see. I will link this talk on a final slide. I think the stock in the right here is this stock immersion in the Russian. But anyway, yeah, if you knows the Russian, you can wash it through. Really helpful for you if you want to learn more about injects as data. So let's see how it looks, how. And Jake says data looks in action. It's the last final demo for today. Again, I'm referring to the similar application. Look, can quite an identical. From client side perspective, the same counter. Everything's the same. But behind. But under the hood, it looks a little bit different. So remember, in the jigsaw store, we have this state with a three files action securest and the state here. We have actually one file and that's all we got. That's all we have to write. To achieve the same functionality. So two actions they created his data action. An additional function they created was complete character, which calculates the sum. And here, in addition of undertaking our state with state decorator, you want to take in his state repository, Krater, which comes from from NJ excess slaps data. So. Yeah. And let's see what the it. Is there any difference in components. And yes, there is a bit of difference. As you can see, we're not doing much. We're just injecting the state in the components, that's all. Just to remind you, in case Owens injects a store with Don Sampson. So we use in selectors and we dispatch. Right. In case of friend Jigsaw's data. We're not doing that. Let's see how our template changed. Actually, it doesn't change much or what change just this line. So instead of instead of using loops, instead of subscribing for any observables here, we just call in those. Should the thriller, which gave us the value. And in case of some summary. So that's our container component. And here we are just getting some here this way. So, yeah, as you can see, it's really less boilerplate. So. Yeah, you can try to use it if you want. And you ups and then lastly, what I want to show you is a plug ins. So how does it work? So you as already mentioned, you npm install plugins just as NPM model. And then what you go you have to do. You just have to put this line, like if you want to slogger plug in, you declare it imports this way. And if you want, for example, use the tools plugin you just important in this way, plug ins if you want to use the same pattern of bias in payments total and then imported in that model. So. Yeah. And dev tools. So probably some of you who families redux. You know this redux dev tool. So here you are. All you have to do, just one line of code and npm install and you get this nice plug in. The spike in working. So here is you can see you have two states in Jackson State and my inject says that the state. So you can play around and get all the benefits of reactive tools. This interactive tools, I mean, redux. So and I don't know why I see your act. But anyway, so and that's a logger plugin should appear here. So if you change in stuff, you can see the. Since Slok. In your console. You can explore it. You can see the details of your story. This way if you want. So, yeah, that's how Pagan's works. So just to recap, we spoke about an appropriate CIF state management today, how to approach that, the flaw in angular applications using reactive services, and then how to convert your reactive services to enjoy excess. And then we injects as plugins and increases slumps and we play around this and says data. So try this approach. And if you like it, I hope it will make you happier. Angular developer. Those it's links here. I will add all the rest links I mentioned in the talk and I shared the slides after the meet up with you guys. And again, sink you for listening. Since everyone who came from different parts of the world today to watch this meetup online sync you angara in Europe and everyone who has been involved in organizing these things. Thanks a lot, Alexei. So now I'm going to add all these figures and we will answer your questions. So we'll just go to questions from the chat in order. So, Quest. I already answered some of them in Chadrick and probably just repeat the summary of what they said. They'll start with the first question from. I was asking how you're doing would work with Beijing data, for example, virtual scrollbar, some fetching from this or in general, the answer is it till Ranter on did the first shot. And it won't try to scroll this scroll bar. And also it it works perfectly as fetching better data from the server. It works until Arrison. Is that a big scene? Hello. The second question since also for a constancy and somebody has a blogging site with dynamic blogs getting edited by users. And the question is, would there be a good way to render that? Yeah, except if we are able to if we're able to handle no data changes on the server, for example, it is e-commerce. We can handle that. Your product was added. So we can just generate as a page and or edit our disk. But if it is a lot of logs and we are not even know when I when they can be added, I think it is perfect to try from the beginning server side rendering, then naming Sarah Subtrend drink and then try to integrate pandering for some static pages or for some at an all played Phaedrus, something like that. And then the last the rendering question is going to SSR question. So somebody Estacada the website, Google picks it up but the Facebook crawl, Carlat doesn't. And I think I'm not answering it. Special tags, right? Yeah. Maybe the reason why Facebook doesn't try to fetch that data from the blog is why is that? Is that Ojito is not set it up well. And then it was about a question for Alexei about the difference between and Jack says and directs it to us in some way. How can the slides. I don't have his answer to this question on the slides. I mean, have the slide. But what they can tell, what is the advantage? Look, I mean, it's like you can achieve the same goals with both of them. It doesn't matter which you use, but it's Ole's difference here. So the sinking. So how you sync how you approach state management, which you have those. Right. As I mentioned in your talk in GIC says give you this push is a problem in angular fashion. Right. So you're playing the same sinkin as you would develop an application. You're using dependency injection and using decorator's heavily in case of inject sense. Source says zno is like a different sinkin right. So you think differently. You think in one way when you. Using energy excess and you see a different way when you use an energy, Rex. I mean, I can tell there is. I mean, you can come up with advantages yourself, if you like. And Durex, you can see cause as advantages. And if you like and Jack says he's seen all the action is there is an advantage just right. So I don't want to get into that right now. But yeah, you can achieve the same outcome using any of the state management rasa, any Dissinger excess or Ingenix. So I the main one, probably excess, has less boarded plate, but I know and Djuric Steam asexually done a little bit of work. So there is now less Braithwaite and indirects and a sink. And Jack says it's a little bit simpler to use and simpler to learn. So he doesn't have this notion of effects. You can do everything using actions. Yeah, that's probably my answer to that. Since your question, by the way, if you want to discuss it, continue discussing that you can join a natural and cooperative. Pronounce your name right. You can join our Slark and we can discuss there. Thanks. Well, and the last question is also for let's say it says you first some English tutorials, which you would recommend for. And Jack says it seems like them. Dispatch. Yeah, it's a good question. You probably have to check out the docs, but I'm not sure if I see I can't point you out right now into anything like that. But let me sink and I. I link somewhere maybe to the slides, to the last slide on my talk or I'll share the link somehow. Was you d.g. Oh I think that's it for the questions. I would like to thank everyone for coming and speaking. Where else would they get an opportunity to get to a means to live in state? Let's hear or see if there are no questions. Thanks, everybody. I hope this first test, the meat that Frango Nicea in the Corbett era and. Well, yeah, I have one question I seen, so guess it. Yeah. And constancy like you were talking about Jim's Steak Day, which is pretty cool topic. And like, what do you think you have say is this just case people. Just this simple bloke. Right. You have a list of Block's posts. We shoot fishing from, say, kill Ippei. Right. So which approach would you recommend to go Universal or Scali for this particular case? I'm talking about you, operator, and you up like a listing book boss. Like you can go to details, you can read the book and other books coming from some API. So you at some point it said, hey, I want to actually Perenjori, I don't want to deal with the seller. I don't you know, I just want to print there every scene during that time and just publish it like that. Yeah. What do you think about your man like you wonder special. I don't know. Panel which allows you to like to mark all of the annual pages which you want to render. Stuff like that. Or if it'll get under it, all of the pages during built time. Right. And say you want to go to databased defense. So you want to execute all your services. Right. To fish the data. So all that magically will be executed during that time. Right. Using the universal print. But what's the story of his escala? How would you. Is there any difference? How do they approach it? I think both approaches are considerable, and it also depends on which format of data you have. Yes. As you mentioned, for example, or graphing Carol API. I know that gets me works like that. It provides graphical API and the build time around the roll pages. So I don't know. Well, again, for Skully for graph, he'll probably is not yet ready, but it's not so hard to implement it. Yeah. Also on the second point here is that if you have really a lot of pages, probably universal is the better way because some big benchmarks that I've seen on the Internet says that scale is a bit not not good with a lot of data. A lot of patience. Yes. If you writing Daily Telegram or some scientism, millions of stories. Right. Scutti won't be actually. What's what will be the problem when you print into a million pages of sensuously issues? It's performance issue. It's built time. Yes, I know. Get me has already solved this problem because getting me knows what's what pages were already generated. And I don't need to regenerate them. But for Scully it's did. This fish is not a trade. So it means that every time we you overeasy. I see. I see. Yeah. I want just to add an extra to it. Maybe it will be the answer of the Ahtone then of a question. Yeah. I want just to that. The difference between Scotney and angular brander is that Skynet really like it is. It executes Chrome had had headless browser and it like renders like naturally every scene on the page and then it saves them a snapshot of your page. But angular works and that's the way it is. It's based on angular universal. So it doesn't open any pages. That's why there is a difference between generating pages. But yeah, answering on the question of what the benefits of. Let me just start from the benefits of Angular Brender and then we'll we'll continue. I think that the benefit of Brander is this speed of generating files. And also I say, as far as I know, draw less back bugs. And it is more like angular way feature, which is easy to insert in your project. So, like, really low threshold. And it is easy to try. Hmm. Yeah. Yeah. Benefits from Skully. It's like the downsides of universal. But me maybe outside there's a difference. Yes. I mean, yeah. If you don't want to change your existing and or app and you just want to integrate some third party stuff and get to your static pages. So Scarlets a good way to get it. But also, I can share you also after after our discussion, some benchmarks and yet for really for for example, for 10000 items for ten to ten, ten thousand pages. Universal will foster like ten or ten times probably. Right. Right. Yeah. But as far as I mentioned, it's fresh, it's in development or a small project. So it's okay. We'll get zero right at some point here. Okay, cool. All right. Any last words before you say bye? No. No. Singing Thank you again. Yeah. Thank you all again. Thank you for Forell speakers sound. Uh, well, could you Konstantin, please, uh, send my thank you to your doc. Of course. All right. Well, I am turning in my thanks to your cat, everyone. All right. Bye bye. Cool. All right. This concludes our first experimental stream, this being me on Twitter or ING Anglo invites me on Twitter if you want to speak on one of future events. Now that we're starting to do more of them. Have a good day, everybody. Buying.