Let's start with a brief introduction.
What is VueJS
Vue.js is a progressive open-source front end JavaScript framework for building user interfaces, and single-page applications.
What is RxJS
RxJS is a library for reactive programming, and has components that enable the composition of asynchronous code. This means it takes data as streams (Observables) that can be subscribe to.
Installation/Setup
Following these steps, let's set-up our Vue application, and install RxJS:
Vue create <AppName>
yarn i rxjs
yarn serve
Creating an Observable
To create an observable
new Observable(function subscribe(subscriber) {});
An observer of an observable is an object with three functions: next, error, & complete.
observable.subscribe({
next: value => console.log(value),
error: err => console.log(err),
complete: () => console.log(`Completed`),
})
Let's take a look at an example to better understand Observables.
<script lang="ts">
import { defineComponent, onMounted, onBeforeUnmount } from "vue";
import { Observable, Subscription} from "rxjs";
export default defineComponent({
setup() {
const time = 2500;
let observableID: Subscription
onMounted(() => {
const observable$ = new Observable(function subscribe(subscriber) {
const intervalId = setInterval(() => {
subscriber.next("Vuejs and Rxjs");
subscriber.complete();
clearInterval(intervalId);
}, time);
});
observableID = observable$.subscribe(
(value) => console.log(`Introduction to ${value}`),
(err) => console.log(err),
() => console.log("completed")
);
});
onBeforeUnmount(() => observableID.unsubscribe());
},
});
</script>
From the example above, we can see that “Introduction to Vuejs and Rxjs” is printed out after 2.5 seconds, and then "completed" is printed after.
RxjS operators
Creating an observable manually every time can make code become very lengthy and difficult to read. Therefore, RxJS has alot of useful operators.
Some of the most commonly used operators are
- Creation Operators
- Transformation Operators
- Filtering Operators
- Combination Operators
- Conditional Operators
- Join Operators
- Multicasting Operators
- Error Handling Operators
We would be discussing examples on Creation, Transformation, and Filtering operators in this post:
Creation operators
These operators make creating an observable easy for various usecase. Some examples are 'interval', 'from', and 'of'.
- interval: Creates an observable that emits sequential numbers every specified interval of time.
interval(10).subscribe(console.log);
- from: Creates an observable from an array, promise, iterables or string
const frameworks = of("VueJS", "ReactJS", "Svelte", "AngularJS", "Lit", "RiotJS").subscribe(val => console.log(val));
//output: "VueJS", "ReactJS", "Svelte", "AngularJS", "Lit", "RiotJS",
const promiseSource = from(new Promise(resolve => resolve('Hello World!'))).subscribe(val => console.log(val));
//output: 'Hello World!'
- of: Creates an observable from a sequence of values
const frameworks = of("VueJS", "ReactJS", "Svelte", "AngularJS", "Lit", "RiotJS").subscribe(val => console.log(val));
//output: "VueJS", "ReactJS", "Sevelte", "AngularJS", "Lit", "RiotJS"
Transformation operators
These operators provide data transformation techniques for values passing through.
An example is 'map'. For the example below, we use map to transform our array of objects ([{name: "VueJS", language: "js"}]) into an array of strings(["VueJS"]).
const source = [
{ name: "VueJS", language: "js" },
{ name: "ReactJS", language: "js" },
{ name: "Laravel", language: "PHP" },
{ name: "Sevelte", language: "js" },
{ name: "AngularJS", language: "js" },
{ name: "Spring", language: "java" },
{ name: "Lit", language: "js" },
{ name: "CodeIgniter", language: "PHP" },
{ name: "RiotJS", language: "js" },
];
from(source).pipe(map(({ name }) => name));
jsFrameworks.subscribe((value) => {
frameworks.value.push(value);
});
Filtering Operator
This operator helps in choosing and refining how and when data is obtained from an observable.
An example is "Filter". For the example below, we use "filter" to obtain an array of objects where language is "js".
const source = [
{ name: "VueJS", language: "js" },
{ name: "ReactJS", language: "js" },
{ name: "Laravel", language: "PHP" },
{ name: "Svelte", language: "js" },
{ name: "AngularJS", language: "js" },
{ name: "Spring", language: "java" },
{ name: "Lit", language: "js" },
{ name: "CodeIgniter", language: "PHP" },
{ name: "RiotJS", language: "js" },
];
from(source).pipe(
filter(({ language }) => language === "js"),
map(({ name }) => name)
);
Example
Now that we have discussed some of the basics, lets try building a page that shows a list of frameworks. Each item of the list should be delayed before being displayed.
<template>
<div>
Test Rxjs
<h2>Filter Frameworks</h2>
<ul>
<li v-for="item in frameworks" :key="item">{{ item }}</li>
</ul>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import { interval } from "rxjs";
import { map, filter } from "rxjs/operators";
export default defineComponent({
setup() {
let frameworks = ref([]);
const time = 1000;
const source = [
{ name: "VueJS", language: "js" },
{ name: "ReactJS", language: "js" },
{ name: "Laravel", language: "PHP" },
{ name: "Svelte", language: "js" },
{ name: "AngularJS", language: "js" },
{ name: "Spring", language: "java" },
{ name: "Lit", language: "js" },
{ name: "CodeIgniter", language: "PHP" },
{ name: "RiotJS", language: "js" },
];
onMounted(() => {
const jsFrameworks = interval(time).pipe(
filter((i) => source[i].language === "js"),
map((i) => source[i].name)
);
const observable$ = jsFrameworks.subscribe(
(value) => {
frameworks.value.push(value);
},
() => observable$.unsubscribe()
);
});
return {
frameworks,
};
},
});
</script>
Live Demo
This is a codesandbox demo for you to play around with:
Conclusion
RxJS is really expansive, and can't be covered in just a single blog post. To learn more about RxJs, checkout the official documentation here: https://rxjs.dev/ or https://www.learnrxjs.io/. There is also a very good Vue plugin for Rxjs here.
If you have any questions or run into any trouble, feel free to reach out on Twitter or Github.
