 Resources from Juri Strumpflohner in 2021

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

Scaling development across large teams and organizations isn't always just about having fast builds or CI runs. It is also about being able to implement scalable architectural patterns. Nx helps you split up your functionality into libraries and help you think about their corresponding public/private APIs. This process facilitates the creation of more reusable units which is exactly what we're going to explore in this lesson.

Share and Reuse functionality with libraries in Nx

Nx is not only capable of scaffolding frontend projects, but it also supports a lot of backend setups. In this specific lesson, we're going to explore the setup we previously generated, specifically inspecting how passing `--frontentProject` to the Express.js schematic automatically sets up a [Webpack dev proxy](https://webpack.js.org/configuration/dev-server/#devserverproxy) to make it easy to call the backend API.

Connect to an Express.js API from a React app in an Nx Workspace

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

As we have seen, an Nx workspace isn't only for frontend applications, but it can also host backend applications as well. By having the corresponding backend layer within the same monorepo, we can benefit from the code-sharing capabilities in an even greater way. In this lesson, we're going to define a TypeScript interface that describes the data exposed by our backend API. We host that interface in an Nx workspace library, s.t. we can use it from within our Node.js backend application as well as our React frontend app.

Share code between a React Frontend and Node.js Backend Application in Nx

[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

[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

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

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

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 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

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

One of the big challenges of creating truly reusable components is to make sure their styles don’t leak out into the consuming application. Strategies such as CSS modules work but are suboptimal. The web component movement tries to bring a definitive solution to this dilemma but browser support is still lacking. In this lesson we will take a look how Angular helps us with this.

Use Angular style encapsulation to avoid styles from leaking into other components

Angular gives you two possibilities: externally link a stylesheet to your component, which is a great option when you have a lot of CSS code that might make your Component look messy; or embed it inline, which you might want to do when you only have a bit of CSS you want to apply. In this lesson we will take a deeper look at the advantages of both of these methods. 


Add styles to a component in Angular

By default the new Angular Http client (introduced in `v4.3.1`) uses JSON as the data format for communicating with the backend API. However, there might be situations where you may want to use some other format, like `text/plain` for fetching a CSV file. Using the `responseType` property this can be achieved quite easily.

Fetch non-JSON data by specifying HttpClient responseType in Angular

In a proper unit test we want to isolate external dependencies as much as possible to guarantee a reliable test outcome. Http calls represent such external dependencies. Therefore, when testing our Angular components or services that rely on data retrieved via Http, we need to make sure to mock such calls and instead provide some fake data during the test execution. In this lesson we about the new `HttpClientTestingModule` and `HttpTestingController` that has been added in Angular v4.3.1 to make our life easier.

Mock HTTP Requests made with Angular’s HttpClient in Unit Tests

When we invoke our backend API, we retrieve some well defined data object, such as a `Person`. By using TypeScript we can define the Type of such a data object and also provide this type to the Angular `HttpClient`. As a consequence, our Http request gets “typed” and we get an instance of a `Person` type.

Type Check an Http Response using the Angular HttpClient and TypeScript

Often components need to be styled based on the context they are being placed in. In this lesson we will learn about how to apply styles conditionally to our component, based on our ancestor element styles using `:host-context`. In the very same way, we also explore how to leverage the `/deep/` shadow DOM selector to target styles to child components.

Note that the ::ng-deep is only a temporary solution and is going to be dropped by Angular once there’s an official standard coming out. As such try to avoid using it.

Use :host-context and the ::ng-deep selector to apply context-based styling

In some cases your application might need to upload large amounts of data, such as files. Obviously for a good UX we should provide the user some feedback on the progress of the upload. Angular’s `HttpRequest` object has a property `reportProgress` which allows us to do exactly that. Let’s see how.

 Provide Feedback to Progress Events with Angular’s HttpRequest Object

Obviously in a real world application we do not only fetch data from the backend, but we also send data to be stored permanently on the server side. The `HttpClient` gives us different options for achieving this. In this lesson we will look at how to attach parameters to our request URL, by manually concatenating the URL by ourselves, by using the `HttpParams` object and also how we can send entire objects in a `POST` request body.

Send Data via HTTP using Angular HttpParams

Being able to intercept HTTP requests is crucial in a real world application. Whether it is for error handling and logging or for injecting authentication tokens. While in Angular version 2 it intercepting HTTP requests was totally possible, implementing it wasn't that trivial and intuitive. Starting from **Angular version 4.3.1** there is a new, way more simpler approach of implementing HTTP interceptors. In this lesson we're going to explore how.

Intercept HTTP Requests with Angular’s HttpInterceptor

Firebase not only provides you a real-time, powerful database, but recently also added a hosting capability to its offers. In this lesson we will learn how to use the Firebase CLI to setup and configure our Angular project for deploying it to Firebase Hosting.

Topics

Instructors

Content Type