Video Feed
Using Angular and RxJS | Lamis Chebbi

0
Angular
02.14.2021

English

Lamis Chebbi

Transcript

Hey, what's going on? Welcome to another episode of Angular Air. I'm your host, Justin. And on today's show, we are going to have some recipes, maybe a little food recipes or maybe some code recipes or maybe a little bit of both. Our next guest, I believe so. Looking forward to it. Say hi to our panelists and then we will meet our guests and we'll get into that content. Joining us today, we have Lamis Chebbi. How's it going? I feel excited. I officially not officially met Lamis. I mean, oops, just totally spoiled our guest yesterday drink already during a meeting. And she was like like just like laying out all these ideas. And I was like, this person is smart. I should listen to this person. So I'm totally pumped to have her on the show today that you're supposed to wait until the last panel is to spoil the guest. We have tradition here. I couldn't. I could not. It could not. But that helped you look so good. I love your background. I can't even be upset with you. Bonnies with us. Bonnie, how's it going? Hey, you haven't been around for a little bit. So, so great to have you back. How's it going? I know it's much later here, so sometimes it's at the end of the day and it's crazy and I'm tired, but there's no wild horses. Could not keep me away from Lamis Chevy. I mean, whoever our guest is today, mystery guest, you know, you say that saying a lot. And every time you say it, I imagine you riding a wild horse, like off into some awesome thing. Oh, yeah. Oh, yeah. I'm saying it that you really go. I'm curious, though. You say it's later there. I'm getting older and my definition of later keeps changing. So what time is it? Six p.m.. That's why I got you. But some but I mean, sometimes it depends on like how long, because sometimes it's been a long day and I've been sitting in this chair and it's been crazy, but. Yeah, but I tell you, six on forces. Yeah, yeah. Between the chair and the wild horses, it's been a busy day. Sometimes I think I'm going to change up the introduction of our panelists and just like introduce all of you at once. So they get to talk and then I'm like, Hey, Mike, hey Bonnie. Have like I haven't even said Hi, Mike. Hi, buddy. So, yeah, I'm confused. I just have to change up the situation. I don't know. We almost started late because Justin was trying to get us all to behave ourselves and Mike would not stop being funny. And Mike looks like a serial killer in the Twitter photo. Oh, my God. He actually scares me. It's actually frightening, Mike. And then we told him to stop making the scary face and he made another face, which was also funny. And Justin's like, y'all behave yourselves. Come on. Let's go over here to talk about angularity. All right. I'm going to one more detail. Mike, how's it going? Good to health care. It's going well. Protect your neck show. Just say our panelists today are Michael Jackson, Bonnie, and just move right into the gas. That's a free for all. Yeah. And don't talk. I love that. I agree. I probably need to see our our guests as well, because apparently we'll talk about that as well, which I don't know. You know, why I go that pattern? Because we're in a video. We can kind of see everybody's I don't know. But anyways, it's destiny. Yes. Tradition. Right, right. I guess today's Lamis. Lamis, how's it going? So happy to have you here. Thank you. Had asked me to. Hopefully we're not being too crazy for you. I love you so much. So I'm getting a little wild here in the introduction. So I want to fill us in a little bit about yourself, what you're up to, who you are, that that's of. Yeah. So my name is Denise. I am based in Tunisia, in North Africa, near the Mediterranean Sea. It's very warm now. 20 degrees like. Yeah. Twenty degrees. Yeah. We still can go to the beach, so it's cool. And I'm a senior software engineer. I've been into Angerer for the past few years. I was in the I mean, I was a Java developer before. I am coming from this Java land. Yeah. I was the I experienced the golden age of Java and then I made this move to the front end, the modern web of angular. Yes. And all this stuff. And I really love it. Yeah. And I'm reading now a Negro team in my company. And in parallel, I started as a speaker content creator, trainer, and I'm advocating in favor of diversity and in favor of Angerer. Also, I am already a member of the Women Empowerment Communities. Women who code women have codes then. And this was the experience for me because. Yeah, so the first time I attended a conference, in fact I was I won the tickets on the ticket with women who code the community. They give some free tickets for. Yes, for the community. I want the ticket. And I went there and I was inspired. I met and I met incredible individuals there and it was really amazing. I get inspired and said to myself, I want to do this. And I started my career as a speaker. So yeah. And yeah, that's it's for angular now. And yeah, I have to find out if Ingleton is that also. I think I've said, well that's it. Nice. Nice. You wear many hats and accomplish a lot of things all at once. How do you time to do all of that. Yeah because I love to do it. I'm really passionate about it so I can fight myself to this the time. Isn't it great how that passion can really drive you to do beyond what maybe you're planning to do? Right. It always kind of I find that for myself as well, that that it's just the passion of things, the passion of helping people out and teaching and things like that. It's like I just want to do more, even though maybe there's not enough time. But you still find a way because it's just so rewarding to do that. So yes, yes. It's energizing also. When you you give help, you give I mean, some I don't know, some resources. People are happy or students are happy about what they are learning, etc.. You share some content. And someone told you that. Yeah. You helped me a lot in doing this and I was struggling with it, et cetera. So, yeah, it gave you back some some good energy and makes you feel great. Speaking of good energy, you have some of the same friends that we have. And when I when I found it because I didn't know you when I first met you, I was supposed to do the community interview. And so I talk to you. And also when I saw that you were referred by my clad key and Web days, I was like, oh, this girl is going to be trouble because I just love those guys. They're wild and crazy and fun. And and then my daughter saw my she came in here to talk to me about something and she was like, let me check what, you know, her. And she was like, I love her. And I was like, how do you know her? So, yeah. So your name precedes you. So thank you. Yeah. They I met Dave and Michael and Spain and it was my first stock and they helped me a lot. They hit me great. Yeah. And they were very, I mean welcoming and I felt home. I mean yeah they were really nice to me and I love them. And yeah I also I saw. So the talk of your daughter of the mentor Angie Angie, to be able to be and you know, and it made her happy. Yeah. I don't know what you said to her. Let me see. But she never forgot it. And like every time she sees your name she's like, oh yeah. Think other states. Yeah. And I was like, yeah, I was I was watching her from the beginning till the end. I want to tell you that I am a person that has a short attention span. I mean, I can't follow for one hour or something. I'm totally lost. I have to take a break. But yeah, I was someone that was I mean, the full talk. And I liked when she said that my mom used to punish me by creating some websites. Yeah. So this is a creative way to punish children. And I love this. I'll never forget the punishments are my specialty. Yeah. How did you find I'm joking. Just always be kind. All right. Well, shall we dove into the content of slides? They're beautiful. I warned them in the chat because I saw these slides yesterday and I was like, I have got to eat before angular air starts or I'm going to be sorry. So you should be seeing my slides. Yep, I don't have a double monitor, so I won't be seeing you, that's sad, but I'll be going. OK, I folks focus on my presentation. Do you see my screen? Yeah, we do. We'll give you a heads up if the slides disappear for some reason. Otherwise quiet, then everything's going good for you. Yeah. So it's about a song that you Espy's using Angular Artigas. Yes. Oh so I really quick that the bar of the stream you are sharing your screen you can click the hide on that I think to get that off of the overlay on your slide. So it did OK, I. Yeah, there you go. Perfect. Thank you. OK, I can start. Yeah, we're so ready. So, OK, so I'll be talking today or I'll be sharing my healthy recipes using angular and ideas, and when I say healthy, it's something that we achieve at the lowest cost. I mean, with minimal code. You're good to go and you have a pin code maintainable and really. OK, yeah. And you achieve it with with a performance solution. Also, this is very important. So I'll be showing you a patient with you some situation I faced and how I dealt with them using angular. And yes, I will skip this part because I've already introduced myself. So first disclaimer of with pictures in this presentation you made for esthetic purposes. I mean, it does not reflect any of the angular and arkadiusz concepts described in the next slide. So don't try to make relations between the concept and the food picture there, because there's no I mean, no relation and it doesn't make sense. But it's OK. I loved it. So I would start with the first recipe, which is bulk operations. OK, when you're working with a wistful API and you have a very slow backhand and in your front end, you need to run parallel network requests. OK, so how we can do this in a reactive way and a half way also performant and we have a minimum of code. So just to demonstrate this, I have here my UI layer and she's made with Angular and the rest full server. Right. And I have an action that will trigger and request I mean more than one week with at the same time, OK, I want to do this one shot. And an example for this is the upload upload types. OK, you might have experienced this in your application. You need, for example, to do a bulk, upload your uploading multiple files in one shot. You don't care about the process, but you only care about the result in the end. So you just want to display to your users whether the upload has been successful or not. And if it's not successful, which file was which which files. I mean, fails in the in the upload process and that's it. So one shot and one result at the beginning. So for this we will need some ingredients and we will need the fork joint operator finalize and also and a custom function in order to achieve this requirement. And I will start with the focal point operator and I will explain it a little bit. So the first drone operator for I guess is falls into the category of combination operators and there are so many operators competing streams in our exchanges. And for the conjoin, I call it severe, if you want, because for could join, just launch the streams, OK? And it doesn't care what happens to the process through the observer, the immense value, he doesn't care. He only cares at the end when this team is finished and the observable into the less value he takes this value and makes it to the subscriber, that's only the lowest value of its stream. So if you can see here we have the three streams. The less value of each stream is the value that will be admitted to the Kleiber event. And this helped me a lot to learn our yes, when I first like I was reading about it and reading about it. And as soon as I started seeing the first marble diagrams, I was like, oh, OK. It just it's so helpful. I love it. Yeah. Marble diagrams are comes in handy when you start learning, operator, etc. because you need to see the result, the output and the input. And I think it's very it's very clear in the marble diagrams as. So. So you will you will get the result as anywhere. So here is G four and that's it. So and all the streams will complete, even the four streams will complete. So one shot, it missed one time that that's why we call it severe operator. And that's why I need the bulk operation. I need more ice cream. I don't care if the image values in the process, but I only need the less value and so I will demonstrate this into code. Looks like this here. I put the streams, I have my upload service, which contains an upload file method that takes as a premier the five to be uploaded and returns and observe the unobservable of file status. OK, whether the status is successful, I mean. It's OK or something wrong happened, so there is an error so uploaded with errors or upload successfully and each time I have different inputs, so I will have to request I was wrong to request this is my Bulc operation and I am just passing it to the joint operator. And at the end I will get the result which will contain the status of the first five and the last status of the second file. It will be in order even if the second stream completed the first. For conjoin, we expect to order first in, first out, so it will be the first result. Then the second result of the past observer here in the years, and you can process the result here for demonstration purposes. I'm just log files uploaded successfully. But you will maybe you will be doing for sure you will be doing something else in the real world application. And also keep in mind that in real world application, you will not call here the observables one by one by one because the list is often dynamic. OK, so it's simple, nothing fancy. You can just map the array of your operations. You can put this dynamically inside an array and map it and return the observable array of observables. OK, that you will pass to the operator is not something really complicated to accomplish. OK, so here I have the result of my Bulc operation, but still, as I did, I am not here. Conform to the specification I described earlier to my slides because I only have the success callback. OK, so if something wrong happens. With the upload, I mean, within the upload process, if this method throws an error at the client level or at the server side level, nothing will happen. And you should keep in mind this. This is important. I mean, this important trick, the four conjoin when the operator will complete, when one of the streams throws an error. So you should be aware of this behavior in order to handle it in your Web application. So here, if my upload, upload, file method throws an error, then nothing will get omitted. Even if the second one succeeds, the dream is completed immediately after an error. So nothing will get omitted here. And I will get upset because nothing will be displayed to the end user. And yeah, I want to know which five. So it was an exception was strong. OK, and in general, there are some information that the user cares or should see, for example, may be the size of the five is too big and exceeded a certain limit or the uploaded type, for example, is not supported. I don't know, for example. And he is not supported. And I should know that not to put it in order to build another format. This is an example. OK, so an upload files, those are the limits, I mean, in general that the user should see. So I should see this as a user and the process should not get blocked. I mean, I should proceed the process and end it with a final status. Who succeeded, who face. And here we can do this. I mean, you can achieve this again using because. Yes, with the catch error operator error here is not the correct place, but it's OK. So here we should handle the errors in our observable and we just choose the catch operator and draw up the observable into the error into unobservable. OK, so I am kind of telling the stream that OK, you so you are alive. OK, we'll keep you alive. There's an error. No problem. I will drop it into another. Observable by this observable should contain the details of the error. This is so important. So here in my case I have just the the final status and the error message. That's all. But I should. Wrap the errors and the the I mean, those is the result in the observable should contain a description, OK, to be able to differentiate between the success success case and the case. And yet when you do this, the jury will not complete will. The wait for all the observables stream to complete and we will get a status, OK, so you will get a status the final the final status now and if I want. OK, so I manage or I handle the both success and I don't use cases. Now, if I want to execute a side effect when each stream completes. For example, in my case, you can see I want to calculate the progress percentage of my upload process, OK, for when the first stream finished or the first upload is performed, I need to show to the user the progress. Three percent, 15 percent, four percent. I don't know is the progress of the upload process. So how can we do this? As you can see here, I put in addition to the code I showed you in the slide before, I have here the finalize operator that use it with or I combined the catch and to finalize and finalize, I just call the calculate progress percentage method, which is a custom function that tracks the progress of the upload process. And I return just this progress. And with this progress, we can do whatever you want. You can put it as an as a property in the component component component and just to share it or pass it as input to your progress by component. Yeah. So you can do whatever you want with this process. Still you can I mean, put a side effects on on the completion of each stream. Yeah. And this is how I dealt with the whole story. I mean with three operators, catch error, finalize for conjoin and the custom function. I resolve this, this issue. I mean the bulk operation for my case is upload to upload all, which is a recurrent case in the Web app in Web applications. You can deal with it this way or you can, I mean, make the similar logic. But in other situation of book operation, still it's still work. Yeah. In all the cases, I think maybe in some cases it's not. But in general I think this is what you need. I mean, when I say book operation, it one is one shot. I need to know the final result, success or error. I need to handle the errors. I need to do a custom behavior. And I maybe I need to also track the completion of each stream to do something. And yeah, you can do all of this using those three operators. This is the first recipe. Let's move to the second one, which she caching really click on the first one. I just want to mention that if it's really cool to see, like if you've ever done like this both type of stuff in the past, right. Without observables and have gone down that journey of doing that and now seeing the recipe here of how that same thing could be done in observables, it's really cool to see. Yeah. Yeah, I struggled with it. I mean, and the both ways, I mean I when I was working before with traditional JavaScript application, I was using Google App Toolkit at the moment and I dealt with this scenario and now I'm dealing with the same scenario, but with anger and I things like, yeah, I mean I have three, three, four, five maximum ten lines of code and I am done with this. But before I was. Yeah, you can, it's not, it's not the same. I mean reactive programing comes handy in many situations, but you should stop thinking and proactively think reactively and then do the switch. And when you do the switch you are. Yeah you can do many performant things using. I got one quick question for you. Yes, you mentioned you came from doing a lot of Java. Did you do reactive stuff in Java as well prior to this? No, no. Yeah, I was doing all the impressive programing, the Java. I didn't use Java. I mean, the the last version I used was seven and then a little bit of eight, but not to. I haven't dealt with it using Java. But I think it's the same I mean, the same paradigm, maybe the same concepts with using fictional programing, I try to better and observe a pattern, all the stuff. Uh, yeah. I think it's it's easier with the last versions of Java now. Yeah, go call. OK, so that was all that sorry. Oh, no, go ahead, feel free to jump in. I like it. So the third recipient, which is catching gashing because here I am also pointing out a wistful API is full back and it's like a full stack thing here, quick recipe for a full stack thing. So if you have many components and you have a service for my case, it's recipe service, obviously. And I have in my recipe service, I have a recipe stream which contains the list of recipes and. Every component in my Web application can just subscribe to Maistre to subscribe to the stream by injecting the recipe service, by injecting the service in the components and when they when they do this end times. Even if I mean, if I already called the server once, I mean here for recipe's dollar, I should mention that for recipe's dollar, I am collecting the list of recipes by calling an API. OK. And I will perform an issue with there and all the other components. If they need the recipes dollar, you will see many holes in your network. If many companies will subscribe to this to the stream and the calls will be multiplied in your, in your, in your network and sometimes you don't need to recall the server. OK, so you need to cache this information. And caching is a very good solution that works in the backend, in the content layer to enhance performance. OK, so to enhance performance though, the user experience. OK, but here I have to stress something. Not everything is cashable, so you should be careful here about this. But you should ask myself, is this resource cashable or not and how to know this is OK? Does this force change when other compas I mean, when many components call it through the through the through the user session or something, I mean, I can expand it further. For example, maybe the API returns something static in this way I can cash it. For example, the list of currencies. I know that the list of currencies will not change throughout the application. So it's static even if multiple components it that will always return or receive the same list. In this case, it's always the user information. For example, the logged in user. Maybe the information of this loading user are static. In some cases they are not. But this is the idea. But if my service, the the the backend service I'm calling has different inputs and it will return different results according to this input, then you have to be careful, because even though I have two components calling the service, those components would not should not get the same result, because every component give to the service a different input. And if you cache the resource in this case, then every all those components will get the same result and they should not. So you have to be careful, you have to ask myself if I can catch this resource or I can't, if you can, it's OK. Just go ahead with calling the police several times. But if it's cashable, then there is a solution in order for you here to see the double calls in the network and expected in order to see the double calls and what we need in the situation, our ingredients are shared replay and catch. Operator, you will see the catch operator in every ingredient. It's something that we should put in every recipe. So, yeah, handling errors in something crucial. So I will let's break down what's going on in this service here. I have to stress something very important. You can see here the list of recipes, the recipes, daughter, which it's unobservable that contains the list of recipes that I retrieved from my API, my server, Apache's, which is mentioned here. And this is a very recommended pattern. When using Angular and Akis, when you collect things, when you want to collect data, it's highly advisable to put it in an observable property that you can share publicly with other components. OK, here observable is an attribute of the healthy recipe service. So you can still all the components that can inject this service will get access to the stream. So here is a fairly I mean handy way in order to put in place a reactive mechanism which will help you because it's kind of having all those teams in many services and all this all the components can get the streams of those services. So you can still manipulate all the data of the application streams. So you can be objective this way you can do many things about with those streams, can combine them from them. So this is a very fragmented pattern that you should take care of also because it will help you in the implementation of the concept later. Real, real quick, because that's a very good point. So the point that you're making is not just exposing the observable because you can expose it in multiple ways. You're talking about exposing the observable here as a property of water through a function call, correct? Yeah, yeah. Versus a function call. Yeah. That said, you can I mean, the first way, I mean when I start learning RJD and angular, I use put here a function, let's say in my case get recipes for example, that will call the I mean my API or my back and forth here. But, but you can't, I mean take advantage of the stream in itself as a stream as an observer. And this way you can this way you can manipulate all your streams as an observable. Because it's safe to do that because essentially observables work out to be read only that way of providing value to somebody who's listening and ways to actually add additional value so much everybody's always going to read only value. Yeah, that's true. And do only you you get tired of calling those those methods and the energy on its life-cycle hook. So yeah, you can just put in your component, do the same thing and just collecting it and then do what you want to do with it. I mean, transforming, getting data back into the template, etc.. So it's really it will it will help you also. It will enhance your performance in this case because otherwise it will. When you put it in the neat lifecycle, it will call it every time you render the component. So, yeah, this is an important point also. Another advantage. OK, so I say, so this is the part of of the collecting of collecting the recipes as a stream, and now you just can call your share replay operator here after in. After Parthenios three, who are observable and also I am catching the arrows and calling a specific function here. So it's the process in my case I always put custom function is my guess and function to process errors. And I recommend this also in catching the the the errors, OK? And so that's it. So you just use chair replay and. Sure, we play, we share the observable with all the subscribers. OK, so if you have three subscribers then they will share the same stream data and they say so this is a quick way to cache resources or data coming from your API calls, in my case with with all the subscribers. So this is the second Giuseppi. Now let's move to the third one, which is combining streams, or I can call it data joining if you are familiar with. Q Well. And relational databases. And remember all the tables and how we join the tables in order to combine the data in order to return a result. Yeah. A specific result in a specific query then. Yeah, it's the same, I mean the same concept here. And as we have all our streams separated in many services and we can every component can just inject and subscribe to those streams, then we can for sure. I mean, whether we transform, transforming those streams, combining them, we can do similar things. And if you have this use case of combining streams, then all you need here, I mean, your recipe three ingredients story is my latest error and the structuring technique. And here when I say ingredients, I mean the ingredients in my recipe. But you can find other combination operators that you can use and they can come in handy in your situation. But again, I'm just describing my need of of combination and the combined latest operator. I will show you here the combined latest process. So how how how it works. So the combined weight will start. Mitting will always be the recent value of the streams given as input. So it will it will not start mitting unless one of the streams at first. So if in this case here I have two streams and it's for example, the less emission at this point of this stream is a the stream is one. So it will be a one. When this team admitted the last body, for example, the first one it was the last one is B at that point, the second stream is still have as a recent value or as a lesser value one. So it will be one then the stream emitted. So the less value will be to and here still no value. The last one is B, so it will be the two and so on and so forth. So this operator will make you always able to listen to the last values emitted by your streams. So if you want to get notified every time there's a new value and you have separate streams so you can just do combine the latest and do your job. In my case, I have recipes and reviews and I need every time displaying the recipe, every time to display to the user the list of reviews or the updated list of reviews. But in my back background, I have different URLs for Espy's and reviews. So here you have the list of recipes as a stream and the other list of reviews as a stream. And they are not I mean, combined in the same API. As I said, I have support APIs for both data and otherwise I don't know. We can't join the recipes and the reviews in the same API because a recipe may have one hundred or no reviews. I don't want to carry all this at every time in my communication, so I will always I'll be always showing the letter, the last reviews of every recipe, maybe the the, the, I mean the updated number of all the reviews and maybe the five latest reviews or something with details. With detailed description. In this case, again, so Kombai latest was a very good fit for me, and it was because it helped me get every time the last version or less data of the reviews and again, the last data of recipes. If I have a new recipe, I can get the last updated version of this data. And so, yeah, I used to combine this and you can pipe it and then just use the map operator in order to map the result. And here I'm using the array structuring technique in order to split it down into an array with two. I mean there are two Orazio recipes and reviews and you can do something after both recipes and reviews have submitted something. OK, so again here for the most trading purposes, I've just put in a comment, but you can I mean, do many things here in order to process your data. So go ahead with combined latest when you are really in this in this scenario, you have I mean, different apps still here. I am talking under the umbrella of a full stack. Think I have a restful API. I'm doing many EQUASS. All my data are carried in. I mean, yeah, I'm using some data, etc.. And your streams are separate. The Packers are maybe also separated, separated, API, etc. but you need that you have the same kind of relation between them so you can use one of the combined combination operators available over there and combine this is the specification of this. It gives you the estimated value of all the streams. Yeah. So it comes in handy in this way. Now let's move to the fourth recipe, which is avoid memory leaks. And here here, it's a very important, like very important memory, a very important subject. We were discussing it in the coming to this day with this app and yeah, the reactive chat. And when we say memory leaks, when working with angular and architecture, there are many important things to take care of. Menus and subscriptions is one of those things. But there, among others, they say, among others, we have a subscription. So I will shed the light now on the subscription thing and how you deal with subscription when using Angular and Archie is the first way, which is OK, I forgot the ingredients. So what we need here is asynchronous, I think Antal first day class and first operators in Agas. So the first things to do, maybe you can let Angular manage the subscription for you and how you can achieve this using the very famous pipe, which is the async pipe for those who don't know it. This pipe, first of all, it's subscribers automatically to your stream and Bestival unsubscribe automatically from your stream also. So you don't have to manage the subscription yourself, but it's not always possible to subscribe at the top level at least. I experienced this many times and I think that many developers also experience this. Sometimes I, I can't I just can't use the asynchronous I just can't put this observable. It's not in the template. Thanks. Yeah. It's something I manage in my component. So in this case, to augment the subscription for you and how artists can manage the subscription for you through some operators if you're working with those kind of operators. I mean take, take, take that first. You should be aware that AKAs. Yes. Execute the operator process of this operator specific process and then compress, for example, here. Four, take five, we will be emitting about every one second to the five first values out of them. And in my case here, I'm just logging the values I was saving. And then at the end, it will be completed. As you can see here I am just logging in the console competed to just say that this the stream completed and it will be completed. So if you can use one of those operators. Do it because it's again, it's highly recommended. Let someone else wins the subscription for you because it's not recommended to subscribe yourself. It's a very bad pattern. And maybe someday in the future or next year, we'll handle this out of the books. Maybe it will be a built in for this. I really don't know. But just take care of this part. If you can optimize this, do it now. If you want to look further, if you want to use any other libraries. There's too, I think, interesting library and destroyed which provide a specific operator asks operator that will manage the subscription for you from all the observables you're using in your component on this. After the undestroyed hook and the anger, which is also L'Abri, that too many things, I mean, in terms of performance and managing state and also managing subscription for you. He isn't that written by that one guy? What's his name? Mike. Mike. Something or other. Michael, let me know. I'm just picking on and he who has some really nice lives. Yeah. Yeah, I think yeah, those are really good. Sorry, go ahead. I mean, I just got excited because I go I'm like that looks just like my. Yeah. At the website. This is new. You should check it out. So check this out. It's yeah. It's something that that's really, I mean, helpful in many situation. And those are families to know if anything is available yet for regular 11, you know, off top of your head and the until just right. No, no, not that it's OK now, but yeah, maybe it will be planned for the future. So, um, so this is some library, some some developers also use in order to my subscription. But still, if you don't want to include a third party dependency and don't want to to do this and you can't let that an option for you, you can choose the asynchronous buy. You can choose one of the ideas over it available over there. You don't want to include the library, then do it yourself, but just be careful. And here there is a recommended pattern also in order to measure the subscription and the energy on this toy lifecycle of your angular components. As you can see here, I have this dream. OK, so this is my dream. I am subscribing to it in the energy on it. And yeah. So this is what we should not see in your code. But as we said, you are forced to do this or you don't have the choice. So you should be aware that you use the take until operator we can use it and the operator and pass a specific observable here. In my case I have a subject, OK, that when the subject will complete, then the completion of your subscription will be triggered as well. So this is very useful and you can just decide when you want this subject to compete. In my case here I am just comparing it and the energy on this toy. You can do this and yeah, this way you have I mean, you manage the subscription and to have memory leaks, OK, you can also I mean a call the subscribe directly or unsubscribe so indirectly on your subscription, in your energy, on this toy, in your angular component. And maybe you are managing those observable in your services. So you have to be aware of this. You shouldn't subscribe inside those services or do nest subscriptions. It's very expensive as an operation. So yeah. So always make it centralized in your components and yeah. So as I said, you can do unsubscribe directly from the subscription and if you are using any of the combination operators over there, much as an example, so you can just exclude and subscribe on the whole subscription of the result of the merged streams. You can, it will manage for you then subscription for every stream one by one. Yeah. So that's it for the for subscription. And I will be delivering a talk which is focused 100 percent on memory leaks and the performance, some of the pitfalls that you should avoid and some of the quick ones that you can put in place in order to fix memory leaks and performance issues. So just check out this GitHub story and get a community and get on missions and we will get notified about the date if you are interested in this in this subject. Now, the fifth recipe, which is sharing data sharing data between components and this is also a very rare occurrence. We use case. So what we need here, we have one secret ingredient, which is the behavior subject. We'll need to nango surface observable in a update function. And here I will just explain. But they need. Or the requirements, so here I have my data, which gets updated by one component and consumed by other components, maybe all the components of the and consume. So here, when you when you will show me this, I will tell you that your application is subject to state management. You should manage all this in one state. And I was I mean, really to commended this for many developers because I put in place a state management using a management mechanism, or I manage the state because I worked with big applications and those applications were subject to state management and managing all this in a simple state, which is the single source of truth or something really rewarding for us. OK, because before we used to manage this, I mean, randomly without state management, but I used analytics, by the way, and there are many other state management libraries. Yeah, but the state management library I used was Interex. But again, some in some cases, people don't need state management. They don't need segment, but they have some data that they need to share. Yeah, only one kind of data that they need to share and they don't have to. And this is a I mean, a dilemma. I mean, whether we should go for state management directly or not for me, I think we should study it first. And if your application is subject to state management, then do it. If it's not, don't do it because you hurt people putting in place or. Yeah. Or you want to just to just put in place. OK, I think this is a subject that we all faced at some point when we are learning English, etc. . So if your application is not subject to state and. You just want to manage a small part of data as a single state, or you just want to share a specific part of the data with your components, then you can do this using the behavioral subjects with with and and your subject is a special kind of subject in. And I see subjects as observable and observers at the same time. And this variant of subject makes you able to just store the last version of the data omitted by your by your observable. And this is very handy, comes in very handy in state management things. And when you see the implementation of all those web, you can find them based on behavior subject, I mean, at least engineering. So if you want to do this yourself so you can just hear there is a recommended pattern also in your service. Again, you can just expose a behavior subject which will be private and will get management manage you inside the service. And you can expose as an observable the observable expected from this behavior such as here in my case initially, I have nothing in this behavior. Subject I think is omitted. It's empty. It's the I mean, the empty is is limited. And when I obtained the recipe, I have a method here that updates the recipe. And when this method is called, I will trigger next on this behavior subject in order to get the recent or the last recipe title. And in my component, I am just calling the event for me here is unclick and I just update the service by calling this method in order to when you update this, this, this recipe, I mean you call the update service, which takes into we take as a payment of the last version of recipe here I here I just next or omit this value the recent value to all my subscribers. So everyone else of the application listening to this team will get the lowest error. So you can see your you are just changing. And if you have many components and if we, I mean if you have a car, many cars, for example, each card is related to a negative component. You can see all these cars communicate when a value change in one card thanks to to this to this pattern. I mean, the behavior subject. You subscribe to it and you will get notified about the stream, the data by this stream. So if you have this requirement, then just try to use this pattern. Maybe it can be helpful for you. The next recipe is we'll say we're running out of time. OK, I have I have to work. Well, actually, we did run out of time, but that's OK. But we also have the community hang out right after this. You have to have a couple more recipes, right? I have through two more recipes. Three, do you want to kind of skim through them and then maybe we can jump over to the community hangouts and go into a little bit more detail, because I think some people have heart stops and they have to get back to work. But I love it. OK, so five minutes. It's OK. Is it OK, Justin? Oh yeah. Yeah. OK, so I work quickly. So here this is the second recipe is real time using the WebSocket so you can I mean process or consume real time data that coming from a WebSocket server space tourists also support this kind of of of data push data from WebSocket server through the WebSocket subject, which is the secret ingredient for me here. And you can call it and just push past the until I mean, do you want your WebSocket server and you can start to get emittance values from the sweet time server. You can also trigger or override or they say provide some custom behavior in different events of your life cycle. OK, and the opening of the of the of the connection, the closure, etc.. So give it a look. It's something helpful. I have to get Harbord toys on this. It's in Google Dashboard. I wrote the articles and spoke so much about this in detail. So check it out. And the next recipe is Bentinck Performace. OK, so you should bench and measure the performance of your application. And here is some secret ingredients. So you can I have so much explorer for analyzing the mental size you can put in place. Also, don't forget to put in place the change detection strategy on push to minimize the change detection cycles, which will get triggered when the inputs, outputs and when there is an observable called in your input template with a paper asynchronous async. So yeah. So just consider the input strategy because it was a lazy loading of your routing modules compressed. Your application is very important to minimize the Bandel size. If you're using Meningie for a structural directive, then give it a try its performance and consider state management in case of big applications. Last one, stay healthy, stay hydrated and upgrade all the way to the last version. And we are now at the angular eleven point two. And yeah, if you update all the way to the last versions, you get some, I mean, incredible features out of the box and especially performance. Those really the performance and the bendle size. So you're all that you need is this one command engy update. I love it. And there are many improvements in this. In this version, Festo builds with the process. It's I think four times faster than the version nine, the nine version FSL compilation with the last version of typescript. There is the experimental web support, improved reporting and logging and updated language service preview. I love this flag because it's it's helpful when you're in the development phase. It's like you have many auto completions and completion, etc.. So, yeah. So those are I mean, my collection of improved. Thank you very much for having me and the stay safe. Thank you. Awesome, awesome. And those recipes were amazing. Everyone's hungry now. I was fine until the chocolate. And then and last thing was like all the chocolate we couldn't have large. It's like that's said, I'm ordering time. It's crazy. Hungry to eat and to write code. Lots of individual patterns that can be part of your toolbox. And you're writing code to remember each one of those different snippets as you come across each one of those scenarios and even combining some. Yeah. Yeah, maybe you should dove into details further for some concepts like memory, performance, etc., and yeah, but I want to be just quick. I think the other big, big takeaway from this is that you need to where you focus on error handling and that's a big help. And a lot of people were wondering about that. Not many people consider talking about poverty line and more people need to focus on that when they're reading their actual arches. Yeah, yeah. I experienced this. Uh, yeah. I was like I got many errors in production and don't have any information about what happens. Yeah. Because of this. I mean, handling things this way. I think of so much even on working with NGO because yeah. You are in those effects class and you're up in your observables transforming them and you forgot, I mean to to catch the errors. Yeah, but the coast and when you look at that, the dev tools in our browser and try and diagnose that stack trace is crazy, right? So like no reason to have that catch error and stuff, like you said, to be able to diagnose what's going on a little bit easier because diagnosing that that stack of a stream and everything is challenging. We don't have that. Yeah. Yeah. You should take care of it. Cool, cool. Let's do some quick pics if anybody has any pics to our panelists, have any pics. Mike has a point to do, have to find the lone gunman and type of action can be quixotic. I want to find it because I want to get remember exactly who was. And if by some time. No, I'm good. I'll put up a really cool blog post about building a essentially a console table to play arcade games includes the build process and the Raspberry Pi part of it. And it was very cool, very informative and definitely check that out. I will. Plus one for Corey Rylan. I love that guy. I haven't seen it. We should get him back on the show, right? Yes, please. Please. OK, I'm going to have that's a great Brilinta. That's a gear this. Yes, I love America, he's amazing, he's a really good teacher, too, and he's a really good person. Don't get me started, OK? And also right after that, well, right now, actually, they're waiting for us. Let me they're they're they're like looking for because we're late. So let's go. Oh, by the way, you're getting tons of love right now in the YouTube comments. I just want you to know. Let me see. Because everybody really, really, really liked your talk. Yeah, I'm very happy. It was helpful. And they. Did you have any question to that? I have any other idea or good idea in order to achieve this. Yeah. I wanted to hear about. Now, let me see of any pics that you want to share before we wrap up, I want to share the again the ARC's angular library of Michael Liteky. I think we should check it out because it meant the state in his performance. In my case, I used it in the and the real time issue. I mean, I had a week's time application was in whip's office. And, you know, it updates frequently the view. So I got some performance issues with change detection, etc. and this helped me a lot. So. Yeah, and the subscription also itself. So give it a try. If it gets hard, we put a try. I mean, look, it's very it's very helpful. Nice smile. Hey, thanks a ton for coming on, for sharing your time and sharing your content. Super appreciate it. Thank you. Thank you. Thanks for having me. Great, yeah, great to finally meet you. And I was happy. I was I'm still a huge fan of angular air. So senseless. Yeah. So today I am a huge fan of YouTube to me. For sure. For sure. It was great. Yeah. OK, thank you. That's a wrap everybody. And go over to the community. Check that out. Follow up conversation. So.

Blog

Top 5 IT management meetup videos in March, 2021

After our last IT management post about February’s most interesting meetup videos, we’re back once a...

Read more >>

Serverless: Top 5 meetup videos in March, 2021

It’s been a while since we posted a Serverless roundup. However, we’re back now, with March’s top 5 ...

Read more >>

Top 5 React and React Native meetup videos from March, 2021

March is over, and just like last month, we’re here with our hand-picked top 5 selection of the comm...

Read more >>