Exoskeleton without jQuery

NativeView and NativeAjax

Backbone is very loosely coupled to jQuery, making it simple to override a few key functions in Backbone.View and Backbone.ajax to allow your Exoskeleton project to be used without jQuery at all.

There are a few ways of doing this. We'll focus on Backbone.NativeView and Backbone.NativeAjax.

Getting the dependencies

For starters, you're going to want to bring NativeView and NativeAjax into your project. This will likely involve a package manager like bower or npm, or simply downloading the scripts to a publicly-accessible libraries folder. For our purposes, let's grab NativeView and NativeAjax with bower.

bower install --save backbone.nativeajax backbone.nativeview

Add dependencies to the page

The simplest way is simply to add the files using <script> tags in your html file:

<script src="bower_components/exoskeleton/exoskeleton.js">
<script src="bower_components/backbone.nativeview/backbone.nativeview.js">
<script src="bower_components/backbone.nativeajax/backbone.nativeajax.js">

<script type="text/javascript">
  console.log(Backbone.NativeView);
  console.log(Backbone.ajax);
  Backbone.View = Backbone.NativeView;
</script>

If you are using AMD / requirejs it will look something like this in your main file:

define(['exoskeleton', 'backbone.nativeview', 'backbone.nativeajax'], function(Backbone, NativeView, NativeAjax) {
  Backbone.View = NativeView;
  Backbone.ajax = NativeAjax;
});

Finally, if you are using a commonjs-based build tool (like browserify or webpack), you'll add them like this:

var Backbone = require('exoskeleton');
require('backbone.nativeview');
Backbone.View = Backbone.NativeView;
Backbone.ajax = require('backbone.nativeajax');

Keep in mind that NativeView depends on Backbone. If you're using Exoskeleton in place of Backbone you'll have to tell your module loader to alias Exoskeleton first.

If using Browserify, install aliasify (npm i --save-dev aliasify) and run your transform globally.

bundle.transform('aliasify', {
    aliases: {
        'backbone': 'exoskeleton'
    },
    global: true, // By default Aliasify only runs against your code (not node_modules). This flag tells it to remap third-party code too.
    verbose: true
});

Please note that Exoskeleton tries to require Backbone dependencies (jquery and underscore) and fails silently if it can't find them

try { _ = require('underscore'); } catch(e) { }
try { $ = require('jquery'); } catch(e) { }

so if you haven't installed a dependency (say jquery) you might get an error like: Cannot find module 'jquery' from 'path/to/node_modules/exoskeleton'.

To avoid this, use a Browserify ignore:

bundle
.ignore('jquery')
.transform('aliasify', {
    aliases: {
        'backbone': 'exoskeleton'
    },
    global: true,
    verbose: true
});

For Webpack, use resolve.alias in your webpack.config.js file:

module.exports = {
  resolve: {
    alias: {
      'backbone': 'exoskeleton'
    }
  },

  plugins: [
    new webpack.IgnorePlugin(/^jquery$/),
    new webpack.IgnorePlugin(/^underscore$/)
  ]
};

Lastly, with AMD:

requirejs.config({
  map: {
    '*': {
      'backbone': 'exoskeleton'
    }
  }
});