index.html

<!--
Google IO 2012/2013 HTML5 Slide Template

Authors: Eric Bidelman <ebidel@gmail.com>
         Luke Mahé <lukem@google.com>

URL: https://code.google.com/p/io-2012-slides
-->
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <!--<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">-->
  <!--<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
  <!--This one seems to work all the time, but really small on ipad-->
  <!--<meta name="viewport" content="initial-scale=0.4">-->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <link rel="stylesheet" media="all" href="theme/css/default.css">
  <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="theme/css/phone.css">
  <base target="_blank"> <!-- This amazingness opens all links in a new tab. -->
  <script data-main="js/slides" src="js/require-1.0.8.min.js"></script>
</head>
<body style="opacity: 0">

<slides class="layout-widescreen">

  <slide class="logoslide nobackground">
    <article class="flexbox vcenter">
      <span><img src="images/mavenhive_logo.png"></span>
    </article>
  </slide>

  <slide class="title-slide segue nobackground">
    <aside class="gdbar"><img src="images/mavenhive_icon_128.png"></aside>
    <!-- The content of this hgroup is replaced programmatically through the slide_config.json. -->
    <hgroup class="auto-fadein">
      <h1 data-config-title><!-- populated from slide_config.json --></h1>
      <h2 data-config-subtitle><!-- populated from slide_config.json --></h2>
      <p data-config-presenter><!-- populated from slide_config.json --></p>
    </hgroup>
    <article>
      <center><img src="images/evolution_sid.jpg" class="reflect"/></center>
    </article>
  </slide>

  <slide class="segue dark nobackground">
    <aside class="gdbar"><img src="images/mavenhive_icon_128.png"></aside>
    <hgroup class="auto-fadein">
      <h2>Who are we?</h2>
      <h3></h3>
    </hgroup>
  </slide>

  <slide class="segue nobackground">
    <aside class="gdbar"><img src="images/mavenhive_icon_128.png"></aside>
    <hgroup class="auto-fadein">
      <h2 style="color: black">HariKrishnan (@harikrishnan83)</h2>
      <h3></h3>
    </hgroup>
  </slide>

  <slide class="segue nobackground">
    <aside class="gdbar"><img src="images/mavenhive_icon_128.png"></aside>
    <hgroup class="auto-fadein">
      <h2 style="color: black">Dharampal (@CodeMangler)</h2>
      <h3></h3>
    </hgroup>
  </slide>

  <slide>
    <article class="flexbox vcenter">
      <img src="images/web_development_book.jpg" class="reflect" alt="" title="" height="600px">
      <footer class="source">HTML DHTML JavaScript Perl CGI - by Ivan Bayross</footer>
    </article>
  </slide>

  <slide class="fill nobackground" style="background-image: url(images/headphones.jpg)">
    <hgroup>
      <h2 class="white"></h2>
    </hgroup>
    <footer class="source white"></footer>
  </slide>

  <slide class="segue dark nobackground">
    <aside class="gdbar"><img src="images/mavenhive_icon_128.png"></aside>
    <hgroup class="auto-fadein">
      <h2>Why this talk?</h2>
      <h3></h3>
    </hgroup>
  </slide>

  <slide class="segue dark quote nobackground">
    <aside class="gdbar right bottom"><img src="images/mavenhive_icon_128.png"></aside>
    <article class="flexbox vleft auto-fadein">
      <q>
        Those who don’t know history are doomed to repeat it
      </q>
      <div class="author">
        George Santayana, and multiple other sources<br>
        in turn attributed to an old Chinese proverb
      </div>
    </article>
  </slide>

  <slide class="segue dark quote nobackground">
    <aside class="gdbar right bottom"><img src="images/mavenhive_icon_128.png"></aside>
    <article class="flexbox vleft auto-fadein">
      <q>
        You can’t know where you are going until you know where you have been
      </q>
      <div class="author">
      </div>
    </article>
  </slide>

  <slide class="segue dark quote nobackground">
    <aside class="gdbar right bottom"><img src="images/mavenhive_icon_128.png"></aside>
    <article class="flexbox vleft auto-fadein">
      <q>
        Understanding the context in which stuff happens is really important in understanding what we have now
      </q>
      <div class="author">
        Douglas Crockford<br>
        [Crockford on JavaScript - And then there was JavaScript]        
      </div>
    </article>
  </slide>

  <slide class="segue dark nobackground">
    <aside class="gdbar"><img src="images/mavenhive_icon_128.png"></aside>
    <aside class="note">
      <section>
        <ul>
          <li>Not historians. Based on our personal experiences.</li>
          <li>Specific web app frameworks only, more to describe the evolution in approaches</li>
          <li>Second day of the talk</li>
        </ul>
        <p>Show of hands</p>
        <ul>
          <li>AngularJS, Ember</li>
          <li>Backbone, KnockoutJS</li>
          <li>jQuery</li>
          <li>Dojo, YUI</li>
          <li>Prototype, Scriptaculous</li>
          <li>What used to be considered DHTML</li>
        </ul>
      </section>
    </aside>

    <hgroup class="auto-fadein">
      <h2>Before we start...</h2>
      <h3></h3>
    </hgroup>
  </slide>

  <slide class="segue dark nobackground">
    <aside class="gdbar"><img src="images/mavenhive_icon_128.png"></aside>
    <hgroup class="auto-fadein">
      <center><img src="images/protozoa.jpg" width="410px"></center>
      <h2>Origin of JavaScript [Protozoa]</h2>
    </hgroup>
  </slide>

  <slide>
    <hgroup class="auto-fadein">
    </hgroup>
    <article class="flexbox vcenter">
      <h2>Not designed for big applications</h2>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2>Apple Hypercard</h2>
    </hgroup>
    <article class="flexbox vcenter">
      <img src="images/hypercard.gif" class="reflect" alt="Apple Hypercard" title="Apple Hypercard" width="650px">
      <footer class="source"></footer>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2></h2>
    </hgroup>
    <article class="flexbox vcenter">
      <img src="images/designed_for_small_programs.png" class="reflect" alt="" title="">
      <footer class="source">HTML DHTML JavaScript Perl CGI - by Ivan Bayross</footer>
    </article>
  </slide>

  <slide>
    <article class="flexbox vcenter">
      <img src="images/early_dom.png" class="reflect" alt="" title="" width="800px">
      <footer class="source"></footer>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2>Typical form validation code</h2>
      <h3></h3>
    </hgroup>
    <article>
      <pre class="prettyprint" data-lang="javascript">
