 Resources from Juri Strumpflohner in 2021

On the surface, starting a project sounds easy. First you make some directories, install some dependencies, then you write some code.

But there's a bit more to it than just those three steps.

The type of project you're working on impacts the decisions you make. It gets more complicated when you're working on multiple projects that are related. For example, maybe you have a customer-facing frontend app, an admin dashboard app, and a single backend used for both.

How does this change your directory structures? How should you share code between projects? What happens when you add a Design System into the mix?

It can get hard to keep things straight in your head.

Nx is a tool that aims to solve these problems for you, whether you're working solo on a small full-stack app or on a dev team of thousands.

It's not just an opinionated folder structure. When you create an app with Nx, it generates unit and e2e test setups as well as preparing bundling and code-splitting with Webpack, and stubbing out common features like routing.

One of the coolest features of Nx is its Dependency Graph. The graph can visually show you the relationship between the parts of your application, and is optimized to ensure that compiling, testing, and linting only happens in the affected areas of your project.

In this course, Juri Strumpflohner demonstrates these features and more through the iterative creation of a React + Storybook + Express app. Don't worry if this isn't your preferred stack! Nx supports the most popular frameworks & libraries on the web.

More importantly, the focus of this course is more on the workflow than the implementation.

Watch Juri's course, and see if the Nx tooling & workflow is right for you and your team!

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

Scale React Development with Nx

