Utilizing HTML5 APIs

Modern Web Applications With HTML5
Ido Green, Developer Advocate
plus.google.com/+greenido

Modern Applications
● Self Contained
● "Offline First"
● MV* Frameworks
● Device Aware
● #Perfmatters

● Performance! #Perfmatters
● Flaky connections (e.g. cafes, car)
● Airplane, road trip, deserted island
● Consolidates the concept of permanent application.
* We will use: Lawnchair for our demo.
Offline - Why?

● Storing assets: AppCache
● Storing data: localStorage, IndexedDB, File API.
● Offline first:
○ Pretend that there's no internet connection
○ Implement a sync layer that works only when
online.
Offline - How?
navigator.onLine & window.(ononline|onoffline)

Offline - Appcache
<html manifest="myapp.manifest">
CACHE MANIFEST
#version 1.2.3
#JS
js/main.js
#CSS
css/bootstrap.min.css
#Images
img/left-back.png
● You can use it TODAY:
○ http://caniuse.com/#feat=offline-apps
● Will also be used when the user
is online.
● Allows you to define fallback
pages.
● (!) Don't cache the manifest!
● http://www.html5rocks.com/en/tutorials/app

Use abstractions
● Lawn Chair - brian.io/lawnchair/
● asyncStorage - https://github.com/WebReflection/db
● IndexedDBShim - nparashuram.com/IndexedDBShim/

A Page? An App?
● It's not pages anymore
● Design from the content out
● Your web app as a collection of
(web) components
● Less is more: Any addition has the
potential to ruin our MVP

Design A List Again?
● Don't reinvent the wheel
○ http://html5rock.com
○ http://pttrns.com
○ http://mobile-patterns.com
● Don't let "web" nor "Enterprise"
be an excuse

Design - Phones? Tablets?
● Start with the UX
○ Balsamiq, Creately,
MockFlow
○ Aim for common
device breakpoints
(4:3, 16:9)

Philosophy: Adaptive Apps
● Adaptive apps
○ Custom views and templates for each form factor
○ Shared the model
● Use responsive design within the form factor
● progressive enhancement
So your app is useful on
any platform.

MV* For The Win
● Separating concerns
○ Model handles data
○ server persistence layer
○ View handles user input and
rendering
● Used to be on the server...

AngularJS - Client Side Framework
Angular.js - Let you extend HTML
vocabulary for your application.
● Data binding
● Extensible HTML
● Dependency Injection / Testable
More options: addyosmani.github.com/todomvc/

Mobile World - RESTful World
Photos
● GET http://ex.com/_ah/api/picturesque/v1/photos
● POST http://ex.com/_ah/api/picturesque/v1/photo
● PATCH http://ex.com/_ah/api/picturesque/v1/photo/id
Users
● POST http://ex.com/_ah/api/picturesque/v1/users/join
And more...

Device APIs WG: www.w3.org/2009/dap/
● Geolocation API (Psst... support in DevTools)
● Device Orientation API (accelerometer in your DevTools)
● WebGL ( GPU )
● HTML5 Filesystem API
● Network connectivity
● Battery API
● Gamepad API
● WebRTC
● Web Audio API ( core audio )
"Device APIs"
● mobilehtml5.org/
● caniuse.com

Modern Apps and The Server Conundrum
Have to deal with a server
○ Offload Computation
○ Sharing and Collaboration
○ Logs
But who wants to run a server?
○ Spikey traffic - Scaling challenges
○ Client Server communication
○ Serialization
○ OAuth Dance

Google APIs: The Discovery Document

Google APIs: Client Libraries
● Web
○ JavaScript: google-api-javascript-client
○ Node.js: google-api-nodejs-client
○ Dart: google-api-dart-client
● Mobile
○ Objective C: google-api-objectivec-client
○ Java: google-api-java-client
● Server-side
○ Ruby: google-api-ruby-client
○ Python: google-api-python-client
○ Go: google-api-go-client
○ PHP: google-api-php-client
○ .NET: google-api-dotnet-client
○ GWT: gwt-google-apis

Google APIs
HTML
<body>
...
<script type="text/javascript">
function init() {
gapi.client.load(‘urlshortener’, 'v1’, function() {});
}
</script>
<script src="https://apis.google.com/js/client.js?onload=init"></script>
</body>

Using Data Model for Insert
Python
@endpoints.api(name='picturesque', version='v1',
description='Photos API for Picturesque App')
class PicturesqueApi(remote.Service):
@Photo.method(path='photo', name='photo.insert')
def PhotoInsert(self, photo):
# do some validation
photo.put()
return photo

Insert With Drag and Drop Demo
Python

List Demo - Get Photos Baby!
Python
var req = gapi.client.picturesque.photo.list();
req.execute(function(data) {
data.items = data.items || [];
console.log("-- We have " + data.items.length);
addPhotos(data.items);
});

Demo Time
Python
picturesque-app.appspot.com/

"Smart" Client
● Network calls are expensive
● "Client" photo library
○ Lawnchair allows us to store photos' metadata
offline
○ filer.js to store the photos
○ Application Cache
● Do not Repeat Yourself
○ Applies to code and to API calls
○ Only retrieve photos that have been updated
since the last API call

What Is New?
○ Edit local projects
○ Check Devices: User agents, screen sizes, touch events etc'
○ Map source for: coffeescript, sass, dart etc'.
○ Test on your mobile device from DevTools.
○ More?
■ GDL "The Breakpoint" episodes
■ Improving Your 2013 Productivity With The Chrome DevTools

The Screen Are Smaller
● Debug
○ Remote debugging hack with jsconsole.com
○ Chrome for Android remote debug with DevTools.
● Testing
○ Qunit to test models
○ Selenium and its mobile option Remote Web Driver
● How To
○ http://mobile-html.appspot.com/

Key Take Aways
● Build powerful applications with Google Cloud Endpoints
● HTML5 APIs are ready and getting better fast.
● AngularJS - be more productive
● Leverage Modern Browser Features:
○ Offline
○ Web RTC
○ New CSS3 artifacts
○ Web workers

Questions? THANK YOU!
Ido Green
Developer Relations
http://plus.google.com/+greenido
App:: https://picturesque-app.appspot.com/
HTML5 APIs: http://ido-green.appspot.com/html5fest-il/
Slides: http://ido-green.appspot.com/

Utilizing HTML5 APIs

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Utilizing HTML5 APIs

Similar to Utilizing HTML5 APIs (20)

More from Ido Green

More from Ido Green (20)

Recently uploaded

Recently uploaded (20)

Utilizing HTML5 APIs