Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How I stopped worrying and learned to love the ...

James Pearce
November 10, 2012

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.

James Pearce

November 10, 2012
Tweet

More Decks by James Pearce

Other Decks in Technology

Transcript

  1. <!DOCTYPE html> <html> <head> <title>Sushi!</title> <link href='sushi.css' rel='stylesheet' type='text/css' />

    <script src='library.js' type='text/javascript'></script> <script type='text/javascript'> window.addEventListener('load', function () { // and now I get on with my craft }, false); </script> </head><body/> </html>
  2. // I trust my styles // I trust my libraries

    // I trust my runtime // I trust my code
  3. <!DOCTYPE html> <html> <head> <title>Sushi!</title> <link href='sushi.css' rel='stylesheet' type='text/css' />

    <script src='library.js' type='text/javascript'></script> <script src='sushi.js'></script> </head> <body/> </html>
  4. console.log(document.body.outerHTML); <body id="ext-element-3" style="width: 100% !important; height: 100% !important;" class="x-desktop

    x-macos x-chrome x-landscape"><div class="x-container x-sized" id="ext-viewport" style="width: 100% !important; height: 100% !important;"><div class="x-body" id="ext-element-4"><div class="x-inner x-layout-card" id="ext- element-2"><div class="x-container x-carousel-dark x-carousel x-size-monitored x-paint-monitored x-layout-card-item x-sized" id="ext-carousel-1"><div class="x- body" id="ext-element-20"><div class="x-unsized x-carousel-indicator x-floating x-carousel-indicator-vertical x-carousel-indicator-dark" id="ext- carouselindicator-2" style="z-index: 2 !important; right: 0px !important;"><span id="ext-element-21" class="x-carousel-indicator-active"></span><span id="ext- element-34"></span><span id="ext-element-47"></span><span id="ext-element-60"></span></div><div class="x-inner x-carousel-inner" id="ext-element-7"><div class="x- carousel-item x-sized" id="ext-component-4" style="-webkit-transform: translate3d(0px, -637px, 0px);"></div><div class="x-carousel-item x-sized" id="ext- component-5" style="-webkit-transform: translate3d(0px, 637px, 0px);"><div class="x-container x-carousel-dark x-carousel x-size-monitored x-paint-monitored x- sized" id="ext-carousel-3"><div class="x-body" id="ext-element-23"><div class="x-unsized x-carousel-indicator x-carousel-indicator-horizontal x-floating x- carousel-indicator-dark" id="ext-carouselindicator-3" style="bottom: 0px !important; z-index: 2 !important;"><span id="ext-element-24" class="x-carousel- indicator-active"></span><span id="ext-element-25"></span><span id="ext-element-26"></span><span id="ext-element-27"></span><span id="ext-element-28"></span><span id="ext-element-29"></span><span id="ext-element-30"></span><span id="ext-element-31"></span><span id="ext-element-32"></span><span id="ext-element-33"></span></ div><div class="x-inner x-carousel-inner" id="ext-element-22"><div class="x-carousel-item x-sized" id="ext-component-7" style="-webkit-transform: translate3d(-884px, 0px, 0px);"></div><div class="x-carousel-item x-sized" id="ext-component-8" style="-webkit-transform: translate3d(884px, 0px, 0px);"><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="x-paint-monitor overflowchange"></div><div class="x-size-monitors overflowchanged"><div class="expand"><div style="width: 885px; height: 638px;"></div></div><div class="shrink"><div style="width: 884px; height: 637px;"></div></ div></div></div></div><div class="x-carousel-item x-sized" id="ext-component-9" style="-webkit-transform: translate3d(0px, 0px, 0px);"><div class="x-img my- carousel-item-img x-img-background x-paint-monitored x-size-monitored x-sized" id="ext-image-11" style="background-image: url(http://localhost/sencha-touch-2.1.0- gpl/examples/carousel/resources/photos/Animals/1.jpg);"><div class="x-paint-monitor overflowchange"></div><div class="x-size-monitors overflowchanged"><div class="expand"><div style="width: 885px; height: 638px;"></div></div><div class="shrink"><div style="width: 884px; height: 637px;"></div></div></div></div></ div></div></div><div class="x-size-monitors overflowchanged"><div class="expand"><div style="width: 885px; height: 638px;"></div></div><div class="shrink"><div style="width: 884px; height: 637px;"></div></div></div><div class="x-paint-monitor overflowchange"></div></div></div><div class="x-carousel-item x-sized" id="ext- component-6" style="-webkit-transform: translate3d(0px, 0px, 0px);"><div class="x-container x-carousel-dark x-carousel x-size-monitored x-paint-monitored x-sized" id="ext-carousel-2"><div class="x-body" id="ext-element-9"><div class="x-unsized x-carousel-indicator x-carousel-indicator-horizontal x-floating x-carousel- indicator-dark" id="ext-carouselindicator-1" style="bottom: 0px !important; z-index: 2 !important;"><span id="ext-element-10" class="x-carousel-indicator- active"></span><span id="ext-element-11"></span><span id="ext-element-12"></span><span id="ext-element-13"></span><span id="ext-element-14"></span><span id="ext- element-15"></span><span id="ext-element-16"></span><span id="ext-element-17"></span><span id="ext-element-18"></span><span id="ext-element-19"></span></div><div class="x-inner x-carousel-inner" id="ext-element-8"><div class="x-carousel-item x-sized" id="ext-component-1" style="-webkit-transform: translate3d(-884px, 0px, 0px);"></div><div class="x-carousel-item x-sized" id="ext-component-2" style="-webkit-transform: translate3d(884px, 0px, 0px);"><div class="x-img my-carousel- item-img x-img-background x-paint-monitored x-size-monitored x-sized" id="ext-image-2" style="background-image: url(http://localhost/sencha-touch-2.1.0-gpl/ examples/carousel/resources/photos/Food/2.jpg);"><div class="x-paint-monitor overflowchange"></div><div class="x-size-monitors overflowchanged"><div class="expand"><div style="width: 885px; height: 638px;"></div></div><div class="shrink"><div style="width: 884px; height: 637px;"></div></div></div></div></ div><div class="x-carousel-item x-sized" id="ext-component-3" style="-webkit-transform: translate3d(0px, 0px, 0px);"><div class="x-img my-carousel-item-img x-img- background x-paint-monitored x-size-monitored x-sized" id="ext-image-1" style="background-image: url(http://localhost/sencha-touch-2.1.0-gpl/examples/carousel/ resources/photos/Food/1.jpg);"><div class="x-paint-monitor overflowchange"></div><div class="x-size-monitors overflowchanged"><div class="expand"><div style="width: 885px; height: 638px;"></div></div><div class="shrink"><div style="width: 884px; height: 637px;"></div></div></div></div></div></div></div><div class="x-size-monitors overflowchanged"><div class="expand"><div style="width: 885px; height: 638px;"></div></div><div class="shrink"><div style="width: 884px; height: 637px;"></div></div></div><div class="x-paint-monitor overflowchange"></div></div></div></div></div><div class="x-size-monitors overflowchanged"><div class="expand"><div style="width: 885px; height: 638px;"></div></div><div class="shrink"><div style="width: 884px; height: 637px;"></div></div></div><div class="x-paint-monitor overflowchange"></div></div></div></div></div></body>
  5. <div id='thing' class='things' /> <script> // now we have to

    go back and get it var thing = document.getElementById('thing'); // oh, or maybe there were several of them var things = document.getElementsByClassName('things'); // oh, no! NodeList is not an array! for (var i=0, l=things.length; i < l; i++) { // do something to things.item(i); } // finally try to be awesome </script>
  6. 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); };
  7. var video = addElement('video', {autoplay: false}), play = addElement('button', null,

    'Play'); play.addEventListener('click', function () { video.play(); });
  8. // 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
  9. <!DOCTYPE html> <html> <head> <title>Sushi!</title> <link href='sushi.css' rel='stylesheet' type='text/css' />

    <script src='library.js' type='text/javascript'></script> <script type='text/javascript'> window.addEventListener('load', function () { // magic }, false); </script> </head><body/> </html>
  10. <!DOCTYPE html> <html> <head> <title>Sushi!</title> <link href='sushi.css' rel='stylesheet' type='text/css'> <script

    src='library.js' type='text/javascript'></script> <script type='text/javascript'> window.addEventListener('load', function () { // magic }, false); </script> <body/>
  11. <!DOCTYPE html> <title>Sushi!</title> <link href='sushi.css' rel='stylesheet' type='text/css'> <script src='library.js' type='text/javascript'></script>

    <script type='text/javascript'> window.addEventListener('load', function () { // magic }, false); </script>
  12. 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
  13. <script> switch (reaction) { case SEEMS_REASONABLE: // sure, why not?

    break; default: throw ('HOW ABOUT NO?'); } </script>
  14. declarative <!-- ------------- --> imperative thin client <!-- ------------- -->

    thick client web sites <!-- ------------- --> web apps large screen <!-- ------------- --> small screen sedentary <!-- ------------- --> mobile read-only <!-- ------------- --> read-write stateless <!-- ------------- --> stateful anonymous <!-- ------------- --> social
  15. <wml> <card id="enter" title="Enter Number"> <p> Telephone: <br/> <input name="tel"

    size="10" format="*N"/> <anchor> <go href="#confirm"/> </anchor> </p> </card> <card id="confirm" title="Confirm"> <p>Your number is $(tel)</p> </card> </wml>
  16. <blockquote> 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 <footer> - Darryl Zanuck, 20th Century Fox, 1946 </footer> </blockquote>
  17. // what can the web learn? // how can it

    stay relevant & competitive? // how can it keep the lights on?
  18. // server - cpu - - - - - -

    - - - - - client // mainframes // server - - - - - - - - - - - cpu - client // workstations // server - cpu - - - - - - - - - - - client // the web // ? cpu - client // mobile
  19. switch (tag.name) { case 'input' switch (tag.getAttribute('type')) { case 'date':

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

    // something interesting case 'color': // something interesting ... } ... default: // may as well be a <div> or a <span> }
  21. <element extends='div' name='x-carousel' constructor='Carousel'> <template> <style scoped> :host { display:

    contents; } div.carousel { overflow-x: hidden; ... } </style> <div class='carousel'><content></content></div> </template> </element> <div is='x-carousel'> // show all the pictures </div>
  22. <blockquote> 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. <footer> - Mark Zuckerberg, 2012 </footer> </blockquote>
  23. <blockquote> 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. </blockquote>
  24. <!-- the web's survival is a not a right -->

    // but it is a privilege it can earn