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:
- The raw source; each source file is an ES6 module.
- A rollup of the library into a single ES6 module.
- A rollup of the library into a single UMD module.
npm and yarn install Backdraft at npm_modules/bd-core. The three versions of the code are located as follows:
- raw source: node_modules/bd-core/lib.js
- ES6 module rollup: node_modules/bd-core/dist/lib.js
- UMD module rollup: node_modules/bd-core/dist/lib-umd.js
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.1/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.1/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 Reference Manual