Tweet
Tweet

Slide 1

Slide 1 text

The definitive guide to front-end rendering Ivan Vanderbyl 5 minute

Slide 2

Slide 2 text

VS Ohai!

Slide 3

Slide 3 text

el.innerHTML=”
…
”;

Slide 4

Slide 4 text

Parse HTML Build Fragment Append Element.innerHTML= Remove Children

Slide 5

Slide 5 text

// Ivan’s todo list.
  • Write talk
  • Prepare Slides
  • Tech Rehearsal

Slide 6

Slide 6 text

// Ivan’s todo list.
  • Write talk
  • Prepare Slides
  • Tech Rehearsal

Slide 7

Slide 7 text

// Ivan’s todo list.
  • Write talk
  • Prepare Slides

Slide 8

Slide 8 text

let ul = document.getElementById(“todo-list-ivan”); ul.innerHTML = `
  • Write Talk
  • Prepare Slides
  • Tech Rehearsal
    • `; let ul = document.getElementById(“todo-list-ivan”); ul.innerHTML = `
  • Write Talk
  • Prepare Slides
    • `; Update 1: Update 2:

    Slide 9

    Slide 9 text

  • 999 Beers on the wall
  • 998 Beers on the wall
  • 997 Beers on the wall
  • 996 Beers on the wall
  • 995 Beers on the wall
  • 994 Beers on the wall
  • 993 Beers on the wall
  • 992 Beers on the wall
  • 991 Beers on the wall
  • 990 Beers on the wall
  • 989 Beers on the wall
  • 988 Beers on the wall
  • 987 Beers on the wall
  • 986 Beers on the wall
  • 985 Bears on the wall
  • 984 Beers on the wall
  • 983 Beers on the wall
  • 982 Beers on the wall
    • This doesn’t scale Got 1000+ items? Have fun with that.

    Slide 10

    Slide 10 text

    Virtual DOM Diffing The New NEW.

    Slide 11

    Slide 11 text

    • Write talk
    • Prepare Slides
    • Tech Rehearsal
    • Write talk
    • Prepare Slides
    Real DOM Virtual DOM

    Slide 12

    Slide 12 text

    • Write talk
    • Prepare Slides
    • Write talk
    • Prepare Slides
    • Tech Rehearsal
    let changes = [];

    Slide 13

    Slide 13 text

    • Write talk
    • Prepare Slides
    • Tech Rehearsal
    • Write talk
    • Prepare Slides
    let changes = [];

    Slide 14

    Slide 14 text

    • Write talk
    • Prepare Slides
    • Write talk
    • Prepare Slides
    • Tech Rehearsal
    let changes = [ {op: “add-class”, value: “done”, location: “ul>li:nth-child(1)”} ];

    Slide 15

    Slide 15 text

    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}) => { … }); }

    Slide 16

    Slide 16 text

    In the real world facebook/react emberjs/ember.js Matt-Esch/virtual-dom

    Slide 17

    Slide 17 text

    Diffing > innerHTML

    Slide 18

    Slide 18 text

    @ivanderbyl Join me next time for “The extended definitive guide to front-end rendering”