Nx Quickstart - How to Scale a JavaScript Project

one of the biggest challenges of building a full stack web application is managing complexity if you're building a serious product you likely have multiple front-end applications that communicate with a back-end that share interfaces with multiple team members that need to collaborate efficiently today we're going to look at NX from Narwhal a tool that can dramatically simplify the way you organize tests and share code between multiple JavaScript applications if you're new to the channel like and subscribe and you can find the full tutorial on NX dev the tool itself is based on the best practices developed at Google to scale thousands of applications across thousands of developers in a single mono repo but you don't need to be operating at Google scale to see the benefits of NX it can be a very powerful tool for projects of all sizes and not just angular but full stack JavaScript in general so why do you big companies like Google Microsoft and Facebook like to manage their code in mono repos or in other words use a single git repository to manage multiple apps and libraries the simple answer is that this approach helps manage complexity by applying best practices organization-wide this delivers consistency and predictability in your code while also maximizing the ability to share code between projects but you can't just put all of your code in a single repo and expect to reap the benefits you need the right tool in place to test build and deploy your apps at scale and that's where NX comes in over the next 10 minutes we'll look at how complexity can grow very quickly in a full stack project we'll build two front-end applications one with angular and one with react and then a shared back-end with nest on top of that we'll add multiple shared libraries that can be used by all three of these apps let's go ahead and create a new NX workspace to see how it can help us manage a project like this from the command-line run npx create NX workspace followed by your organization or product name this will give us an empty workspace and we'll be writing most of our code in the apps and Lidz directories right out of the gate NX is going to help you separate your shared code from your application code for example you might have two front end applications one for your customers and one for your employees those apps would live in the apps directory but they might share common UI elements that would go in the libs directory so this works really well when you have a design system where you share common UI elements across multiple apps but you might also have a back-end app that gets deployed to a node server and if you're using typescript you'll likely want to share interfaces between your front-end and back-end code without having to duplicate and regenerate that code those interfaces can also live in the ellipse directory and be used reliably throughout a large application let's go ahead and imagine that we're building a product for a travel company we have a team of angular engineers who are assigned to building the front end customer facing app we can opt into specific tooling for different frameworks like angular react and SJS so we'll go ahead and do that for angular first our team of engineers want to use modern test tools like Cypress ingest NX gives you the option to just set those things up automatically without any configuration on your part now that our workspace is configured for angular adjust and Cypress we'll go ahead and generate a new app that will create a new angular app just like it would with the angular CLI but tailored specific to this workspace you can find the app in the App Store e along with a folder for end-to-end testing configured with Cypress now up until this point we've just been using the terminal to run these commands but there's actually a better way to do this if you're using NX I highly recommend that you install the angular console vs code plugin the plugin allows you to easily navigate all the commands that you have at your disposal through NX you don't need to memorize any commands or search through the docs it's just all right here in your IDE and this really helps manage complexity because you might have dozens of apps and libraries in a single mono repo for example if we only want to run the end-to-end tests in our current booking app we can do that by selecting the options we want and then clicking a button and that will give a cypress running and end tests for this specific app and from the same screen we can also run our component unit tests which were set up with chests and another cool feature of the console is that it will save your commands in memory so you can rerun them with these same options by simply clicking a button without having to think about it now having this modern coin is really nice but the most powerful benefits of NX start to kick in as your app grows in complexity at this point we just have a single customer facing angular app but let's imagine we have a separate team of developers who are working on an internal admin app for managing customer bookings but this development team prefers to use react now like I mentioned earlier you can use NX with any JavaScript project but it also includes first-class support for react we first need to opt into the react to lien by running ng add Narwhal react and if we go back to the console will now have access to schematics specifically for generating react applications and components we'll go ahead and generate our admin react app just using the built in defaults and now we have a second application in the apps directory along with its own end to end test suite now at this point we have a mono repo with two individual applications in it but one of the common misconceptions that you may have heard is that putting all of your code into a single mono repo will slow down your testing and deployment pipelines in a large project you only want to rebuild and test the portions of the app that have been affected by change that might be an individual application or it might be multiple applications that have been affected by a change to one of their shared dependencies an ex can detect where code changes will impact the mono repo allowing you to efficiently work with change in isolation at any scale if we look at the git master branch you can see we have a clean working directory with no changes and if we go to the angular console under dependency diagram we can see both of our apps here which are currently grayed out because there are no changes but if we go and make a change to our react app it will be automatically highlighted in red and because NX knows which apps are affected by change in the current branch we can test and build those in isolation and this is what Narwhal means when they talk about developing like Google because a company like Google might have thousands of apps under a single mono repo and the only way to operate them at scale is to understand what apps are affected by change if you look at the commands under the angular console you'll see a bunch of them that are prefixed by affected these commands allow teams to work simultaneously on several apps or libraries and be able to build and test them in isolation without having to worry about everything else that's going on in the mono repo this is especially important when you start talking about code that might affect multiple apps we can demonstrate that by generating a library with NX that will be used by both the angular and react apps we'll go ahead and call this our utilities library and because I used the default schematic it's just going to generate a vanilla typescript project but you can generate frameworks specific libraries as well now another feature I want to point out before we go any further is that you have the option to add tags to your libraries this part is completely optional but tags allow you to control which types of apps can take this library as a dependency for example you might have a front-end shared library that touches the Dom that you wouldn't want to be used by a node project so if a back-end developer tries to use this library as a dependency they will get a linting error that will tell them it's a bad idea now if you've ever created a shareable library you know that there's a lot of steps involved you need to set up your typescript config your build scripts and all of your testing utilities but as you're about to see an X makes this entire process completely trivial at this point we'll go into the source code for our utilities library and I'll export a variable called unicorn rocket that contains some emoji characters because our design team said we need to show these characters on every single home page of every app throughout the entire company now the awesome thing about NX is that it makes code sharing dead simple at the beginning of this video we set up this workspace with an organization name and we can now import all of our shared code from that namespace starting with the @ symbol all the configuration is done for us so all we need to do is import the code that we want to use we'll start by doing that in our angular app and then we'll switch over to react and do the same thing there so now we have two front-end JavaScript apps sharing a common set of utilities now the really amazing thing is that NX will keep track of all the apps that depend on the shared library let's just imagine that our design team comes to us and says that we need to add an additional emoji to this string if we make that change on a clean git branch and then go back to the dependency diagram we can see exactly which apps are affected by the change so even though we didn't actually change anything on the main front-end applications they'll still be highlighted in red because they depend on that utilities library which did change and it's also worth pointing out that there's an additional command provided by NX that will help you visualize the entire dependency graph with the affected libraries being outlined in red now at this point we've only been talking about front-end code but NX can also handle server-side node projects with first-class support for nest and Express and this demo we'll use nest and the first thing we'll do is opt into the schematics and then we'll go into the angular console and find the command to generate a new nest application will give the backend a name of API and its responsibility is to fetch items from the database related to customer bookings this adds a another app to the apps directly but this time without and end testing because it's a back-end project now one of the most common things to share between your front-end and back-end code are your typescript interfaces a nest will want to read and write data in a back-end database and make sure that that data has a specific shape with a typescript interface but will also very likely want intellisense when we read that data and use it in our front-end applications what I'm doing now is creating another NX library and then I'm going to add a typescript interface to it called reservation by putting this code in a shared library we can now use it in any one of our front-end or back-end apps and on top of that we can leverage the dependency graph to figure out exactly which apps depend on this data type so if this interface ever changes then you know exactly which apps to test to build and ultimately deploy to your production server so there's a lot of obvious benefits to a tool like NX things like modern testing tools like Cypress ingest a dependency graph that will help you scale a mono repo to an infinitely large team as well as task runners and code generators to keep your project organized and the end result is a set of tools that will help you develop like Google giving your organization a predictable way to collaborate and automate complex web applications at scale I'm gonna go ahead and wrap things up there if this video helped you please like and subscribe and make sure to check out the full tutorial on NX dev thanks for watching and I will talk to you soon [Music] [Applause] [Music]

Channel: Fireship

Views: 52,330

Rating: 4.9381852 out of 5

Keywords: webdev, app development, lesson, tutorial, react, angular, angular 8, nrwl, nx, nrwl nx, monorepo, google, scale, google developers, nrwl connect, monorepo vs multirepo, cypress, jest, dependency graph, nestjs, nodejs, node, js, ts, typescript, javascript

Id: VUyBY72mwrQ

Length: 9min 39sec (579 seconds)

Published: Tue Jun 04 2019