Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/huasofoundries/backbone_es6
An ES6 build of Backbone, allowing for tree shaking
https://github.com/huasofoundries/backbone_es6
backbone backbone-es6 es6 javascript jquery jspm underscore
Last synced: 25 days ago
JSON representation
An ES6 build of Backbone, allowing for tree shaking
- Host: GitHub
- URL: https://github.com/huasofoundries/backbone_es6
- Owner: HuasoFoundries
- License: mit
- Created: 2017-01-16T11:44:58.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2021-08-02T09:13:04.000Z (over 3 years ago)
- Last Synced: 2024-10-30T17:43:49.788Z (about 2 months ago)
- Topics: backbone, backbone-es6, es6, javascript, jquery, jspm, underscore
- Language: JavaScript
- Size: 1.59 MB
- Stars: 8
- Watchers: 12
- Forks: 1
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Backbone ES6
[](https://www.npmjs.com/package/backbone_es6) [](https://travis-ci.org/HuasoFoundries/backbone_es6) [](https://scrutinizer-ci.com/g/HuasoFoundries/backbone_es6/?branch=master) [](https://www.codacy.com/app/amenadiel/backbone_es6?utm_source=github.com&utm_medium=referral&utm_content=HuasoFoundries/backbone_es6&utm_campaign=Badge_Grade)
This repo contains an ES6 version of [Backbone.js]((https://github.com/jashkenas/backbone)) allowing for imports and **tree shaking**.
This package is made by deconstructing Backbone sources, separating it into modules and reassembling them using [Rollup](https://github.com/rollup/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](https://jquery.com/)
- [Underscore](http://underscorejs.org/)
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](https://www.npmjs.com/package/lodash) 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](https://unpkg.com/#/) or [jsdelivr](https://www.jsdelivr.com/)
```html
```
**or**
```html
```
### Using npm
Install this package with npm with
```sh
npm install --save backbone_es6
```
### Using [JSPM](https://github.com/jspm/jspm-cli)
```sh
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](https://github.com/jashkenas/backbone), 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:
```js
define([
'./node_modules/backbone_es6/dist/backbone.js'
],function(Backbone) {
...your code...
});
```
Whereas, using ES6 syntax, you would use
```js
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](https://github.com/jspm/jspm-cli)
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](https://github.com/systemjs/plugin-babel)) you can import the module as:
```js
import {Backbone} from 'backbone_es6';
```
or you could use AMD syntax as:
```js
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:
```js
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](http://backbonejs.org/) apply.