Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)

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

Agenda
● Modern Web Applications
○ Design
○ Code
○ Debug
○ Demo
● Google Cloud Endpoints

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/

Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)

Similar to Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013) (20)

More from Ido Green

More from Ido Green (20)

Recently uploaded

Recently uploaded (20)

Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)