• history of the web
• quiz on web platform features
• bigger picture or why you should build on the web
• Q&A

• web started out as a place for documents
  • HTTP protocol: resources
  • HTTP verbs: GET, PUT, DELETE
  • mostly static
• sharing information digitally was great

• documents no longer were static
• many different frameworks & languages spawned around this
• proved incredibly useful
• broader information sharing

• People were doing real work on the web
• But: still a roundtrip for every interaction
• Desktop had better UIs
• Let's bring the desktop to the web
• Browser plugins
  • Flash
  • Silverlight
  • others

• real computation in the fronted
• no plugins
• no tools
  • no debugger
  • no jquery

• sophisticated client side apps need a fast runtime
• google introduced chrome in 2008
  • helped to start a race for javascript performance
  • browser got way faster in a short time
• browsers accelerated releases from 1.5 years to 6 weeks

App cache

• makes your resources available offline
• manifest file

Storage

• sandbox for every web app
• LocalStorage: stores key value pairs
• synchronous API
• indexedDB: large amounts of data
• asynchronous API

navigator online check

• indicated wether online or offline

<script type='text/javascript'>

var statusElem = document.getElementById('status')

setInterval(function () {
  	statusElem.className = navigator.onLine ? 'online' : 'offline';
  	statusElem.innerHTML = navigator.onLine ? 'online' : 'offline';  
}, 250);

</script>

• Tablets / Phones
• Tethering
• VPN
• Train / Airplane
• Performance

<script type='text/javascript'>

window.requestFileSystem(
  TEMPORARY,        // persistent vs. temporary storage
  1024 * 1024,      // size (bytes) of needed space
  initFs,           // success callback
  opt_errorHandler  // opt. error callback, denial of access
);

</script>

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
  window.requestFileSystem(TEMPORARY, 1024 * 1024, function(fs) {
    fs.root.getFile('image.png', {create: true}, function(fileEntry) {







    }, onError);
  }, onError);
};

xhr.send();

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
  window.requestFileSystem(TEMPORARY, 1024 * 1024, function(fs) {
    fs.root.getFile('image.png', {create: true}, function(fileEntry) {

      fileEntry.createWriter(function(writer) {
        writer.onwriteend = function(e) { ... };
        writer.onerror = function(e) { ... };
        writer.write(new Blob([xhr.response], {type: 'image/png'}));
      }, onError);

    }, onError);
  }, onError);
};

xhr.send();

• sandboxed per origin
• amount of storage varies
• filer.js unix command line api

<script type='text/javascript'>

var ctx = new window.AudioContext();

function playSound(arrBuff) { // Obtain arrBuffer from XHR
  var src = ctx.createBufferSource();
  src.buffer = ctx.createBuffer(arrBuff, false /*mix2Mono*/);
  src.looping = true;

  src.connect(ctx.destination);
  src.noteOn(0); // Play immediately.
}
</script>

• enables heavy computation in the browser
• no blocking of the UI
• runs javascript in the background
• uses postMessage to exchange data

<script type='text/javascript' id="worker1" type="javascript/worker">
  
    // This script won't be parsed by JS engines
    // because its type is javascript/worker.
    self.onmessage = function(e) {
      self.postMessage('msg from worker');
    };
    // Rest of your worker code goes here.
 
</script>

<script type='text/javascript'>

    var blob = new Blob([document.querySelector('#worker1').textContent]);

    var worker = new Worker(window.URL.createObjectURL(blob));
    worker.onmessage = function(e) {
      log("Received: " + e.data);
    }
  
  function sayHI() {
    worker.postMessage({'cmd': 'start', 'msg': 'Hi'});
  }
</script>

HTML5rocks example

• Java port of Quake II C source code
  • Jake2
  • showed that Quake runs fine in Java
• Could you compile that with GWT and run it inside a browser?
• no plugins!
• Built by Joel Webber, Ray Cromwell & Stefan Hausstein at google

• WebGL is based on openGL ES 2.0
• essentially canvas 3d
• web sockets for multiplayer
• done in 2010
• good performance
• open source: quake2-gwt-port

• quick visualization of medical imaging data
• directly on the web without any plugins
• own WebGL library called XTK
• open source, see github

• pure done inside a browser
• Google IO 2012 slide deck
• slides are open source: google code io 2012 slides
• simple markup
• styling in CSS
• animations are done with CSS transforms

• see which browser supports which features
• very accurate
• well maintained

• web platform is getting better at a rapid pace
• building on the web means building on open standards
• a new age of the web just started
  • new applications are not about documents anymore
  • applications are deployed via HTTP
• What does that mean for server side HTML generation?

• Do not assume that your beloved framework is still the best
• delivering great software means using the platform really well
• Learn how the browser works

• enables you to write Java while using all those features
• GWT applications are first class citizens
• fast, very well optimized
• but still all the java tools
• GWT is not about not learning how to use the web platform
• it is about tooling