Использование стандарта ES2015 в рамках библиотеки Backbone.js

В то время, как ребята из команд, работающих над Angular, React, мягко, но уверенно пересаживают разработчиков на ES2015, я хотел бы немного рассказать о возможностях использования нового стандарта спецификации с библиотекой Backbone.js. На сегодня основной подход к использованию ES2016 в браузерах один и не зависит от используемого фреймворка/библиотеки. И заключается он в следующем: пишем код на ES2015 и с помощью транспайлера (напр., Babel) получаем код (который и выполняется в браузере) на предыдущем стандарте ES5.

Но как модули, классы и прочие "фишки" из ES2015 использовать в рамках сущностей библиотеки Backbone.js? Об этом речь пойдет под катом.

Прежде всего нам необходимо организовать все файлы моделей, коллекций, представлений и роутов в виде es6 модулей. По моему мнению лучший инструмент для сборки модулей — webpack, если будете использовать в своем проекте его, то вряд ли пожалеете впоследствии. Итак, начнем писать модуль, который будет являться одним из наших представлений:

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

Здесь просто импортировали зависимости, необходимые в данном модуле. Используете другие библиотеки? Поступайте аналогично.

Дальше объявим класс MyCustomView:

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

Как видите созданный класс унаследован от стандартного класса Backbone.View. Кроме этого нам нужно экспортировать MyCustomView, для использования его в других модулях:

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

Структура модуля готова, осталось добавить созданному классу методы (именно методы, не свойства-функции):

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

Пока все предсказуемо, но мы еще не объявили такие свойства как el, tagName, events. Как будут выглядеть они? Есть 2 подхода: реализовать их объявление через геттеры, либо объявить в методе конструктора, приведу оба примера:

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

используя конструктор, получим:

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

Аналогичная ситуация будет с атрибутами моделей и коллекций.

К дальнейшему использованию всех "фич" стандарта ES2015 нет никаких препятствий. Вы можете использовать деструктуризацию, строки-шаблоны, итераторы, стрелочные функции, новые типы коллекций, промисы, symbol точно так же, как в других фреймворках/библиотеках, завязки на Backbone.js тут нет.

Например, использование arrow function в методе initialize:

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

Как видите, внеся минимальные структурные изменения в свой проект, можно легко перейти на ES2015, используя при этом библиотеку Backbone.js. Можно уже сейчас использовать все возможности языка, при этом не разрабатывая на таких бурно развивающихся библиотеках, как React.

Автор: alfaslash

Источник