themindfuldev / marionette-vdom

Marionette.js views implemented with virtual-dom

marionette-vdom

A Marionette.View and Marionette.CompositeView implementation with virtual-dom.

Version

• If you are using Marionette.js v3+ you should use marionette-vdom v0.2+ (or the latest)
• If you are using Marionette.js v2 you should use marionette-vdom v0.1.2-b

Usage

This module exposes View as the VDOM implementation for Marionette.View and CompositeView for Marionette.CompositeView:

var VDOMView = require('marionette-vdom').View;
var VDOMCompositeView = require('marionette-vdom').CompositeView;

How tos

To install:

npm install

To run the demo app:

npm run demo
open http://127.0.0.1:9966/demo/demo.html

To run the perf test:

npm run perf
open http://127.0.0.1:9966/perf/perf.html

To run the unit tests:

npm test

To generate binaries:

./build.sh
uglifyjs --compress --mangle -- marionette.vdom.js > marionette.vdom.min.js

Make sure to check out the change log.

Browser support

IE 9 on

marionette-vdom's Issues

Bloated size?

Something seems very wrong with the size of this when you look at the size of marionette and the size of virtual-dom. There seems to be a lot of bloat being generated through browserify. I'm seeing Streams, Buffers, etc. in there and I would think none of this is needed, since mercury.js is almost 4x smaller when unminified files are compared.

No option to convert HTML with keys.

There is no option to convert HTML with keys in the attachElContent function.
If you are removing/adding/reordering elements these can get lost, and thus resulting in bad html.
In my project I fixed it now as following:

attachElContent: function(html) {

      var convertHTMLWithKey = convertHTML.bind(null, {
          getVNodeKey: function (attributes) {
              console.log(attributes)
              return attributes.id;
          }
      });

      var newVirtualEl = convertHTMLWithKey(this.rootTemplate({
        content: Backbone.$.trim(html)
      }));

      if (this.virtualEl) {
        var patches = diff(this.virtualEl, newVirtualEl);
        console.log(this.el, patches);
        patch(this.el, patches);
      }
      else {
        this.$el.html(Backbone.$.trim(html));
      }
      this.virtualEl = newVirtualEl;
      return this;
    },

Since attachElContent is called from the marionette code, you cannot add options. So still finding a correct way of fixing this.

YAVDOM

@TiagoRG, good work,
but please, see the code on https://github.com/AFASSoftware/maquette
code is < 11k minified, no-gzipped, supports transitions, real DOM / V-DOM merge, and it is fast
(your code is >250k, twice as React with addons?)

http://maquettejs.org/2015/02/28/Progressive-enhancement.html

From the site:

1. Make the animation strategy pluggable thus allowing both velocityJS and CSS Transitions.
2. Keep a reference to the rendered DOM node on virtual DOM nodes.
3. Diffing and patching is done simultaneously.
4. Virtual DOM nodes are considered immutable. This allows a powerful caching mechanism based on comparing object identity.

Keeping a reference to the rendered DOM on virtual DOM nodes is what makes maquette really
different from other implementations. I look forward to seeing what the performance implications of
this decision are and what other possibilities this enables like progressive enhancement.

Adapting a transpiler for ES6 or React templates must be easy, I'm working in ES6 and Mustache transpilers to vdom soon.

still alive and production ready?

Is it still alive and production ready?

In-browser version

Hi,
What about a "in-browser" version (not server-mode node.js) ?

Is this module still recommended?

Hello @TiagoRG, thanks for taking the initiative in writing these ports from Marionette.ItemView and Marionette.CompositeView. I notice there hasn't been any updates in the last 11 months. Is this still a recommended method to improve performance in Backbone/Marionette apps, or are people moving to more a Marionette-React solution?

Thanks in advance for your response.

Performance is really bad so far

I've introduced a perf test and it is miserable so far: 7cb2875

Enter npm run perf and head to http://127.0.0.1:9966/perf/perf.html

Support for LayoutViews

The only real view left! What do we need to do to support this? Any roadblocks I can help with?