Learn Git, Jest and Rxjs

When a manager gives us the requirements for an application feature, they don't care too much about *how* we build it. And often times, they think that hard things will be easy.

Dealing with time and coordinating different types of events can be tricky.

Luckily, we have RxJS to help!

In this course, you will use RxJS to build a loading spinner in an app that meets the ever-changing requirements from a mock Product Manager.

You'll also learn how to implement a "Konami Code" style feature that listens for a correct sequence of keys to be typed in a set amount of time.

Follow the thought process that Rares uses as he breaks problems down into manageable pieces that remain flexible, and become more comfortable solving problems reactively.

RxJS is a library for composing asynchronous and event-based programs by using observable sequences. 


rxjs

Thinking Reactively with RxJS

This workshop will start by breaking down the four states in which a file can exist, and we'll build up our mental model of git from there. Then, we'll look at how to move files between those states in different ways.

Once we've developed a new model for how git operates, we'll be able to purposefully get ourselves into some sticky situations, and then gracefully recover from them.

If you can handle git add/commit/push, but not much more - then this workshop is perfect for you.

You can finally get some proper git training, and will never have to worry about losing data or messing up the repo again!

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.

Fix Common Git Mistakes

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.


Productive Git for Developers

In this collection, we build a minimal flashcard application using React, primarily focusing on function components and the hooks API. To make sure we can understand and maintain existing code, there are also a few lessons toward the end that use class components so you can get familiar with the syntax. We cover important React concepts, and sprinkle in libraries that are pretty standard in the ecosystem like @reach/router, Jest, and React testing library. We start with create-react-app so we can get right into it without worrying about configuring tooling. There's [a separate course for that here](https://egghead.io/courses/modern-javascript-tooling-with-react?af=5mx0ie)

jest

Build a React App with the Hooks API

_Feels like magic._

It’s a beautiful feeling when technology works in mysterious, miraculous ways. So smooth! So effortless! So…

_Wait, that’s not right. What’s it doing? I don’t get it. Help!_

…until you encounter unexpected behavior. Good luck debugging magic.

To use technology to its fullest, you need to understand how it’s accomplishing the tasks set before it. 

This course de-mystifies RxJS. It feels like magic, but it’s also one of the most laborious technologies to learn in front-end web development. We’ll open up the internals to take an up-close look at how RxJS handles Async programming so smoothly.

Over 12 lessons and 31 minutes, you'll get a handle on:

- how RxJS pushes values from observables to subscribers, which take care of the output. 
- how operators handle all of the "in-between" operations where you can manipulate the values while they're still in-flight.
- the internals of operators and subscribers and how to customize operators to your specific needs.


Build Your Own RxJS Pipeable Operators

***Note: RxJS imports have changed since the publication of this course, these changes to RxJS have been reflected in the code examples underneath each lesson. The concepts being taught on RxJS are still applicable.***

Vue.js is an amazing framework that can easily update and reflect user input using templates and data-binding. But there are many scenarios where complex asynchronous behaviors (like loading data, handling "pending" states, timeouts, etc) are solved much easier by leveraging the streaming capabilities of RxJS. This course covers how to setup and use the features of "vue-rx" to enable streams within your templates and easily solve complex scenarios.

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Build Async Vue.js Apps with RxJS

In this course we are going to work through properly setting up Enzyme with Jest to test rendered components. This includes the nitty gritty of making our testing environment work with various versions of React. After we get our environment setup ready, we’ll work through the different ways we can render a component within our test pages. With a rendered component we can now test component methods and properties to assert that they are what is intended. 

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

Test React Components with Enzyme and Jest

End-to-end testing assures you of a few things: that all the integrated pieces of an application properly function, all those pieces work together as expected, and your tests include and simulate real-user scenarios — something unit and integration tests just don't do.

This course introduces you to two great tools for E2E testing: 

* Puppeteer opens and runs applications in a Chromium browser and performs the actions it's given.
* Jest asserts that the integrated pieces work as expected and that add-on libraries like Faker and pixelmatch take our tests to the next level.

Over 9 lessons, we will create common application features and use Puppeteer and Jest to run different types of tests against them. You'll get practice using these tools to render content, mimic user activity, automate tests, and measure the overall performance of your application.

End to End Testing with Google's Puppeteer and Jest

