Writing a frontend framework
purpose & fundamentals
Federico Pereiro
Start with why
Two heroes under stress
Two heroes under stress
1) Starts with energy
2) Faces challenges
as chosen
Two heroes under stress
1) Starts with dread
2) Faces challenges
as imposed
Tools make all the difference
Simple, not easy
Purpose:
write frontends feeling like Rocky, not like Homer
Moving onto how
How can I write a modern web app without a framework?
What is a modern web app anyway?
Web page
Web application
Web page
- Sending or receiving info requires a page refresh.
- The page is rendered once.
Web app
- Background communication with server.
- The page must be updated.
Web page
- Relies on connectivity.
- Fetches the whole thing.
Web app
- Offline ability.
- Fetches just the data.
A horrible solution
// server code
http.get ('/update', function (req, res) {
response.end ('<li>New item</li>');
})
// client code
ajax ('get', '/update', function (error, data) {
$ ('ul.list').append (data);
});
Better, but still bad
// server code
http.get ('/update', function (req, res) {
response.end (['New item']);
})
// client code
ajax ('get', '/update', function (error, data) {
JSON.parse (data).map (function (item) {
$ ('.table').append ('<li>' + item + '</li>');
});
});
Don't try this at home
// client code
function makeTag (tag, className, value, content) {
var o = '<' + tag;
o += ' class="' + className + '"';
o += ' value="' + value + '">';
o += content;
o += '</' + tag + '>';
return o;
}
Object literals!
<p>Hello!</p>
[‘p’, ‘Hello!’]
Object literals!
<p class=”nice”></p>
[‘p’, {class: ‘nice’}]
Object literals!
<div>
<p class=”nice”>Hello</p>
</div>
['div', [
[‘p’, {class: ‘nice’}, 'Hello']
]]
Object literals!
Conditional #1: cond ? [‘p’, ‘Hello!’] : []
Conditional #2: [‘p’, {class: cond ? ‘h2’ : ‘’}, ‘Hello!’]
Iteration:
[‘table’, ITEMS.map (function (item) {
return [‘tr’, [‘td’, item]];
})]
Object literals!
// client code
ajax ('get', '/update', function (error, data) {
var items = JSON.parse (data).map (function (item) {
return ['li', item];
});
$ ('ul.list').append (makeHTML (items));
});
I'm free!
Not so fast...
A simple application
Dependencies!
(Re)load:
- Affects everything.
- Must preserve user-provided amounts.
- Must preserve cart.
Filter:
- Affects counter of matching elements.
- Affects display of matching elements.
- Must preserve hidden elements.
Dependencies!
Add to cart:
- Relies on whether product is in cart already.
- Relies on amount entered in box.
- Affects cart item count, total & actual items.
Remove from cart:
- Affects cart item count, total & actual items.
Dependencies!
Submit cart:
- Get all cart data.
- Submit it.
- Clean up cart.
Imperative
reload (data) {
updateItems ();
updateCart ();
}
changeFilter () {
var filter = $ ('#filter').value;
updateItems ();
}
Imperative
addToCart (index) {
var q = $ ('#amount-' + index);
var p = ... // get matching product
updateCart ();
}
removeFromCart (index) {
var p = ... // get matching cart entry
updateCart ();
}
Imperative
updateItems () {
// Update counters
// Go through each of the DOM elements
// Hide/unhide it if required
// Update it if it has changed
// Remove it if it was deleted
// Add it if it is new
}
Imperative
updateCart () {
// Update counter & total
// Go through each of the DOM elements
// Hide/unhide it if required
// Update it if it has changed
// Remove it if it was deleted
// Add it if it is new
}
Every new feature must accomodate and be accomodated by the other features
O ( n )
2
Imperative with store
var Store = { items: [], cart: [], filter: '' }; ['input', {oninput: 'Store.filter = this.value; redraw ()'}];
Imperative with store
function redraw () {
// redraws entire view
}
Reactive views & store
view ('items', function (items) {
return view ('filter', function (filter) {
return items.map (function (item) {
if (item.match (filter)) return ['td', item];
});
});
});
Events & store
do ('set', 'filter', 'kitties');
do ('set', 'items', [
{title: 'kitties', price: 20},
{title: 'sunshine', price: 30}
]);
do ('add', 'items', {title: 'New!', price: 1000});
do ('rem', 'items', 0);
The big three
verb
path
arguments
Mind the path
do ('set', ['items', 0, title], 'kitties & sunshine');
Where's the verb?
view ('items', function (items) {
return view ('filter', function (filter) {
return items.map (function (item) {
if (item.match (filter)) return ['td', item];
});
});
});
Where's the verb?
add
set
rem
change
Implicitly...
view ('change', 'items', function (items) {
return view ('change', 'filter', function (filter) {
return items.map (function (item) {
if (item.match (filter)) return ['td', item];
});
});
});
Summary of fundamentals
- Object literals for templating
- Events with verb + path
- Global store updated by events
- View is a function of the store, triggered by an event
O ( n )
github.com/fpereiro/gotoB