Tutorial - Getting Started

Prerequisites

This tutorial assumes

Source Code

The code for this tutorial and several other examples is stored in a GitHub repository available at https://github.com/altoviso/backdraft-tutorial. Each section in the tutorial (and each other example) is a separate tree in the repository. If you would like to follow along and play with the code, then clone the repository locally and install the dependencies.

$ git clone https://github.com/altoviso/backdraft-tutorial.git
$ cd backdraft-tutorial
$ npm install

If you want to run the code on your machine, then you'll need a local web server that serves the tutorial directory tree. The tutorial code includes an Express program ( httpServer.js in the project root) that solves this problem, and Express in included in the package dependencies. To run the server, open a terminal window at the project root directory and execute:

$ npm run server

Each example application in the tutorial is single-page application, completely self-contained in a single directory tree. Each of these trees contain the HTML file, index.html, that loads the application. Typically, there is a small CSS file, main.css, that is a sibling to index.html. All JavaScript source files for each example are contained in the directory src, also a sibling to index.html.

We always define src/backdraft.js that simply exports everything from node_modules/bd-core/lib.js:

src/backdraft.js

export * from "../../node_modules/bd-core/lib.js"

This allows us to import Backdraft symbols into code modules that live in the src tree using the simple import expression:

import {Component} from "./backdraft.js"

This bookkeeping wouldn't be necessary if JS6 modules and their implementations included a configurable loader as AMD has for years. But, c2018, they don't. This step can also be avoided by employing a build step during dev, but in most cases we think that is not worth the cost and a build step is never required for Backdraft projects. Clearly, to require a build step for a little proof-of-concept application--this tutorial a classic example--is ludicrous. Lastly, notice that we are importing the non-bundled, non-minimized Backdraft source code in this tutorial. This allows you to inspect the code in the debugger easily.

A commercial project would be set up differently. For example, it might include trees like config, dist, and others, depending on your shop’s procedures. But this is a tutorial to explain Backdraft, not to explain how to build Amazon.com. So we’re keeping it as simple as possible to focus on the task at hand.