--- title: "RxJS Advanced Tutorial: Getting Started" description: "Build an app to learn about the power and flexibility of RxJS in Angular while exploring speech recognition with Web Speech API." authors: - name: "Kim Maida" url: "https://auth0.com/blog/authors/kim-maida/" date: "Sep 20, 2017" category: "Developers,Tutorial,Angular" tags: ["rxjs", "angular", "javascript", "web api"] url: "https://auth0.com/blog/rxjs-advanced-tutorial-with-angular-web-speech-part-1/" --- # RxJS Advanced Tutorial: Getting Started In this tutorial series, we'll learn how to build a small app with some big concepts. We'll cover reactive programming with [Reactive Extensions (Rx*)](http://reactivex.io/), JS framework component interaction in [Angular](https://angular.io), and speech recognition with the [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API). The completed Madlibs app code can be found at [this GitHub repo](https://github.com/auth0-blog/madlibs). --- In this part, we will cover the following: * Introduction to reactive programming with Rx* and observables * Setting up our Angular app Let's get started! ## What We'll Learn About The concepts and tools we'll use and learn about include: * Component communication in [Angular](https://angular.io) JavaScript framework * Managing streams with [RxJS](http://reactivex.io/rxjs/) ReactiveX for JavaScript (packaged with Angular) * [Annyang](https://github.com/TalAter/annyang) library for [Web API Speech Recognition](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition) * Accessing a prebuilt [Node API](https://github.com/kmaida/madlibs-api) to generate random words Let's begin with some core concepts to facilitate the use of these tools. ## Reactive Programming with RxJS and Observables [Angular](https://angular.io) brought the ReactiveX [RxJS](http://reactivex.io/rxjs/) library to the forefront for JavaScript Single Page Application (SPA) developers. RxJS is packaged with Angular, and while it was unfamiliar to many at first, the concept of reactive programming with _observables_ in JS has gained traction and popularity with increased Angular adoption. ### Observables Are Streams _Observables_ are a vital part of RxJS and now Angular. When learning about observables, the first concept to reconcile is that observables are _streams_. What does this mean? Consider an array. An array is a collection of values. With a normal array, you theoretically have the collection of all values available to you from the beginning. Of course, we know this isn't always the case: in fact, it's common practice to _push_ additional values to an array in response to events, or to create new arrays _from_ other arrays with methods like [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map), [filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), and [reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce). Traditionally, if we do this with a normal array, we need to use _callbacks_ in order to tell our scripting code that the array has a new value. On the other hand, an observable "stream" represents a _collection over time_. A stream may (or may not) have an initial value, and over time, more values are added to it. We can _subscribe_ to the observable stream to be notified whenever a new value has been added. This is an ideal way to react to collections over time. For example, say we have a shopping cart. Every time a user successfully adds an item to their cart, we then want to run some code. (This code might display a toast with the name of the item, update a count of all items in the cart, update the cart subtotal, etc.) We could do this with a state container such as [Redux](http://redux.js.org/) or [@ngrx/store](https://github.com/ngrx/platform/blob/master/docs/store/README.md), or we could simply use an observable and subscribe to it to react each time a new value is added. We'll implement several observables in the app that we'll build in this tutorial. To see additional examples right now, look over the [Observables section of the Glossary of Modern JavaScript Concepts](https://auth0.com/blog/glossary-of-modern-javascript-concepts/#observables). You should also check out [Rob Wormald's](https://twitter.com/robwormald) ["Everything is a Stream" slides](http://slides.com/robwormald/everything-is-a-stream) and [presentation](https://www.youtube.com/watch?v=UHI0AzD_WfY). ### Reactive Programming and RxJS [ReactiveX, or Rx*](http://reactivex.io/rxjs/), is an API for asynchronous programming with observable streams. The JavaScript implementation is [RxJS, which is available on GitHub](https://github.com/reactivex/rxjs). As mentioned, Angular comes packaged with RxJS, so it's to our great advantage to make use of it wherever it might help. _Reactive programming_, in a nutshell, is based on propagating and responding to incoming events over time in a [declarative](https://auth0.com/blog/glossary-of-modern-javascript-concepts/#imperative-declarative) manner. Observables, which are streams of collections over time, are ideal for this. You can read more about [reactive programming here](https://auth0.com/blog/glossary-of-modern-javascript-concepts/#reactive-programming). ## Web Speech API The [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API) is an in-draft feature that enables the incorporation of voice data into web apps. It's still an [experimental technology](https://dvcs.w3.org/hg/speech-api/raw-file/tip/webspeechapi.html) at the time of writing, however, so cross-browser support is limited. For our app, we're specifically interested in the [speech recognition](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition) interface of the Web Speech API. This technology allows the browser to start listening via the user's microphone, assess speech using language and grammar dictionaries, and then execute functionality (as defined by the developer) in response. At the time of writing, this is [only supported in Chrome](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition#Browser_compatibility), so we will build our app with progressive enhancement in mind. We will use the lightweight [Annyang](https://github.com/TalAter/annyang) JS library to work with speech recognition more easily in our application. ## What We'll Build We're going to build an [ad libitum](https://en.wikipedia.org/wiki/Ad_libitum) web app inspired by [Mad Libs games](https://en.wikipedia.org/wiki/Mad_Libs)! Our own Madlibs app will have the following features: * The app requires 5 nouns, 5 verbs, and 5 adjectives to generate a short, silly story. * Words can be generated automatically through a provided Node [madlibs-api](https://github.com/kmaida/madlibs-api). * Words can be typed in manually by the user. * If the user's browser supports it, words can be entered through speech recognition using the computer's microphone. * The app will then automatically fetch supplemental pronouns and use the user's words to generate and then display the story. In Chrome, our app will look like this when it's finished: ![Madlibs app with Angular and speech recognition](https://images.ctfassets.net/23aumh6u8s0i/6W07LfYGGUdaJf2NVrcqHu/ad8d56f679900f1ba1d74648054b74c2/final-chrome) > **Note:** In other browsers that don't support speech recognition, the "Speak to Play" feature will not be displayed. Users will still be able to generate words using the API or type them manually. Though our Madlibs app is relatively small, it has a lot of features and robust functionality, so we'll build it over a short series of two tutorial articles. > **Note:** This tutorial moves quickly over the core Angular concepts. It's recommended that you have some experience with Angular before tackling the Madlibs app. You can check out the [Angular Tour of Heroes tutorial](https://angular.io/tutorial) or my [Real-World Angular Series](https://auth0.com/blog/real-world-angular-series-part-1/) to learn about Angular in-depth before beginning this tutorial. Let's get started! ## Dependencies and Setup The first thing we need to do is install dependencies. You'll need: * [Node.js](https://nodejs.org) with npm * [Angular CLI](https://github.com/angular/angular-cli#installation) - follow the README instructions to install the CLI globally You should also clone the [madlibs-api](https://github.com/kmaida/madlibs-api) to your local machine. Once installed, you can start the API server by running the following command from the project's root folder: ```bash $ node server ``` The API will then be accessible in the browser at `http://localhost:8084/api` with the endpoints specified in the [madlibs-api README](https://github.com/kmaida/madlibs-api). ### Create a New Angular Project We'll use the Angular CLI to generate a new Angular project. In a folder of your choosing, run the following command: ```bash $ ng new madlibs --style=scss ``` A new Angular project called `madlibs` will be generated with SCSS support. To start the app's server, navigate into the new project folder and run the `serve` command like so: ```bash $ cd madlibs $ ng serve ``` The app will run at `http://localhost:4200` and should look something like this in the browser: ![new Angular app works](https://images.ctfassets.net/23aumh6u8s0i/V1G0tbxhMi7gAz04ptRjj/3828aec3fce492ee0bb0545b0a505909/app-works) ### Add Bootstrap and Annyang From CDN We'll add [Bootstrap](https://v4-alpha.getbootstrap.com/) for CSS styling and [Annyang](https://github.com/TalAter/annyang) for speech recognition using CDNs. > **Note:** This tutorial uses an alpha version of Bootstrap v4, latest available at the time of writing. If a newer v4 release is available at the time of reading, please feel free to upgrade and make changes as necessary to the CSS in your app. Open your app's `index.html` file and add the following CDN links to the document ``: ``` html ... ... ``` We now have access to Bootstrap's styles and Annyang's Web Speech API helpers in our application. We're ready to start development!