Two rules

Before you are ready to start using maquette, you need to be aware of two rules, which are both easy to follow. These rules are there to make sure maquette can generally render and diff very large pages at 60 frames per second on every device.

Rule #1 Same set of properties

Never just omit a property that you provided on a previous render, but set it to undefined, null or empty string. This means that if you first render h('a',{href:'.',target:'_blank'}) and on a subsequent render you want to clear the target attribute, you need to use one of the following:

If you omit the target attribute as in h('a',{href:'.'}) maquette will not clear the target attribute. This is because maquette does not sacrifice performance searching for properties that you may have left out on a subsequent render. This makes you responsible to always provide the same set of properties. The same principe applies to the nested classes and styles objects.

Rule #2 Distinguishable children

If a node has multiple childnodes with the same selector and these childnodes are added or removed dynamically, then they must have a unique key property.

A key property is typically used as follows: (If you are unfamilliar with the javascript map() function see this description on MDN)

h('ul', [
  items.map(function(item) {
    return h('li', {key: item.id}, [item.text]);
  })
])

This rule makes sure that a node is never accidentally morphed into an adjecent node and thereby doing the wrong animation or accidentally triggering a violation of the first rule.