Angular Spotify #1: Structure your Angular application with Nx workspace

sorry my make my mic were new and uh hello everyone welcome to the first office hour of angular singapore my name is chung and i'm the organizer of angular singapore it is a brand new group that i created maybe a month ago and also um in the uh upcoming next week um we will has the first monthly meetup that's casual for let me see um no it's not that we go yeah uh the first monthly meetup is scheduled for the 6th of april which is next tuesday um we will revisit the dependency injection topic and uh i hope you uh wanted to you know um just to drop off or you just revisit the defense injection knowledge you can enjoy the meetup with us next week i hope to see all of you there so today the the main reason for this livestream is to talk about the structure of any question on angular application so uh i i believe that's most of you um during joining when you saw the angular spotify that i published last week i think this was on monday no it's not last week it is this week monday and today is like saturday and um it's been a huge success for me and i i really would take this opportunity to time all of you like to for all of the support that you gave me it's like in uh let me show you quickly i think it's like in uh in within like five days there's a there's a thousand star repository which is which is really fast i never really had a repository i mean i had one with a thousand star more than one a thousand stars but this one is like within five day was like crazy really like i appreciate all of your support and um with that i think let me see i didn't really prepare for today uh livestream because i i just wanted to um show you guys quickly how how the code and the structure look like and then it was very casual if we have more time we will build this browse page where if you have the spotify open you can see when you go to browse it is gonna display all of the um category let's say it's category and when you click into one it will you know showing you all of the playlists for this category and i think it's uh it is a handy uh feature and i really wanted to add it quickly but hopefully we we have a bit more time um but if we don't have enough time to finish did uh this part of court uh i still been trying to to you know show you quickly how to you know set up all of the store and the data access and um on the store when you has data to render it on the ui it's going to be going to be very like easy for you i would say so um what else before we get started yeah i also invited my friend chow um to join us because he has a lot more experience working with uh any box plate um in particular because uh the uh spotify was like i would say it's the first completed app that i was build with an xbox play so maybe you know here and there this could be some hiccup and some glitch and maybe my understanding about an xbox but it's not like deep enough like my friend chill so i invited him uh also to to the livestream and then we will also can have some discussion about nx and um what is that really the the advantage behind using any on your application so i think like i started quickly with uh with nx and um and angular application so i have two screen so the one that that i'm looking at is the is the is lightroom and the one that i'm i'm calling is the main one that i'm using so i might not look at you all the time sorry for that but yeah i hope you understand um so let's go through quickly so i assume when you join this live stream you have some basic understanding of angular like you know what is the angular module is or how to create a simple angular component and how to use a service for example i will try to go like into detail like as much as possible but you know we don't have a lot of time but uh you have any questions feel free to put into the comment section i'll try to to you know answer it directly or maybe later on and um yeah any i mean you you might already notice that i'm not a native english speaker so if there's something that you don't understand feel free to also put a comment i'll try to explain it again i'll try my best today so let's talk about any question so i have one of the notes that i put on github about nx and basically na is the develop like development tooling it is very similar to angular coi but it supports a lot more than angular cy so you think about na is like a set of tooling that help you to to write a code and to you know view the code and then to scaffold that scaffolding the code like to instead of manually create all of the photo and everything and then you put stuff in and you do you know reference to a library from the internet annex is like they has the command for you to create a project quickly and then after you created the project there's a lot of like hours above tooling for you you can already use js for right for writing unit tests or you can start to already using cypress for you know writing end-to-end testing so it is very handy and nx is like really suitable for like a mono ripple architecture where you have a lot of application and you want to put all of the application into a single repository what does it mean when you has a team with like 10 people it doesn't really see it different you can put all of the code into a single repository that's fine but let's say you have a thousand engineer across like 100 team and working in the same repository could be a a huge mess if we don't uh like manage it properly so annex like provided a lot of feature out of the box for like managing all of this um you know large scale project within a lag organization like enterprise and one of the handy thing i think it's like um they provided the let me go to the quote quickly if you wanted to learn more about your let's just go to nx.dev it is the uh the main page of nx so it has uh first class support for your annual react and no chance for node.js there's uh express and nes js as well and a lot more there's a there's a section on the plugin and you can see there's the maybe there's ionic and uh native uh script i mean like i mentioned this is my first project working with nxl i'm not very like 100 sure about all of the annex thing but i hope i hope you get the idea so one of the handy feature that um nx provided is like when you wanted to you know like create a project you can just run mpx create and explain that i think yeah the the the command looks similar into this this command that i time on the screen let me bring it a bit bigger and then it's going to ask you like what is the name of project and what is the you know api like technology one you want to explain are you one nest then what is the front end thing you want like you want angular or what you want react i don't i'm not sure about view choices but uh yeah this could could be supported already or is mine not and with nx they provided a lot of stuff so if you go into the packet.json when you create the the project with you know create um i think i just clear the command create a network that's all of the uh linkedin has already been set up for you testing view this build product is like the customized and my friend chow has me to to configure it with taiwan because for some reason there's a angular cy has overwritten the tailwind conflict and all of the the powerful thing is dipped out into this affected command what is that is basically it based on the dependency of the project and then it can identify which project had been changed for example you you made a chain in a single you know until t component like in the single until t function it can identify like which library has been like affected by this chain and then when you run the affected building for example it will only build the one that has been affected by the chain comparing to the to the main thing to the main branch so it could really like shorten the deployment time a lot because you think about when you deploy the app to cloud it's not like it is not like a simple app it could take like 30 minutes so if we can configure the affected build command like properly the build time is going to be sorted a lot and it just it just like it's just like out of the box for you you don't have to worry about it you don't have to configure it it just it's just there and i think it's very handy the no i think you just run it but yeah i think it's it's not really helped because i don't has any end to end and stuff but if you run this effect that app for example it's gonna just write on the on the console like which act have been affected by the chain um i don't have the example yet so um feel free to use annex and try it out on your on your local machine and uh always really help so the dependency here is like not much this that's the same it has angular most the time because the angular spotify i was using angular so this has angular package and i also using ngis for for state management and i also experiment a bit with the component store from also from ngis the effects packet is like to hand like have you handling side effect something like usually we we we talked like you should not make the headpiece http call directly from the component itself and then you should what you should do is that you despite the action and then there's a there's a effect somewhere it's gonna listen to that to the action that you're dispatching and then on the effective cell it will handle all of the you know communication with the server or like communication to the websocket own kind of the you know um of the uh of the uh like remote communication or even like when you update the browser title of the of the of the current webpage into the meta attack this thing technically should be inside the effect as well i would say so but yeah it is another whole another whole like topic so we're not going to it too deep the the main package was the ngi store here yeah so the ngi component is the the new package so they has uh they have some pi which is really helpful i'll show you i think some direct tips there's some variety from ngis component is going to be helpful for us and then we have this nrwl angler this is a package from nx to support angular basically and we also have a ng juror for ui yeah i think this is mostly the packet.json you have any questions just feel free to put it to the comment yeah that is that is the package objection and beside the work uh package json i think i also set up husky so that when you when you start to try to do a commit husky will try to invoke the pre-committal and it will do some check and i think also i configure configure link stage so that is gonna check only the the the the father you you chain so it's not gonna like go through all of the of the file and do the lin check you just go through all of the the changes like you need to my chain on on a single file and then it will appear on on the on the grid and then instead we invoke into for those like changes file only we have taiwan conflict which is handy for taiwan it's it's basically something you need for tailwind obviously and yeah that's that's pretty much i think after i using the um create an egg workspace is only create me like two application so the first one is angular spotify and the second one is angular spotify e2e um which is the project or to host all of the you know um end-to-end testing is uh configured with cypress um which is easier and i think your projector is gonna be obsolete soon i think uh cypress to make it a lot easier to write you need testing like sorry entertain testing and after created the library you will see that the the leave folder here is like empty completely empty there's nothing inside so i started to create the first folder named web for this um for for the leave folder so the idea here is like in the application itself for the angular spotify application this is going to be very lean we don't put a lot of f like no we don't put a lot of code into this f folder as we usually do so before you know you might have like oh and then you might have like service arrow and then you have depends you can have the view thing but now we separated it out so now we separated all of the of the code that the application need into a library and yeah we have a good reason for doing so i think i'll talk about it later when my friend joe is joining and uh if you look into the app component which see the root serving like the the entry to serve the application you see that's the only one router outlet um i'm not sure if like how many of you has using this like like router outlet in the app component itself because usually there could be a layout and then you plug the router outlet somewhere in the layout but doing this router outlet on the app component itself is going to be benefit us a lot in the long run because for example you wanted to have a different layout for different like brow like on on the ui one of the example is like you has the login and register your brow which is for unauthorized user and you also has another layout for for for the the logging in the user basically so after the user has been login you start wanted to you know display maybe a top navigation bar with a user avatar and some action but when the guy has not allowed in yet you wanted to just display login page with just maybe a logo and then there's a few like two textbooks and then the the button so if you do this router outlet it's going to be very handy you just need to configure a login to a login component for example i'm just i'm just saying and then when there's the you know slash to to the root and then you're trying to start to put in the whole component for example so having only a single router outlet on the air component is gonna really have for an application i think it's a phone it's not for even the small or big it's like for every single application we should use it uh router in the app component itself and then if you look into the app module it's usually the place we where you put all of the forward configuration like you wanted to maybe if you don't want to has a router module you you will do the router module dot forward inside this import array on the app module itself or when you want to register the global stats for for you know for accessing throughout the application you also wanted to do this for inside this app module but now since we separate everything into a library this is not like applicable anymore so i put all of this stuff for forward inside the web shell module so the shell is like you could think about it it's like an app module but it's for library so inside you can see there's uh still there's a layout there's some router forward and then there's a store and then the effect module which is all of the forward arches in this line here and also i have this icon module and if you look into the icon module i think i need another separate live stream for for that but basically the item module is where i also do one forward uh for one um another package to manage my nvg icon so so just think about cell is like a wrapper a library wrapper for for everything and if you go into the for root and then there's the web shell row and inside the row of the web show this is where you start to configure all of the raw right and i think that's my friend johnny so i added uh my friend chill so that's all that's a wrong one so usually i don't have the separated module for like up dropping i think it used to be a thing few years ago when i start to look into the tutorial but like i i i prefer to have just a simple all right to stop all the wrong cannot pay anything hello hello oh okay because yeah oh sorry sorry we already smoking minimize okay no no it's like i thought i thought uh you you said you cannot hear anything which means that like from the beginning no one hear anything oh okay okay but i think it is fine then the guy said uh you we can put this english subtitle but i'm not sure how to put it in yeah sorry i think uh i cannot put any subtitle i think it's not supported yet it's not supported i don't think uh streamyard support uh subtitle um steve just supported or you know yeah anyway i think it's not supported yet yeah so yeah i has only one head continue so i have only like just a simple array for for the round here and when you because angular spotify basically there's no there's no login page and and and stuff like register and login so i just plug the layout component into the round like when you load the part empty and then inside i start to load a bunch of stuff and usually ideally you you will have like also some guts like can i debate can activate child and stuff but at the moment you know i'll just assume everything is fine after i has this layout because before i has the access token basically i'm just redirecting you to spotify so technically you cannot do anything without an access token but you're better you you should put more stuff into into the raw configuration and usually it's going to be inside respectively the the the module itself instead of inside this web cell raw so there's a bunch of raw here and i think yeah that's it if you go into the empty part it try to write redirect you to collection it used to be but i think later on i configure it to just serve the the home like directly um yeah i think let's go back to nx a bit so that's uh the show here and uh i just mentioned to the guy that energy is uh is a powerful deadpool for like a mono ripple architecture and it has support a lot of you know cool library out of the box so you just using a simple command like uh npx create an explain and then outbound you have just cyprus and everything as well for you you don't have to configure anything you have anything to add for that sure uh while it uses the modern tournaments like jazz cypress even storybooks and stuff like that out of the box for you not out of the box for a storybook sorry but it does provide you a way to go back to the tools that um that you're familiar with like karma or jasmine if you like so it does provide you a fallback to those um old or not old but alternatives that you're familiar with that you don't want to change or anything like that so let's say you have an angular cli project that you want to migrate over to nx but you don't want to rewrite all your tests from jasmine to chest and you can just use jasmine with nx no problem oh thanks yeah it is it's a good point i didn't i didn't edit before like i mentioned to you guys like my first completed project with nx so there's some glitch here and there um yeah and i also like tell the guy that we tried to put everything inside the leaf folder and the f like the angular spotify f for example it's only very lean and you just import most of the stuff from your library yeah i can explain this as well so the reason why is that so let's say later on uh because of the the web shell module you can have like a static or like module with providers so you can have a configuration based on when you import this web shell module can you try like put that dot forward on live 14 actually yeah like like in this uh in this module right here like webshop module you can have like static forward or whatever method that you want to return and you want to take in a configuration object and return a new modules so you can do that and the reason why we want to do that is that so now your web shell contains all the information all the features that basically the angular spotify uses assume that you're going to have another app that assume that you're going to have another app application in the future that uses the same set of features but there's some slight difference in the environment then you can just use the web share module again in that new app so that's the reason why we keep the app um the app portion the app module very thin so that we can replace the share module easier so that's the uh that's the main idea yo i i see what you say yeah the the static forum is like we can plug in and usually you need to implement an interface i have for what what is the name right really and then i don't remember that it's like yeah yeah i don't remember any implement because it is static though so yeah okay so now now the forward the forward has to return that that's the return type not the implement of the class the forward has to return that and a module with providers now takes in um text in a type argument so it has to have like a type argument yeah yeah yes that's the workshop module it is like um do you i mean for me like for the web show i still don't really get like do you usually has multiple cell inside an application for example because now usually we have only one one shell so one shell you can have you can think of it this way you can have one shell that can be used in multiple apps but yeah then you can have one app that you can switch out shell based on the environment too with the environment file because you can just use the ternary syntax to let's say hey if this environment use the web shell or if it this environment use another shell so you can have it both way can your hands like a very a bit uh like an example which is easier to think of maybe an application and and mobile for example can you share some yeah to some degree let's say you have some like uh interceptors right or validation validation logic or error handler you can use the same shell for right for multiple applications i see i see so basically we just need to oh okay right because so you can have like a shell like this contains like shareable stuff and then you have another shell contains the ui stuff so that when you have uh like a native script application or ionic application and then you have a web application you can use the same shareable shell but then you switch out a ui shell for for each of these apps yeah yeah i think i understand it yeah right it is like a piece of code could be reused like between wi-fi and then the mobile app is yeah yeah otherwise you have like two different repositories usually you might think of you know maybe you need to publish it into a private npm repo npm package and then you take it from there or you copy and paste i think yeah that's the two thing i can think of maybe there's more but that's that that's the only thing that i can think of you don't have one single ripple and yeah um so inside the web we we trying to follow uh the structure that we also put in in the node for nx basically uh we try like like i mentioned we're trying to put everything in the live folder so uh here i created the web folder so basically like joe said maybe we can have the share thing and inside the app probably you for example i just like you have obama yeah and then from from the share library you can input like import import angular spotify and then in mobile app yeah yeah absolutely that's the idea and then if you has the mobile app and you might want to put everything does for specific mobile into the same name so that is the idea of the library folder here so at the moment i i has only single app so i just put everything into the web and for all of the first like level folder it is most of the time is the it is routable module i would say so it's like lazy load module for example the album feature and then there's a brow feature all the whole and then you have the playlist and there's a share folder and then that is shelf which is not really a routine but it's just in in also in in the first level folder and the track utilizer as well so its own like lazy load um component and if you look into the structure that show has already dropped for an application with an api and then one client it's gonna look like that so we just go into the client so we have the shell which is like the wrapper for for reusing and then we have some feature uh the feature here is like the usually that's just a directory because inside one feature like inside the home page for example usually there's a lot more ui so inside the whole page basically you could has many pieces of ui so if you just trying to put it inside a single library it's going to be too much and that's why we put it in like in the directory and then we start to has data asset which is just a library for storing all of the service and api call and state management related and some kind of model and then you have the feature so think about this line like that i has this playlist um this is like this yeah playlist and then in the feature i have the list of so basically the list inside the playlist is corresponding to this ui when you click into your library it is gonna load the list of playlists for you so it is a single library and what we're trying to promote is like to promote scam which is one component is belonging to yeah one only one angular module you don't want to put like i i put the example here you has the register component to display your register page and you just put it inside the same module with the name register you you don't want to put register component inside the off module and you also don't want to put another login component inside the os module as well so one module one component simple rule and let's go back to the line library here so that's inside the playlist when you load the playlist there's a there's a list of playlists and you click into one it's gonna load the detail of the playlist itself so that's why you see that there's a that inside the feature could be there's two different like many different libraries corresponding to different brows and uh it could also be a simple like feature whereas inside this round there's less that's single you know like like the home page that single page like what is how do you say it like there's a single routable component if you have like a single router for component you can put a single battery into the feature yeah is it called yeah i think yeah that that that is correct and the reason why we split uh uh routable uh routable components or writeable container components into features uh and then we break off like ui or utils and data access is because we do not want to import feature in in um anyway because they are lazy loaded so we never want to import anything inside of features anywhere because they contain the module that we're going to be lazy loaded for the data access the data access can be shared across so let's say home data access can can be used in like playlist data access same thing with the ui but if the ui is shared across features i would recommend to bring it over to the shared ui instead so yeah i understand because i also have the share ui thing where like something like the place button that you're seeing on the ui this one this blue thing and it's gonna be reusing like could be like many part of the ui actually when you start to play this icon is belong to the same component which is the play button i think this this is doing too much but for educational purposes it's acceptable um what else oh i think um there's a lot of benefits when you started to you know break the thing out into the library and actually on nx documentation i think there's not a lot of library type so in any component they recommended to have only four type of library so the first one is the feature library which is like we mentioned yeah it is smart ui or like container or like routable with access to data source which is access to this data access library most of the time the ui library does i has uh maybe just give an example so you guys can understand maybe let's go to playlist yeah so for example the ui library here they mentioned it's like only content presentational component and usually you wanted to pass in the data for the ui ui library to render so you should not like access to the store from the ui library for example um and one of the the example is the private track ui data has here which is inside the playlist routable like inside the playlist feature thing i has this plugin track which is corresponding for one row [Music] of the track inside a playlist and i'll just put it in the ui folder of the playlist because technically this ui is like only belong to playlist and for album maybe they they would have another track like it will track but the the uh the presentation is gonna be different so we just yeah create a different component to to different to display different ui and what else i think that's one more time oh utt library [Music] so uh utility hours um i mean when you think when you when you think in angular utilities or something you think like oh string new tails that deals with string or daytime that deals with daytime but actually like things like guards resolvers interceptors of validations those are all your tails that's right but like for for example like for all of the uh [Music] god is it like spell yeah follow the call it's like usually do we put inside the authentication module or we put it inside an until library this i think is dependent to be honest though um no we uh like guards and stuff like that we put in new tails but you usually most of the time monsters have the gauze and the resolvers resolved might not be but gauze and validations and interceptors they usually stay and share your tails i see yeah i think it's very rare that you have like a single feature that depends on a single bar yeah that's true yeah yeah yeah usually we we have something that can activate golf and then yeah it's going to be shared to a lot of different features right connectivity guard is is the name of the guard right but uh sometimes um in most applications we have like the authentic authentication guard is to prevent people from like uh uh like prevent non locked in people and then we have like uh permission guard or rose guard so those are like span across the application so it's gonna be share you tails instead of like one feature you tell yeah thanks yeah that's fine so that so this is not the name of convention as well so we mentioned earlier if you have like a single routable component uh you can put it in a feature or you call it a feature however uh because most of the time we always have like a data access accompany with that so we all recruit the the feature name as the directory so instead of a feature home here we would have home slash feature instead so that later on when we want to add data access to home we don't have to do data access home and then that's going to pollute the top level uh directories so that we put the data access inside of home instead so that's why we always have like the feature name as the directory that has like features that access details and ui for that feature yep yep i understand it's like grouping by domain it's gonna be easier for us to reach him put it on yeah i was a bit confused when i saw this this one because you see it like you know there's a lot of feature in the app and also there's a lot of better access yeah also there's a lot of ui which makes the list is gonna be crazy long it's of okay long long is it isn't that bad but yeah think about it this way so if you have like a bunch of features they have a bunch of data access and then you have a bunch of utils the thing is now the future home might be like a page scroll away from the data access home so they they might not be in in they might not even be in the same screen if you know what i'm saying because like there's so many things in between yeah so because it's going to be sorted by data access right all the data access will come before the feature so you have data access home that access foo ball blah blah blah and then until that you get to feed your home so you might want it it's a little mental overhead to group these feature home and data access home if we name it like nx recommend sure oh yeah there's uh also ui with the dash also the ui can depends on another ui and until and for the feature i think also yeah feature can depends on any type of library which means that a feature can depends on data access and until most of the time and also the data assets library which is usually can only depend on late access and until which is make sense and until the library is like that it's just doing its own thing usually i think it's not gonna depend on anything if it should depend on anything i think it's not until anymore and uh yeah and i said that you should keep all of the uh library time is is low like meaning if you have following these four type of um of library you just should keep it like four times so it's gonna be much easier in the future for you to you know just keep repeating and just keep creating the same thing over and over otherwise when you started to introducing a new thing you know maybe we also need to transfer it to the team member and that's that's my on your agreement with your team but i would say i'll give it and yeah there's a lot of reason why we do it like by putting the number of libraries uh is small and we try to grouping everything based on the domain not by on the type because like i put it here i think this all the three things that y'all mentioned to me so it's it's harder to eliminate the mental overhead when we don't have to think about where should we put like something like if you do the normal way without scam scam you might think you know there's a sharing ui module where i can maybe put in the button where i might put in the tooltip and then i can put in the model and when you have the daytime you might consider you know should i put it into the share ui um module or not so now when you has only a single module for a single component you just you know i need to create another module for the daytime formatting for example just an example and then when you have the scam i think we get the benefit from the affected command that i i told you before for example i think we had a discussion about that so like you have the share module with 10 different 10 different components and then you mentioned for one component so the whole share library we need to be like review right instead of you you have a different 10 10 different library hosting 10 different component so you might change for one component only that's more um library and and module need to be reviewed i think i think that's the whole idea from it and um we this like doing it we also prevent like circular dependency issue and uh i also have some circular dependency but uh yeah and then there's one more thing so um vs code users so when you when you view uh um when you build your component in a scam approach can you so from the template can you start typing uh some component and then it a vs code suggests to import a module of that component or do you have to import the module manually um i think it really depends um in my use guy i i usually have to do it manually can i share something real quick of course i'll show you um um so here we have the um let's say i wanted to import i know maybe some kind of candy store okay no this time because i cannot [Laughter] i'm sure i'm sharing my screen i'm sharing my screen at the moment so uh i think it's not the problem with bs code oh i think it is a problem no it is a problem vs okay all right so just very quick example so you see right here we have the play button module and display button module is absolutely a scam it is it has one uh play button component and it export one play button component so when we want to use the play button component anyway we just need to import the play button module so here is the uh navbar playlist module and this is where we use the uh angular spotify play button and i'm going to remove this one i'm gonna remove this one just like i don't i don't have the play button module in here yet but now over here webstorm i'm gonna yell hey i i don't find any play button component available in this module so it knows that the math playlist playlist component is being declared inside of navbar playlist module and inside of navbar playlist module doesn't have anything to say playback webstorm can import the play button module for you [Music] can we explode from the table that is so cool okay that's all i want to show it is like um for me when i i developed the application i this is really struggling isn't like for example i import the component already but when i try to you know type it on the screen on the template part it just doesn't give me the suggestion for example yeah or it just doesn't give me the the right input of the component itself yep so that that's one of the few things that i kind of i i started with um vs code so to be fair i started with vs code but i switched to webstorm but then i can never switch back to vs code i tried multiple times but i can never switch back to bs code so because things less like little things like this one like productivity boost you can just start very focused on your template you don't have to go back and forth um with module that's that's oh yeah it's gonna really help on productivity because you are the one who developed the component and you know exactly how slow yeah sometimes we just wanted to type it directly and then you want to yeah absolutely yeah the editor to import it for us but yeah i think there's one question on the chat so why you always put specific project specific configuration file on xlab yeah you can answer that actually you should i don't think i have that all right so this is uh generated by nx we do not put it in there it's generated by nx and when we generate a library um a library let's say we want to generate like a new uh component we're going to generate that component as a library so it's going to generate all the ts config and it's length wall together with that library the reason why is so when you when you work on that component you can test you can lend and you can build that component by itself so it's isolated so you know for sure that by by itself by by a unit it works so that when you use it somewhere else you know that it's going to work another reason why is that when we break into like a lot of libraries so when we have actually we're going to show this are you um uh is your git tree clean like do you have anything in your git status no i think i don't have anything i think all right everything we just produced yes all right so let's try this so let's um let's um run npm run and paint run depth dep that's graph let's just show that that's yep so this is the dependencies graph right we can just select the angular spotify we can just select uh uh select and i guess oh and then click on that uh click on that icon right next to the checkbox of the angular spotify that's like yeah so this will show everything that angular spotify is being it depends on then you can just click on let's say like there's a artist feature you can click on that icon again right next to the artist feature then it will just show what uh depends on the artist feature and what how this feature depends on so this so let's go to let's look for the nav on the navbar playlist because i want to show it because i have it in here so look for not more playlist it's clear i think it's web just let me do it again and then now apply this yep or i don't know what you call it um oh is this dry it's not about this yep so let's just click on that right so this is the dependencies craft of knockbar playlist so this is what the navbar playlist depends on and what oh excuse me what the navbar playlist uh what depends on enough but it's playlist you can see that now by playlist depends on the display button all right so let's try this now go to um i'll go to the code go to vs code and make change to the play button make any change to the play button component it wouldn't just make it anywhere just making a change i should put a yeah all right let's just say that now run uh go go back to the terminal stop this can stop it and now run npm run affect it uh colon that i never run it before so now this will show that because you change the playlist the play button it will show every single module that get affected by this change and you will see there's a left bar playlist in there on the left hand side on the top that's right yeah so because now you change blade button when you run affected build affected uh test and effective blend you only test and lend these modules without linting or testing the whole application so this is the power of nx affected or dependency graph yep i mentioned it at the beginning but i'll never run this effect i don't usually run it as well i just i just run it for show yeah i think it's like it's pretty cool i run it for sure it's pretty cool actually yeah yeah i think as uh when you get used to the the rhythm and it has the structure you know sometimes yeah just try to check but you don't really care but just one question then um so when the like the play button is updating which means that the navbar playlist is also get affected yeah and because we import it inside the shell feature so that the whole like the whole module like the whole list of modules on the screen all of that needs to be reviewed right yep all right okay yeah okay i get it very cool i think yeah i only show like dependency graph and affect the dependency graph when i try to sell nx so yeah yeah i put the uh this i think that i put some small wrap on the rhythm itself that's it ah anyway here's the has the uh the new thing oh they there i've seen it there's a type of content on redmi which is pretty why i've i didn't i never i didn't know that probably because i don't have that many things that may read me he sure will have soon i think that's the fancy wrap yeah i'll just take a quick screenshot on the show this when you look it's like that you know there's a few feature and you know that probably it's gonna be corresponding to the how many rounds you have and yeah i actually wanted to show it quickly on readme otherwise just showing this big graph with everything is stupid all right so uh maddie boy has a question i'm gonna answer that one and i'm gonna i'm gonna take off uh yup all right so we just uh metaboli asked we just migrated from what multi repos to nx model repo to take advantage of shell libraries ui and data model what a game changer in case of multi-projects what is the strategy for deployment for them so multi-projects uh i understand i assume you talk about like multiple apps all right again it depends uh talk about ci cd deployment it depends it depends on your infrastructure it depends on the service that you're using usually uh with big enterprise uh companies they they use like third-party libraries like i guess like jenkins and azure devops and stuff like that but for uh open source stuff i've seen github actions a lot so i mean for the strategy of for deployment it it it's like deploy anything yeah it's like the point anything that you've been deploying just like before it's nothing really change but you can with nx you can take into a consideration of those affected commands right let me let me give you something uh if i could deploy this one i'm going to share this in private chat and trunk and bring that out so i just share a uh an article by the way just put it in the description later so this article shows you how to use the uh affected a command to deploy only the affected applications but now you you're going to run into the problem of like uh versions right sometimes in the model repos you you try to keep the version of all the deployable or a publishable app the same like via semantic versioning like 1.00 then only one app change you might or might not want to deploy everything to 1.1.0 so you don't have like one app at 1.0.1 but then another app is at 1.1.0 so this really depends on on the team on your projects but yes you can take advantage of the affected commands to to work that into your ci cd to decrease the view times i'll put it uh into the into the note later on i think what to say damn sharing the wrong thing give me and uh i think joe is you you're saying after this question you want to take off right you're busy so yep so i'm gonna take off let's start a night routine with a baby maybe next stream if the baby is awake or if it's in the morning i might be able to show the baby on the stream sure thank you yeah yep all right thanks for having me i'll talk to you guys later bye see ya talk soon yeah um and to answer the uh like to i think to to continue with the affected bill f um yeah right um i saw the article about you know um how to configure because the okay i'll show you quickly easier just give me a moment i'll i'll check the article and then i'll share the screen again but i just wanted to show you quickly how i deploy the spotify into 95 this is gonna be super easy but for your enterprise and with api and service it's much different different because for spotify there's only you know the um only one um f so it's super easy to deploy but give you has money for f difficult so i show my my screen again so that is the nullify where where i deploy most of my app so for spotify um for 495 to be able to use it you know you can deploy any kind of application into nullify basically what it does like after you run your build command you have some you get your static file like html javascript and cs and you just take it from there and serve it on on the url that you provided or with the default notify you domain so what i do at the moment is for the deployment i'll still run this command which is npm run view production and if you look into the packet json again you see that the view plot here basically just deploy with the environment production so if first like if you use github action and then you can configure it to call this command which is affected build this is gonna be really fast like basically yeah just need to configure the affected view in your project and this will make thing a lot more easier um i can show you quickly how how long it's going to deploy at the moment it's just up to production so the the current one is deployed in like 51 seconds i think because i didn't really change a lot and then also um they has the result question from annex cloud you haven't seen any cloud basically when you for example your team have five engineer and then after you pull in the lattice chain right usually you need to review the the code to get it running on on on the browser but then because you configure it with con like nx cloud which means the last engineer who pushed the code he has already built and all of the assets have been stored into into the cloud so next time when your your fellow engineer pull the code and then they run it locally and if they check if there's nothing changed and there's the there's the data inside this the cloud cache that you can just type everything from there and it's gonna be a massive change because for spotify it's gonna take like one or two minute view but if your application is really big it could take like five five minutes and to save you five minutes like few times a day i think it's going to be a lot so if you want to look into any cloud take it take a look and to see if it's going to benefit your your your your application your application and yeah i think we on top of the hours now 11. um uh i think that that's it for today um i wanted to show you how to build the brow split but sorry uh we don't have uh enough time but um i'll try to to schedule another another session um and before we left i'll just show you what i i did i i added a feature yesterday when you you know play a song it will triggering i think it died now i need to refresh because there's no access token so when you play a song now it will display the background of the album blurry i think if you considering building a music player you might consider it because it's just a tiny line of code and makes the experience a lot more you know if you it is customized and really i i want to view it and i really like it i hope you also like it and uh thanks everyone for for tuning in today um sorry if i was speaking too fast or you know there's some part that i was not very clear you have any questions feel free to drop me a note on twitter or or email you can find it on on on the um repository itself and uh yeah i think that's it for today thanks for watching everyone and uh happy weekend bye you

Channel: Angular Singapore

Views: 3,299

Keywords:

Id: 9njo6MZWBN0

Length: 68min 2sec (4082 seconds)

Published: Sat Apr 03 2021