How I stopped worrying and learned to love the <body/>

The Web's place in history as a flexible & fluid way to store documents is well assured. But in a post-PC world, it's got work to do, and it's looking a little out of its depth. The Web's best hope for the future is if we think about it a little differently and admit what we must do to address its shortcomings.

Transcript

1. <br/>var src='http://facebook.com/jamesgpearce';<br/>
   
   

   View Slide

2. 
   
   
   Sushi!
   
   
   <br/>window.addEventListener('load', function () {<br/>// and now I get on with my craft<br/>}, false);<br/>
   

   View Slide

3. // I trust my styles
   // I trust my libraries
   // I trust my runtime
   // I trust my code
   

   View Slide

4. View Slide

5. 
   
   
   Sushi!
   
   
   
   
   

   View Slide

6. View Slide

7. View Slide

8. console.log(document.body.outerHTML);
   id="ext-viewport" style="width: 100% !important; height: 100% !important;">id="ext-element-29">
   div>class="x-img my-carousel-item-img x-img-background x-paint-monitored x-size-monitored x-sized" id="ext-image-12" style="background-image: url(http://localhost/
   sencha-touch-2.1.0-gpl/examples/carousel/resources/photos/Animals/2.jpg);">
   div>class="expand">
   div>style="width: 884px; height: 637px;">id="ext-carousel-2">class="x-inner x-carousel-inner" id="ext-element-8">class="expand">
   div>style="width: 885px; height: 638px;">class="x-size-monitors overflowchanged">class="expand">class="x-paint-monitor overflowchange">
   

   View Slide

9. // WYSITMINWYGITD
   

   View Slide

10. var importantThing =
    document.body.appendChild(
    document.createElement('div')
    );
    

    View Slide

11. 
    <br/>// now we have to go back and get it<br/>var thing = document.getElementById('thing');<br/>// oh, or maybe there were several of them<br/>var things = document.getElementsByClassName('things');<br/>// oh, no! NodeList is not an array!<br/>for (var i=0, l=things.length; i < l; i++) {<br/>// do something to things.item(i);<br/>}<br/>// finally try to be awesome<br/>
    

    View Slide

12. $('#warning').html('You might be doing it wrong');
    

    View Slide

13. var addElement = function(name, attrs, innerText, parent) {
    var element = document.createElement(name);
    for (a in attrs) {
    element.setAttribute(a, attrs[a]);
    }
    if (innerText !== undefined) {
    element.innerText = innerText;
    }
    if (parent === undefined) {
    parent = document.body;
    }
    return parent.appendChild(element);
    };
    

    View Slide

14. var video = addElement('video', {autoplay: false}),
    play = addElement('button', null, 'Play');
    play.addEventListener('click', function () {
    video.play();
    });
    

    View Slide

15. // no post-load, post-render, DOM traversal
    // well-scoped variable references to DOM elements
    // easy iterative or recursive element creation
    // no markup verbosity on the wire
    // no need to overload attribute semantics
    // reduce class or ID collisions
    

    View Slide

16. // avoid the impedance mismatch between markup and script
    

    View Slide

17. 
    
    
    Sushi!
    
    
    <br/>window.addEventListener('load', function () {<br/>// magic<br/>}, false);<br/>
    

    View Slide

18. 
    
    
    Sushi!
    
    
    <br/>window.addEventListener('load', function () {<br/>// magic<br/>}, false);<br/>
    

    View Slide

19. 
    Sushi!
    
    
    <br/>window.addEventListener('load', function () {<br/>// magic<br/>}, false);<br/>
    

    View Slide

20. document.head.appendChild(
    document.createElement('title')
    ).innerText = 'Sushi';
    

    View Slide

21. var style = document.head.appendChild(
    document.createElement('link')
    );
    style.href = 'style.css';
    style.rel = 'stylesheet'; // kicks off the request
    

    View Slide

22. var library = document.head.appendChild(
    document.createElement('script')
    );
    library.addEventListener('load', function () {
    // now we're in business
    };
    library.src = 'library.js'; // kicks off the request
    

    View Slide

23. 
    
    

    View Slide

24. <br/>switch (reaction) {<br/>case SEEMS_REASONABLE:<br/>// sure, why not?<br/>break;<br/>default:<br/>throw ('HOW ABOUT NO?');<br/>}<br/>
    

    View Slide

25. try {
    // provoke
    } catch (e) {
    }
    

    View Slide

26. // there is no one way to do web
    

    View Slide

27. declarative imperative
    thin client thick client
    web sites web apps
    large screen small screen
    sedentary mobile
    read-only read-write
    stateless stateful
    anonymous social
    

    View Slide

28. View Slide

29. // When did the web start to dream about being an app platform?
    

    View Slide

30. 
    

    View Slide

31. 
    
    
    Telephone:
    
    
    
    
    
    
    
    
    Your number is $(tel)
    
    
    

    View Slide

32. View Slide

33. var superficialDebate() {
    if (arguments) {
    return NATIVE;
    } else {
    return WEB;
    }
    }
    

    View Slide

34. // "the web will always win"
    

    View Slide

35. 
    Television won’t be able to hold on to any market it captures
    after the first six months. People will soon get tired of
    staring at a plywood box every night
    
    - Darryl Zanuck, 20th Century Fox, 1946
    
    
    

    View Slide

36. // what can the web learn?
    // how can it stay relevant & competitive?
    // how can it keep the lights on?
    

    View Slide

37. 
    The web is wearing out
    
    - Matt DeBergalis, Meteor, 2012
    
    
    

    View Slide

38. // server - cpu - - - - - - - - - - - client // mainframes
    // server - - - - - - - - - - - cpu - client // workstations
    // server - cpu - - - - - - - - - - - client // the web
    // ? cpu - client // mobile
    

    View Slide

39. 
    

    View Slide

40. var xhr = new ActiveXObject('Microsoft.XMLHTTP');
    

    View Slide

41. switch (tag.name) {
    case 'input'
    switch (tag.getAttribute('type')) {
    case 'date':
    // something interesting
    case 'color':
    // something interesting
    ...
    }
    ...
    }
    

    View Slide

42. switch (tag.name) {
    case 'input'
    switch (tag.getAttribute('type')) {
    case 'date':
    // something interesting
    case 'color':
    // something interesting
    ...
    }
    ...
    default:
    // may as well be a or a
    }
    

    View Slide

43. 
    
    <br/>:host { display: contents; }<br/>div.carousel {<br/>overflow-x: hidden;<br/>...<br/>}<br/>
    
    
    
    
    // show all the pictures
    
    

    View Slide

44. document.createElement('x-carousel');
    

    View Slide

45. var carousel = new Carousel();
    

    View Slide

46. View Slide

47. 
    When I'm introspective about the last few years, I think the
    biggest mistake that we made as a company was betting too much
    on HTML5 as opposed to native. Because it just wasn't there.
    
    - Mark Zuckerberg, 2012
    
    
    

    View Slide

48. View Slide

49. 
    It's not that HTML5 is bad. I'm actually, in the long-term,
    really excited about it.
    One of the things that's interesting is we actually have more
    people on a daily basis using Facebook on the mobile Web than
    we have using our iOS or Android apps combined.
    
    

    View Slide

50. View Slide

51. // the web as first class app platform
    

    View Slide

52. 
    // but it is a privilege it can earn
    

    View Slide

53. View Slide