I’m happy to announce the release of my latest Egghead course on “Scale React development with Nx”. Let me briefly dive into what the course is about, why I targeted it to React.js developers and who should watch it!

Click to check out the course

Maggie Appleton is the Art Director at Egghead and

I’m a huge fan of the Egghead illustrations, designed by Egghead’s Art Directory . And so I asked her about the story behind the illustration and what drove her inspiration when creating it.

Since Nrwl is themed around Narwhals. Maggie searched for some ocean-themed approach. Thus, the base of the logo represents a coral reef, as an analogy to Nx bundling together different organisms (technologies) into one cohesive ecosystem. You can think of the various sea organisms as being the different technologies around Angular, React.js and Node. Also, given Nrwl is themed around Narwhals this is really on point :smiley:.

What’s in the course?

You may be wondering, Nx what? Well, here’s a 3-minute quick overview of what Nx is about.

Youtube

Made you curious? Then check out the full, free course. It is beginner-friendly, so if no worries if you’re new to Nx. In the course, I start with showing you how to install Nx, how to generate and setup a new “Nx workspace”, and I’ll walk you through the various configuration options.

To have a more real world scenario, I’m actually building a small tiny React.js application and as we go, we use Nx CLI commands to make our life easier in building that app. That includes code generation with the so-called “schematics” that scaffold a new React application as well as Node backend application for us. The result: we don’t have to worry about the actual configuration, it just works.

Since in the course we build multiple apps, a React.js frontend and Node backend, I’ll walk you through how Nx structures such architectures into apps and libs. That’s one powerful concept that helps you scale development as things get more complex.
Another core concept is the dependency graph which not only allows you to visualize the structure of your workspace but also helps Nx to optimize build/test/lint runs and to make sure they’re as fast as possible.

If you think that was all, then you should definitely have a look at the last set of lessons of the course, where we dive into how affected commands and distributed computation caching can help you speed up your CI and developer productivity 😉.

What people are saying about the course

Tremendously detailed exploration for people who want to delve into the non-angular side of Nx.

short and sweet but still comprehensive!

I liked the content and the sequence of the lessons in order to explain how powerful this tool is. I liked the pace as well. Thanks, Juri!

Well this is first time I’m learning about NX and instructor really made it easy to understand what does NX do and what you can make with it. As much as he talks, i got more and more amazed by the NX project ❤️

I’ve working with a Nx monorepo for more than 1 year and surpassingly I discovered I’ve made mistakes in simple things and still learned new tricks. Super good course, this is the type of content I love.

Very practical, high-level tour of Nx with enough detail to dig in wherever seems most relevant to one’s own needs.

What do you mean by scaling?

In a traditional setup with tools like CRA or the Angular CLI, you tend to generate one single application and you’ll probably divide that one into various folders representing your feature areas.

As your application grows in size and features, you might get more people and teams to work on it, and very soon you’ll realize that it becomes difficult to scale the development, first because of the “monolithic” structure, and second because your build, test and lint times start to take increasingly more time.

While Nx works for small projects, it has been designed from the very beginning to really shine for large monorepos. If I would have to break it down into just a couple of points, then Nx helps to scale by

• dividing workspaces into apps and libs
• making code sharing trivial via that app & lib structure
• optimizing commands to run fast and only run when needed

I’m a React.js dev, why should I watch this?

Nx is more than just a CLI tool that helps you kick-start your new React project. It will rather help you in the challenge of developing your project as you progress. Nx is extending its native React support, already supporting Next.js natively, and having plugins for Gatsby and React Native.

All in all, Nx helps

• generate code and configuration, s.t. you don’t have to bother about it
• combines modern tools like React, Storybook and Cypress to a cohesive and modern developer experience
• helps design scalable architectures by dividing your code into apps and libs
• understand your workspace via a powerful dependency graph tool
• optimize your command execution time, via smart commands and computation caching

I Wanna learn more!

Sure! Here are some resources you should definitely check out:

• nx.dev documentation site
• Nrwl Youtube Channel
• Nx GitHub repository
• Nx Cloud for distributed caching

Also feel free to ping me on Twitter