Installation and Quick Start

With npm:

$ npm install bd-core

With yarn:

$ yarn add bd-core

With bower:

bower install --save bd-core

Basic Usage

Backdraft is distributed with three versions of the code:

npm and yarn install Backdraft at npm_modules/bd-core. The three versions of the code are located as follows:

bower is similarly located except it uses bower_components in place of node_modules.

Here is a "hello, world" Backdraft application using ES6 modules. This source would sit in a directory that's a sibling to node_modules.

<!DOCTYPE html>
<html lang="en">
<body>
<div id="root">
</div>
<script type="module">
	import {Component, e, render} from "https://unpkg.com/bd-core@2.3.0/lib.js";

	class HelloWorld extends Component {
		bdElements(){
			return e("div", "hello, world");
		}
	}

	render(HelloWorld, "root")
</script>
</body>
</html>

It is inconvenient to reference the install location in every resource that imports symbols from Backdraft. To make things easier, create a resource in the root source directory that re-exports Backdraft symbols. For example, if a particular project organizes all of its source code in the project-root/src directory that is a sibling to the node_modules directory, then create a file in that directory named backdraft.js with the following contents:

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

This makes it somewhat easier to import Backdraft symbols. Consider what project-root/src/hello-world.js might look like:

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

export default class HelloWorld extends Component {
    bdElements(){
        return e("div", "hello, world");
    }
}
        

AMD

If you are using AMD, then you should configure the loader to locate the package backdraft at node_modules/bd-core/dist/lib-umd.js. We recommend you try out bd-load for AMD loading (we were part of the team that defined AMD years ago). Here is the main document for a trivial "hello-world" Backdraft application; this source would sit in a directory that's a sibling to node_modules.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/bd-load@2.0.2/load.js"></script>
    <script>
		require.config({
			packages: [
				{
					name: 'backdraft',
					location: "https://unpkg.com/bd-core@2.3.0/dist",
					main: "lib-umd"
				},
			]
		});
		window.onload = function(){
			require(["backdraft"], function(bd){
				class HelloWorld extends bd.Component {
					bdElements(){
						return bd.e("div", "hello, world");
					}
				}

				bd.render(HelloWorld, "root");
			})
		}
    </script>
</head>
<body>
<div id="root"></div>
</body>
</html>

Next Steps

The Backdraft Tutorial

Examples

The Backdraft Reference Manual

Backdraft on GitHub