***Note: Active maintenance for Recompose has been discontinued since the announcement for React hooks. Your existing code using Recompose will still work. Recompose is not compatible with RxJS version 6 and beyond. You can read more about the decision [here.](https://github.com/acdlite/recompose/issues/756#issuecomment-438674573)*** 


Loading data and handling events almost always introduces layers of complexity into React apps. Recompose and RxJS solve your async problems by using Streams to output components. This course walks you through combining the powers of React and RxJS to stream data into JSX with streaming patterns and pure React components.

Build React Components from Streams with RxJS and Recompose

Introductions to various RxJS Operators including of, from, fromEvent, interval and zip.

RxJS Operators

***Note: RxJS imports have changed since the publication of this course. Operators now must be passed into `.pipe` to be applied to an observable.***

In this course we will begin with nothing more than an empty directory & a text editor. Through small, focussed lessons we’ll learn how to setup a React project that uses Redux for state management and redux-observable for asynchronous actions. We’ll see how ‘epics’ are registered and how they each receive a ‘stream’ of actions from the store. 

With an understanding of how things work, we’ll move onto solving common problems such as Ajax cancellation, creating sequences of async actions, enabling code reuse through higher-order Observables and much more. 

## **UPDATE:** 
This course is outdated, view updated material here: [Asynchronous State Management with redux-observable v1](https://egghead.io/courses/asynchronous-state-management-with-redux-observable-v1)

Up and Running with redux-observable

***Note: RxJS imports have changed since the publication of this course. Operators now must be passed into `.pipe` to be applied to an observable.***

In this course we will learn to identify common mistakes with RxJS that usually make code harder to read and even introduce bugs. Most of these mistakes are related to Subject, subscribe, and subscriptions. We are going to see how to use only Observables and convenient operators made for solving those mistakes, such as fromEvent, takeUntil and switchMap. By the end of this course, you will have a more immediate intuition on what patterns are simple and safe in RxJS.

Save time avoiding common mistakes using RxJS

If you have used RxJS Observables, it is likely you have seen the flatMap or switchMap operators. They are very powerful operators that can be used in various situations, while being common for dealing with HTTP requests. These operators may look mysterious at first, but turn out to be simple flattening operations on higher order Observables. 

In this course you will learn what is a higher order Observable, when does it occur in real applications, and how to handle them with operators like switchMap. Throughout this course we will see real applications of these operations.

Start following this course if you have some understanding of RxJS, but want to gain advanced skills in the art of using operators.

If you're new to RxJS, we highly recommend the [Introduction to Reactive Programming using RxJS](https://egghead.io/courses/introduction-to-reactive-programming) to begin with, and then [RxJS Beyond the Basics: Operators in Depth](https://egghead.io/courses/rxjs-beyond-the-basics-operators-in-depth) to understand operators.

If you're an absolute beginner to the concept of Observable and async streams, we highly recommend starting with [Jafar Husain's excellent introduction](https://egghead.io/courses/mastering-asynchronous-programming-the-end-of-the-loop).

Use Higher Order Observables in RxJS Effectively

***Note: RxJS imports have changed since the publication of this course. The concepts being taught on RxJS are still applicable.*** 

RxJS Subjects are a source of confusion for many people using RxJS. For many, the Subject is the obvious and only answer to every problem. Subjects are incredibly useful and necessary, but the key is to know when to use them for solving specific problems that you encounter.

In this course, we are going deep into RxJS Subjects and multicasting operators. You'll gain a solid understanding of when, where, and how to use these powerful tools.

If you are new to RxJS, or want a refresher please check out this course **[Introduction to Reactive Programming](https://egghead.io/courses/introduction-to-reactive-programming)**.

RxJS Subjects and Multicasting Operators

As modern web developers, we are likely to use git on a daily basis. It's a wonderful distributed version control system, and with only a few commands in our toolbelt it is quite powerful and convenient.

In this course, you will learn the basics of using git, as well as some more advanced commands that you should find useful!

Check out these [**community notes for this course on Github**](https://github.com/eggheadio-projects/practical-git-for-everyday-professional-use-notes).

Practical Git for Everyday Professional Use

In this course, you will learn more about using observables in Angular. We are going to how we can leverage the power of observables and RxJS to build a rock solid instant search component with a handful of operators.

You will learn operators by applying them to a real-world component. By the end of this course, you will have a clear understanding of how components can be designed around the concept of event streams which are wired together like modular building blocks.

All of this in about 11 minutes! 😄

This course assumes a solid understanding of fundamentals.
We have Intermediary Angular courses that'll get you up to speed.  
- [Dependency Injection](https://egghead.io/courses/angular-dependency-injection-di-explained)
- [Components, Directives](https://egghead.io/courses/building-angular-components)
- [Forms](https://egghead.io/courses/learn-the-basics-of-angular-forms)
- [Router](https://egghead.io/courses/intro-to-angular-router) 
- [Animating Web Apps](https://egghead.io/courses/animate-angular-web-applications)

⚠ The code used in the course is of Angular `^2.0.0`, and the code given in the [transcript](https://codesandbox.io/s/54xv161qq4?from-embed) is of Angular `7.0.3`. **An updated version of the code can be found [here](https://github.com/eggheadio-projects/build-an-angular-instant-search-component-course-notes)** *(updated 5/8/2020)*. The code for each lesson resides in the respective branch on the repository.

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 an Angular Instant Search Component

Operators are the core building blocks for reacting to data in your JavaScript applications.

In this course you will learn what operators are, and then take a tour of the most useful operators that RxJS has to offer.

RxJS Beyond the Basics: Operators in Depth

There are plenty of introductions to RxJS, but few resources that take you deep into the library, providing an accurate understand of what each piece performs.

In this course we will gain intermediate knowledge of RxJS, focusing on one aspect: how to create Observables. We will see how Observables compare to functions, how they compare to ES6 generators, what are the empty(), throw() and never() Observables, and other static factories that help in making Observable sequences.

Start following this course if you have a superficial understanding of RxJS, but want to gain confidence in using it.

If you're new to RxJS, we highly recommend this [Async JS course from Jafar Husain](https://egghead.io/series/mastering-asynchronous-programming-the-end-of-the-loop) to get a solid intro to the concepts. From there, you can watch this [Introduction to Reactive Programming using RxJS](https://egghead.io/series/introduction-to-reactive-programming), and you will be prepared for this course!

RxJS Beyond the Basics: Creating Observables from scratch

“Feel free to submit a PR!” - words often found in GitHub issues, but met with confusion and fear by many. Getting started with contributing open source is not always straightforward and can be tricky. With this series, you’ll be equipped with the the tools, knowledge, and understanding you need to be productive and contribute to the wonderful world of open source projects. Much of this series speaks about GitHub, but most of the concepts are generally applicable to contributing to any open source project, regardless of where it’s hosted.

So enjoy the course and start contributing to the projects you use and love today!

How to Contribute to an Open Source Project on GitHub

RxJS is tremendously helpful in working with asynchronous code, but you’ve probably been stuck trying to use concepts you already know from Promises or Callbacks and applying them directly to RxJS. These lessons walk you through the step-by-step of building a simple game application with many asynchronous pieces. Each lesson focuses on a single operator or idea of how RxJS helps simplify your code as well as making you code flexible enough to easily add more asynchronous pieces as your codebase grows.

Step-by-Step Async JavaScript with RxJS

***Note: RxJS imports have changed since the publication of this course. The concepts being taught on RxJS are still applicable.**

Angular has many built-in features for working closely with RxJS to help you build entirely reactive applications. This course will teach you how to use Angular with RxJS. We will learn how to use the ngrx/store library to manage state in a clean, reactive "Redux style."

This course assumes you've got a working knowledge of Angular and reactive programming with RxJS. If you don't, you might want to watch the following courses to get you up to speed! 
- [Get Started with Angular](https://egghead.io/courses/get-started-with-angular) 
- [Introduction to Reactive Programming with RxJS](
https://egghead.io/series/introduction-to-reactive-programming). 
- [Step by Step Async Programming with RxJS](https://egghead.io/series/step-by-step-async-javascript-with-rxjs) 
- [Getting Started With Redux](https://egghead.io/series/getting-started-with-redux), a course by Redux's, Dan Abramov.

We also have Intermediary Angular courses if you'd like to acquire more in-depth knowledge. 
- [Dependency Injection](https://egghead.io/courses/angular-2-dependency-injection-di-explained
- [Components, Directives](https://egghead.io/courses/building-angular-components)
- [Forms](https://egghead.io/courses/intro-to-angular-forms)
- [Router](https://egghead.io/courses/intro-to-angular-router)
- [Animating Web Apps](https://egghead.io/courses/animate-angular-web-applications)



Topics

Instructors

Content Type

Free or Pro