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

<!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>

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

<body/>

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>

// WYSITMINWYGITD

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

<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>

$('#warning').html('<p>You might be doing it <em>wrong</em></p>');

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

// 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

// avoid the impedance mismatch between markup and script

<!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/>

<!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>

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

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

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

<script src='awesome.js'></script>

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

// there is no one way to do web

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

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

<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>

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

// "the web will always win"

<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>

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

<blockquote> The web is wearing out <footer> - Matt DeBergalis,
Meteor, 2012 </footer> </blockquote>

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

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

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

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> }

<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>

document.createElement('x-carousel');

var carousel = new Carousel();

<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>

<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>

// the web as first class app platform

// but it is a privilege it can earn

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

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

More Decks by James Pearce

Other Decks in Technology

Featured

Transcript