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



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

    Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.

    Какую библиотеку Вы используете для фронтенд приложений?

    • 18,5%Marionette.js111
    • 25,0%Backbone.js150
    • 29,0%Angular.js174
    • 4,5%Ember.js27
    • 32,2%React.js193
    • 10,2%Vue.js61
    • 10,0%Другой вариант60
    • 14,3%Не использую фреймворков86
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 21

      0
      Появилась ли полноценная поддержка lodash вместо underscore?
        0
        Поддерживает как Underscore так и Lodash 4
        +1

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

          +6
          Да и backbone это не совсем фреймворк, а скорее библиотека
          0
          Спасибо, обновил опрос
            +1
            React.js — согласен — это UI (View). Vue.js — уже немного больше чем просто UI (в документации предлагаются решения что-то вроде Redux/Flux/Model), но согласен — прежде всего это UI.
            Angular.js, Ember.js, Backbone.js, Marionette.js… — судя по всему предоставляют помимо UI (View) и другие слои, например Model, что да — относит их уже к другому классу сущностей.
            –1
            Теперь это не просто `неспользуемый` класс, как мы помним из документации версии 2


            неиспользуемый?

              +1
              Имелось ввиду, что View напрямую использовать не рекомендовалось, она была родиетелем для всех остальных. Теперь общее для всех View, собрано в Mixin
                0
                Спасибо, поправил.
                +3
                Когда в своих проектах испоьзовал Backbone, было понятно, что необходимы слои абстракций для View. Их накодил, потом понял, что то же самое было сделано в Martionette 2.4
                Затем стал использовать ее, но увидел, что все немного запутанно и нагроможденная архитектура у view.
                С переходом на третью версию, Marionette стал заметно чище, его сейчас и использую.
                Единственное, я пока не могу разобраться с их новым стилем написания модулей (отказ от Marionette.modules в сторону require). Необходимо использовать webpack уже, а я пока на стадии «изучил gulp».
                Удобно у них встроили Backbone.Radio, кстати.

                И не заводится их Marionette-inspector никак. Приходится без него тыкаться, но уже вполне привык. Новичкам будет трудно без инспектора.
                  0
                  Marionette-inspector — следующий этап. Вся команда была сконцентрирована на релизе. По поводу модулей и организации структуры приложения, можно глянуть marionette-wires или reps-js
                  0
                  Я один опечален по поводу CompositeView? Кто в курсе чем это обосновано?
                    0
                    Ну, по сути, можно ограничиться регионами обычных View, CollectionView имеет возможность встраивания одновременно и модели, и коллекциями со всеми event-плюшками.

                    Я был только рад, когда убрали лишние View. На самом деле, я бы и от CollectionView бы отказался, приведя все к одному синтаксису. Хотя тут очень спорно.
                      +1
                      Да, конечно можно встраивать CollectionView во View, но иногда, когда задача простая, просто не хочется плодить лишние сущности. А тут приходится делать View с одним единственным регионом. Но за объединение View, ItemView, и Layout View респект конечно.
                    0
                    Использую riot.js
                    Отличная интуитивно удобная и понятая вещь, хотя бывают некоторые баги в самой библиотеке.
                      +1
                      После ангуляра и реакта стал скучать по марионеттке. Было все так просто, понятно. Удобные бэкбоновские модели и коллекции.
                        0
                        Посоветуйте человеку, который собрался взяться за ember или react: стоит ли переходить с Marionette на них?
                          0
                          Попробовать Ember и React стоит. Если вам понравится, то переходите. Ember после Marionette воспринимается проще.
                            0
                            По ember не скажу, не сталкивался с ним.
                            Как видно по рынку и в голосовании работу по реакту сейчас проще найти, так что в этом плане изучать стоит. Но лично мне, человеку привыкшему работать с не очень большими проектами и к MVC концепции реакта ломают голову.
                          0
                          Backbone Marionette
                          image

                          Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                          Самое читаемое