Learn Angularjs, Npm 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

You can’t be everywhere at once. Neither can node packages. But with a utility called npx — included in npm v5.2 and later — you can interact and run with node modules even if they’re not downloaded locally. The same is true for gists and remote branches of GitHub. As long as npm installed, your work can be wherever you are.

This course from Elijah Manor unlocks the power of the npx utility. Over 17 minutes, we will examine the npx package runner and look through various scenarios where the tool is helpful when running node packages from the command line. You’ll learn to use npm to:

- test out various versions of a package
- run packages without globally installing
- run code directly from GitHub
- make working with packages much easier

npm is the package manager for JavaScript. Find, share, and reuse packages of code from hundreds of thousands of developers — and assemble them in powerful new ways.

Execute npm Package Binaries with the npx Package Runner

_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

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

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

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

npm is like a giant library of code building blocks. There are tons of these “blocks”, aka “packages” that we can compose together to build cool things. We can use packages by other developers, but we can also write and publish our own. 

In this course we will learn how to create, publish, and update our own packages. We will create a JavaScript utility module to filter out sensitive words from a string, including tests and development file watching. We will then cover publishing and updating our package. This same approach can be used to create and publish other types of packages too like components (React, Angular, Web Components etc.) and command line interfaces.

Publish JavaScript packages on npm

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

In this course we will introduce the topic of using npm scripts as a build tool. We will start simple and then continue to build a small website as we introduce new topics. By the end of the course, you'll know how to get started and what tools and techniques are needed for you to create your own set of build scripts.

How to Use npm Scripts as Your Build Tool

One of the hardest things about writing non-trivial applications is managing state. In our attempt to effectively manage state, we introduce additional complexity by trying to control application flow and the amount of code volume that comes from all of this. Redux gives us the ability to address state management and communication in astonishingly simple semantics that can be explained in just a couple minutes. The beauty of Redux is that it is not only a library but a pattern that works very will within Angular 1.x applications. In this series, we are going to learn how to integrate redux (the pattern) into Eggly from scratch and then introduce **ng-redux** and add in **Redux DevTools** at the end for fun.

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

Build Angular 1.x Apps with Redux

Implementing modern component-based architecture in your new or existing Angular 1.x web application is a breath of fresh air.

In this course, you are going to take a close look at Eggly, an Angular 1.x application for organizing bookmarks, and build it using modern patterns and practices, inspired by Angular 2's recommended architecture.

You will learn how to leverage ES6 in your Angular 1 applications through Babel, and fully understand the core patterns that are used in a composed modular web application. 

This course will teach you how to leverage your existing knowledge of Angular, while preparing your mind (and applications!) for the future.

If you are interested, there is a [companion guide](http://www.angular2patterns.com/) that digs deeper into the patterns found in this course and Angular 2.

Using Angular 2 Patterns in Angular 1.x Apps

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

***⚠️⚠️⚠️ This course uses an old version of RxJS and loads data using the jQuery library which is no longer fashionable. If you can look past that and understand that the principles André is demonstrating are timeless and useful, this course is a true gem. Otherwise, this is probably not for you! ⚠️⚠️⚠️***

*Reactive*

You've probably been hearing this word recently, and it's referring to the *Reactive Programming* paradigm. One of the biggest challenges people face when learning Reactive Programming is changing their way of thinking, and in this course, you are going to exercise your mind and learn to let go of that imperative and stateful mindset.

You will also learn how can practically apply these Reactive concepts using the RxJS library! 

If you are **brand new** to reactive programming, the course [Asynchronous Programming: The End of The Loop](https://egghead.io/series/mastering-asynchronous-programming-the-end-of-the-loop), will get you up to speed. 📚

Introduction to Reactive Programming Using RxJS 5

How much work would it take for you to move all of your directives and their templates to several different new directories? You'd have to update the templateUrl, script tags, etc., etc. With webpack, this can be trivial. For example, you don't need to worry about loading your templates in the $templateCache ever again. Webpack will help you modularize your css and tests. All of these things and more in this series so you can start using webpack with Angular today.

AngularJS and Webpack for Modular Applications

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

Ionic allows you to build cross platform native applications using Angular. In this course we will convert the Eggly AngularJS application into an Ionic mobile application.