Skip to content

Introduction to VueJS and RxJS

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.


This Dot Labs is a modern web consultancy focused on helping companies realize their digital transformation efforts. For expert architectural guidance, training, or consulting in React, Angular, Vue, Web Components, GraphQL, Node, Bazel, or Polymer, visit thisdotlabs.com.

This Dot Media is focused on creating an inclusive and educational web for all. We keep you up to date with advancements in the modern web through events, podcasts, and free content. To learn, visit thisdot.co.

You might also like

Javascript

Getting Started with RxJS

Javascript

Testing Web Components with Cypress and TypeScript

Javascript

Web Components Integration using LitElement and TypeScript

Javascript

Navigation Lifecycle using Vaadin Router, LitElement and TypeScript