Using the ES2015 standard in the Backbone.js library

While the guys from the teams working on Angular, React, gently but confidently transplant developers on ES2015, I would like to talk a little about the possibilities of using the new specification standard with the Backbone.js library. At present, the basic approach to using ES2016 in browsers is one and does not depend on the framework / library used. And it consists in the following: we write the code on ES2015 and with the help of the transpiler (for example, Babel ) we get the code (which is executed in the browser) on the previous ES5 standard.

But how to use modules, classes and other "chips" from ES2015 as part of the Backbone.js library entities? This will be discussed under the cut.

First of all, we need to organize all files of models, collections, views and routes in the form of es6 modules. In my opinion, the best tool for building modules is the webpack; if you use it in your project, you will hardly regret it later. So, let's start writing a module, which will be one of our views:

import $ from 'jquery'; import Backbone from 'backbone'; import _ from 'underscore'; 

Here we simply imported the dependencies needed in this module. Do you use other libraries? Do the same.

Next we declare the class MyCustomView :

 class MyCustomView extends Backbone.View { // our other code } 

As you can see, the created class is inherited from the standard Backbone.View class. In addition, we need to export MyCustomView, for use in other modules:

 class MyCustomView extends Backbone.View { // our other code } export default MyCustomView; 

The structure of the module is ready, it remains to add methods to the created class (namely, methods, not properties-functions):

 class MyCustomView extends Backbone.View { initialize() { } render() { } // our other code } export default MyCustomView; 

So far everything is predictable, but we have not yet announced such properties as el, tagName, events. What will they look like? There are 2 approaches: implement their declaration through getters, or declare in the constructor method, I will give both examples:

 class MyCustomView extends Backbone.View { get tagName() { return 'div'} get className() { return 'example' } get template() { return _.template(myTemplate)} get events() { return { 'click': 'sayHelloWorld' } } } 

using the constructor, we get:

 class MyCustomView extends Backbone.View { constructor() { super(); this.tagName = 'div'; this.className = 'example'; this.events = { 'click': 'sayHelloWorld' }; } } 

A similar situation will be with the attributes of models and collections.

There are no obstacles to the further use of all "features" of the ES2015 standard. You can use destructuring, string-templates, iterators, switch functions, new types of collections, promises, symbol just like in other frameworks / libraries, there are no links on Backbone.js.

For example, using the arrow function in the initialize method:

 class MyCustomView extends Backbone.View { initialize() { setTimeout(() => {this.render()}, 1000); } render() { } // our other code } 

As you can see, by making minimal structural changes to your project, you can easily switch to ES2015 using the Backbone.js library. You can now use all the features of the language, while not developing on such rapidly developing libraries as React.