Что нового в Marionette.js 3.0?23.08.2016 17:03

1852eb97f5614e658595582f20f41672.png

Прошло более 2-х лет с того времени как 3-я версия начала разрабатываться и вот наконец-то сегодня она была зарелизена! Итак, кому интересно, кто ждал и работает с Marionette.js — добро пожаловать в подкат.



Ребята с кор команды очень хорошо поработали и добавили парочку хороших изменений.
Давайте начнем.


View


Marionette.View заметно преобразовалось. Теперь это не просто неспользуемый класс, как мы помним из документации версии 2


Note: The Marionette.View class is not intended to be used directly

а полноценная View.


Более того, она теперь содержит в себе и Marionette.View, и Marionette.ItemView и Marionette.LayoutView. Да, как вы поняли теперь у нас больше нет ни Marionette.ItemView ни Marionette.LayoutView, они были удалены. Для того чтобы использовать 3-ю версию в коде нужно лишь заменить ваши Marionette.ItemView и Marionette.LayoutView на Marionette.View и все.


Давайте рассмотрим небольшой примерчик: 


import Mn from 'backbone.marionette';

const MyView = Mn.View.extend({
  template: _.template('
Превый заголовок для 3-й версии
'),

  onRender() {
    console.log('Моя вью была отрендерена')
  }
});

Живой пример


И пример как использовать View в качестве LayoutView


import Mn from 'backbone.marionette';

const MyView = Mn.View.extend({
  regions: {
    region1:'#region1',
    region2: '#region2'
  },
  onRender() {
    this.showChildView('region1', childView1);
    this.showChildView('region2', childView2);
  }
});

Живой пример


С этим разобрались. Идем дальше.


CompositeView


Marionette.CompositeView стала deprecated что вызывает сразу множество вопросов. Как мне теперь создать табличку или деревовидное меню как это было рекомендовано в документации?
Все очень просто, для этого нужно использовать Marionette.View и Marionette.CollectionView. Ребята приготовили хорошие сравнительные примеры как для таблиц так и для деревовидных меню.


Кстати, документация для новой версии заметно улучшилась. Над ней хорошо поработал Scott Walton, он же автор Marionette Guides.


CollectionView


Marionette.CollectionView осталось в основном без изменений.
Методы getChildView и getEmptyView были удалены. Вместо этого можно делать так


Mn.CollectionView({
  childView() {
    // мой код
  },
  emptyView() {
    // мой код
  }
});

Так же, Backbone.BabySitter удален из зависимостей и полностью интегрирован в ядро фреймворка.
Теперь давайте просто освежим память небольшим примерчиком.


import Mn from 'backbone.marionette';

const data = [
  {
    item: 'Превая запись'
  },
  {
    item: 'Вторая запись'
  },
  {
    item: 'Третья запись'
  }
];
const collection = new Backbone.Collection(data);
const childViewTemplate = _.template('<%= item %>');

const ChildView = Mn.View.extend({
  template: childViewTemplate
});

const collectionView = new Mn.CollectionView({
  el: 'body',
  childView: ChildView,
  collection: collection
});

collectionView.render();

Живой пример


View.Events


Жизненный цикл View претерпел изменений. События before:show и show были удалены.
Теперь он выглядит так: 


before:render -> render -> before:attach -> attach -> dome:refresh

before:detach -> detach -> before:destroy -> destroy

Пример


import Mn from 'backbone.marionette';

const MyView = Mn.View.extend({
  template: false,
  onBeforeRender() {
    console.log(1)
  },
  onRender() {
    console.log(2)
  },
  onbeforeDestroy() {
    console.log(3)
  },
  onDestroy() {
    console.log(4);
  }
});

const myView = new MyView();
myView.render();
myView.destroy();

Живой пример


ChildView Events


API немного изменилось и теперь вместо childEvents нужно использовать childViewEvents.


import Mn from 'backbone.marionette';

const MyView = Mn.View.extend({
  childViewEvents: {
    'some:event': 'eventHandler'
  }
  eventHandler() {
    console.log('Событие дочернего елемента');
  }
});

Живой пример


Templates


templateHelpers был переименован в templateContext.


import Mn from 'backbone.marionette';

const MyView = Mn.View.extend({
  template: template,
  templateContext() {
    return {
      version: '3.0'
    }
  }
});

Живой пример


Backbone.Radio


На смену Backbone.Wreqr пришел Backbone.Radio — мощная библиотека для общения между модулями в приложении.
Backbone.Radio плотно интегрирован в Marionette.Object что дает возможность слушать все события приложения в одном месте.


Живой пример


Изменения в API


 - `bindEntityEvents` ->  `bindEvents`
 - `unbindEntityEvents ` -> `unbindEvents`
 - `normalizeUIString`, `normalizeUIKeys`, `normalizeUIValues` -> `normalizeMethods`
 - `proxyGetOption` -> `getOption`
 - `proxyBindEntityEvents` -> `bindEvents`
 - `proxyUnbindEntityEvents` -> `unbindEvents`

Что было удалено?


  • Marionette.Controller
  • Marionette.Module
  • Marionette.RegionManager

Переезд на новую версию должен быть не очень болезненным.
Вот коммиты одного из лидеров кор команды Paul Falgout в один из своих проектов: 


templateHelpers -> templateContext
Marionette.ItemView -> Marionette.View
Marionette.LayoutView -> Marionette.View
childEvents -> childViewEvents
render:collection / onRenderCollection -> render:children / onRenderChildren
before:show / show / onBeforeShow / onShow -> attach etc

Чтобы облегчить жизнь разработчикам, была создана баблиотека marionette-v3-compat.
Так же есть примеры третьей версии с разными сборщиками проектов.


Marionette.js github репозиторий

Комментарии (6)

  • 23 августа 2016 в 15:27

    0

    ↑

    ↓

    Появилась ли полноценная поддержка lodash вместо underscore?

    • 23 августа 2016 в 15:28

      0

      ↑

      ↓

      Поддерживает как Underscore так и Lodash 4

  • 23 августа 2016 в 15:37

    0

    ↑

    ↓

    Ну когда же вы перестанете путать библиотеки с фреймворками?
    React.js, Vue.js как и Polymer являются просто библиотеками для создания UI компонентов. Их нельзя сравнивать с Angular.je или Ember.js в общем виде.

    • 23 августа 2016 в 15:50

      –1

      ↑

      ↓

      Да и backbone это не совсем фреймворк, а скорее библиотека

    • 23 августа 2016 в 15:53

      0

      ↑

      ↓

      Спасибо, обновил опрос

    • 23 августа 2016 в 16:32 (комментарий был изменён)

      0

      ↑

      ↓

      React.js — согласен — это UI (View). Vue.js — уже немного больше чем просто UI (в документации предлагаются решения что-то вроде Redux/Flux/Model), но согласен — прежде всего это UI.
      Angular.js, Ember.js, Backbone.js, Marionette.js… — судя по всему предоставляют помимо UI (View) и другие слои, например Model, что да — относит их уже к другому классу сущностей.

© Habrahabr.ru