function verifyFormData() {
    a = 0; r = "";
    for(i = 0; i <= 4; i++) {
        if(<b>documents.forms[0].elements[i].value</b> == "") {
            a = 1;
            r = r + " " + <b>document.forms[0].elements[i].name</b> + ";";
        }
    }
    for(i = 0; i <=4; i++) {
        if(document.forms[0].elements[i].value == "") {
            <b>alert("Please fill in the following textbox(es): " + r);</b>
            document.forms[0].elements[i].focus();
            return false;
        }
    }
}
</pre>
    </article>
  </slide>

  <slide>
    <article class="flexbox vcenter">
      <img src="images/form_validation_result.png" class="reflect" alt="" title="" width="800px">
      <footer class="source"></footer>
    </article>
  </slide>

  <slide>
    <article class="flexbox vcenter">
      <img src="images/disable_scripts.png" class="reflect" alt="" title="" width="700px">
      <footer class="source"></footer>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2></h2>
    </hgroup>
    <article class="flexbox vcenter">
      <img src="images/object_based.jpg" class="reflect" alt="" title="" height="600px">
      <footer class="source"></footer>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2></h2>
    </hgroup>
    <article class="flexbox vcenter">
      <h2>Frameworks? What frameworks?</h2>
    </article>
  </slide>

  <slide class="segue dark nobackground">
    <aside class="gdbar"><img src="images/mavenhive_icon_128.png"></aside>
    <hgroup class="auto-fadein">
      <center><img src="images/sponge.jpg" width="370px"></center>
      <h2>Web 2.0 and RIA [Sponges]</h2>
    </hgroup>
  </slide>

  <slide>
    <hgroup>
      <h2>Advent of Web 2.0</h2>
    </hgroup>
    <article>
      <ul>
        <li>[1997] XHR
          <ul>
            <li>(not widely used)</li>
          </ul>
        </li>
        <li>[2004] GMail
          <ul>
            <li><img src="images/Gmail.jpg" class="reflect" alt="" title=""></li>
            <li>brought XHR, AJAX, SPA under spotlight</li>
          </ul>
        </li>
      </ul>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2>Early XHR</h2>
      <h3></h3>
    </hgroup>
    <article class="smaller">
      <pre class="prettyprint" data-lang="javascript">
