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.

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


rxjs

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

Maxime Bourgeois

To add RxJS to Vue.js you install the library `vue-rx` as well as `rxjs` and configure Vue.js to use them together. Once setup, you can then create a `subscriptions` object on your components and return streams to render inside of your templates.

Configure Vue.js to Enable RxJS Streams

While it's possible to use an Object to configure your streams, using a Function gives you much more flexibility to configure streams. This lesson shows how to use the functions to configure and return multiple streams based on the same source.

Create RxJS Streams in the Vue.js Subscriptions Function

The `domStreams` component property enables you to access Events from your Vue.js templates as Streams insides your subscriptions function. You can then map the Events to other values and stream them back into your Vue.js templates.

Access Events from Vue.js Templates as RxJS Streams with domStreams

You can map remote data directly into your Vue.js templates using RxJS. This lesson uses axios (and the vue-axios library which exposes axios on components as `this.$http`) and wraps the remote call inside of an Observable to provide the data into the template

Stream an API using RxJS into a Vue.js Template

This lesson shows how to `domStreams` with `v-stream` on a button inside of a Vue.js template, map the click to a data request with RxJS streams, then return that data back into the Vue.js template.

Map Click Event Streams to Load Data with Vue.js and RxJS

A single stream can branch off into many different streams based on how you need to handle each piece of information. This lesson shows how you take the data request and split it into a `name$` stream and an `image$` stream so that we can handle the image loading separately. 

Split a Request into Data Stream and an Image Stream with RxJS and Vue.js

When an image fails to load, it triggers an error event. You can capture the error event and merge it with your image loading stream to provide a backup image when things go wrong. This lesson shows how to load a placeholder image if the main image fails to load.

Handle Image Loading Errors in Vue.js with RxJS and domStreams

Wrapping the creation of an Observable inside of a Function allows you delay the creation of the Observable until it is needed. This becomes really important when the Observable is created from a Promise due to the way Promises execute on creation.

Switch to a Function which Creates Observables with Vue.js and Rxjs

Services going down is a part of life, so every app needs to gracefully handle what happens when things aren't working as expected. When errors do occur, RxJS enables you to switch over to another stream of your choosing to load any alternative data you'd like to display.

Catch Errors when Data Fails to Load with Vue.js and RxJS

Splitting a stream into multiple streams causes new subscriptions. You can think of new subscriptions as "invoking a function". So if your original stream makes a request for data, splitting the original stream will make 2 requests for data. The way to get around this is by using share so that each time the stream is split, all the split stream stay synced together.

Share RxJS Streams to Avoid Multiple Requests in Vue.js

Streams give you the power to handle a "pending" state where you've made a request for data, but the data hasn't yet returned. You can leverage this pending stream to update your template as well which is often displayed as a "loader" or disabling some part of the UI.

Disable Buttons While Data is Loading with RxJS and Vue.js

The `switchMap` operator is often referenced as the default operator when you need to switch to another stream (which happens when clicking a button switches to loading data). But in the scenario where you want the first stream (the button click) to "pause" until the second stream (the data loads) completes, `exhaustMap` is the proper operator to use.

Pause Until Another Stream Completes with exhaustMap in RxJS and Vue.js

`domStreams` enable you to pass additional data along the stream that can be provided by the template (such as data coming from a `v-for` rendering of an Array). You can then `pluck` off the data from the stream and use it further down the stream.

Pass Template Data Through domStreams in Vue.js and RxJS

You most likely already have data or properties in your template which are controlled by third-party components or updated using data binding. You can still use this data as stream by leveraging vue-rx's `$watchAsObservable` then chaining RxJS operators onto it as a new stream.

Watch Vue.js v-models as Observable with $watchAsObservable and RxJS

Syncing UI and Content is a common scenario. This lesson show how clicking on a tab can load data into a container and keep the selected tab and the data inside the container in sync.

Sync Vue.js Components with Streaming Content using $watchAsObservable and RxJS

This lesson shows how to map the current tab to a remote stream leveraging the `combineLatest` operator to grab the latest tab value and the values from loading in a remote data set of people.

Map Vue.js Components to Remote Data Streams with RxJS

A Promise invokes a function which stores a value that will be passed to a callback. So when you wrap a Promise with an Observable, you'll always get that same value. This enables you to use the behavior as a caching mechanism when the Promises make requests for remote data.

Use Promises with RxJS in Vue.js

Caching data in RxJS can be as simple as creating a caching function which can store the values in an object. This lessons walks through creating a caching function and explains how the function closes over an object then pairs a url with an Observable that returns the resolution of a Promise.

Cache Remote Data Requests with RxJS and Vue.js

RxJS has introduced a method of importing individual operators to save on the file size of importing all of RxJS. This approach includes using the `pipe` operator and importing individual operators that you feed into the pipe.

Build Async Vue.js Apps with RxJS

John Lindquist

Credits

Course Content