Illarion Koperski
2016-07-13
— Matt Esch
author of virtual-dom module
Using Virtual DOM, we can:
from "Pocket-sized JS" talk by Henrik Joreteg
The cart widget is updated when new data is received from the server.
Quantity adjustment buttons and the "remove" button send AJAX requests to the server.
widget image from Vanilla UI by PixelBudda
var diff = require('virtual-dom/diff'),
patch = require('virtual-dom/patch'),
createElement = require('virtual-dom/create-element'),
render = require('./render.js');
var diff = require('virtual-dom/diff'),
patch = require('virtual-dom/patch'),
createElement = require('virtual-dom/create-element'),
render = require('./render.js');
// Initial render
var tree = render({ items: [] });
var rootNode = createElement(tree);
document
.getElementById('js-cart')
.appendChild(rootNode);
var diff = require('virtual-dom/diff'),
patch = require('virtual-dom/patch'),
createElement = require('virtual-dom/create-element'),
render = require('./render.js');
// Initial render
var tree = render({ items: [] });
var rootNode = createElement(tree);
document
.getElementById('js-cart')
.appendChild(rootNode);
// Patch DOM on updates using custom event
var updateWidget = function(evt, cart) {
var newTree = render(cart);
var patches = diff(tree, newTree);
rootNode = patch(rootNode, patches);
tree = newTree;
}
// updateWidget is run when new data comes from the server
$(document).on('store:cart', updateWidget)
var map = require('lodash/map'),
h = require('virtual-dom/h');
module.exports = function(cart) {
return h('div', { className: 'Cart' }, map(cart.items, function(item) {
return h('div', { className: 'Cart-item' }, [
h('h3', { className: 'Cart-itemTitle' }, cart.item.title),
h('p', { className: 'Cart-itemPrice' }, cart.item.price),
h('button', {
type: 'button',
className: 'js-item-remove Cart-itemRemove',
attributes: {
'data-item-line': cart.item.line
}
}, 'Remove')
])
}))
}
uses virtual-hyperscript, a DSL for creating virtual trees
concise - pure JS - lintable
var $ = require('jquery');
$('#js-cart').on('click', '.js-item-remove', function(evt) {
// Remove item from the cart on the server
});
$('#js-cart').on('click', '.js-item-qty-plus', function(evt) {
// Increase item quantity
});
$('#js-cart').on('click', '.js-item-qty-minus', function(evt) {
// Decrease item quantity
});
using jQuery