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.
If you render h('a',{href:'.',target:'_blank'})
and then you want to clear the target
attribute, you may not omit the target
attribute. You need to use one of the following:
h('a', {href: '.', target: undefined})
h('a', {href: '.', target: null})
h('a', {href: '.', target: ''})
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.
The second rule states that if a node has multiple childnodes with the same selector and these childnodes are added or removed dynamically, then they must have unique key properties.
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.