Pull to refresh

Что нового в Marionette.js 3.0?

Website development *JavaScript *


Прошло более 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('<h1>Превый заголовок для 3-й версии</h1>'),

  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 репозиторий

Only registered users can participate in poll. Log in, please.
Какую библиотеку Вы используете для фронтенд приложений?
18.5% Marionette.js 111
25% Backbone.js 150
29% Angular.js 174
4.5% Ember.js 27
32.17% React.js 193
10.17% Vue.js 61
10% Другой вариант 60
14.33% Не использую фреймворков 86
Nobody voted yet. Nobody abstained.
Tags: что нового?javascriptmarionette.jsmarionettejsbackbone.jses6
Hubs: Website development JavaScript
Total votes 37: ↑33 and ↓4 +29
Comments 21
Comments Comments 21

Popular right now

Top of the last 24 hours