function createXHR() {
    <b>if (navigator.userAgent.indexOf("MSIE") != -1){
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    } else {
      xmlhttp=new XMLHttpRequest();
    }</b>
}
function requestData(url, callback) {
    <b>req = createXHR();
    req.onreadystatechange = callback;
    req.open("GET", url, true); 
    req.send(null);</b>
}
</pre>
<pre class="prettyprint" data-lang="javascript">
function parseResponseData(response) {
    return <b>response.responseXML</b>.getElementsByTagName(name)[0].childNodes[0].nodeValue;
}
</pre>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2>...</h2>
      <h3></h3>
    </hgroup>
    <article>
      <pre class="prettyprint" data-lang="javascript">
<b>xmlhttp.onreadystatechange = function()</b>
{
  <b>if (xmlhttp.readyState==4 && xmlhttp.status==200)</b>
  {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  }
}
xmlhttp.open("GET","/some_url",true);
xmlhttp.send();
</pre>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2>Browser Detection</h2>
      <h3></h3>
    </hgroup>
    <article>
      <pre class="prettyprint" data-lang="javascript">
<b>if (navigator.userAgent.indexOf("MSIE") != -1)</b>{
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
} else <b>if (navigator.userAgent.indexOf("Mozilla") != -1)</b> {
  xmlhttp=new XMLHttpRequest();
} else if(...) {
  // and so on...
}
</pre>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2>Feature Detection</h2>
      <h3></h3>
    </hgroup>
    <article>
      <pre class="prettyprint" data-lang="javascript">
