TL; DR;
Marionette.js позволяет отображать HTML с использованием виртуальных или инкрементных библиотек DOM. Основными преимуществами являются возможность определения пользовательского интерфейса с помощью декларативного кода и лучшая производительность. Некоторые примеры пользовательского рендеринга можно найти здесь.

Marionette.js - это относительно старый фреймворк JavaScript, содержащий шаблоны проектирования, которые не считаются передовыми в сфере веб-разработки. Один из них - использование строкового шаблона для рендеринга HTML.

Начиная с версии 2, можно настроить способ визуализации HTML, а недавние изменения в структуре упростили замену стратегии визуализации по умолчанию. Например, для поддержки incremental-dom необходима функция с одной строкой кода, а для использования - другой строкой:

Дизайн API позволяет использовать разные стратегии рендеринга в одном приложении, открывая двери для плавного перехода.

Когда jQuery и Bootstrap встречаются с виртуальным (или инкрементным) DOM

Одним из преимуществ Marionette.js является возможность прямой интеграции с экосистемой jQuery и Bootstrap, без необходимости использования дополнительного слоя или обратного и четвертого кода. Возможность создать приложение на основе одной из многих тем может иметь большое значение для небольших команд, выпускать или нет продукт своевременно.

С Marionette.js можно получить лучшее из обоих миров: обширные библиотеки пользовательского интерфейса, имеющиеся в сети, и функциональные компоненты пользовательского интерфейса, основанные на виртуальной (или инкрементной) модели DOM. Их можно использовать вместе не только в одном приложении, но и в одном представлении / компоненте, то есть в виджете jQuery в дереве HTML, отображаемом библиотекой Virtual DOM.

Пакет marionette.renderers содержит реализации для нескольких библиотек. Он поставляется с примерами (адаптация приложения Rivets + Backbone с пользовательским интерфейсом в реальном времени) для каждого модуля рендеринга:

виртуальный дом

Virtual-dom был одной из первых автономных реализаций виртуальной DOM. Недавно разработка застряла, но это солидная библиотека.

В примере используется синтаксис помощников гиперкриптов:

снабжение

Snabbdom - это быстрая и малая виртуальная DOM-библиотека. Активно поддерживается и используется CycleJS.

Попробуйте живую версию.

В этом примере для определения компонентов используется JSX через snabbdom-pragma:

ад

Inferno - небольшая, очень быстрая библиотека, похожая на React.

В этом примере используется подход, отличный от других, путем вложения функциональных компонентов inferno вместо использования областей Marionette.js для определения дерева пользовательского интерфейса:

инкрементальный дом / руль

Incremental-bars компилирует шаблоны Handlebars в вызовы incremental-dom. Наверное, лучший вариант для тех, кто уже пользуется Handlebars.

инкрементальный дом / супервизоры

Superviews - это инкрементальный транспилятор с гибким синтаксисом шаблонов. Безусловно, это более зрелая инкрементальная реализация, обеспечивающая оптимальный код.

Попробуйте живую версию.

Замечание о производительности рендеринга

Основное преимущество использования подхода Virtual DOM - это возможность определять пользовательский интерфейс с помощью декларативного кода, который легче тестировать и который более предсказуем. Но есть еще одно потенциальное преимущество: лучшая производительность отрисовки, особенно для больших списков.

Реализация Marionette.js в JS Benchmark использует класс CollectionView, который в конфигурации по умолчанию имеет низкую производительность для такого большого списка. Можно повысить производительность, сопоставив с другими фреймворками, удалив jQuery как зависимость и применив другие передовые методы.

Просто переключив средство визуализации HTML, например Чтобы снабдить нас, мы можем получить такую ​​же или лучшую производительность основных соперников, сохраняя удобство других функций Marionette.js (см. реализацию здесь):

Заключительные примечания

Marionette.js - это не самоуверенный инструмент разработки, предоставляющий примитивы для создания небольших и крупных приложений. Он достаточно гибкий, чтобы соответствовать различным требованиям.

  • Необходимо использовать плагины jQuery? проверить;
  • Полная интеграция с Bootstrap? проверить;
  • Маршрутизация на основе состояния? проверить;
  • Простой роутер? проверить;
  • Нет роутера? проверить;
  • Использовать шаблоны Handlebars? проверить;
  • Пользовательский интерфейс на основе компонентов? проверить;
  • Виртуальный ДОМ? проверить.

Все, что нужно разработчику, - определить, что лучше всего соответствует его потребностям.