Modern Web Applications With HTML5Ido 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 c...
● Storing assets: AppCache● Storing data: localStorage, IndexedDB, File API.● Offline first:○ Pretend that theres no inter...
Offline - Appcache<html manifest="myapp.manifest">CACHE MANIFEST#version 1.2.3#JSjs/main.js#CSScss/bootstrap.min.css#Image...
Use abstractions● Lawn Chair - brian.io/lawnchair/● asyncStorage - https://github.com/WebReflection/db● IndexedDBShim - np...
Design Web Applications
(Da New) Design process
A Page? An App?● Its not pages anymore● Design from the content out● Your web app as a collection of(web) components● Less...
Design A List Again?● Dont reinvent the wheel○ http://html5rock.com○ http://pttrns.com○ http://mobile-patterns.com● Dont l...
Design - Phones? Tablets?● Start with the UX○ Balsamiq, Creately,MockFlow○ Aim for commondevice breakpoints(4:3, 16:9)
Philosophy: Adaptive Apps● Adaptive apps○ Custom views and templates for each form factor○ Shared the model● Use responsiv...
Building Web Applications
MV* For The Win● Separating concerns○ Model handles data○ server persistence layer○ View handles user input andrendering● ...
AngularJS - Client Side FrameworkAngular.js - Let you extend HTMLvocabulary for your application.● Data binding● Extensibl...
Mobile World - RESTful WorldPhotos● GET http://ex.com/_ah/api/picturesque/v1/photos● POST http://ex.com/_ah/api/picturesqu...
APIs - Demo Timegoo.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...
Google Cloud Endpoints
Modern Apps and The Server ConundrumHave to deal with a server○ Offload Computation○ Sharing and Collaboration○ LogsBut wh...
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: goo...
Google APIsHTML<body>...<script type="text/javascript">function init() {gapi.client.load(‘urlshortener’, v1’, function() {...
Google Cloud Endpoints
Simple GET API Request
Using Data Model for InsertPython@endpoints.api(name=picturesque, version=v1,description=Photos API for Picturesque App)cl...
Insert With Drag and Drop DemoPython
Update DemoPython
List Demo - Get Photos Baby!Pythonvar req = gapi.client.picturesque.photo.list();req.execute(function(data) {data.items = ...
Demo TimePythonpicturesque-app.appspot.com/
"Smart" Client● Network calls are expensive● "Client" photo library○ Lawnchair allows us to store photos metadataoffline○ ...
Chrome DevTools
What Is New?○ Edit local projects○ Check Devices: User agents, screen sizes, touch events etc○ Map source for: coffeescrip...
The Screen Are Smaller● Debug○ Remote debugging hack with jsconsole.com○ Chrome for Android remote debug with DevTools.● T...
Debug With Chrome DevTools
Key Take Aways● Build powerful applications with Google Cloud Endpoints● HTML5 APIs are ready and getting better fast.● An...
Questions? THANK YOU!Ido GreenDeveloper Relationshttp://plus.google.com/+greenidoApp:: https://picturesque-app.appspot.com...
Upcoming SlideShare
Loading in …5
×

Utilizing HTML5 APIs

4,063 views

Published on

DevCon TLV June 2013 - A talk on HTML5 APIs and Google cloud platform.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,063
On SlideShare
0
From Embeds
0
Number of Embeds
3,160
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Utilizing HTML5 APIs

  1. 1. Modern Web Applications With HTML5Ido Green, Developer Advocateplus.google.com/+greenido
  2. 2. Modern Web Applications
  3. 3. Modern Applications● Self Contained● "Offline First"● MV* Frameworks● Device Aware● #Perfmatters
  4. 4. ● 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?
  5. 5. ● Storing assets: AppCache● Storing data: localStorage, IndexedDB, File API.● Offline first:○ Pretend that theres no internet connection○ Implement a sync layer that works only whenonline.Offline - How?navigator.onLine & window.(ononline|onoffline)
  6. 6. Offline - Appcache<html manifest="myapp.manifest">CACHE MANIFEST#version 1.2.3#JSjs/main.js#CSScss/bootstrap.min.css#Imagesimg/left-back.png● You can use it TODAY:○ http://caniuse.com/#feat=offline-apps● Will also be used when the useris online.● Allows you to define fallbackpages.● (!) Dont cache the manifest!● http://www.html5rocks.com/en/tutorials/app
  7. 7. Use abstractions● Lawn Chair - brian.io/lawnchair/● asyncStorage - https://github.com/WebReflection/db● IndexedDBShim - nparashuram.com/IndexedDBShim/
  8. 8. Design Web Applications
  9. 9. (Da New) Design process
  10. 10. A Page? An App?● Its not pages anymore● Design from the content out● Your web app as a collection of(web) components● Less is more: Any addition has thepotential to ruin our MVP
  11. 11. Design A List Again?● Dont reinvent the wheel○ http://html5rock.com○ http://pttrns.com○ http://mobile-patterns.com● Dont let "web" nor "Enterprise"be an excuse
  12. 12. Design - Phones? Tablets?● Start with the UX○ Balsamiq, Creately,MockFlow○ Aim for commondevice breakpoints(4:3, 16:9)
  13. 13. Philosophy: Adaptive Apps● Adaptive apps○ Custom views and templates for each form factor○ Shared the model● Use responsive design within the form factor● progressive enhancementSo your app is useful onany platform.
  14. 14. Building Web Applications
  15. 15. MV* For The Win● Separating concerns○ Model handles data○ server persistence layer○ View handles user input andrendering● Used to be on the server...
  16. 16. AngularJS - Client Side FrameworkAngular.js - Let you extend HTMLvocabulary for your application.● Data binding● Extensible HTML● Dependency Injection / TestableMore options: addyosmani.github.com/todomvc/
  17. 17. Mobile World - RESTful WorldPhotos● 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/idUsers● POST http://ex.com/_ah/api/picturesque/v1/users/joinAnd more...
  18. 18. APIs - Demo Timegoo.gl/XPnXj
  19. 19. Demo of Note Generator
  20. 20. Transferable Objects Demo
  21. 21. 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
  22. 22. Google Cloud Endpoints
  23. 23. Modern Apps and The Server ConundrumHave to deal with a server○ Offload Computation○ Sharing and Collaboration○ LogsBut who wants to run a server?○ Spikey traffic - Scaling challenges○ Client Server communication○ Serialization○ OAuth Dance
  24. 24. Google App Engine
  25. 25. Google App Engine
  26. 26. Google APIs: The Discovery Document
  27. 27. 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
  28. 28. Google APIsHTML<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>
  29. 29. Google Cloud Endpoints
  30. 30. Simple GET API Request
  31. 31. Using Data Model for InsertPython@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 validationphoto.put()return photo
  32. 32. Insert With Drag and Drop DemoPython
  33. 33. Update DemoPython
  34. 34. 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);});
  35. 35. Demo TimePythonpicturesque-app.appspot.com/
  36. 36. "Smart" Client● Network calls are expensive● "Client" photo library○ Lawnchair allows us to store photos metadataoffline○ 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 updatedsince the last API call
  37. 37. Chrome DevTools
  38. 38. 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
  39. 39. 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/
  40. 40. Debug With Chrome DevTools
  41. 41. 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
  42. 42. Questions? THANK YOU!Ido GreenDeveloper Relationshttp://plus.google.com/+greenidoApp:: https://picturesque-app.appspot.com/HTML5 APIs: http://ido-green.appspot.com/html5fest-il/Slides: http://ido-green.appspot.com/

×