Post on 08-May-2015
description
transcript
Modern Web Applications With HTML5
Ido Green, Developer Advocateplus.google.com/+greenido
Agenda
● Modern Web Applications○ Design○ Code○ Debug○ Demo
● Google Cloud Endpoints
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
● 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 / 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...
APIs - Demo Time
goo.gl/XPnXj
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"
● mobilehtml5.org/● caniuse.com
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
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
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!
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? THANK YOU!
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/