Marionette v3.4 Released

• Now exporting an ES6 module
• A DOM API added as a method for replacing how Marionette deals with the DOM.
• Features and improvements added to NextCollectionView

Exporting ES6

As of the v3.4 release module bundlers that support the “module” key of package.json may import an ES6 module build of Marionette. This better allows for tree-shaking (though there is more to do there) and removes the need for a UMD wrapper.

edit: The ES6 module was a breaking change for some builds. The ES6 module will still be built and shipped with v3.4.1, but the “module” key will be removed from package.json until the feature is fully flushed out for v4. To use the ES6 module, aliasing or importing from the node_module folder will be required.

DOM API — or the path to replacing jQuery

Say what you want about jQuery, but there are certainly faster ways in dealing with the DOM, particularly when dealing with large CollectionViews. By default Marionette uses jQuery to interface with the DOM and though there have always been ways to replace these interactions, the DOM API provides an easier method for modifying these interactions per view prototype.

In combination with the setRenderer API introduced in v3.3, we hope that it will be easy to customize performant rendering for the whole app or even per view. For more on alternate rendering strategies, read Going virtual or incremental with Marionette.js, and anticipate further updates here on the blog discussing additional strategies. Before moving onto the next feature a DOM API that could replace jQuery may look like this:

const DomApi = {
  getEl(selector) {
    if (_.isObject(selector)) return [selector];
    return document.querySelectorAll(selector);
  },
  findEl(el, selector) {
    return el.querySelectorAll(selector);
  },
  detachEl(el) {
    if (el.parentNode) el.parentNode.removeChild(el);
  },
  hasContents(el) {
    return el.hasChildNodes();
  },
  setContents(el, html) {
    el.innerHTML = html
  },
  appendContents(el, contents) {
    el.appendChild(contents)
  },
  detachContents(el) {
    while (el.firstChild) {
      el.removeChild(el.firstChild);
    }
  }
};
Marionette.setDomApi(DomApi);

It can also be applied to singular view prototype

const MyView = Marionette.View.extend({...});
MyView.setDomApi(DomApi);

NextCollectionView Improvements

Also introduced in v3.3 NextCollectionView was added as a possible replacement candidate for the current CollectionView in an upcoming major version. It is currently being vetted and battle tests and from user feedback and benchmarks v3.4 will include additions and improvements to NextCollectionView. Among some general performance improvements the following changes were made:

• swapChildViews was added for an easy interface for changing the placement of two children within a CollectionView.
• viewComparator: false was added for disabling the sort functionality when not needed. By default the sort is kept in sync with the order of the Backbone collection.
• An improvement was made to avoid unnecessary calculations if children are added to the end of an existing CollectionView.
• attachHtml which is overridable by the user used to receive the instance of the CollectionView as the first argument. This argument was originally added to the CollectionView to support the CompositeView. As NextCollectionView is listed as an experimental API, we removed this unnecessary argument to simplify the API.

Other notable updates

What might be considered an advanced flag, monitorViewEvents was added to all of the Marionette View prototypes. Essentially if set to false Marionette will no longer trigger attach/detach or dom:refresh/dom:remove events for that view or any of its children. Use this flag with care! This flag may be useful in cases where very large numbers of views need to be added or removed at once and extra attention is needed to improve rendering or view destruction.

Additionally, Backbone.Radio is no longer needed by the UMD wrapper. While Radio is still listed as a dependency, in the case where you are simply loading Marionette via a script tag (say for instance on codepen or jsfiddle) you do not need to load Radio unless you intend to use the radioEvents interface.

We need your help!

Marionette could not continue without the support of the community. Please share your experiences with this new version or ways things can improve in Gitter, or if you run into a problem, open an issue on Github.