Marionette.js v4 — Getting started with the new version
The Marionette library is now over 6 years old, and our goal is still the same. Marionette aims to be approachable with a small, easy to understand API. The core team has been working hard to fulfill the promise of iterative and incremental updates. For those keeping up with deprecations and experimental API this should be an easy transition. For others the transition should still be fairly straightforward and is well documented.
For the v3-v4 upgrade guide:
https://marionettejs.com/docs/v4.0.0/upgrade-v3-v4.html
For v4 documentation:
https://marionettejs.com/docs/v4.0.0
Accomplishments
The new release comes with a simplified API and performance gains. To demonstrate the performance of v4 we utilize the js-framework-benchmark. The interactive results table is available here: https://rawgit.com/krausest/js-framework-benchmark/master/webdriver-ts-results/table.html
We currently test against two scenarios. One uses jQuery with underscore templates which is certainly the slower of the options, but those solutions come free with Backbone. The other uses Marionette’s new renderer API and a custom DOM template to produce results outpacing most all of the modern popular frameworks. It is unlikely anyone would write custom DOM templates for their entire project, but this shows the range of Marionette. Any number of rendering and templating solutions can be used with Marionette to produce performance keeping up with other modern solutions. With Marionette you can even mix-and-match choosing to hyper-optimize even a single view for a hot route if necessary.
Here is a snapshot of the results:
Notably Marionette and its dependencies have a smaller byte weight and memory footprint than the libraries in close comparison.
Major Changes
With v4 came a few major changes:
New CollectionView
TheNextCollectionView, introduced in v3.3, was renamed CollectionView replacing both the previous CollectionView and CompositeView.
AppRouter was extracted
Marionette no longer has an opinion on routers however developers were always free to choose alternatives to AppRouter. AppRouter was extracted to its own library and can certainly still be used if one so chooses.
https://github.com/marionettejs/marionette.approuter
Renderer class was removed and TemplateCache was extracted
Setting a view class renderer is easier than ever and as such the original global v2-style renderer was removed as was the TemplateCache library which read and cached templates from the DOM. TemplateCache was extracted and can still be used as Marionette’s renderer or as part of a custom renderer.
https://github.com/marionettejs/marionette.templatecache
Read more on renderers here:
Looking forward
Browsing the open issues on the Marionette repo, a clear candidate for improvement is Region. Expect to see some reform and improvements to regions in upcoming versions.
Perhaps the most important goal is that we plan to support our community as best as we can. The Marionette community has been excellent at supporting each other and building content to improve the ecosystem.
