Setting Up the Environment
To use this book, you’ll need the following (older versions of node/npm may work, but they haven’t been tested):
- NodeJS version 10.1.0 or greater
- npm version 6.1.0 or greater
- The code found on the page for this book at The Pragmatic Bookshelf site[1]
Download the zipped code from this book’s page and unzip it. You’ll find four folders—three corresponding to one of the three sections in this book and an asset server.
-
The vanilla folder contains the relevant code and scaffolding for the first five chapters that cover the RxJS library in depth.
-
ng2 covers the next three chapters, which are an overview for using RxJS within the Angular framework.
-
canvas contains the code and other related files to build your first RxJS-based game.
The asset-server folder contains a local server you’ll use to serve assets throughout the book. Once you’ve unzipped the code, run npm install in the asset-server folder to ensure all dependencies are installed. When everything is installed, run npm start to start the server, which will be listening at http://localhost:3000. You’ll use this server throughout the book.
Section-specific instructions for using the code provided is at the beginning of each section.
Typescript
The code in this book, as well as all the examples, use TypeScript, a language that is a superset of JavaScript that adds optional types. No TypeScript knowledge is needed to start this book. Everything you need to know will be explained along the way.
TypeScript can’t be run directly, so a compile step is needed. The code in this book is configured to use SystemJS to compile your code behind the scenes, so you don’t need to worry about it. You may want to install language support into your editor of choice, though this is not required.
Why TypeScript?
In vanilla JavaScript, the following is perfectly valid syntax:
| | function canRegister(age) { |
| | return age > 13; |
| | } |
| | |
| | let user = { |
| | name: 'Jose', |
| | age: 23 |
| | }; |
| | |
| | canRegister(user); |
This code prevents poor Jose from using our site, despite the fact that he’s well over the minimum required age. The bug here is a type mismatch. The function canRegister was expecting a number, but was passed an object. JavaScript helpfully tries to make up for our crass mistake, sees an object used against >—an operator that expects a number, and converts that object to a number: NaN. What if we could discover innocuous bugs like this without even leaving our editor (and more importantly, before our users do)?
A superset of JavaScript, TypeScript adds optional types into JavaScript. We can add an optional type notation to canRegister that explicitly notes that canRegister is looking for a numerical type.
| | function canRegister(age: number) { |
| | return age > 13; |
| | } |
| | |
| | let user = { |
| | name: 'Jose', |
| | age: 23 |
| | }; |
| | |
| | canRegister(user); |
In any editor with a TypeScript plugin, this will immediately reveal the bug. TypeScript knows the type of user is “an object with a name property set to a string, and an age property set to a number.” If we try to pass that through to a function that just wants a number, the type mismatch is revealed. While it’s possible to write Angular code in regular JavaScript, TypeScript is strongly recommended, and what we’ll use here.
You don’t need to know anything about TypeScript to read this book. All of the compilation will be handled for you as part of the code included in this book.
Experimenting in the Sandbox
You may wish to travel off the beaten path and experiment with RxJS as you learn about various aspects of RxJS. The sandbox.ts file has been set up for this purpose (with a link to the corresponding HTML file from the project homepage). All of RxJS is available, so feel free to play around with whatever you like. To view the sandbox in your browser, start the server as mentioned above and browse to http://localhost:8081/sandbox/sandbox.html.