Backbone.Abstract

Backbone.Abstract extends Backbone.js framework with abstract classes Backbone.AbstractModel, Backbone.AbstractView, Backbone.AbstractForm and Backbone.JST

Getting started

git clone --depth 1 https://github.com/tbranyen/backbone-boilerplate

Updating dependencies

npm install

Building project

npm start

Running automated test

npm test

Backbone.AbstractModel

Backbone.AbstractModel.md provides generic functionality shared by all the models. In particular it automatically merges a supplied options hash into this.options. It also binds object properties to Backbone this.get/this.set methods. So in a subtype of Backbone.AbstractModel you can access/mutate attributes of a model directly (e.g. model.email = "[email protected]";).

Backbone.AbstractView

Backbone.AbstractView.md provides generic functionality shared by all the views. The same as Backbone.AbstractModel it automatically merges a supplied options hash into this.options. It has this.find method to deal with 'future' nodes and extends this.listenTo for better usage experience.

Backbone.AbstractForm

Backbone.AbstractForm.md abstracts form-related functionality Form View performs the following tasks:

• validates form while typing (on-fly)
• validates form while typing against server (when options.remote map provided)
• validates form on submit
• invokes handlers this.onFormSubmit, this.onFormInvalid, this.onFormError, this.onFormChange if available
• triggers state-changed event when form validity state changes
• toggles CSS classes is-valid, is-invalid, has-error, is-focused, is-visited on the form and inputs in accordance with object validity
• processes form directives

Backbone.JST

Backbone.JST.md is template namespace that populates automatically from the embedded scripts

Backbone.utils

Backbone.utils.md extends Exoskeleton utils with debounce method

Vanilla Backbone

Backbone is the only popular JavaScript framework that doesn't attempts to do everything. It solves the only task and does it well - it brings a consistent abstraction layer to your application. And it could very light-weight if not the ugly legacy: jQuery and Underscore. Those dependencies are not only redundant nowadays, but can be considered even harmful (http://lea.verou.me/2015/04/jquery-considered-harmful/).

What we can do is to go with Exoskeleton - Backbone's fork decoupled from Underscore. Further by means of Backbone.NativeView/Backbone.Fetch we get rid of jQuery too. The formula is: Exoskeleton + Backbone.NativeView + Backbone.Fetch + Fetch API polyfill Array.from polyfill

The whole bundle concatenated and minimized can be found vendor/exoskeleton/native-exoskeleton.min.js

Handy tricks

Communication Between Modules

Modules like View can be dynamically created and removed and direct references can be be broken besides the fact of tight coupling. I suggest to encapsulate communication between modules in a mediator implementing PubSub interface. Here I extend Backbone.Router with Backbone.Events (Router/app). Thus we can trigger and subscribe for the type instance as well as for Router events across the application modules.

ES6 polyfills

Backbone.Abstract includes following polyfills:

• Array.from - to convert a collection to an array