JavaScript Marathon: Using Angular Libraries in an Nx Monorepo

hello and welcome to javascript marathon training presented by this.labs my name is sarah renaud with the stat labs and i will be your host our next session is all about using angular libraries in an nx mono repo our trainer today is pato vargas software engineer at this dots hi pato welcome thank you feel free to reach out on twitter using the handle shown at the bottom of the screen if you have any questions or feedback please don't hesitate to get in touch javascript marathon would not be possible without our sponsors our sponsor today is this.labs your partners in modern digital transformation we specialize in mentorship consulting training and staff augmentation for enterprise organizations find out more at this.labs.com or send us an email at hi this dot dot co do you find keeping up with the constantly evolving technologies a struggle do you want to bring your team up to speed on one of the latest technologies the stat labs offers personalized training programs to suit your organizational needs ensuring you and your company stay on the leading edge contact us today at hi this dot dot co to set up your complimentary needs assessment we have a ton of upcoming events coming up soon this friday graphql madrid meetup 12 p.m eastern time also check out our global meetups in angular graphql react and view more details are available at this.co and javascript marathon will be back october 28th and with that i'm going to hand it on over to pato awesome give me a second yes okay so i'm gonna share my screen [Music] okay okay perfect so um so today we are gonna be talking about uh using angular libraries in an nx monorepo and both first of all thank you so much to this dot for making this happen um if it was for them we wouldn't be here and i mean this is awesome that it's free so thanks everyone for joining the the talk um like sarah was mentioning i'm a uh software engineer for the zot i'm also a google developer expert on angular and a media developer expert for the company cloud scenario 0 ambassador so now we're going to start getting into the technical side of things and the thing that i'm going to start with is shared code well what is your code sureco is basically uh pieces of code that are going to be shared between your application or multiple projects and multiple apps right this could be like css components interfaces service services images and more and more and more but there are two kinds only of sure code and at least the ones that i know right so those kinds are shared code by application and the other one is short code between projects using libraries right uh so i'm gonna walk you through a little bit how the setup of a sure code by application looks like right so essentially you will see something like this uh you're gonna have a folder called shirt right then you're gonna have components your containers your models modules and so on obviously you do not have to have this um set up this is just the way i like to structure my code but depending on the company your teammates your business requirements you might have um a different instructor right um but yes this is the uh instructor for a application where i'm gonna be having reusable code inside of that application right so when i talk about circle by application i mean i'm gonna have code that i'm gonna be reusing in different components or different uh pages right but they only gonna be shared inside of these applications they cannot be shared outside of um of this application you cannot put them somewhere else right so they're only intended to be used inside of all the current app that you're working on so for example um a share code of an application could be let's say that you're building a school application right for i don't know for your local school in your country and they need to have a search bar and the search bar um allows you to either search for students or search for classes right so you might want to have a shared component of of a search bar in order for you to use it between uh your different components like the one for the classes look up or the students look up right but this search for like one more time is only going to be used inside of this application now uh let's talk about libraries and monorepos when you have code that is going to be shared between apps inside of a project like services and components uh you can do so by using angular libraries right so now you might wonder okay this is cool but we're gonna get more into detail so don't worry about it yet so where should my libraries live so if all developers of a company are set to work on the same main project no matter how large a monorepo could be a good solution if instead developers are set to work on different uh projects in different teams locations and more importantly code bases you may want to build each library inside of their own repository right so and by a repository i mean like a npm repository so i'm just going to give you another example of when to use a mono repo and when to use the uh repositories by um npm right so for example um an example of monorepo could be when you are working for an enterprise company and you have the hr department and the finance department and the it department so you have three departments you have the hr you have the finance and you have the its department and they want to have their own application so each department wants to have their own angular application most likely since they're under the same umbrella the same corporation they're going to be things that um that all of them are going to need like they're going to have in common things that everyone wants to use right for example could be a authentication service navigation bar assets and css just to keep you know the branding of the of the company align and this could be easily done using a monorepo right now but for example if your team is a consulting company and they want to make an application for a school and and a bank right well uh monorepo shouldn't be your first option since you may not want to share the code between these applications because first of all there are different clients and they might not have anything to do with each other so there's no reason for you to uh to use a monorepo so in this scenario um you can use um um angular libraries and host them in your npm repository they should code between projects right um showing your code in the same app is is pretty quite easy you know you create a component and you just inject it into into the other component that is going to be using it or the service and so on and just call it a day and that's it but if we have services or components that do not um change very often then you may want to put them uh inside of a library right so something very cool about sharing libraries between teams and products is using npm but what happens if you have this library uh inside of your organization that you only want people inside of your organization to use right so you're going to be injecting the uh the npm package instead of the uh and the library and all good but then maybe someone from i don't know um outside of the us or from a different company they will have access to your um library instead of you um because instead of um npm and npm is public but thank lord um npm has a private uh repository so you're free to to like pay for it so now everyone inside of your organization under your umbrella or anyone that you give access to are gonna be able to use your um your library so anyone outside they want so pretty cool right okay so far so good so now we're gonna be talking about uh the process of the libraries we have to think with reusability in mind when creating the libraries because these libraries will be used in multiple apps and projects so what are the pros of using libraries so one of the pros is publish and share the libraries with other teams or projects right example if you're only going to use uh the components one time only one time where should you put this library should you put it um uh should i'm sorry if you're only gonna be using this component inside of one application should you put this uh component in a library or should you put put it inside of a shared folder inside of your application and probably a library is not the solution because like i said it's only going to be used in one application so there's no point uh for you to put it in that in a library in npm registry or whatever right so hopefully by this point you already have a solid idea on when to use libraries and when to not now not everything it's good with libraries sadly and libraries have a few cons so some of the cons are that you have to link your library to your main project and rebuild it for every change if not the changes won't take place in your application if this is distributed via npm and built outside of your main project you will need to keep syncing your project with the latest version of your library that you're using if you do if you don't do this then um your application might not be working as expected so for example imagine we have a library that is getting used across your organization in multiple projects and one of your co-workers says hey guys i actually just found a issue with the library uh an authentication problem and i'm just gonna fix it he fixes the problem then if you don't update to the latest version that he published then you're not gonna see the the fix right so that's something that you have to keep in mind you have to be coordinating with um um in the in the company or everyone who's maintaining the the library when are new versions coming out and so on so now we are gonna start getting to the cooler stuff which are the angular mono ripples uh so what is a monorepo monorepos are a source control pattern where essentially all the code base lives in the same repository all the projects we um will always use the latest version of your course essentially you don't have a code version you don't have libration 1.0 and so on you made the change somewhere and and call it a day because everyone gets updated so one more time a monorepo is a source control pattern where essentially all the code base lives in the same repository a difference of whenever you're using libraries in an npm registry every single library has their own repository right so you can already start seeing the differences so what are the pros of angular monorepos the first pro is similar version for every app right which in this case i said uh version but i mean you don't really have the version just the latest uh or the muscle dated code is what you're gonna get is to maintain when you update a shared library you update it for all the apps make a change everyone sees the change and no conflicts between versions building on a an angular project as a monorepo containing more projects and libraries is an appealing solution but really practically difficult to undertake for massive uh technology companies right because you really have to have a good communication between teams letting them know hey buddy i'm gonna change this um library and you're gonna see some changes in your apps instead of expecting let's say a navigation bar to be blue now it's gonna be green so you really have to have good communication on that that's why i find google uh really impressive because google uses the monorepo pattern and i mean google is a massive company and they do pretty good at coordinating uh when new changes are coming out right so for example whenever they are working on a new illustration the angular team and you know it's pretty much done and then they i mean they build it and it gets tested across every single application inside of google and you're stuck you're not talking about like one two three applications you're talking about like thousands applications like i think like over 2000 applications are using um angular in google so it only takes one application um test for it to fail and if it fails they don't um they don't approve the changes right so it's actually really cool so now be careful when using libraries i see many teams believing that an npm package um you know like having your libraries in a big npm package a repository are the way to go and and that's the way they like to share code the problem is that um it creates a lot of friction uh for sharing the code because every shared library needs to have their own cacd pipeline each cicd pipeline should handle versioning of changes right so i mean you should update from every time you make a change you're not just going to have it in version 1.0 right you're going to have like let's say 1.1 1.2 2.0 and so on and every time a new change happens in a shared repo you need to go to all the projects that are used in this library and they update their npm package right change the version npm install and color day and the last one is there can be mismatches with different npm package for the clients in general it's hard to do cross cutting change across multiple applications and libraries as um each one of them like i was mentioning has their own repository right so it's more things to handle more things to manage and i mean that um can give a few a few problems that's the reason like i mean well no that's another reason but that's one of the reasons why uh google and facebook like to use them on a repo pattern now but for every problem right we as software engineers we try to come up with a solution you know we always try to outsmart people and you know we are always lazy so we always try to come up with awesome uh tools to make our life easier and we have cheddar cheddar is a mascot from a nerve wall that's jeff scrolls uh pets and he's gonna be our saver because he's gonna be letting us use nx and the next easy uh tool that we're gonna be talking about right on on using um angular monorepos nx is an awesome tool i really like it first of all it's free right it's open source uh so you if you ever feel like contributing feel free to do so and uh another cool thing about nx is that it's just not a product for uh angular you can use it with react you can use it uh with net gs and also shout out to my uh to my boy b man because he made a plugin for i go to be able to to be used inside of a nx uh workspace and um and overall i want to give a shout out to the nx team i mean i put some pictures in there there's a lot of people a lot of people missing uh so don't forget to uh give a shout out to them on twitter right for uh creating this awesome this awesome tool one thing i really like about um nx is like i was telling you you can use uh nx with uh multiple tools like nest yes and angular right but that doesn't mean that you have to use it separately inside of your monorepo you can actually have um angular right and you can have a and you can have nests inside of your same on a repo at the same time and the cool thing about it is as you know angular uses typescript the same as nest gs sjs is a technology technology used in the backend so if you create an interface right you're gonna be able to use it across angular and across an sgs without having to create interfaces uh for each project so that's that's actually really cool so now we are gonna get our hands dirty and uh i'm gonna get into some into some live coding and in this live coding i'm gonna show you how to convert a um a small application in angular uh to start using libraries inside of nx so just give me a second i'm gonna stop sharing my screen [Music] okay [Music] so now okay uh hopefully you guys can see my screen uh give me a second do some adjustments right here give me a second guys okay uh-huh and it's your screen okay perfect um so hopefully you guys can see my screen right now and as you can see um in this screen i have a angular application right and this application is is inside of a nx work space right and for example the nx workspace has this folder called apps and my app is called block right you can create multiple apps inside of your um instead of your nx monorepo we also have a shared folder for my assets i have one for libraries and i'm actually gonna delete uh this folder because we're gonna end up building it again so you guys don't think i'm like fake news um everything is real um so i don't think i'm like cheating and essentially let's go to this uh block application as you can see i have um a post details right and this post details you set a component in angular doesn't have anything crazy everything looks the same i haven't changed anything or nothing's gonna change just because i'm using nx workspace right um and i mean you you know i'm using um sas everything looks the same like if you were using or creating a just a regular um a regular um application of angular right i have my up routing you know with just some tiny drawing right here um like the calls or invokes um the components that i want and i have my app that module which one more time it just looks like any other uh module that you may have in your um your applications in angular so the first thing that i want to do is start sharing code right so i'm going to start with sharing this interface um in my monorepo so the first thing that i have to do is type nx right which is part of the schematics that they created and then type g for generate then type norwall then um backslash i think that's the word space then live oh i misspelled see that's the reason you never do uh light coding because light coding always uh has their issues so nx ng narwhal aha boom let's see if it gets generated awesome my library has been generated so now what i'm going to do is i'm going to copy this interface right here and i'm going to copy the code and paste it into the library that i just created and as you can see it says list right here i go to my library post and the source all these files are generated by uh for you uh by by the schematics and i'm gonna paste the code awesome now i'm gonna go to my index and as you can see i have my barrel right here index.cs and this is sharing my uh my post now what i want to do is actually use this um this library right so the thing i have to do is go to my components are using it which in this case is the post details and i'm gonna change as you can see it's using this interface right here and so you guys one more time don't think this is fake news i'm gonna erase this uh file and of course this file doesn't exist anymore now i'm gonna do the name of my workspace which in this case is ngconf because it's a similar talk that i gave to the ngcom colombia and i specified the library that i'm going to be pulling this interface from so we're going to copy this line of code and we are going to use it in the other components that are using that interface which in this case is going to be this other one right here the post page and we inject it so far so good and the services is the other one so we save it cool now we are just going to run it next next serve let's wait for this bad boy to build do its thing and oh of course my port is already induced classic right um so i'm just gonna stop it and just one more time okay now i'm gonna go to localhost 4200 and this was open actually in a different monitor so give me give me a second guys so as you can see now i'm using um this interface right and this interface is shared across different components and everything gets rendered right everything is working no fake news so now let's jump into something else now what we're going to do is create a ui library right which in this case is going to be the following so nx g add nerve wall angular and then you're going to type leave and then ui right and i'm gonna select uh sas and if we go down here right we are going to see that um i have my libraries and i have a new folder called called ui so if i open the ui i'm gonna see some generated files i see source i see leave and instead of leave i'm gonna have a ui module right that looks like any other module generated in your um in your angular apps so now the next thing i have to do is um it's nxg component right i'm going to create a component called post and i'm going to do project ui exports right so i'm pretty much selling the library hey i'm going to create this component and add it to the exports array let's see um i'm expelled and because you know expert is export so as we can see you see how we got added by us right here in this component so that is awesome right that's uh good stuff and what we need to do now is go to my component that i want to convert into a library which in this case i'm going to go to this post page and if you look at the html the html has just regular code um like nothing crazy that is things that are going to be rendering in my component and as you can see i'm using a router link so we have to keep that in mind since i'm using router link i'm gonna have to inject um angular router inside of my uh library right so just keep that in mind so one more time i copy this we save it and we go down here to my component that i created and i don't know i'm okay post aha uh-huh now i have the code now the next thing i have to do is go to my post um component right and i have to um what i have to do here i'm gonna have to do um put input post gonna have an array of post and i'm gonna be using my interface one more time the one that i just created so i'm just gonna like copy paste it if i go here boom right so now we have my interface that i'm using and then give me a second okay now what i have to do is in my application i already have the input right i i'm already have the interface so far so good oh yes now i have to go to the ui module and i have to um inject the router like i was telling you guys right so i'm just going to copy this line because i don't know it by heart i should and i have to put it in the common module um imports i'm sorry next to it and we save right we save this code as well now what i have to do what do you think i have to do now i have created my library i have my code inside of there now i have to use it right so the next step it's going to be me injecting this library into um into my app.module so how do you do that we go to the update module right and right here we are going to uh inject it and the way we do it is super i'm sorry it's actually quite simple we're gonna do import ui module right from angular and then uh i'm sorry it's not angular i'm sorry i'm sorry it's ngcon which in this case ngcom remember is my workspace name and she [Applause] [Music] and it's not gonna be post is gonna be ui be careful as you can see this is being marked as red right um and i'm gonna add it to the imports array as well and you might be wondering why i mean my library actually exists and this is a problem with vs code so um i'm letting you know this so you don't like panic like i have uh before so all you have to do is just literally restart vs code and that problem is just going to be like fixed just like that so like magic so if you want you can call me houdini like the magician because i fix um this issue super simple uh so just give me a second okay so here's my bs code and i open it up and you see just like that just like magic the issue it's gone so now uh we are gonna run oh no i'm sorry no now what we have to do is actually use that component right the one that i created in the library so if i go here um to my post as you can see it's using this selector right and now i go to this page now i'm sorry this one and i'm gonna inject it and then i'm gonna do post right because remember that we're using the input because we're gonna pass the data and something that i forgot before is that i need to do puzzle stylings as well so i'm gonna copy all these styles and put them inside of my library okay save it so far so good now i go to my uh to my library that has my component post and i'm just gonna paste the css that's it right so now this should be working let's see let's see if it works if not you guys can follow me on twitter and hate me forever okay so there's a problem uh ah there's a problem here oh cause i misspelled it let's see okay so now if we go back to the application that i have right here you see it's actually working again no problem no fake news it's right there we are now sharing code so uh another thing that i want to show you guys is how to create a service right and share this service it's a little bit different but almost the same so um give me a second because i just realized that my hey everyone so alpato fixes a couple things if you want to just drop some questions for him for a q a feel free to i'm sorry i mean i'm sorry i've been talking and i realized that um that i was muted oh my god i've been like talking for like five minutes uh my bad so uh sorry so let's go back in track um sarah can you remind me where i was left um i think it was when i was creating the light and the service right yes um can i help me out okay i'm sorry guys um i didn't do much uh so all i'm gonna do is show you guys how i create the uh the service um so it was with this line of code right here that you can see on my screen everything good sarah right now yep that looks good okay we're back on track i'm sorry guys so uh so we're using nx uh the g for generate and we're using the s for service because i'm creating a service i name it block right as you can see and i'm specifying the project which in this case the project is going to be my library called ui which is the one right here i'm not going to click enter because i forgot to i don't know what happened with my mic you just mute it but essentially creates a a new um a new service uh which is right here right so one more time i entered this line of code the one that it was like the nhg is block project and then ui and it's gonna i'm sorry ui and it's gonna generate this service right here now uh like i was telling you guys um i was pretty smart and i made the name of my service the same as the one that i had before right so all i had to do was copy paste the code into here and i don't have to make any more changes and as you can see my code on this new service that i created in this library has already the interface that has been shared across my monorepo now what i have to do is actually use my service into the components that we're using uh the old service right so as you can see back in the in the days or back a few minutes ago it was like this and it's like that because i erased the uh the original service so what i have to do now is tell my code hey i want you to use the one from uh from my ui library so all we have to do is copy paste this code right and we're gonna go to post page which is the other one that it was using this uh old service now we want to use the service instead of my library we save it and let's see if this works this hopefully i didn't break something again um okay everything looks good now if i go there you go i'm pulling data uh no problem everything looks good right no fake news i'm refreshing it works now if i click in this it takes me to the actual details page which is um another component that i created right and as i showed you at the beginning of the talk i was showing you the uh the routing that's the reason i need to inject the routing into my ui module because i was doing the redirect so if i go one more time if i go to my component that i was creating instead of the library we're using router link right so every time i click on a post it's gonna it's gonna redirect me to another page and that page is gonna pull the song of this artist right that's one of my favorite artists he rocks so um so yeah the last thing i want to show you guys is that um how many times it has happened to the to you that you are in a um in a company in a big company and you want to share assets right it's really annoying that you have to wait for for the designer or for everyone to uh to give you the image for example in this case this logo that you're seeing on the screen right it's pretty annoying so um yeah using the monorepo pattern is actually really easy right so you are gonna just put the image in one place and call it a day and boom we're good to go so i'm gonna show you how we did it so if you go to the inside of your uh project right you're going to see i'm going to close up and you're going to see this angular.json file and instead of your angular json file there's going to be this property called architect and then if you look down it's going to say say assets and all we're gonna have to do is grab this um we're gonna paste or write that code right there so basically what this is doing is installing your application hey i have a folder called share assets and it will go to my list so let's um backtrack it so i go to leaves and then i have these fully share assets and i have my two logos that i that i want in this monorepo and now anyone that creates an app they can use it without having to import it themselves so now uh you might be wondering what is this for so basically we're installing this um the the computer is hey just convert essentially stone convert this um route of share assets converted to assets and then people can use it uh from assets instead of using share assets you don't have to do this but i like to do it just because it's more clean so if we go to the post components uh i'm sorry to the other component which is the details component if i go here i'm sorry the page component as you can see it says assets assets images and then the logo that i'm using and i'm not using the folder name called shared asset i'm just using assets because i specified one more time in my angular digestion that this is where i want to get the assets from so uh the last thing that i want to show you guys is something super simple um let's see um so i actually created for you guys a a tutorial right and you can find those tutorials right here and those tutorials are on devto and they're going to show you line by line step by step by step how to create your first monorepo right using an x and how to start creating libraries inside of your nx monorepo so now i like before we were just like converting right starting from already a project already set up and then we converted uh components into libraries now in this tutorials that you see on the screen you are gonna be able to start everything from scratch obviously a good resource uh for learning about nx um is the actual nx page right and so that's it that's all i have for you guys if you guys guys have any questions feel free to show them in the chat if not um just let them let me know um on twitter so i'm gonna stop sharing my screen okay um perfect guys um any questions so far so good um i don't see anyone having questions so i get that's good hopefully it could be either good or bad right could be like i was like super clear or just people just didn't uh understand anything i'd say so hopefully it was that everything was like super clear uh like i said uh don't worry if you cannot come up with a question right now feel free to reach out to me on twitter send me a tweet and if i do not know the answer i might be able to find someone i know so thank you that is all thank you pato so much stay tuned our next we are having christina gordon is next so um stay tuned for more javascript marathon thanks so much for tuning in guys

Channel: This Dot Media

Views: 2,452

Keywords: JavaScript, Angular, Vue, React, RxJS, React Native, Flutter, Lighthouse, Cypress, Bazel, NgRx, Node, Ember, HTML, CSS, Tailwind, TailwindCSS, web developer, javascript tutorial, programming, architect, This Dot Media, Tracy Lee, Google, AWS, Azure, Microsoft, software engineer, developer, Laravel, NextJS, nuxtjs, women in tech, 100 Days Of Code, VueX, react hooks, GraphQL, react js essentials, angular essentials, vue js essentials, API, modern web, podcast

Id: frswk1syMiw

Length: 44min 6sec (2646 seconds)

Published: Wed Sep 23 2020