 Resources from Juri Strumpflohner in 2021

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

[Storybook](https://storybook.js.org/) is a framework that allows you to develop components in isolation. It is ideal for a variety of use cases, most commonly when you're building some shared component toolkit. As such, Nx comes with a dedicated package `@nrwl/storybook` that adds a series of useful code generators to add storybook to an existing React library, but also to automatically generate stories and more.

Use Storybook to Develop React Components in Nx

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

[Nx](https://nx.dev) combines a lot of the best tools on the market, integrates them, and provides tooling to provide the best possible developer experience. One such pair is [Cypress](https://www.cypress.io/) and [Storybook](https://storybook.js.org/). Storybook allows developing components in isolation, which is also a great basis for testing components, which is where Cypress shines.
In this lesson, we're exploring some of the `@nrwl/storybook` code generation utilities that allow you to not only configure Storybook for a React application but automatically also set up a Cypress test configuration for it along with some spec files generated from the Storybook stories.

Use Cypress and Storybook to test your React Components in Isolation

At some point you definitely want to build and deploy your app. Obviously, [Nx](https://nx.dev) got your back as well. In this lesson we're going to explore the command & configuration for producing a deployable bundle. We'll go through some of the options and learn about the `--configuration=production` configuration.

Building your React app with Nx

Nx particularly shines when it comes to scaling in a large repository, but it can even be beneficial for smaller workspaces. Continuous integration time is particularly interesting. There's nothing more annoying when you have to wait for that pipeline runs to finish so that you can finally merge your PR. This gets worse as your workspace grows and has more and more apps & libs. Nx comes with "affected commands" to help with that. In this lesson we're going to learn how we can leverage those to drastically reduce the time involved in compiling/testing/linting projects.

Scale CI runs with Nx Affected Commands

One of the strengths of [Nx](https://nx.dev) is that it provides you easy access to some of the best tooling available. As such, whenever you generate a new app or lib inside an Nx workspace, it automatically preconfigures Jest for you and even sets up some pre-generated tests.

Run Jest tests for a React app with Nx

Nx already comes with a default TypeScript setup. Although you can opt-out of that and generate plain JS based components, especially in a large setup TypeScript can be beneficial in uncovering potential issues early. To add an extra level, Nx also comes with preconfigured eslint for all the apps and libraries. In this lesson we're going to explore the lint setup and how it can be used.

Linting a React app with Nx

Nx already helps speed up (and thus scale) your workspace by using so-called "affected commands". To speed up even further, Nx recently introduced a computation cache, which is basically memoization for you Nx commands. Whenever you run a command, Nx caches it, and if you re-run the same command (without changing the underlying sources & configuration files), the cached output will be fetched, rather than re-executing the command again. This drastically saves time and can even be distributed across the team with [Nx Cloud](https://nx.app). In this lesson we're going to learn more about it.

Speed up with Nx computation Caching

An important part of maintenance work is also to follow along with new releases of packages you depend on. That way you get important bug fixes as well as new improvements and features. Similarly also in an Nx workspace. However, performing updates might be cumbersome, especially if breaking changes are involved.

Nx comes with a special mechanism to take away that burden of updating an Nx workspace: `nx migrate`. In this lesson, we're going to use the Nx migrate command to update our Nx 10 workspace to v11.

Update your Nx workspace with Nx migrations

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

angular

Angular's DI is quite powerful. There are however some peculiarities when it comes to the registration of Angular services with the dependency injector, in combination with lazy loaded Angular modules. The way you register the Angular service (e.g. using the `providers` array on a NgModule or the `providedIn` decorator) might have a direct impact on the instances of the service you have in memory at runtime. Let's explore that in more detail.

You can also read more details [in my blog post](https://juristr.com/blog/2021/04/angular-di-and-lazy-modules/)

Use "providedIn" service registration to avoid multiple instances with lazy loaded modules

As we've seen in my [course on Angular Service Injection with the DI](https://egghead.io/courses/angular-service-injection-with-the-dependency-injector-di) there are different ways to register a service with Angular's Dependency Injector. The major approaches (as of Angular v8+) is to either register the service on the `NgModule` `providers` array, or to directly use the `@Injectable({ providedIn: 'root' })` decorator.

In this lesson we're going to specifically look into the impact of those two methods to the final bundle size

More details can also be read [in one of my recent blog posts](https://juristr.com/blog/2021/04/angular-di-and-lazy-modules/)

Use providedIn for the Angular Service registration to reduce bundle size

Cascading Style Sheets bring order and beauty to our applications.

Chrome Devtools can be really powerful, when it comes to debug JavaScript, inspect DOM nodes and their properties as well as CSS styling. in this lesson we're quickly having a look at the "CSS Overview" feature of Chrome Devtools, that allows you to debug the CSS design of a website, starting from the used color palette, fonts and much more.

Use Chrome Devtools' CSS Overview to debug the CSS Design of a website

Angular has various ways to handle asynchronous scenarios when testing your code (be it with Karma or Jest).

In this lesson we are specifically looking at the deprecated "async" exported from "@angular/core/testing", which has been replaced by the waitForAsync. Given that, one might also wonder, why not use the async/await statement that is native to Angular. Let's explore!

When to use async / await vs waitForAsync in Angular tests

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

It always happens again. We have some weird bug in our codebase, hard to debug and just looking at the Git history doesn't help much. Git has a powerful command to help us: `git bisect`.

We have to simply identify a commit where the bug was not present, and the bad commit (usually the latest of the `master` or `main` branch). Then we invoke `git bisect` with both of them. The rest is just following along and answering questions. Let's see how that works.

Topics

Instructors

Content Type

Free or Pro