Angular Singapore #6 - Setting Up Maintainable Angular Apps w/ Juan Herrera

welcome back to uh september from angular singapore my name is chung and i'm a founder of angular singapore because i'm the one who started the the group so you can call me the founder what i don't know i just usually do a lot of stuff here as well as well so um today we are so happy to welcome juan herrera to join us and talk about a very interesting topic does bring also iris and other people to join as well it's been a long time i haven't seen iris so the talk today is about setting up a maintenance or angular app and i will give a brief introduction about talk in a couple of minutes but first let's do a quick introduction about angular singapore and what we are having here so the agenda will be we have some introduction and then we go into the cellular talk and then there's q a and with that um we have some uh announcement from the community if anyone have anyone to share anything to share and some general chat and then we end it uh the code of conduct is quite simple basically it's like we have the speaker here coming and join us and we have other community members so just be nice to each other um it just common sense so with that said i have the permission to ask people to live if we need to what i never really have to do it so just uh keep that in mind the neck meter from angular singapore is going to be on the 5th of october at the same time 7 pm gmt plus 8. we try to do the beat up every first tuesday of the month we have a discord channel this one is basically the uh channel within the angular discord community which is very big so we just have a subgroup inside you can find you know you have any question answer feel free to comment and drop a message we have the youtube channel where we will upload all of the talk and some of the office hours into after we finish if you feel like you need some advice and you just you know want to have someone to talk to we allow people to book a free 15-minute chat like in any topic usually i got a lot of questions about angular but uh it could be reality it could be uh so it's just for you when you need some uh you know just someone to talk to it will open up a lot of other stuff and if you feel like you wanted to speak at angular singapore you can drop me a message on twitter and then i'll get back to you or if any one of you here like the community member you feel like you wanted to have that you wanted to see uh a speaker just let me know the name and i'll try my best to contact and then bring them to angular singapore as well uh in singapore we have google developer space which is the home for death and startup from from the region uh it basically just there's a lot of events that incorporate across the region in you know singapore malaysia and vietnam in indonesia and more so you guys can find a lot of info in edgy.dev uh we have singapore.js here we have geodfsg we have other groups like toxins uh we have reactors nah there's a lot more i'll just give some name and now we have anglers in singapore uh if you like have some questions during the talk just know the deed now so you don't forget and during the q a section you feel free to unmute yourself but most of the time just raise your hand and so that we can keep track of who we asking the question and you don't feel like comfortable speaking you can draw the question into the chat so that we can help you to speak it into the uh into the section today and uh with that we are almost coming to the talk but before we um go into the top we have a small part which is a speaker before we get too deep into technical stuff so uh it is for once we have a question for you today and uh the question is simple did you have to delete everything but keep 3f on your mobile phone on your smartphone yeah so it's not like the phone can only texting and answering so the smartphone so which one would you keep and why would you keep that application this is really hard this is not a warm-up this is really cold um okay okay sorry yeah um i never thought about it but okay i'm gonna go right away uh i'm gonna say spotify i will keep spotify music it's fundamental what's up as well uh okay that's how i talk to my family and that's that's a hard one uh i would probably since i'm living in austria and i don't understand most of the things they say because they speak german here um that would meet google translate almost daily so yeah i see thank you for me i i i have to keep a calendar to keep track of stuff going on but yeah maybe sometime we don't really need it uh yep thanks and uh yeah go back to the talk today uh it is about setting up a maintainable angular application and about the speaker uh juan jumpera is the google developer expert in angular and web technology he loves public speaking psychology and job and uh for the talk today i think johanna will have a lot to share with us basically you know when you're working with angler and then you spend a few years with anger you will realize there's some pattern but it's just not obvious enough on the first time so today juan we just consolidated everything in the past period that is when working with england in a lot of industry in a lot of team size and a lot of company in different countries and shared video today and with that over to you join and we can get started with the talk super thank you very much for such a nice introduction uh i have to i have to confess that i was also a meet up organizer at some point like alice mentioned in in medellin in colombia and yeah uh i think you're doing a really good job already so congratulations for that it's also really nice to see you all here um it's it's 27 people and i think that's the record of any of the online talks that i ever did because online i think you don't get as many people sometimes as when you are uh and like life uh so i'm really honored i think the most i had was like 20 so thank you very much for coming all the way today um yeah so first of all i would like to let you know that um usually i enjoy a lot interactive presentations especially because i can tend to get sleepy uh so so i wouldn't mind at all if you want to just ask questions uh in the meantime just sending over the chat i actually have the chat open right here so uh if you just send the memes or jokes or make fun of me that's totally fine and and i will be hilarious so just ask any questions you want anytime that that's completely okay but we can also wait until the qa that's also all right so i really hope you enjoyed today um and yeah like first of all uh uh a short introduction about myself i guess you're seeing my screen already uh if you are seeing a planet in the a planet then yeah i guess you're seeing the planet uh just just to give you an overview i'm coming from colombia so um i i i live i was born there for 25 years and then recently i moved to another country i decided to move to austria um which is really far away uh and yeah i am like two years ago i've been living here trying to learn german and trying to connect with the european community uh but also the asian community trying to get closer to them because before i was just mostly uh in in america and so i'm really excited to be here today i'm just just if you're wondering why i move it's because i found a job as well and and it was very nice i worked for a company called bible uh and perhaps if you're wondering what do i really do when i'm not coding or no when i'm not working i i like to create apps and and with the most recent app i created is called head scroll this this one right here it's for musicians i i as you can see the background i played the guitar uh i didn't say i played well i just play it and yeah and what happens is that when you're playing guitar often you have to you know stop playing guitar to scroll the music you know and in the computer or when you're playing the keyboard or anything else so that's really annoying and so i created an app that uses machine learning with angular and uses tensorflow as well and what it does is that it just simply uh reads your head movement and then you can you can scroll the website up and down so you can just go to headscroll.io and then uh just just look it up it's made with angular so so you could judge as much as you like probably my lighthouse's core is really bad so don't even mind that uh but yeah that's me and besides that i mean i it has been already mentioned i am a google developer expert that if you're not familiar with what that means adis as well he's actually in the call he's more popular than me uh but yeah google developer experts are just people who like to contribute to the community a lot are people who um enjoy sharing knowledge either on a private place like with their team or outside in a meetup or a conference and i do enjoy this a lot so that's why i'm a google developer expert and if you would like to become a google developer expert feel free to reach out to me i'm happy to also help you uh become nominated if you believe you have the requirements to be one this is not a program that is meant to be you know close and vip but all the way around it's a program that is meant to encourage people uh who are doing a lot of efforts for the community so if you feel like that's the case please reach out to me i'll be happy to help you out with that actually i nominated a couple people right so could be the kids and yeah let's start with the problem and the presentation the problem i decided to summarize on a single meme because meme contains information in really nice ways and i believe sometimes this is the case when you're working with angular that um there's a style guide and it provides a lot of you know information and and patterns on how to do things um but if you don't follow the style guide you like you make you know it just doesn't go well and you've probably seen these or i've seen these when i'm reviewing legacy code uh and then i see like what is this and why are they doing it like that i i've seen all sort of things for example the most common pattern i see is to use just one module for everything in in middle size applications so uh these these sort of anti-patterns are common um and and they might be even more common in other frameworks when when there is not such an opinionated way of doing things uh react for example uh i guess before mostly but uh perhaps today as well it gives you the freedom to just sort of go whichever way you like you structure your folders as you like uh don't limit your creativity and then and then angular is like you have to do it this way um somebody just said that i might look like adios money i think that's that's a compliment except that i'm not as a smart uh but thank you uh anyway so yeah so what happens is that then you have some frameworks for example like next on top of react that says okay my way please in a way trying to sort of enforce like a direction and we are still very opinionated about how to do certain things and we'll probably continue to do so and for that reason for some people it's easier and for some people it's harder um but either case sometimes when you just jump into angular so i'm working with it and you take a look at the code and the code style guide it's it's just very overwhelming because it's like it's three or four hours of reading i actually made a gif uh scrolling through the whole thing and and this is you know how much scrolling you have to do to go through all the do's and do not uh that you would uh have to read about in order to understand it and i did that like i did that several times already uh but yeah it's it's it's a little bit overwhelming but it turns out that i was telling uh before we started with the meetup is that i've been doing angular for four years or four years and a half at this point um and over four years it's been an incredible journey you cannot imagine me four years is probably as much as my university degree except that my university degree was just you know about many things this has been just about angular i i really haven't worked with any other framework and react i only started using it recently and and i work with teams in every industry well not every industry but finances fintech banking um retail real estate everything and i also work with small teams big teams teams in different countries and so on and so i started to identify a set of patterns that that would make application better that were not written there that i couldn't find in the in the style guide and then i started to appropriate those patterns and use them more often and i realized they worked and they liked them and people liked them and so i wanted to share them with you today and and look as i said it's four years of things that i've learned i that made it's made me age much faster than normal people i'm actually four years old now i'm 28 but but yeah certainly it's it's it's been quite a journey uh so what i'm going to share with you today in a summary is not what's on the style guide because you can read that already but it's for example what i would assess on an interview make sure you do interviews for front end developers and then when i go to when i want to go the extra mile i usually i'm going to ask them the sort of stuff that i'm going to share with you today and what i've learned the past year so we're gonna get to it we're gonna go one by one it's about eight or seven or nine and and yeah i look forward to hear your feedback how you like it how you don't like it um okay so let's get started first of all when i start with a project obviously i would use to see a light and you probably already know that but what's not by default anymore in angular is um tslint as you might have heard before we have t is leaned and it was set up by default with codeliser i guess and it worked well and it was nice and you could customize it but then they said okay we're no longer going to be so into the linkedin thing we're going to just let people define the lending way they prefer and that's totally fine um that's slightly less opinionated than before now tslin what was the bricated so now it's called eslint and withdsl you can just format your code or set up the rules that you want for linkedin purposes um now now there's actually there's actually an angular version for that um so you can actually look obviously in angular and and it will work just just well as an effort by the community and i'm usually i'm usually using that every time i set up a new project i make sure i have those rules in place reality is that uh when i when i do that uh this is what it looks like that's that's a picture of me a couple of months ago uh just just trying to set up a new project but it's fine you know you're just looking all through through all those rules and it's like oh yeah this is so cool yeah this would help you know readability so you start setting up a bunch of roads and you start removing them uh that's that's just the cycle of life right but yeah so my first thing is to make sure that you have ease lean set up for angular that's that's the one thing that i i would make sure it's the case on a project for certain probably you have a preference for not for another linter i guess that's fine but have a linter and that one it's actually good now on top of that one you can also have another linter and and this is also a matter of discussion for for certain developers but greedier is pretty solid in my opinion it does a good job there's a lot of people that do not like certain things but prettier is super opinionated on how certain things should be is it's very not so flexible and in a way this is good because then then most of the times when you have a code with print here uh and when it becomes a standard die somehow uh then you're more familiar with reading code that uses this so make sure you also have prettier uh um perhaps meme that also summarizes prettier and he is lean all together would be something like this this is also a picture of me coding on a regular basis um and using uh vs code for example but it turns out that it doesn't stop there with the linkedin uh well actually recently a couple of months ago one year ago i started working on a project and and somebody mentioned something called styling to me and i was like oh my styling okay so so you can style this css i mean you can do that with pretty already uh and that's rather okay but it's very basic the styling you can do or the lean thing you can do on styles uh styling will allow you to do more advanced things uh such as for example not using uh certain heads uh formats hexadecimal formats uh how you control the dots if you want alphabetical order of the properties and it would actually also help you prevent certain things from being written that are not supported anymore or are not are recommended anymore styling is you know it's a way to leverage the quality of the css or sas code that you write and i i i do recommend it to just keep your code base really consistent and at this point i want to make a um what's the word i want to make uh um i'm going to make a what's the word a pause and and and have this conversation with all of you right now and that conversation is uh what i'm talking about here just so that you remember does not necessarily apply for really small applications if you're just doing a small app if you're just doing something quick for the weekend you certainly do not need to get to use free tier or eslint or silent but this is actually for the sort of projects that involve a big team or when you're this team lead that is trying to set up a new project for the future client or something like this that's when it makes the most sense uh if you're just doing something small i think you can skip many of these things but this is more when you when you're in charge of a project or when you're this developer who who wants to improve the code based on the quality of the code then this is for you this is what we're looking at it today just just a reminder of that okay let's go back that was too intimate let's get back to it so uh yeah and last but not least you can always step up your game when you're when you're setting up the lean team like after i'm done with the cli and i'm done with the linkedin i usually take another hour or half an hour to set up the lint stage what's this package and delete stage is very nice because it pretty much will make sure that anything that you are about to comment gets linted before the comment uh and this is convenient because what happens is that often i i had many pr or yeah many pr's pop pull records in which i was uh just you know typing committed something and then immediately right after i i realized that i forgot to lean something so when i push it to the repository a some sort of action failed or some sort of check fail because the code was not linked yet and and that was you know silly so with lean stage actually works really well uh and you can make sure it runs prettier it's tightly and easily in all at the same time if you like and then all the code is limited all the code that you modified is linked and then you're good to go i highly recommend using this one to you know step out the game a little bit of course there are other alternatives out there but this is one i i use and i i can recommend it works well good so far if there are any questions just shoot them right away any comments are happy to see them even emojis i love emojis uh so you can just send anything uh okay so next step when we're done with the lin tin uh and and i know the code base will have certain format then i move on on to the next level and that is the code itself how can i ensure that the code that is written follows a correct pattern or a good style guide and we are going to start with css i don't know if you ever heard of it css but this is the i think this is the one sort of css architecture that is not so popular but it's uh really well done i would say uh perhaps it's not so popular because uh another what sport patterns like or frameworks or architectures like them or smacks uh we're also more popular in which you have to use underscore underscore for objects and modifiers and so on and that's fine you can use that but it css provides an architecture on how to place your css all together um so it turns out that it provides a sort of levels as you can see on the screen and and then you can define styles that applied you know to general things such as layouts such as objects such as elements and then it helps you keep things way way more modular as opposed to have just one global style where you have a bunch of css that at first it's just hundred lines but as opposed to continuous you have more and more and more because suddenly you have to you know just do some font size that applies to the whole page and then suddenly you have to load some fonts here and suddenly you have to make all the paragraphs had a certain margin and and yeah all of that it's you know kind of gets stuck in one file and that's not so nice so itcs this is a structure that that i work with as well i recommend you can just give it a try um so yeah very good for it of course you can use it in combination with them uh and i did it as well and it depending on the product can be an overkill uh but sometimes it's just fine when you're using the component approach maybe you don't need them um but it's it's okay if you use it um there's a question actually uh does sling didn't have the same meaning that and follows the same pattern for dotnet projects as in wet ones um not sure i'm not so familiar with dotnet projects addis uh maybe you if you want to chime in and perhaps suspend yeah actually i would like to ask for desktop applications because uh okay in the company that i work we have the web team that we have later same twitter and all this stuff and so the desktop team that develops dot net framework applications wants to uh wants to be organized in the same way so i i was wondering if there is the linked process is is there actually a link process for desktop applications as well as for web apps good question i honestly don't know the answer i don't know i would assume it could be the case it makes sense that it is the case i guess it should exist probably more baked on the on the ide than on on some sort of package but i couldn't answer right now maybe there's somebody in the audience that knows the answer feel free to chime in or write in the in the chat but i would assume that's the case if if i uh if you don't get an answer then i will just look it up also later and then perhaps reach out to you that's great thanks sure okay so so so going back to the css thing yeah so so remember it css take a look at it i highly recommend it for projects that are bigger and uh yeah and and then you can put the bam on top of it but this is where it gets interesting lately i uh last couple of months i was working with utility first css and uh i gotta say it i loved it it was amazing it was super nice despite what everybody says i was like wow this is so cool um no actually i was the one saying that to my team i was like this is the best we had to use it you know just like any fanboy and and they were like no no that looks ugly and i don't know and i was like okay i don't care i'm the team leader you're gonna do what i see what i say and and then um so so we did it now it was not like that but i managed to convince them to give it a try uh they didn't dislike it at the end they actually liked it uh they said yo it's okay it's nice uh we use we didn't use tailwind which is more popular sometimes we use simply bootstrap which was easier to set up because still we need some sort of setup uh in angular and super nice all all good all went super well we got rid of many uh sas files so they were very very little the cs says that we have to write wasn't as complicated as you would think with you know a lot of responsive design conditions and stuff like that it was rather easy and straightforward so it was it was a good choice in that project so if you haven't tried before i would suggest you take a look at it yeah and there is a good um i could uh link by angular nation host um yeah is is that bonnie i hope it's money no it's me i am using a body account to something ah okay okay okay okay okay but great stuff um right so yeah i'll suggest that and okay so yeah that's the sort of around css but it turns out that it can get more interesting when you're working with angular because there is a tool out there called rxjs and it's a tool i'm super fan of because i love the reactivity of it and as you know with rxcs it's baked in in angular and there's the one plugin or one package that i often often use by nathaniel called until destroy so it turns out that when you're working with rxjs you're working with observables and then you are naturally doing something like uh unsubscribing because you know you want to keep the performance good and so on and so forth and there are many ways out there to do this uh in javascript that are that are better than just dot unsubscribe a way that helps you you know keep track of all the observables in a component and unsubscribe from them all but until destroy in my opinion that's the most elegant job in that regard so whenever i set up a new angular project i make sure that i i install until destroyed from the very beginning and i asked developers to actually use it to unsubscribe so if you take a look at the code for for a second it's just a component with an engine in it has a simple observable interval and then it has a pipe and that that pipe operator or function is called until destroyed you just pass this as a yeah as a reference to the class as you see there is also a line number three a the creator to for the for the until destroyed um function to work and then you can just subscribe or do whatever you want and good to hear that it's used uh yeah so uh it's it's i'm strongly just suggest you to give it a try and by the way if anybody uses another strategy i'm super happy to hear about it as well i'm just interested and also check that out uh nice so yep uh on to the story highly recommended and we're gonna move on on to something else estate management so when it's when it comes to safe management um you you can use any any any tool out there i have to be honest i haven't used in in production any any anything different than ngrx uh and that might be biased because i i kind of learn ngrx first and then i felt comfortable with it uh but if there's one thing that saves a lot of time uh when i'm working with it it's not when i'm using grx alone but when i use it in alongside with ngrx data if you're not familiar um oh by the way good question by elin with the with the rxcs can i use take one yes you can use the take one i think uh the the only thing with with take one is that sometimes uh you it doesn't do the trick just just going back slightly here to the under until this truck uh take one it's it's an operator function that you can use to tell the the observable to perform an operation once and then as soon as you get one value um then you destroy the observable but that's not always the case sometimes you actually want to take as many as you like and you want only to destroy the the observable when the component is destroyed that is when the user navigated to another route or so so um and when when that's the case you cannot use the take one for everything else i guess take one will suffice it's just that somehow i also like the until destroyed uh some sort of format or approach because it's rather elegant or a stake one can be confused with is this logic or is this just something we wrote to destroy the observable so sometimes can be tricky to know but also super valid i also use it many times and it works so yeah so we ngrx data uh it's it's the one thing i use because it indeed saves me a lot of time and a lot of time i mean for applications that use the restful pattern uh for those that do not do not even think about it it's complicated uh but for those that use a restful uh and back end then you're really good to go with ngrx data i strongly recommend it if you need also to customize a lot of things it can get tricky i have to confess but when it's that's not the case the amount of time it saves you it's it's it's gigantic for real like we use it on a project and and perhaps the primary factor why we use it is because of the budget money and time it saved us a lot of it so anytime we needed to for example you know we were already in the project like three or four sprained already we were already comfortable doing development doing features and at any point whenever we needed to create a new view where we needed to display some data and they said like okay here's the endpoint endpoint please recruit the data and display it indirect's data will do the trick very quickly we're talking about 15 minutes or 20 minutes of code you or even less honestly and and you will just you know reference the the classes and so on and so forth and then immediately you have all the data available right there without the need of further http and and worrying about selectors or producers or effects you know having all the advantages of redux of our redux application in a really nice um straightforward way with indirect data so i recommend you to take a look at it that one but on the other hand i would also um be understanding if somebody uses um akita or njxs is also also popular nowadays so i guess that would also be fine okay good um moving on to the next one we actually um good on time i guess we're we're good on time if you're having fun uh please thumbs up i can see that we actually have already 30 people so that's actually surprising because that means three people arrived uh so if you're having fun thumbs up if you want to if you want more spiciness and more fun then double thumbs up and then i'll make sure i start making jokes and bring my comedy show to the presentation uh anyway so yeah moving on to the next one um typescript so typescript as you know it's it's also um perhaps a de facto way of doing web applications nowadays no react uh i guess you also was you know thinking of doing that eventually uh oh somebody sent many thumbs up okay uh that's gonna be hard i'll give it a try um so yeah so um thank you very much i'm glad you're you're enjoying um so yeah with typescript what happens is that it's very common uh across the web ecosystem and there is one library that i also make sure that i include from the very beginning in any typescript in any typescript or angular project and in this case it's loadash dash e s so you probably heard of low dash before if you haven't well it's pretty much a library or a package with plenty of utilities like functions to just do simple operations um so so so far it's like a jquery for javascript right it's like like ah it's so nice and convenient so it is that's what it is um but it turns out that when you just install low dash the normal low dash you install the whole package and that's not true shakeable so that's an issue because then you are probably using one or two functions uh but then you're not using anything else and you're just you know sending and shipping all that to the client so you don't want to do that you probably want to install es which is the xmas script um module feature baked in this package therefore it is through shakeable so as soon as you import a function you're not importing anything else so if if anybody would have an objection performance wouldn't be it wouldn't be a problem at all whatsoever now uh why would i use lol dash if for example uh javascript provides a bunch of roi methods that are are really convenient for example all of this some reviews every concurrent field includes um so the reason is because well well these are every methods work really well uh lodash in provides functions that are not covered by these functions such as for example clone deep so anytime you want to clone a object deeply that is not just in the first level but anything below that could be objects or arrays uh you need to do a clone dip most of the time especially if you're working in a redux architecture because that's important there and and then there's a straightforward way to do it sometimes i mean you can use a couple of sort of hacks i will call like json stringify or things like this uh but yeah it can be a little bit not so elegant i would say like maybe not so readable or maybe prone to fail or prone to have box on it so in such case i would rather 100 percent use low dash uh cloned function and then as you can see in screenshot uh just just ask it and then it just works really well um but there are plenty others in fact there are those weird scenarios in which you need the first element of an array compared with the last element of an array and you need to do some sort of operation there chances are that low dash will allow you to achieve that in a much more elegant way as opposed to having you know three fours concatenated and a bunch of flags and trying to figure out what happened there and here and there so most of time i would recommend using low dash low dash also has better performance for cloning deep uh for deep cloning objects sometimes so i would already suggest you you go like that uh funny yes yes slow dash spanish some some sort of fun um uh yeah but something related to spanish like i saw um so so there's a question is a little bit shakeable for using it in angular i think low dash is just retrievable regardless of the framework you use it uh but yeah if you use it in angular it is shakeable so you're good to go uh indeed yes it saves uh some kilobytes by the way question for all of you um right in the chat in the comments um what is the what is the right array method that you feel less comfortable with the one that you will be afraid of explaining that when you say like okay i think i know map but i never heard of i don't know feel or reduce or any of this what is what is the one that you would say uh no that's that's very very pretentious uh but what is the one that you say like yeah i'm not so sure about this one or i'm not so sure if i understand it um yeah yeah flat map apparently it's it's it's common reduced yeah reviews can be tricky i i had some some interview um interviews where i had to use videos or a couple of things two reduces actually yeah from my current job i had to use reduce twice in the interview um yeah flatman time radius interesting yeah i think uh flatmap is um i i don't think i can explain flatmap either i just wanted to ensure that i that i can feel good about myself because i i also don't know how to i think i think in somehow no i'll tell you something i think what it does is that if you have two levels of arrays then you just you know make it in just one level so if you have something nested you can just make it in one level but but i'll be honest i think this is just it's simply a case that it's not so common and that might be the reason we don't understand it so much because perhaps it's not so common at least it really ever happened to me so i never really had the need of using perhaps flat or flat map which i guess they are related um reduce never glass on the other hand is very important uh and i suggest i use it constantly i like it because it's really nice so if if anyone feels uh uncomfortable with reduced artists perhaps it's worth it can look because i do think it's really nice but it's pretty much it's it's the same as map because most of you probably know map is the same as map but instead of giving you another array it gives you just one element so whenever you have to get have an array you need to turn it into not another ray but one element then reduce is probably the way to go so if they tell you what is the sum of all the elements in this array reduces the result because it gives you a number at the end not another array if they tell you find the highest value in this array okay well you could use another one but reduce could probably be the one you could use as well uh anyway yeah there's there's an example right there oh yeah somebody uh put something there flat map okay okay nice thank you darius okay and let's wrap it up with typescript with something called pad mapping for example as you can see in the screenshot i have a really nice import statement right here this is common in the projects especially legacy projects i tend to see these i i heavily uh think that this is affects readability a lot especially when you have not four but 10 imports so in such cases i strongly recommend using typescript pad mapping or pad aliasing against this call which allows you to change the imports to this so they become i think the words absolute imports yes so that you no matter where you are in the project anytime you need a core module you simply put add core slash core dot module that that's simply the case this is before and this is after and and anytime i'm setting up a angular project from beginning from scratch for a new client or so pad mappings in something i make sure that it's right there so uh if you're wondering how to do it it's really straightforward just go to the ts config file and you do make sure that in the paths property right there you can just you know put the direction and the alias and then you're good to go that's how you do it yeah okay so i i think this is this has been fun i hope you like it i'm just going to wrap it up with final recommendations these are no longer plugins or packages that i installed in angular but more like approaches that i make sure that i have in my angular application like patterns that i want to make sure that are followed by my team uh and yeah uh perhaps it's worth it by the way uh thanks for for the hint html hint uh yeah html linkedin good one i didn't think about talk about that one for that one use i use uh pre-tier um prettier that's a job for html as well for jsx if you're working with react but yeah i never really went to the extent of using html link but i think it's a good idea to do it as well uh i think yeah it's totally worth it because i think it can have some benefits as well thank you for that diaries i'm gonna take a look at that so final recommendations first of all angular modules understanding angular modules is the one and foremost single question that i ask on interviews whenever i'm interviewing a angular developer i actually sit down with them and ask him what do you think about modules that's that's that's a question that i never forget to ask and and i would like to hear what they say you know it's like when you sit down with a physicist and then you you're like okay well what do you think about you know uh black holes you know what a crazy thing right and then depending on the degree of understanding they will answer you know on a bigger level or a smaller level and same with modules i think modules could be like black holes in the sense that they can be tricky in the sense that uh you can get them wrong easily in the sense of setting the sense of four times already but in the sense of how you import one and the other how you name them how to use them how do you separate your app how you lazy load your app um how do you how do you perhaps structure your app itself i think all of that is very important to ensure that an angular application is maintainable that's the main tenant to ensure that an angular application is maintainable so if if module is something you're not so comfortable with i think the angular style guide provides good good insights and you can take a look at that one this screenshot here provides an understanding a basic understanding of it uh but really key really careful for that one the next thing that i think it's a net recommendation that i think it's important to keep an angular application maintainable is merging and combining uh observable studies um because because understanding the difference between these two and the different operators that you would need that you can use with rxcs it's also tricky it's common that you need to make a http request that ends up in another http request or so on and then you want to handle those observables gracefully and correctly and that can be hard and sometimes you don't know if you need to use combined latest merge um exhaust map fourth join and sip all those different combinations that could be out there even i mean i've been doing angular for four years and still sometimes you need to just look it up and select okay what do i need here um so so very important for for for the code base to remain maintainable to use their proper merging and combining operators in rxjs and last but not least typescript um utility types there are plenty utility types are right there that you can use i i've only used like four seriously only four out of the twenty that's right there but i think those four uh can be really convenient one of them is for example partial whenever you have an interface and you just want to update a part of the interface partial is the right way to go you can also put the question mark and the interface and that works with partial i found it more elegant sometimes depending on what you need to do you can also use record for example to create um sort of objects that are typed so and and you can even combine it with enums um so to make it more appropriate uh enums are the other thing that i also make sure that you use it's very common that i'm working with a team and then somebody suddenly just created a const a constant somewhere in the code just like that and and three or four constants were right before the other one and i'm like okay wait this can be an enough we can make an enum out of this for example as in the example you see in the screen uh direction app down left and right so enums are very convenient especially when you're using switch map to determine what gets rendered or what doesn't so it's a really really heavy uh advocating for enums and last but not least uh using the proper chaining operator and what's the name of this other operator it's knowledge coalescence operator yes i guess that's the word um which is you know as you can see in the screenshot it's it can be tricky it can be uh tricky to to figure out what are the differences but these ensure insureds as a summary that what when you're writing code you write code that is less prone to fail at runtime because a certain property was not provided by the backend for some reason because the back end got updated or because there was an error or something when you when you inspect the front end to receive data just like you wanted to receive it it's like you know it's just like you know buying a lottery ticket and it's like okay i'm gonna win this one you know i'm sure it doesn't work like that sometimes you just don't get what you want uh that's that's a live advice but yeah and it's it's that's the case so so as you can see in the example in line number two you're just accessing you know this um what's the word for this the structure in an object uh it's really nice and you get the name but then it could be that uh person um it could be that the name is actually not defined so you want to manage to do that differently so you can use the um what is this the ternary operator for that so that if the value is defined you use the value otherwise use the default value but then on line 8 then you find a new way to do it with the or operator but then in line 11 you discover that the other properties could also be undefined so you use the um knowledge coalitions no uh yeah knowledge coalescence operator i guess the word uh no the oper optional chaining operator yes optional chain operator and then on line 14 then you use the optional chain operator alongside with the knowledge coalescence operator i'm sorry yeah i don't know why they name it so hard it's it's really hard to say uh but you get the point um you get the point there's a question here what is the name of the last prayer in line fourteen yeah it's called knowledge coalescence operator it's really hard to write um yeah but but it's really nice it's really nice i highly recommend it so i make sure that the code whenever i'm writing code and make sure the developers ever assume that what they get or what they get for the bracket is what they would expect that's usually not the case uh so you want to be prepared for that with these operators and with default bodies um yeah i think i think this kind of covers it it's ten minutes to two so i guess i'm gonna wrap it up right now i'm gonna just read through questions in a second but thank you very much for uh coming all the way today i mean we're 27 we're back to where the number we were in the beginning but uh seriously thank you very much for participating you are really active today and i really appreciate it thank you very much times one time thanks so much wow yeah we should clap now um i think there's a question specifically for enum on the chat um maybe it's something for you and for also iris [Music] yes let's see there's there's one for from aries that says uh what happens with organized imports in this code when using pad mappings is going to mix it with the other angular and their primary imports uh yes yes usually it works uh it works just just fine uh so so no no no no problem i mean when you see mix uh angular enterprise library i mean mix i don't think so it will still import angular stuff from angular the the the path for an angular so it's fine and then when you have third library things it will also come from there so it's fine this will just um make sure that the imports of your own components and your own modules just look like that more absolute and easier to read if that answers your question so thanks yep nice uh super uh there is a question uh from georg when using enums sometimes i face the issue with having to cast a specific strings as an enum before i can actually reference the string as a type is there a workaround for that uh yeah i mean i guess i know what you mean uh but yes there is a workaround for that i think i face what you have to do uh usually you want to try something called um type of i mean i usually what i do is that i play with type oops type of key off that's what i play with um and then and then i can it can manage to make it work or with key off alone usually i i play with that one i i i can't think of an example right now uh but if i if i want i i can also send it over to to the channel uh but usually yes there is work around for around that so if you look it up you probably also find it uh so you don't have to actually cast it all the time uh yeah somebody raised their hand yes i have i think thanks for wonderful presentation uh my question is like uh it's like it may be my only thought the thing is uh when we use uh rsjs like uh sorry ngrx for the state management right in that what i feel uh like it's very tricky or that subscribing or dispatching the events so what do you recommend for this um but i didn't get the last part so you're saying uh ngrx versus management and rxjs as well no no and now my question is with ngrx when we statement is managed globally okay in that case so what i think from like dispatching and subscribing to the event state change it's like very like a tricky part what do you suggest for them what studies we should follow for them good good question yes um so brill thank you very much for the question first of all pretty bold of you to you to use the mic um i have to say that ngrx in itself i guess it's or estate management in itself is a tricky problem so uh this is this is common and normal to find but sometimes um from a certain part of the application and need access to another part and then it you don't really know how to achieve it um i do get what you're saying when you want to access a global part of the application a global state of the application uh i've done it before um with ngrx usually depends on what yours if you're using data or or not usually you can create selectors that allows you to achieve this so selectors is probably what you're looking for if you want to access a certain part of the application um perhaps what you want to take a look at it's something called um feature modules for nhrx that allows you to kind of separate the global state in different chunks and that might make it easier but overall i think selectors would be the way to to go about it if you want to access a certain part of location if it's harder still um then i wouldn't know i would need to understand a little bit better the problem to let you like guide you in the right directions but selectors is probably the first step for that so currently i'm working on a project it's you i'm using selector there that's you are right but i think using selector is like for to use like to get this trade for each in every component for example you have 10 12 component where you want the global something from the global state you have to subscribe everywhere got it that's the duplication of code right i see your point good good question um yeah so regarding these what you probably want to do is that you can actually um so subscribing would be a normal thing so don't don't don't feel bad if you're subscribing in it in different components probably uh you want to take a look at your architecture and make sure that your parent component it's the one subscribing and passing the information down to the children component so to make sure that's the case when you have smart and dummy components so that's the one thing the second thing it's normal to subscribe several times so don't feel bad about it usually the async pipe would help make sure that you uh don't have to deal with that so much and it's actually straightforward but this the third thing that i will suggest and you can try is to make sure that your selectors instead of providing a a fraction of the state they actually provide the different fractions of the state that you would need in a certain place so that you don't have to subscribe several times for example if you have an application where you have customer data purchases and i don't know users you can also create a state that kind of aggregates all that information into one selector and that way you save three subscriptions only into one subscription so you want to take a look at that as well thank you thanks john nice there are more questions nice uh ah addis is raising his hand yeah alright go ahead yeah so um i have two questions one question about is linked how do you share uh if you have multiple projects how do you sell the same island configuration do you create a separate bslint file for each project or do you have one for all of them great question aries i also do not know the answer to this question because i haven't figured out myself in the sense that i would love to do that like i would love to somehow centralize it but i don't know how to achieve it at this point like yes you could probably create a gist git and then just put it there and then always copy it from other places you could also create some sort of package perhaps and then and then install it in the projects and make it a single source of truth and sometimes when you update the package update that rules so that organization wise everybody uses the same rules um but no i haven't i haven't figured out a weight myself or tested away myself usually what i do is just do it every time i do it every time also because i like to challenge the decisions i made in the past when it comes to linkedin as well so sometimes when i'm starting a project i just review does this make sense maybe just just change stuff um yeah but i i don't have a nice elegant weight at this point too for you right okay thanks sure i thought you have two questions aries yeah the other was do you think that a style guide should be error or warning i mean someone should it should be strict or it should be not so strict um i think i think i think uh there should be warnings yeah i i i i i started working on a project recently uh and it was with um it was with uh error and it was super annoying because i didn't know what was failing or what was the linkedin problem lindy brown whatever it's fine like sure i fix it later but errors i need to fix right away and then it was super difficult for me to differentiate on the other hand people might say that lean team is important so it should be an error um but i'd rather be a warning yeah cool thanks for your insights sure okay uh the quincy has a question uh with version 12 i sometimes use the non-null assertion to get away with the not initializer is that okay or am i abusing its power uh no i think that's okay i think that's all right that's that's fine but see that's because that's the way to go i would say yeah should be fine um anything no it's a good practice to use such typescript interface like this is four type a lot types key in a low type boolean or simpler ones should be used no i think i think that's fine i think that's uh fine you can also use record i mean if a load type is a it's a um it's a it's an enum then you can probably go with uh something like this uh record and then just put allow type and then become a boolean and and that should also do i guess uh you want to give it a try but that will probably do so i wouldn't mind either way we'll be fine uh unfortunately i have to leave now because i have a meeting with with the company uh well but i guess there are no more questions either uh yeah thank you very much everybody for all the questions it was really nice sure yeah one again and uh yeah i think we also on top of the hour so with that we can conclude and meet up today and see you guys in the october see you all bye thank you

Channel: Angular Singapore

Views: 161

Keywords:

Id: ZkvOUy5yRog

Length: 58min 35sec (3515 seconds)

Published: Tue Sep 07 2021