Render views fast in a modular web app – Map the array to the DOM: DOM Array

View Github Repository Open presentation in a new window

Daniel-Hug

See all presentation from Daniel-Hug

Render views fast in a modular web app – Map the array to the DOM: DOM Array

0 0

modular-web-apps

How I build modular web apps: a JS talk

On Github Daniel-Hug / modular-web-apps

git.io/voYWW

Render views fast in a modular web app

Daniel Hug

What I want in a Single-Page web App

  • speed: better than templating.
  • modularity: better than frameworks
  • scalability: Don't Repeat Yourself!

Templating

The goal:

renderItem({
    title: 'eggs',
    quantity: '1 dozen'
});

The template:

<ul id="shopping-list">
    <script id="item-template" type="text/handlebars">
        <li>{{title}}: buy {{quantity}}</li>
    </script>
</ul>

The downsides of templating

var templateSrc = $('#item-template').html();
var getItemSrc = Handlebars.compile(templateSrc);

var $shoppingList = $('#shopping-list');
function renderItem(item) {
    var itemSrc = getItemSrc(item);
    $shoppingList.append(itemSrc);
}
  • output is a string so elements must be queried to obtain their references
  • Updates to state refresh the whole template

Simplify with jQuery

function renderItem(item) {
    var $li = $('li').text(item.title + ': buy ' + item.quantity);
    $shoppingList.append($li);
}
  • element references :)
  • To change a prop we must still re-render everything :(

Observable Objects: Snoopy

github.com/daniel-hug/snoopy

function renderItem(item) {
    var $li = $('<li>');
    item.snoop('title quantity', function(title, quantity) {
        $li.text(title + ': buy ' + quantity);
    });
    $shoppingList.append($li);
}

var eggs = new Snoopy({
    title: 'eggs',
    quantity: '1 dozen'
});
renderItem(eggs);
  • element references :)
  • eggs.set('quantity', '2 dozen');
    won't refresh entire view.

Smart data-binding: DOM Builder

github.com/daniel-hug/dom-builder

function renderItem(item) {
    var li = dom({ el: 'li',
        kids: [item.snoop('title'), ': buy ', item.snoop('quantity')]
    });
    $shoppingList.append(li);
}
  • a view rendering module
  • accepts an observe function in place of any value to have it be live-bound to the state
  • updates only the necessary parts of the view without diffing

Keep a list: Observable Array

github.com/daniel-hug/observable-array

// create an observable array
var nums = new ObservableArray([1, 2, 3]);

// Get notified when it changes
nums.on('push', function() {
    console.log('new values: ' + [].join.call(arguments));
});

// add 2 items
nums.push(4, 5);
  • get notified when items are added or removed

Map the array to the DOM: DOM Array

github.com/daniel-hug/dom-array

// create an observable array
var nums = new ObservableArray([1, 2, 3]);

var listView = new DomArray(nums, $('ul')[0], function(num) {
    return $('<li>').text('number: ' + num);
});

// add 2 items
nums.push(4, 5);

Thank you!

Where to find me:

Render views fast in a modular web app Daniel Hug