There's an App
for That

Creating
Cross-Platform
Native Experiences
Using Open Web Standards


Steve Desmond

Steve who?

off-color joke
about this being
my first time

[crickets]

Why am I here again?

  1. Native in the browser
  2. Packaged apps
  3. Why?

"Are you ready, kids?"

What is "native"?

  • immersive
  • seamless
  • high performance

Fullscreen

                    [element].requestFullscreen();
                    document.exitFullscreen();
* must be called from a short-lived event handler

Fullscreen

                    
function goFullscreen() {
    document.documentElement.requestFullscreen();
}
function endFullscreen() {
    document.exitFullscreen();
}

Fullscreen Image Demo

Fullscreen

Well, actually...

                    [element].requestFullscreen();
                    [element].msRequestFullscreen();
                    [element].mozRequestFullScreen();
                    [element].webkitRequestFullscreen();

Enter msMozWebkit.js

Geolocation

  • GPS
  • Cellular triangulation
  • AGPS
  • Wi-Fi
  • Fused
  • Mock
                    navigator.geolocation.getCurrentPosition(someCallback);

Geolocation

                    navigator.geolocation.getCurrentPosition(displayPosition);

Geolocation

Volunteer?

Geolocation

"There's an app for that"

Find a Computer Lab

Q: Why do we, as developers, do what we do?

Q: How can I make the world
a better place?

A: GitHub Pull Request Selfie GIF Automation

Who GIFs?

  • Phil Haack (GitHub, Microsoft)
  • Greg Franko & Chase West (Yahoo)

The Guardian

(yes, that The Guardian)


How animated gif selfies fixed our team’s morale

Steps

  1. fill out pull request
  2. record video
  3. convert video to GIF
  4. upload video
  5. submit pull request

Volunteer?

j/k! There's an app for that

Launch the GitHub Pull Request Selfie GIF Automator

Camera

                    navigator.getUserMedia(options, successCallback, errorCallback);
                    function successCallback(stream) { ... }

Video
Type Firefox Chrome Opera IE Safari
MP4
WebM
Ogg 
                    
<audio/>

Camera + Video

                    
function showVideo(stream) {
    jQuery('#webcam')[0].videoSource(stream);
}
                            
                    
function startWebcam() {
    navigator.getUserMedia({ video: true }, showVideo, errorHandler);
}

Local Storage

                    
localStorage.setItem('someKey', 'someValue');
var x = localStorage.getItem('someKey');
sessionStorage.setItem('someKey', 'someValue');
var x = sessionStorage.getItem('someKey');
* usually limited to 5-10 MB per domain

Workers

                    
function handleWorkerMessage(event) {
    jQuery('#worker-response').html(event.data);
}
function runWorker() {
    var bee = new Worker("js/worker.js");
    bee.onmessage = handleWorkerMessage;
}
                            
                    [worker.js]: postMessage('text');

(awaiting message...)

Notifications

                    Notification.requestPermission(callback);
                    new Notification([title], { body: [body] });

 

One more thing...

WebGL

A Trip Under the Moonlight

HTML5 / Web API Features

  • Fullscreen
  • Geolocation
  • Camera
  • Audio
  • Video
  • Local Storage
  • Workers
  • Notifications
  • WebGL

Gotta catch 'em all!

There's an app for that

It's the web

Please Insert Disk #2

Apache Cordova

command line utility
to create native packages
from HTML + CSS + JS

  • Amazon Fire OS
  • Android
  • Bada
  • Blackberry
  • FirefoxOS
  • iOS
  • Mac OS X
  • Qt
  • Tizen
  • Ubuntu
  • WebOS
  • Windows (desktop)
  • Windows Phone

Friendly, Familiar Frameworks

Up and Running

  1. Download and install node.js 

  2.                             ~$ npm install -g cordova
                                
  3.                             ~$ cordova create [newdir] --link-to=[webapp]
                                
  4.                             ~$ cordova platform add [platform]
                                
  5.                             ~$ cordova build
                                
  6.                             ~$ cordova run

Merges

  • platform-specific code/style
  • ./merges/[platform]

Merges Example

Plugins

  • polyfills
  • libraries/frameworks
  • OS/device integrations
  • >1000

Cordova Plugin Repo

Reasons to build a native package

Good

  • OS / device integration
  • Offline availability
  • Immediate access
    • "Home Screen Wars"

Bad

  • Marketing
  • Everyone else is doing it
  • Did you not see how easy that just was?

So, why the web?

  • single codebase
  • use common technologies
  • friendly, familiar frameworks
  • no need for "specialized" staff
  • minimize investment in proprietary platforms
  • massive number of open source communities
  • freedom of choice for your users

Next Steps?

  • Download this presentation / demo
  • Start integrating new web features
  • Build an app with Cordova
  • Contribute to msMozWebkit
    • better name?

Resources

These guys

There's a web for that