The definitive guide to front-end rendering

Actually only a 5 minute guide to front-end rendering. Presented at Web Directions What Do You Know 2015.

Transcript

1. The definitive guide to front-end rendering Ivan Vanderbyl 5 minute
2. VS Ohai!
3. el.innerHTML=”<div>…</div>”;
4. Parse HTML Build Fragment Append Element.innerHTML= Remove Children
5. // Ivan’s todo list. <ul> <li class="item">Write talk</li> <li class="item">Prepare Slides</li> <li class="item">Tech Rehearsal</li> </ul>
6. // Ivan’s todo list. <ul> <li class="item done">Write talk</li> <li class="item">Prepare Slides</li> <li class="item">Tech Rehearsal</li> </ul>
7. // Ivan’s todo list. <ul> <li class="item done">Write talk</li> <li class="item">Prepare Slides</li> </ul>
8. let ul = document.getElementById(“todo-list-ivan”); ul.innerHTML = ` <li class="item">Write Talk</li> <li class="item">Prepare Slides</li> <li class="item">Tech Rehearsal</li>`; let ul = document.getElementById(“todo-list-ivan”); ul.innerHTML = ` <li class="item done">Write Talk</li> <li class="item">Prepare Slides</li>`; Update 1: Update 2:
9. <li class="item">999 Beers on the wall</li> <li class="item">998 Beers on the wall</li> <li class="item">997 Beers on the wall</li> <li class="item">996 Beers on the wall</li> <li class="item">995 Beers on the wall</li> <li class="item">994 Beers on the wall</li> <li class="item">993 Beers on the wall</li> <li class="item">992 Beers on the wall</li> <li class="item">991 Beers on the wall</li> <li class="item">990 Beers on the wall</li> <li class="item">989 Beers on the wall</li> <li class="item">988 Beers on the wall</li> <li class="item">987 Beers on the wall</li> <li class="item">986 Beers on the wall</li> <li class="item">985 Bears on the wall</li> <li class="item">984 Beers on the wall</li> <li class="item">983 Beers on the wall</li> <li class="item">982 Beers on the wall</li> This doesn’t scale Got 1000+ items? Have fun with that.
10. Virtual DOM Diffing The New NEW.
11. <ul> <li class="item">Write talk</li> <li class="item">Prepare Slides</li> <li class="item">Tech Rehearsal</li> </ul> <ul> <li class="item done">Write talk</li> <li class="item">Prepare Slides</li> </ul> Real DOM Virtual DOM
12. <ul> <li class="item done">Write talk</li> <li class="item">Prepare Slides</li> </ul> <ul> <li class="item">Write talk</li> <li class="item">Prepare Slides</li> <li class="item">Tech Rehearsal</li> </ul> let changes = [];
13. <ul> <li class="item">Write talk</li> <li class="item">Prepare Slides</li> <li class="item">Tech Rehearsal</li> </ul> <ul> <li class="item done">Write talk</li> <li class="item">Prepare Slides</li> </ul> let changes = [];
14. <ul> <li class="item done">Write talk</li> <li class="item">Prepare Slides</li> </ul> <ul> <li class="item">Write talk</li> <li class="item">Prepare Slides</li> <li class="item">Tech Rehearsal</li> </ul> let changes = [ {op: “add-class”, value: “done”, location: “ul>li:nth-child(1)”} ];
15. let changes = [ {op: “add-class”, value: “done”, location: “ul>li:nth-child(1)”}, {op: “remove-node”, value: null, location: “ul>li:nth-child(3)”} ]; applyChanges(changes) { changes.forEach(({op,value,location}) => { … }); }
16. In the real world facebook/react emberjs/ember.js Matt-Esch/virtual-dom
17. Diffing > innerHTML
18. @ivanderbyl</talk> Join me next time for “The extended definitive guide to front-end rendering”