<b>if (window.XMLHttpRequest)</b>
{// IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}
else
{// IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
</pre>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2></h2>
    </hgroup>
    <article class="flexbox vcenter">
      <h2>Frameworks? Well, maybe it's time we had some.</h2>
    </article>
  </slide>

  <slide class="segue dark nobackground">
    <aside class="gdbar"><img src="images/mavenhive_icon_128.png"></aside>
    <hgroup class="auto-fadein">
      <center><img src="images/flatworm.jpg" width="355px"></center>
      <h2>JavaScript Frameworks [Flatworms]</h2>
    </hgroup>
  </slide>

  <slide>
    <hgroup>
      <h2>Browser incompatibilities</h2>
    </hgroup>
    <article class="flexbox vcenter">
      <img src="images/best_viewed_in_ie4.gif" class="reflect" alt="" title="">
      <footer class="source">source: http://bestsiteofalltime.com/assets/images/ie4.gif</footer>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2></h2>
    </hgroup>
    <article>
      <p>Netscape</p>
      <pre class="prettyprint" data-lang="javascript">
<b>document.formname.textbox.focus()
document.formname.textbox.select()</b>
</pre>
<p>IE</p>
      <pre class="prettyprint" data-lang="javascript">
<b>document.formname.textbox.select()</b>
</pre>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2>LAYERs and DIVs</h2>
    </hgroup>
    <article>
      <pre class="prettyprint" data-lang="javascript">
 <b>if( document.layers )</b> {
   ...code that would be executed only by Netscape browsers...
 } else {
   ...code that would be executed only by Internet Explorer...
 }</pre>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2>Document Loaded</h2>
    </hgroup>
    <article class="smaller">
      <pre class="prettyprint" data-lang="javascript">
bindReady: function() {
    if ( readyList ) { return; }
    readyList = jQuery._Deferred();
    // Catch cases where $(document).ready() is called after the browser event has already occurred.
    if ( document.readyState === "complete" ) {
      // Handle it asynchronously to allow scripts the opportunity to delay ready
      return setTimeout( jQuery.ready, 1 );
    }
    <b>// Mozilla, Opera and webkit nightlies currently support this event</b>
    if ( document.addEventListener ) {
      // Use the handy event callback
      document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
      // A fallback to window.onload, that will always work
      window.addEventListener( "load", jQuery.ready, false );
    <b>// If IE event model is used</b>
    } else if ( document.attachEvent ) {
      // ensure firing before onload, maybe late but safe also for iframes
      document.attachEvent( "onreadystatechange", DOMContentLoaded );
      // A fallback to window.onload, that will always work
      window.attachEvent( "onload", jQuery.ready );
      <b>// If IE and not a frame continually check to see if the document is ready</b>
      var toplevel = false;
      try {
        toplevel = window.frameElement == null;
      } catch(e) {}
      if ( document.documentElement.doScroll && toplevel ) {
        doScrollCheck();
      }
    }
  }
</pre>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2>Weird OO</h2>
      <h3></h3>
    </hgroup>
    <article>
      <pre class="prettyprint" data-lang="javascript">
function Apple (type) {
    this.type = type;
    this.color = "red";
    this.getInfo = function() {
        return this.color + ' ' + this.type + ' apple';
    };
}
</pre>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2>Weird OO</h2>
      <h3></h3>
    </hgroup>
    <article>
      <pre class="prettyprint" data-lang="javascript">
function Apple (type) {
    this.type = type;
    this.color = "red";
}
 
Apple.prototype.getInfo = function() {
    return this.color + ' ' + this.type + ' apple';
};
</pre>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2>Weird OO</h2>
      <h3></h3>
    </hgroup>
    <article>
      <pre class="prettyprint" data-lang="javascript">
var apple = {
    type: "macintosh",
    color: "red",
    getInfo: function () {
        return this.color + ' ' + this.type + ' apple';
    }
}
</pre>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2>Weird OO</h2>
      <h3></h3>
    </hgroup>
    <article>
      <pre class="prettyprint" data-lang="javascript">
var apple = new function() {
    this.type = "macintosh";
    this.color = "red";
    this.getInfo = function () {
        return this.color + ' ' + this.type + ' apple';
    };
}
</pre>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2></h2>
    </hgroup>
    <article class="flexbox vcenter">
      <h2><code>this</code> is determined by the caller context</h2>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2></h2>
    </hgroup>
    <article class="flexbox vcenter">
      <h2>Adapting to the Environment</h2>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2>[2004] dōjō toolkit</h2>
    </hgroup>
    <article class="flexbox vcenter">
      <img src="images/dojo_grid.png" class="reflect" alt="" title="" width="700px">
      <footer class="source"></footer>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2>[2004] dōjō toolkit</h2>
    </hgroup>
    <article>
      <pre class="prettyprint" data-lang="javascript">
var AClass = declare(null, {
});
</pre>
      <pre class="prettyprint" data-lang="javascript">
var InheritedClass = declare([
  SuperClassOne,
  SuperClassTwo,
  SuperClassThree
],{
});
</pre>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2>[2004] dōjō toolkit</h2>
    </hgroup>
    <article>
      <pre class="prettyprint" data-lang="javascript">
dojo.xhrGet({ url: "#", form: "myForm",
  load: function(response, ioArgs){
      return response;
  },

  error: function(response, ioArgs){
      return response;
  }
});
</pre>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2>[2005] PrototypeJS</h2>
      <h3></h3>
    </hgroup>
    <article>
      <pre class="prettyprint" data-lang="javascript">
var AClass = <b>Class.create</b>({
  <b>initialize:</b> function(name) {
  },
  <b>aMethod:</b> function(message) {
  }
});
</pre>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2>[2005] PrototypeJS</h2>
      <h3></h3>
    </hgroup>
    <article>
      <pre class="prettyprint" data-lang="javascript">
function xhrWithPrototypeAJAX(url, listener) {
    <b>new Ajax.Request</b>(url,
      <b>{
        method: 'GET', // HTTP method
        parameters: pars, // Parameters
        onComplete: processRequest // Callback function
      }</b>
    );
}
</pre>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2></h2>
    </hgroup>
    <article class="flexbox vcenter">
      <h2>Focus still largely on <br>
          creating abstractions over inconsistencies <br>
          rather than <br>
          better code organisation</h2>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2></h2>
    </hgroup>
    <article class="flexbox vcenter">
      <h2>Another school of thought...</h2>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2></h2>
    </hgroup>
    <article class="flexbox vcenter">
      <h2>How to avoid writing JavaScript with all these inconsistencies?</h2>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2></h2>
    </hgroup>
    <article class="flexbox vcenter">
      <h2>Don't write it.</h2>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2>GWT</h2>
      <h3></h3>
    </hgroup>
    <article>
      <pre class="prettyprint" data-lang="java">
public class WrapperWidget extends Composite{
      public WrapperWidget(){
          VerticalPanel vPanel = new VerticalPanel();
          TextField field = new TextField();
          Button button = new Button("Finish");
          vPanel.add(field);
          vPanel.add(button);
          initWidget(vPanel);
      }
}
</pre>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2>DWR</h2>
    </hgroup>
    <article class="flexbox vcenter">
      <img src="images/dwr.png" class="reflect" alt="" title="" width="700px">
      <footer class="source"></footer>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2></h2>
    </hgroup>
    <article class="flexbox vcenter">
      <h2>and then there was...</h2>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2></h2>
    </hgroup>
    <article class="flexbox vcenter">
      <h2>$</h2>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2></h2>
    </hgroup>
    <article class="flexbox vcenter">
      <center><h2>Easier DOM manipulation API</h2></center>
      <center><h2>Features unavailable in native DOM (CSS selectors)</h2></center>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2></h2>
    </hgroup>
    <article class="flexbox vcenter">
      <h2>Did not solve JS code structuring</h2>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2></h2>
    </hgroup>
    <article class="flexbox vcenter">
      <h2>still largely ad-hoc scripts</h2>
    </article>
  </slide>

  <slide class="segue dark nobackground">
    <aside class="gdbar"><img src="images/mavenhive_icon_128.png"></aside>
    <hgroup class="auto-fadein">
      <center><img src="images/amphibian.jpg" width="415px"></center>
      <h2>MVC Frameworks [Amphibians]</h2>
    </hgroup>
  </slide>

  <slide>
    <hgroup>
      <h2></h2>
    </hgroup>
    <article class="flexbox vcenter">
      <h2>Exogenous Mutation Factors</h2>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2></h2>
    </hgroup>
    <article class="flexbox vcenter">
      <h2>JS Engine Race</h2>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2></h2>
    </hgroup>
    <article class="flexbox vcenter">
      <h2>V8</h2>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2></h2>
    </hgroup>
    <article class="flexbox vcenter">
      <h2>Performant browsers and JS Engines</h2>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2></h2>
    </hgroup>
    <article class="flexbox vcenter">
      <h2>Rise of Single Page Applications</h2>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2></h2>
    </hgroup>
    <article class="flexbox vcenter">
      <h2>GMail</h2>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2></h2>
    </hgroup>
    <article class="flexbox vcenter">
      <h2>RIA</h2>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2></h2>
    </hgroup>
    <article class="flexbox vcenter">
      <h2>Focus towards desktop application like UX in web apps</h2>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2></h2>
    </hgroup>
    <article class="flexbox vcenter">
      <h2>resulting in...</h2>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2></h2>
    </hgroup>
    <article class="flexbox vcenter">
      <h2>MVC Frameworks</h2>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2></h2>
    </hgroup>
    <article class="flexbox vcenter">
      <h2>BackboneJS</h2>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2>Backbone</h2>
      <h3></h3>
    </hgroup>
    <article>
      <pre class="prettyprint" data-lang="javascript">
var Todos = Backbone.Collection.extend({
  <b>model: app.Todo,
  url: '/todos'</b>
});
</pre>
      <pre class="prettyprint" data-lang="javascript">
app.Todo = Backbone.Model.extend({
  <b>defaults: {
    title: '',
    completed: false
  }</b>
});
</pre>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2>Backbone</h2>
      <h3></h3>
    </hgroup>
    <article>
      <pre class="prettyprint" data-lang="javascript">
  app.TodoView = Backbone.View.extend({
    tagName:  'li',
    <b>template: _.template($('#item-template').html())</b>,
    <b>events: {
      'blur .edit': 'updateModel'
    }</b>,

    initialize: function () {
      <b>this.listenTo(this.model, 'change', this.render);</b>
    },

    render: function () {
      this.$el.html(<b>this.template(this.model.toJSON())</b>);
      return this;
    },
});
</pre>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2></h2>
    </hgroup>
    <article class="flexbox vcenter">
      <h2>Modular JavaScript</h2>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2></h2>
    </hgroup>
    <article class="flexbox vcenter">
      <h2>RequireJS</h2>
      <h2>[AMD]</h2>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2></h2>
    </hgroup>
    <article class="flexbox vcenter">
      <h2>Package Management</h2>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2></h2>
    </hgroup>
    <article class="flexbox vcenter">
      <center><h2>npm</h2></center>
      <center><h2>bower</h2></center>
    </article>
  </slide>

  <slide class="segue dark nobackground">
    <aside class="gdbar"><img src="images/mavenhive_icon_128.png"></aside>
    <hgroup class="auto-fadein">
      <center><img src="images/ape.jpg" width="265px"></center>
      <h2>Client side application frameworks [Apes]</h2>
    </hgroup>
  </slide>

  <slide>
    <hgroup>
      <h2></h2>
    </hgroup>
    <article class="flexbox vcenter">
      <h2>AngularJS and kin</h2>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2></h2>
    </hgroup>
    <article class="flexbox vcenter">
      <h2>Declarative</h2>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2></h2>
    </hgroup>
    <article class="flexbox vcenter">
      <h2>Databinding</h2>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2></h2>
    </hgroup>
    <article class="flexbox vcenter">
      <h2>DI</h2>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2></h2>
    </hgroup>
    <article class="flexbox vcenter">
      <h2>Testability</h2>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2></h2>
    </hgroup>
    <article class="flexbox vcenter">
      <h2>Services</h2>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2></h2>
    </hgroup>
    <article class="flexbox vcenter">
      <h2>... and more concepts and good practices from the desktop app world</h2>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2>Missing Link</h2>
    </hgroup>
    <article class="flexbox vcenter">
      <img src="images/missing_link.jpg" class="reflect" alt="" title="">
      <footer class="source"></footer>
    </article>
  </slide>

  <slide class="thank-you-slide segue nobackground">
    <aside class="gdbar right"><img src="images/mavenhive_icon_128.png"></aside>
    <article class="flexbox vleft auto-fadein">
      <h2>&lt;Thank You!&gt;</h2>
      <p></p>
    </article>
    <p class="auto-fadein" data-config-contact>
      <!-- populated from slide_config.json -->
    </p>
  </slide>

  <slide class="logoslide dark nobackground">
    <article class="flexbox vcenter">
      <span><img src="images/mavenhive_logo_white.png"></span>
    </article>
  </slide>

  <slide class="backdrop"></slide>

</slides>

<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-1']);
_gaq.push(['_trackPageview']);

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

<!--[if IE]>
  <script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
  <script>CFInstall.check({mode: 'overlay'});</script>
<![endif]-->
</body>
</html>