backbone_es6

Backbone ES6

This repo contains an ES6 version of Backbone.js allowing for imports and tree shaking.

This package is made by deconstructing Backbone sources, separating it into modules and reassembling them using Rollup.

Tree Shaking?

Tree shaking allows you to include just the code you need instead of a whole library. Say, for example, your app needs to use just Backbone's router, you can import just that part, resulting in a smaller build size overall.

Dependencies

To use this library, your project sould already have

• jQuery
• Underscore

They aren't explicitly listed as dependencies in package.json (for npm nor jspm), because you might want to use other drop in replacements for these dependencies (for example, lodash@^3 instead of Underscore, or jquery.slim.js build instead of jquery.min.js).

Installation

Including it with a script tag

Include this package in your HTML file directly with a script tag using unpkg or jsdelivr

<script src="https://unpkg.com/backbone_es6/dist/backbone.min.js"></script>

or

<script src="https://cdn.jsdelivr.net/npm/backbone_es6/dist/backbone.min.js"></script>

Using npm

Install this package with npm with

npm install --save backbone_es6

Using JSPM

jspm install npm:backbone_es6

Can I use this as a drop-in replacement of Backbone?

Yes you can. Under the dist folder you can find scripts backbone.js and backbone.min.js that are in UMD format and can be used as a drop-in replacement for goold old vanilla Backbone. The minified version is listed as the main property in package.json so it's what you'll use by default.

These scripts are also used to run the tests. Said tests are the same as the ones in the official Backbone repo, to ensure full Backbone ES6's compatibility with its parent framework.

Using it with AMD

If you use AMD, CommonJS or want to load Backbone ES6 with a script tag, make sure you use dist/backbone.js or dist/backbone.min.js. E.g. AMD usage of our umd version is as follows:

define([
  './node_modules/backbone_es6/dist/backbone.js'
],function(Backbone) {

  ...your code...

});

Whereas, using ES6 syntax, you would use

import {Backbone} from './node_modules/backbone_es6/dist/backbone.es6.js';

package.json declares dist/backbone.es6.js as the jsnext:main and module script properties.

Using it with JSPM

If you installed Backbone ES6 with jspm, backbone_es6 will be mapped automatically to dist/backbone.es6.js. If you're tranpiling (using plugin-babel) you can import the module as:

import {Backbone} from 'backbone_es6';

or you could use AMD syntax as:

define([
  'backbone_es6'
],function(Backbone) {

  // Please note that you need to check for the "default" export
  Backbone = 'default' in Backbone ? Backbone.default : Backbone;

  ...your code...

});

If you are not using a transpiler and want to use the AMD build, use:

define([
  'backbone_es6/backbone.min.js'
],function(Backbone) {

  ...your code...

});

Can I use classes?

Nope. The inner working of Backbone entities and the way they extend is kept as-is. This project is only a POC to do imports and tree shaking. No more, no less.

Documentation

As this library is meant to be a full drop-in replacement of Backbone.js, the same docs apply.