This collection of lessons will give you some practical tips and tricks to create faster and more reliable Angular applications. They are highly inspired by the content published on [web.dev/angular](https://web.dev/angular) by [Minko Gechev](https://twitter.com/mgechev) and [Stephen Fluin](https://twitter.com/stephenfluin).

**What you'll learn here is how to..**

- improve an app's TTI via route-level code splitting and lazy loading
- implement a loading indicator for lazy loaded routes
- improve performance via preloading all lazy modules 
- implement a custom preloading strategy
- preload lazy loaded modules with the Angular CLI
- optimize Angular's Change Detection
- implement virtual scrolling for large lists with the Angular CDK
- add client-side precaching with Angular and service workers

That said, have fun 🚀

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

Build Performant and Progressive Angular Applications

Knowing your everyday toolset increases your productivity as a developer. And Git is one of those tools you use on a daily basis. Mastering Git is tough; it has hundreds of different commands, often even inconsistent at how you pass in flags and configuration options. On the other side, there are a lot of good Git courses out there already, explaining all of these commands in detail. 

With this course, I aim at a different goal. You will walk through a series of scenarios which you’ll most commonly encounter in your daily work life as a developer. I’m talking:
 - updating your feature branch with the latest changes from master
 - polishing your git history to make it ready for being peer-reviewed
 - moving a set of commits to another branch
 - undoing accidental commits

The goal is not to cover everything, but those tasks that will greatly improve your daily productivity with Git.


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.

Productive Git for Developers

Angular elements are one of the major innovations in Angular 6+. Elements allow us to develop Angular components like we always have through Angular’s powerful API, and then compile them into browser-native custom elements. With custom elements, we can define new HTML elements in a framework-agnostic way that adheres to web standards. We can also extend the HTML by defining a tag whose content is created and controlled by JavaScript code.

In this course, we’ll look at how to leverage Angular elements within our Angular apps to make them even more dynamic — a use case that’s commonly required in CMS-like environments. Going a step further, we’ll also see how we can compile our Angular elements into a standalone script file, which you can integrate into any other web context to pass data and register events on your custom elements.

Thanks for joining us!

Getting Started with Angular Elements

Angular is particularly popular at large enterprises. Most of the time those line of business apps are very data driven and forms heavy. While Angular gives us two different approaches to implementing forms, neither of them is very satisfying, nor do they help keep the maintainability high especially in large enterprise apps. 

In this course we're going to learn about [ngx-formly](https://formly.dev/), a library that helps cope with some of the mentioned issues. With Formly you define the form structure once in your component code and the HTML will be taken care of by the library. This helps to reduce maintainability and moreover Formly has some nice reactive features built-in that help you reduce your form code even more.

Questions? Ping me [on Twitter](https://twitter.com/juristr) or on [juri.dev](https://juri.dev) 🙂

Configuration based reactive Angular Forms with ngx-formly

Services and registering service providers are an inherent part of an Angular application. It is where you should define your application logic, they keep the state of the application and allow to share that among different components. 

That said, components can ask for instances of services by specifying them as parameters of their constructor functions which will then provided at runtime by Angular’s dependency injection mechanism. While services themselves are mostly just plain ES2015 classes, there are some interesting things to discover, especially when it comes to dependency injection. 

We can define services at various levels within our application, which allows us to control the scope and visibility of a given service. We can furthermore alias old service definitions to new, existing services which is handy for refactoring scenarios and we also have the possibility to define so-called factory functions for fully taking control of how a given service is being constructed. 

In this course we will take a closer look and walk step by step through all of these scenarios.

Angular Service Injection with the Dependency Injector (DI)

Client-server communication is at the heart of any modern web application. In this course we will take a look at how to communicate with your backend API in Angular, specifically with the new Http module(`@angular/common/http`) introduced and used in Angular  `4.3.1` and later.

We will learn how to configure the `HttpClientModule`, how to fetch and send data, customize HTTP headers that are being sent and how to properly handle error responses.

We will also take a look at some more advanced use cases such as listening to progress events and intercepting HTTP calls. Finally we will also learn how to isolate and mock HTTP calls in automated unit tests.

Learn HTTP in Angular

When we build forms, we know there’s a good chance that the data we want to collect may change. Dynamic Forms in Angular give us the ability to define the underlying object model before binding the form to the template. This lets our forms programmatically adjust to the underlying model so we don’t have to update each form manually as our data will eventually change.

In this course Google Developer Expert-led we will use Angular’s Reactive Forms and learn about the basics for dynamically rendering `FormControls`. We will also explore how more advanced input controls such as select boxes and radio button lists can be dynamically bound to our template. 

If you’re coming from AngularJS (v1.x) you may also be familiar with dynamic forms in the context of `Formly`, a library for automating dynamic forms. We will also quickly touch on `ng-formly`, which is the Angular (2+) equivalent.

Create Dynamic Forms in Angular

Dynamic data gives us the opportunity to build dynamic components. Dynamic components are reusable and make building large-scale applications so much easier. In this course, Juri Stumpflohner will take us through the specific use case of of creating a tabbed component which allows us to dynamically define new tabs.

On our journey of implementing this component we will learn about how we can dynamically instantiate components, leveraging the `ComponentFactoryResolver` and `ViewContainerRef`.

Furthermore we will explore how to define view templates, how to pass them to our dynamically instantiated components as well as how to pass data into those templates. All of this will be powered by `ngTemplateOutlet` and `ngTemplateOutletContext`.

Create Dynamic Components in Angular

Developers usually have a love-hate relationship with CSS and styling user interfaces. But it is a fundamental part of creating nice-looking, adorable and successful user interfaces. In this course we will take a deep dive into the various possibilities Angular offers for styling components. We learn about the different APIs, how they allow us to conditionally apply one or multiple styles in the form of style attributes and CSS classes. We also explore the concept of style encapsulation and how it helps prevent our styles from leaking into other components.

Understand How to Style Angular Components

One of the fundamental concepts for building a successful large-scale application is breaking it down into smaller, potentially independent, but mainly more controllable and maintainable parts. This starts at the component level, the module level, and finally the application routing level. Routing is a core part of every application—it should be part of every developer’s tool belt.

This course will guide you step-by-step from understanding the basic concepts of routing to mastering expert-level topics. We'll start by setting up and configuring the router, then define simple routes and child routes and best practices of organizing them using the Routing Module pattern. 

You'll learn about the supported URL types and its segments, how to define them, and how to leverage RxJS Observables for subscribing to route updates. We'll also learn how to secure routes with various types of guards and about performance tuning with the router’s lazy loading and preloading capabilities.

Learn Angular Router for Real-World Applications

[Dynamic components](https://egghead.io/courses/create-dynamic-components-in-angular) aren’t always that easy, especially if you’d like to retrieve and instantiate them as part of an HTML coming from the server API. In this lesson we’re going to transform an Angular component into an Angular Element and dynamically insert it into the HTML by using the `innerHTML` property of a DOM element.

Note, if you get an error "Failed to construct 'HTMLElement': Please use the 'new' operator..", make sure to install the `@webcomponents/webcomponentsjs` polyfill and add the following `'@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';` at the end of `polyfills.ts`. I discuss this as well in the lesson.

Also check out [this GitHub issue for more infos](https://github.com/angular/angular/issues/24556).

Transform an Angular Component into a native Custom Element

In this lesson we’re taking a look at ngx-build-plus, an open source extension of the Angular CLI that allows to tweak it’s build process with the purpose of being able to compile Angular Elements more easily.

Check out the [ngx-build-plus repository](https://github.com/manfredsteyer/ngx-build-plus) for more options.

Use ngx-build-plus to compile Angular Elements

Did it ever happen to you that you had to make sure certain user events are processed in order? Maybe some of those events were even async. Guaranteeing ordering can be quite tricky, unless you know some RxJS magic. In this lesson I'll briefly show you how to use RxJS's `concatMap` and `switchMap` operators to make sure events are processed in the right ordering and thus to prevent our UI from getting out of sync.

Guarantee Ordering of Events with RxJS

In Angular we have different kind of validators. Client-side and client-side async validators which call a function on the server. Often however, after satisfying all client-side validators, you may want to send the form to the server for validation. In case of an error, the server needs to be able to communicate that back to the client where we want to display it directly on the single form fields again.
In this lesson I'll show you a possible approach of implementing such scenario, returning a `422` status code, processing the response format we specify in the lesson and display it on the Angular form field again

Display a Server Side Validation Error Response onto an Angular Form

The main use case for compiling Angular Components into standalone Angular Elements and bundle them into a single JS file, is to use them within other environments. Such might include server side CMS systems or micro frontends. In such scenarios, an Angular Element or web component should be isolated, fulfil a single functionality and communicate with the outside world using inputs & outputs.
You can however also compile multiple Angular Elements out of a single Angular app, use them separately inside some `index.html` file and even have them share the state over Angular services! Let's learn how!

Create multiple root components in Angular with Angular Elements

You know about the `finally` instruction in the `try-catch`? What if you wanted to have the same when using RxJS Observables? Surprise, there's actually an RxJS operator :wink: called `finalize` which can be used for exactly that. Let's explore in more details.

Execute code when the RxJS Observable terminates with the finalize operator

Visual Studio Code is an integrated development environment (IDE) built and maintained by Microsoft. It is offered free of charge.

vscode

It surely depends on how verbose your programming language is, but there are always again things we have to repetitively type over and over again. As good web developers are lazy :wink: we automate our work, right? In this lesson I'm quickly showing you how easy it is to create code snippets for Visual Studio Code.

Create code snippets in Visual Studio Code

As shown in a [previous lesson](https://egghead.io/lessons/egghead-apply-route-level-code-splitting-and-lazy-loading-with-the-angular-cli), we can easily code split and lazy load a route in Angular. However when the user then clicks that lazy loaded route, it make some time to actually fetch and run the JavaScript bundle. In this lesson we'll see how we can implement a loading indicator for such lazy loaded routes.

Show a Loading Indicator for Lazy Routes in Angular

Ever had the need for multiple "app themes", or even to completely dynamically load CSS based on which customer logs into your application? You could of course bundle all of the various themes into a single CSS entry file, but your application size would suffer a lot. Therefore, in this lesson we're going to have a look how to define multiple entry-level CSS files and how to "lazy load" them at runtime.

Lazy Load CSS at runtime with the Angular CLI

Change Detection the magic behind Angular that automatically recognizes when changes happen. That’s either due to manual triggering or through asynchronous events. Once a change is detected, it iterates through the various Angular Components and triggers a refresh. Usually it is very fast, however - especially in larger apps - it might trigger lots of computations and thus block the main browser thread. In this lesson we’re going to learn how to optimize Angular’s change detection mechanism by reducing the amount of components it needs to update and via pure pipes.

Topics

Instructors

Content Type