Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Modern Web Applications Utilizing HTML5 APIs


Published on

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

Published in: Technology
  • Be the first to comment

Modern Web Applications Utilizing HTML5 APIs

  1. 1. Modern Web Applications Utilizing HTML5 APIsIdo Green, Developer
  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:○● Will also be used when the useris online.● Allows you to define fallbackpages.● (!) Dont cache the manifest!●
  7. 7. Use abstractions● Lawn Chair -● asyncStorage -● 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 the potential to ruin our MVP
  11. 11. Design A List Again?● Dont reinvent the wheel○○○● 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● Fundamental pattern for separatingconcerns● Model handles data and serverpersistence layer● View handles user input andrendering● Used to be on the server --> Nowmoving to the thicker client.
  16. 16. AngularJS - Client Side FrameworkAngular.js - Let you extend HTMLvocabulary for your application.● Data binding● Extensible HTML● Dependency Injection / TestableMore options:
  17. 17. Mobile World - RESTful WorldPhotos● GET● POST● PATCH● POST more...
  18. 18. Demo of Note Generator
  19. 19. Transferable Objects Demo
  20. 20. Device APIs WG:● 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"
  21. 21. Google Cloud Endpoints
  22. 22. 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
  23. 23. Google App Engine
  24. 24. Google App Engine
  25. 25. Back the Truck Up
  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=""></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 =;req.execute(function(data) {data.items = data.items || [];console.log("-- We have " + data.items.length);addPhotos(data.items);});
  35. 35. Demo
  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○ Chrome for Android remote debug with DevTools.● Testing○ Qunit to test models○ Selenium and its mobile option Remote Web Driver● How To○
  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?Ido GreenDeveloper Relations APIs: you!