Utilizing HTML5 APIs
1 like4,601 views
This document discusses building modern web applications with HTML5. It covers using frameworks like AngularJS, designing for different devices, leveraging offline capabilities, interacting with APIs through Google Cloud Endpoints, and debugging with Chrome DevTools. The key aspects are building powerful apps with Google Cloud Endpoints, using ready HTML5 APIs that continue improving, and leveraging modern browser features like offline support, WebRTC, and web workers.
![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);
});](https://image.slidesharecdn.com/devcon-tlv-06-2013modernwebapplicationsutilizinghtml5apis1-130619114938-phpapp02/85/Utilizing-HTML5-APIs-34-320.jpg)
Utilizing HTML5 APIs
- 1. Modern Web Applications With HTML5 Ido Green, Developer Advocate plus.google.com/+greenido
- 3. Modern Applications ● Self Contained ● "Offline First" ● MV* Frameworks ● Device Aware ● #Perfmatters
- 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. ● 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)
- 6. 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
- 7. Use abstractions ● Lawn Chair - brian.io/lawnchair/ ● asyncStorage - https://github.com/WebReflection/db ● IndexedDBShim - nparashuram.com/IndexedDBShim/
- 9. (Da New) Design process
- 10. 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
- 11. 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
- 12. Design - Phones? Tablets? ● Start with the UX ○ Balsamiq, Creately, MockFlow ○ Aim for common device breakpoints (4:3, 16:9)
- 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 enhancement So your app is useful on any platform.
- 15. MV* For The Win ● Separating concerns ○ Model handles data ○ server persistence layer ○ View handles user input and rendering ● Used to be on the server...
- 16. 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/
- 17. 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...
- 18. APIs - Demo Time goo.gl/XPnXj
- 19. Demo of 'Note Generator'
- 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
- 23. 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
- 26. Google APIs: The Discovery Document
- 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. 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>
- 30. Simple GET API Request
- 31. 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
- 32. Insert With Drag and Drop Demo Python
- 34. 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); });
- 36. "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
- 37. Chrome DevTools
- 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. 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. Debug With Chrome DevTools
- 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. 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/