Modern Web Applications Utilizing HTML5 APIs
4 likes4,572 views
The document discusses modern web applications that utilize HTML5 APIs, emphasizing their offline capabilities and the importance of performance. It outlines design principles for adaptive apps and provides insights on using MV* architectures and various Google Cloud APIs. Additionally, it highlights tools and techniques for developing efficient web applications, including demos and suggestions for maximizing productivity with Chrome DevTools.
![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/201305modernwebapplicationsutilizinghtml5apis-130530131508-phpapp01/85/Modern-Web-Applications-Utilizing-HTML5-APIs-34-320.jpg)
Modern Web Applications Utilizing HTML5 APIs
- 1. Modern Web Applications Utilizing HTML5 APIs 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 ● 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.
- 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. Demo of 'Note Generator'
- 20. 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"
- 22. 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
- 25. Back the Truck Up
- 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? 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/ Thank you!