React Summit

React Summit 2020

Nx is a next generation suite of build tools. Next.js is state-of-the-art framework for building web applications. Together they bring order to the chaos of building multiple web applications across many teams. This talk is a quick rundown of how Nx can help you maintain multiple Next.js apps, with multiple teams, while sharing components and libraries for consistent user experience. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Nx + Next.js = ❤

♪ Hey, everybody. My name is Adam Elbert, aka BigAB, and I am a core contributor on a project called Annex. And today I'm going to go through a whirlwind tour of a really cool way to do web development. So you've probably already heard of a project called Next.js. It's that cool, you know, framework for making JAMstack sites either statically generated or SSR or that awesome, sweet hybrid approach of the two. But what you haven't probably heard of is Annex. And so what is Annex? Okay, it's basically a suite of dev tools to improve developer experience. And it's a CLI package on NPM, so you can do NPM install Annex, and you'll get all these cool commands that you can do to help out your development. It's extensible because it's plug-in-based, so you can basically make it do whatever you want, and it's open source. It's MIT-licensed. So if you feel like you want to contribute or you know you need to fork it or something, it's all completely open source. I'm going to show you a bunch of commands that'll help out your development that Annex gives you. So the first one is create Annex workspace. If you're used to like create React app, this is really, you know, or create Next app, this is very familiar. This is going to create an Annex workspace, which in our world is a monorepo. It's where your organization is going to hold all your, you know, applications and all your shared libraries in one space, and that'll really help development. I'll explain why further. Then it's got this Annex generate. So the concept of schematics comes from Angular, but Annex lets you use it across any framework, including, you know, Next.js and React. Annex serve is basically like a dev server, and it uses something called builders, also from Angular, but again, sharing out this. And schematics and builders come from plugins, which is sort of the heart of all of what Annex does. Then there's an Annex build, which is basically, you know, taking an application and compiling it into some sort of artifact. Annex test is for running whatever unit test runner you have configured, and we have the same thing for end-to-end tests. Now, I said that Annex is the heart of the plugins, and we have a lot of them. You can run Annex lists and see a whole list of them. There's sort of official ones, then there's community ones. And the one I'm going to focus on today is the Next.js plugin for Annex. And in just eight commands, I'm going to show you something awesome and how easy it is to get started and get rolling. If any of these commands scare you, I do want to mention that there is a GUI that you can use that you don't have to memorize commands. They're much easier to sort of discover and see what you can do. And it's a plugin for VS Code called Annex Console. So to start off, I'm just going to create an Annex workspace. I'm going to say, create NNPX, create Annex workspace, and then the organization name. This could be whatever organization. Again, you're going to have all your applications and your libraries in one place, so name that appropriately. And then it's going to ask you like, oh, what do you want to put the first application there? What kind of application do you want it to be? And I'm going to choose Next.js because it's awesome. This is going to be, let's just say, my marketing website or something. That's going to be my first application. Now, don't get scared about this thing. I'm going to run all through these, and then I'm going to show you what I made. So these commands are basically just, I'm going to create another application. I'm going to do NXG, which is short for generate. I'm going to use the Next.js app, sorry, Next.js plugin to create another app called Uber for Star because I don't know what I'm making. It's just a demo here. And then I'm going to use the Next.js plugin again to add a page, which is a Next.js concept, to that Uber for, and I'm going to just call this dashboard. Then I'm going to create a shared library, which is going to be shared components, which both the marketing site and the Uber for Star are going to use. Then I'm going to add some components to that library. Then I'm going to use our Storybook plugin to configure Storybook for that shared components library to get sort of a design system up and running. And then I'm just going to use NXServe to serve my Uber for app. And let me show you what kind of that gives me. So this is sort of a splash page that you're going to get on here. You'll note we added that dashboard page. So I've got that dashboard page. It's empty now, but basically it's all set up for you. We've got Storybook all set up for you. And this is great. Storybook has a ton of things you can add. It's sandbox development for each of the components, as well as you can add documentation and a whole design system here. Let me show you some of the code real quick. We've got here's our workspace. And like I said, there's sort of a split of our products into apps and libs. And apps is your applications, libs is your shared libraries. We've got that shared components thing in here. And this is where those components live. This is the source code for those components. And in our apps, so we've got our marketing website and our Uber for app, whatever that is. But you might also notice here we've got these end-to-end directories as well. And these are for writing Cypress tests. These are all configured for you. You're all set up so you can just start writing end-to-end tests, which is a great experience in a great way. Mixed with also we have Jest for writing unit tests, a fantastic way to work. And so our Uber for app is just like any other Next.js app that you might expect. It's got pages, public, whatever. And in our pages, you can see there's that dashboard page we created. And you can have this nested if you're familiar with Next.js. And I just wanted to show you. So we're going to use these shared components inside our index page here. And the way you import them is just sort of prefixing them with the scoped, my org, that's what I named the org. You can name it whatever you want. And then just the name of the library. And that's how easy it is to share code across the applications and to break out code into different shared things. Now, one of the main parts of an NX repo is the fact that we've got one package JSON in the whole thing. It's at the root. And the reason this is important is because NX sort of handles all these dependencies for you. And why that's good is because this will protect you from like a whole swath of problems that monorepos can sometimes run into where, you know, you've got one project that is lagging behind, it's versions behind, it's hard to update. You know, this department never ever updates. So they're like six versions behind. And it's really frustrating. You sort of get to ignore all that because NX is going to make sure that everybody's moving together. Everybody's upgrading together because it's one set of dependencies. It also handles that import syntax that I talked about where you can sort of scope it to the org, making it really easy to share code. And then because NX handles these dependencies, you get to sort of have a way to sort of compensate for some of the problems that monorepos can have. One major thing is once you get into like hundreds of shared libraries and hundreds of apps, you don't want to run them all every time you, you know, want to run your tests or want to run your build. And so what NX does, it's got this thing called computation caching where after you've run a test or a build, it sort of caches the results and puts them somewhere. And now the next time you run that, if it knows that it doesn't have to change because none of this code could possibly affect it, it just hands you back that cache. So it's like, oh, I don't need to change. I don't need to rerun. Here's the results from it, making it super fast. And then we can even take that one step further with an offering we have called NX Cloud, which basically takes those computations and it puts them in the cloud. So if I run a build that takes seven minutes on my machine, and then my coworker immediately runs that same build, theirs will be almost instant because it will just download the result from the cache and display it immediately or put it into the build or whatever it needs to be. Super cool stuff. And so what NX brings to the table is it allows you to sort of easily create these applications with all these commands that are easy and consistent amongst all your teams. It makes extracting shared libraries super easy because everybody is moving together with their dependencies. And you can always sort of make sure that you're not going to break anything by my update because everything's always going together. The generators, like I said, to save a bunch of time and also keep things consistent and a way to reinforce best practices, both with generators, as well as like ESLint rules for one, you know, across all your code bases. It's good stuff. And same CLI and stuff. It has all these modern tools, Cypress, Storybook, Pretty or ESLint built in because of the plugins. And of course, Next.js because of our Next.js plugin. And our Next.js plugin in particular can create and configure Next.js applications, which is super cool. It serves them in the Next.js dev mode. It can create pages and components and can build production ready Next.js apps ready to deploy as well as of course, Next.js' feature of completely static apps. So if that interests you at all, this was crazy fast, but you want to learn more, go to nx.dev, the easiest URL in the world to remember and go through one of the tutorials, check out what we can do. And of course, try out our Next.js thing. I'll answer any questions after this. Thanks.
