Wrapper around Backbone providing integration with DataTables, as well as other utilities for creating Backbone views and models. Written as a plugin-based framework, where the DataTables integration is a plugin itself, and Backdraft can be further extended with your own plugins.
npm install @invoca/backdraft-app
First, define a new Backdraft app:
// app.jsimportMainRouterfrom"./main_router";importAppfrom"@invoca/backdraft-app/src/app";classTableExampleextendsApp{activate($el){this.mainRouter=newMainRouter({ $el });Backbone.history.start({});}}Define an entry point for creating your app:
// main.jsimportTableExamplefrom"./app";Backdraft.app("TableExample",newTableExample());Define the various components of your app:
// main_router.jsimportIndexViewfrom"./views/index_view";importRouterfrom"@invoca/backdraft-app/src/router";exportdefaultclassMainRouterextendsRouter{getroutes(){return{"" : "index"};}index(){constview=newIndexView();this.swap(view);}};// models/book.jsimportModelfrom"@invoca/backdraft-app/src/model";exportdefaultclassBookextendsModel{};// collections/books.jsimportBookfrom"../models/book";importCollectionfrom"@invoca/backdraft-app/src/collection";exportdefaultclassBooksextendsCollection{getmodel(){returnBook;}};// views/book_table_view.jsimportBookRowViewfrom"./book_row_view";importLocalDataTablefrom"@invoca/backdraft-app/src/data_table/local_data_table";exportdefaultclassBookTableViewextendsLocalDataTable{getrowClass(){returnBookRowView;}getpaginate(){returnfalse;}};// views/book_row_view.jsimportRowfrom"@invoca/backdraft-app/src/data_table/row";exportdefaultclassBookRowViewextendsRow{getcolumns(){return[{bulk : true},{attr : "name",title : "Name"},{attr : "created_at",title : "Created"}];}};Now create the view that pulls all the pieces together:
// views/index_view.jsimportBookTableViewfrom"./book_table_view";importBooksfrom"../collections/books";importViewfrom"@invoca/backdraft-app/src/view";exportdefaultclassIndexViewextendsView{render(){constcollection=newBooks();constdata=[];// fake datafor(letiter=0;iter<10;++iter){data.push({name : `Book ${iter+1}`});}collection.add(data);consttable=newBookTableView({ collection });this.$el.html(table.render().$el);returnthis;}}Finally, in an HTML page that loads the above scripts, activate the app at load time:
<html><head>
...
</head><body><divid="example-area"></div><scripttype="text/javascript">Backdraft.app("TableExample").activate($("#example-area"));</script></body></html>The legacy usage uses the Backdraft object to define the components of the application.
First, define a new Backdraft app and what plugins it will use:
Backdraft.app("TableExample",{plugins : ["DataTable"],activate : function($el){this.mainRouter=newthis.Routers.Main({$el : $el});Backbone.history.start({});}});Now, everything else gets namespaced within the Backdraft app name:
// routers/main.jsBackdraft.app("TableExample",function(app){app.router("Main",{routes : {"" : "index"},index : function(){varview=newapp.Views.Index();this.swap(view);}});});// models/book.jsBackdraft.app("TableExample",function(app){app.model("Book",{});});// collections/book.jsBackdraft.app("TableExample",function(app){app.collection("Books",{model : app.Models.Book});});// views/book_table.jsBackdraft.app("TableExample",function(app){app.view.dataTable("BookTable",{rowClassName : "BookRow",paginate : false});});// views/book_row.jsBackdraft.app("TableExample",function(app){app.view.dataTable.row("BookRow",{columns : [{bulk : true},{attr : "name",title : "Name"},{attr : "created_at",title : "Created"}]});});Now create the view that pulls all the pieces together:
// views/index.jsBackdraft.app("TableExample",function(app){app.view("Index",{render : function(){varcollection=newapp.Collections.Books();vardata=[];// fake datafor(variter=0;iter<10;++iter){data.push({name : "Book "+(iter+1)});}collection.add(data);vartable=newapp.Views.BookTable({collection : collection});this.$el.html(table.render().$el);returnthis;}});});Finally, in an HTML page that loads the above scripts, include the dist/backdraft.js file in your assets. You must also include the required vendor files (jQuery & underscore.js), plus dataTables.js if using the datatables plugin.
Then activate the app at load time:
<html><head>
...
</head><body><divid="example-area"></div><scripttype="text/javascript">Backdraft.app("TableExample").activate($("#example-area"));</script></body></html>If you run yarn run examples, a local server will be launched with live examples at localhost:9888.
To develop a Backdraft plugin or modify Backdraft, the following setup needs to be done first (this assumes a Mac running OS 10.9+):
Install NVM, the Node Version Manager https://github.com/creationix/nvm
curl https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | shOpen a new tab in your terminal
Install Node.js with:
nvm install v6.11.0Set it as the default Node.js version
nvm alias default v6.11.0Install Yarn https://yarnpkg.com/en/docs/install
Install dependencies
cd backdraft yarn run setup yarn install
Run the yarn dev script from the main directory to have the source and test files watched and tests auto-run when any modifications are done
yarn run dev
Run the specs script to run all the tests and exit
yarn run specs
Use the following two ENV variables to target specific tests:
SPEC_FILTER- target specific tests via karma-jasmine's --grep feature.SPEC_FILE_FILTER- target specific tests by file path. This value must be a regex. For example:SPEC_FILE_FILTER="/data_table.*_spec.js/" yarn run specs
See all available commands with:
yarn run
If you'd like to contribute a feature or bugfix: Thanks! To make sure your change has a high chance of being included, please read the following guidelines:
- Post a pull request.
- Please add tests. We will not accept any patch that is not tested. (It's rare when explicit tests aren't needed.) Please see existing tests for examples and structure.
Thank you to all the contributors!
@invoca/backdraft-app is published to the Invoca GitHub Packages npm registry:
https://github.com/Invoca/backdraft/pkgs/npm/backdraft-app
To publish a new version to the Invoca GitHub Packages npm registry, do the following:
Add a GitHub personal access token with write:packages scope to your shell environment (e.g. ~/.zshrc or ~/.bashrc):
export GITHUB_TOKEN=<your-github-token>Create a token at https://github.com/settings/tokens.
- Ensure the following are complete:
- Tested
- Green build
- Code Reviewed
- Publish new version:
yarn version --new-version <version>:
- creates commit with version change
- tags the commit with the version
- pushes the commit and tag to Github
- publishes the package to GitHub packages
- If on a branch, ensure this version gets merged to master
Backdraft is Copyright © 2014-2026 Invoca, Inc. MIT license.