Embed Size (px)
DESCRIPTION
Modern web apps are rich, interactive applications. This webcast will cover new techniques for building modern web apps and how to utilize the latest HTML5 APIs to create a new class of web apps that will delight and amaze your users. In this interactive event, Ido Green, the author of Web Workers, will cover the following: * Defining the modern web app * Designing a modern web app * HTML5 Power tools/APIs * Tips & best practices
Citation preview
Modern Web Applications Utilizing HTML5 APIs
Ido Green, Developer Advocateplus.google.com/+greenido
Modern Web Applications
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/
Design Web Applications
(Da New) Design process
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.
Building Web Applications
MV* For The Win
● Fundamental pattern for separating
concerns
● Model handles data and server
persistence layer
● View handles user input and
rendering
● Used to be on the server --> Now
moving to the thicker client.
AngularJS - Client Side Framework
Angular.js - Let you extend HTML vocabulary for your application.
● Data binding
● Extensible HTML
● Dependency Injection / TestableMore 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...
Demo of 'Note Generator'
Transferable Objects Demo
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"
Google Cloud Endpoints
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 App Engine
Google App Engine
Back the Truck Up
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>
Google Cloud Endpoints
Simple GET API Request
Using Data Model for Insert
[email protected](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!
Pythonvar 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
Chrome DevTools
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?
Ido GreenDeveloper Relationshttp://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/
Thank you!
