Your SlideShare is downloading. ×
Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)

259
views

Published on

In this talk from DevCon TLV I've covered the two sides of the coin: …

In this talk from DevCon TLV I've covered the two sides of the coin:
1. Client side: what are the main steps when you are building your Web Applications:
○ Design
○ Code
○ Debug
○ Demo

2. On the server side, you wish to have a great API that you (and others) could use from any platform out there (Mobile, web). The answer on Google Cloud platform is Google Cloud Endpoints.

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
259
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Modern Web Applications With HTML5 Ido Green, Developer Advocate plus.google.com/+greenido
  • 2. Agenda ● Modern Web Applications ○ Design ○ Code ○ Debug ○ Demo ● Google Cloud Endpoints
  • 3. Modern Web Applications
  • 4. Modern Applications ● Self Contained ● "Offline First" ● MV* Frameworks ● Device Aware ● #Perfmatters
  • 5. ● 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?
  • 6. ● 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)
  • 7. 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
  • 8. Use abstractions ● Lawn Chair - brian.io/lawnchair/ ● asyncStorage - https://github.com/WebReflection/db ● IndexedDBShim - nparashuram.com/IndexedDBShim/
  • 9. Design Web Applications
  • 10. (Da New) Design process
  • 11. 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
  • 12. 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
  • 13. Design - Phones? Tablets? ● Start with the UX ○ Balsamiq, Creately, MockFlow ○ Aim for common device breakpoints (4:3, 16:9)
  • 14. 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. Building Web Applications
  • 16. MV* For The Win ● Separating concerns ○ Model handles data ○ server persistence layer ○ View handles user input and rendering ● Used to be on the server...
  • 17. 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/
  • 18. 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...
  • 19. APIs - Demo Time goo.gl/XPnXj
  • 20. Demo of 'Note Generator'
  • 21. Transferable Objects Demo
  • 22. 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. Google Cloud Endpoints
  • 24. 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. Google App Engine
  • 26. Google App Engine
  • 27. Google APIs: The Discovery Document
  • 28. 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
  • 29. 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. Google Cloud Endpoints
  • 31. Simple GET API Request
  • 32. 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
  • 33. Insert With Drag and Drop Demo Python
  • 34. Update Demo Python
  • 35. 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. Demo Time Python picturesque-app.appspot.com/
  • 37. "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
  • 38. Chrome DevTools
  • 39. 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
  • 40. 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/
  • 41. Debug With Chrome DevTools
  • 42. 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
  • 43. 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/