beyond html5

exploring device APIs w/ @brianleroux

bite off more than you can chew

then chew it

The Telegraph

In 1837, Samuel F. B. Morse conducted the first successful experiment with an electrical telegraph.

The Telephone

Alexander Graham Bell was the first to be awarded a patent for the electric telephone in March 1876.

Radio

In 1921, Harold W. Arlin announced a game between the Pittsburgh Pirates and the Philadelphia Phillies.

Motion Pictures

television

www

cats www on phones

srsly tho...

Web technology is evolving.

whoami

Free software geek working at Adobe on the mobile web.

Our Quest

HTML5 current status.
Device API all the things.
Device API challenges.

ok you win this round marketing. html5 now means 'new shiny'.

@brianleroux

WHATWG

Web Application Technology Working Group

Markup (Declaritive APIs)

XHTML style is supported wherein a document fully validates as XML.
Loose or classic html style is permitted; inc unquoted attributes!
Standardized parsing algorythm for parsing the markup ensures no more wtf between browsers.

New Elements

Structural elements. <section>, <article>, etc
Text level elements. <time>, <code>, etc
Form elements. <progress>, <keygen>, etc
Embedding elements. <canvas>, <audio>, <video>, etc

Check out MDN for more.

`<input type=...>`

color
date
datetime
email
month
number
range
search
tel
time
url
week

Programmic APIs

drag drop
web workers
server sent events
sockets
cross document messaging
channel messaging

Offline Happens

navigator.offLine
appcache (is a douchebag btw)
web storage (save yourself time: use lawnchair)
websql (no not want) *
indexeddb (want) *
various file apis *

* technically !HTML5, eh

HTML5

means "new shiny"
more expressive declaritive tools
rich content first class
vastly enhanced messaging
offline web nascent but feasible

die as you were born

screaming, bathed in blood

Device APIs Defined

Typically headless/chromess/without a visual manifestation, truly crossplatform.

sensors
data
outputs

Organizational Forces

WAC, Webinos (Formerly BONDI, perhaps?)
W3C DAP and Widgets
Mozilla WebAPI
Apache Cordova (aka PhoneGap)

Related concept:

Carrier APIs

billing, messaging and location services
One API in Canada

Related Concept:

Installable Web Apps

Suggests a distribution model
Suggests a runtime security model
Suggests a self hosted, possibly federated reality
W3C Widgets
Chrome web store
Mozilla open web apps
PhoneGap/Build

Geolocation



                var win = function(position) { console.log(position.coords) }
                ,   fail = console.log

                navigator.geolocation.getCurrentPostion(win, fail)

Avail in all modern browser environments.

Vibration


            navigator.vibrate(1000)

            navigator.vibrate([1000])

            navigator.vibrate([1000, 500, 2000])

Avail in PhoneGap, B2G. Support landing in WebKit.

Accelerometer, Gyroscope, Magnometer

spacial apis, a part of the geo spec allow us to understand device orientation, direction, and rate of change

Accelerometer (iOS WebKit or PhoneGap)


            window.ondevicemotion = function(event) {
                event.accelerationIncludingGravity.x
                event.accelerationIncludingGravity.y
                event.accelerationIncludingGravity.z
            }

Gyroscope (iOS WebKIt or PhoneGap)


            window.ondeviceorientation = function(event) {
                event.alpha
                event.beta
                event.gamma
            }

Media Sensors

PhoneGap began, considering the camera; since the Media Capture API has evolved cameras, microphone and concerning the capture of images still or streaming and audio


            <input type=file accept=image/* capture=camera>

Valid types inc camcorder, microphone, filesystem.

Media Capture Programmic API


            var getMedia = navigator.webkitGetUserMedia 
                         || navigator.mozGetUserMedia 
                         || navigator.msGetUserMedia

See more here..

Frankly tho, we're hot on WebRTC

Connection

Evolved tos the System Info API. Essentially steriods for:


            navigator.onLine // wtf

Allowing introspection of connection property such as wifi, 3g, etc. In PhoneGap:


            var networkState = navigator.network.connection.type;

            var states = {};
            states[Connection.UNKNOWN]  = 'Unknown connection';
            states[Connection.ETHERNET] = 'Ethernet connection';
            states[Connection.WIFI]     = 'WiFi connection';
            states[Connection.CELL_2G]  = 'Cell 2G connection';
            states[Connection.CELL_3G]  = 'Cell 3G connection';
            states[Connection.CELL_4G]  = 'Cell 4G connection';
            states[Connection.NONE]     = 'No network connection';

            alert('Connection type: ' + states[networkState]);

Battery Status

Available in an earlier form in the PhoneGap project and now implemented in a rudimentary form in B2G. Combined with connection intellegent backup/syncronization possible. Irony: this API will drain your battery.


            navigator.battery.addEventListener('dischargingtimechange', function () {
                if (navigator.battery.dischargingTime < 60 * 10 || navigator.battery.level < 0.05)
                    console.log('oh shiii, battery level below 5%!')
                }
            }, false)

Note: currently an older API avail in PhoneGap.

App Lifecycle Events

Currently understandardized. BEWARE! But clearly a need; exists today in Chrome and PhoneGap in some forms.


            document.addEventListener('deviceready', readyFreddy, false)
            document.addEventListener('pause', justChillin, false)
            document.addEventListener('resume', woahDude, false)

            var readyFreddy = function() {
                alert('app initd')
            }

            var justChillin = function() {
                alert('paused')
            }

            var woahDude = function() {
                alert('alright alright getting up!')
            }

Contacts

Yup. Read the device contacts. The people you call on the phone. Arguably, the real social graph.



            function win(contacts) {
                alert('Found ' + contacts.length + ' contacts.')
            }

            function fail(contactError) {
                alert('onError!')
            }

            var optns = new ContactFindOptions()
            opts.filter = 'Brian'
            
            var fields = ['displayName', 'name']
            
            navigator.contacts.find(fields, win, fail, opts);

File Systems


            window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);

            function gotFS(fileSystem) {
                var opts = {create: true, exclusive: false}
                fileSystem.root.getFile('readme.txt', opts, gotFileEntry, fail);
            }

            function gotFileEntry(fileEntry) { fileEntry.createWriter(gotFileWriter, fail) }

            function gotFileWriter(writer) {
                writer.onwriteend = function(evt) {
                    console.log("contents of file now 'some sample text'");
                    writer.truncate(11);  
                    writer.onwriteend = function(evt) {
                        console.log("contents of file now 'some sample'");
                        writer.seek(4);
                        writer.write(" different text");
                        writer.onwriteend = function(evt){
                            console.log("contents of file now 'some different text'");
                        }
                    };
                };
                writer.write("some sample text");
            }

            function fail(error) { console.log(error.code) }

Boot2Gecko

WebAPI *

Web Telephony
Web SMS
Screen Orientation
Settings API
Resource Lock API
Power Management API
Mobile Connection API
Sensor API (proximity and ambient light)
And WAY MORE: nfc, bluetooth, alarm, clock, intents, capabilities, spellcheck, keyboard

* Honorable mention: Palm's webOS

PhoneGap

Reborn recently as Apache Cordova
Plugins Plugins Plugins

Giver a go.

Lets just recap for a second ...

turn on the front facing camera and look at you
and email a picture of it to all your friends
backup data before your battery dies; without prompting
syncronize data to a service, optimally
know what building you are likely in, what floor you a probably on, and the direction you are travelling

Challenges

security
privacy
permissions
capabilities
performance (eg battery api drains the battery!!)