Mobile, Web and Cloud -The Triple Crown of Modern ApplicationsIdo Green, Developer AdvocateDanny Hermes, Developer Program...
Modern Mobile/Web Applications
Modern Applications● Self Contained● "Offline First"● MV* Frameworks● Device Aware● #Perfmatters#io13
AngularJS - Client Side FrameworkAngular.js - Let you extend HTMLvocabulary for your application.● Data binding● Extensibl...
Mobile World - RESTful World#io13Photos● GET http://ex.com/_ah/api/picturesque/v1/photos● POST http://ex.com/_ah/api/pictu...
● 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...
Google Cloud Endpoints
Modern Apps and The Server ConundrumAll modern applications have to deal with a server○ Offload Computation○ Sharing and C...
Google App Engine#io13
Google App Engine#io13
Google Cloud Endpoints#io13
Back the Truck Up#io13
Google APIs: The Discovery Document#io13
Google APIs: Client Libraries Like Whoa!!● Web○ JavaScript: google-api-javascript-client○ Node.js: google-api-nodejs-clien...
Google APIsClient Libraries Like Whoa!!HTML<body>...<script type="text/javascript">function init() {gapi.client.load(‘urls...
What Was that Again: Google Cloud Endpoints#io13
Demo Time!picturesque-app.appspot.com
Data Model for CRUD AppPythonfrom endpoints_proto_datastore.ndb import EndpointsModelclass Photo(EndpointsModel):...
Data Model for CRUD AppPythonfrom endpoints_proto_datastore.ndb import EndpointsModelclass Photo(EndpointsModel):title = n...
Data Model for CRUD AppPythonfrom endpoints_proto_datastore.ndb import EndpointsModelclass Photo(EndpointsModel):title = n...
Data Model for CRUD AppPythonfrom endpoints_proto_datastore.ndb import EndpointsModelclass Photo(EndpointsModel):title = n...
Data Model for CRUD AppPythonfrom endpoints_proto_datastore.ndb import EndpointsModelclass Photo(EndpointsModel):title = n...
Data Model for CRUD AppPythonfrom endpoints_proto_datastore.ndb import EndpointsModelclass Photo(EndpointsModel):_message_...
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
UpdatePython@Photo.method(path=photo/{id}, http_method=PUT, name=photo.update)def PhotoUpdate(self, photo):if not photo.fr...
Update DemoPython
Add some tags to support that UIPythonclass Photo(EndpointsModel):title = ndb.StringProperty()description = ndb.StringProp...
List and Search, All at OncePython@Photo.query_method(query_fields=(limit, pageToken, title),path=photos, name=photo.list)...
List Demo - Get Photos Baby!Pythonvar req = gapi.client.picturesque.photo.list();req.execute(function(data) {data.items = ...
Lemme, Lemme Upgrade U!picturesque-app-upgrade.appspot.com
Adding auth via OAuth 2.0Python@Photo.method(user_required=True,path=photo/{id}, http_method=PUT, name=photo.update)def Ph...
Adding auth via OAuth 2.0Pythonfrom endpoints_proto_datastore.ndb import EndpointsUserPropertyclass Photo(EndpointsModel):...
OAuth2.0 Demo - 1PythonThelivedemo
Interface Informed by Client● Network calls are expensive● "Client" photo library○ Lawnchair allows us to store photos met...
Extending query_methodPythonfrom endpoints_proto_datastore.ndb import EndpointsAliasPropertyfrom endpoints_proto_datastore...
Extending query_methodPythonclass Photo(EndpointsModel):...def LastUpdatedSet(self, value):try:self._last_updated = utils....
Extending query_methodPython@Photo.query_method(query_fields=(limit, pageToken,title, lastUpdated),path=photos, name=photo...
Client Side ConventionsJavascriptPicturesqueApp.showCarousel = function() {if (!PicturesqueApp.localImagesAdded) {Pictures...
Key Take Aways● Build powerful applications with Google Cloud Endpoints● Cloud Endpoints makes for easy deployment at scal...
Questions?Ido GreenDeveloper Relationshttp://plus.google.com/+greenidoApp:: https://picturesque-app-upgrade.appspot.com/Co...
Upcoming SlideShare
Loading in...5
×

Mobile, web and cloud - the triple crown of modern applications

593

Published on

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
593
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mobile, web and cloud - the triple crown of modern applications

  1. 1. Mobile, Web and Cloud -The Triple Crown of Modern ApplicationsIdo Green, Developer AdvocateDanny Hermes, Developer Programs Engineer
  2. 2. Modern Mobile/Web Applications
  3. 3. Modern Applications● Self Contained● "Offline First"● MV* Frameworks● Device Aware● #Perfmatters#io13
  4. 4. AngularJS - Client Side FrameworkAngular.js - Let you extend HTMLvocabulary for your application.● Data binding● Extensible HTML● Dependency Injection / Testable#io13More options: addyosmani.github.com/todomvc/
  5. 5. Mobile World - RESTful World#io13Photos● 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...
  6. 6. ● 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?#io13
  7. 7. ● 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)#io13
  8. 8. Google Cloud Endpoints
  9. 9. Modern Apps and The Server ConundrumAll modern applications have to deal with a server○ Offload Computation○ Sharing and Collaboration○ LogsBut who wants to run a server○ Spikey traffic○ Client Server communication○ Serialization○ OAuth Dance#io13
  10. 10. Google App Engine#io13
  11. 11. Google App Engine#io13
  12. 12. Google Cloud Endpoints#io13
  13. 13. Back the Truck Up#io13
  14. 14. Google APIs: The Discovery Document#io13
  15. 15. Google APIs: Client Libraries Like Whoa!!● 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#io13
  16. 16. Google APIsClient Libraries Like Whoa!!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>
  17. 17. What Was that Again: Google Cloud Endpoints#io13
  18. 18. Demo Time!picturesque-app.appspot.com
  19. 19. Data Model for CRUD AppPythonfrom endpoints_proto_datastore.ndb import EndpointsModelclass Photo(EndpointsModel):...
  20. 20. Data Model for CRUD AppPythonfrom endpoints_proto_datastore.ndb import EndpointsModelclass Photo(EndpointsModel):title = ndb.StringProperty()
  21. 21. Data Model for CRUD AppPythonfrom endpoints_proto_datastore.ndb import EndpointsModelclass Photo(EndpointsModel):title = ndb.StringProperty()description = ndb.StringProperty()
  22. 22. Data Model for CRUD AppPythonfrom endpoints_proto_datastore.ndb import EndpointsModelclass Photo(EndpointsModel):title = ndb.StringProperty()description = ndb.StringProperty()base64_photo = ndb.BlobProperty(base64Photo, indexed=False)
  23. 23. Data Model for CRUD AppPythonfrom endpoints_proto_datastore.ndb import EndpointsModelclass Photo(EndpointsModel):title = ndb.StringProperty()description = ndb.StringProperty()base64_photo = ndb.BlobProperty(base64Photo, indexed=False)updated = ndb.DateTimeProperty(auto_now=True, indexed=False)
  24. 24. Data Model for CRUD AppPythonfrom endpoints_proto_datastore.ndb import EndpointsModelclass Photo(EndpointsModel):_message_fields_schema = (id, title, description,base64Photo, updated)title = ndb.StringProperty()description = ndb.StringProperty()base64_photo = ndb.BlobProperty(base64Photo, indexed=False)updated = ndb.DateTimeProperty(auto_now=True, indexed=False)
  25. 25. Simple GET API Request
  26. 26. 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
  27. 27. Insert With Drag and Drop DemoPython
  28. 28. UpdatePython@Photo.method(path=photo/{id}, http_method=PUT, name=photo.update)def PhotoUpdate(self, photo):if not photo.from_datastore:raise endpoints.NotFoundException(Photo not found.)photo.put()return photo
  29. 29. Update DemoPython
  30. 30. Add some tags to support that UIPythonclass Photo(EndpointsModel):title = ndb.StringProperty()description = ndb.StringProperty()base64_photo = ndb.BlobProperty(base64Photo, indexed=False)created = ndb.DateTimeProperty(auto_now_add=True, indexed=False)tags = ndb.StringProperty(repeated=True)
  31. 31. List and Search, All at OncePython@Photo.query_method(query_fields=(limit, pageToken, title),path=photos, name=photo.list)def PhotoList(self, query):return query
  32. 32. 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);});
  33. 33. Lemme, Lemme Upgrade U!picturesque-app-upgrade.appspot.com
  34. 34. Adding auth via OAuth 2.0Python@Photo.method(user_required=True,path=photo/{id}, http_method=PUT, name=photo.update)def PhotoUpdate(self, photo):...Really that easy
  35. 35. Adding auth via OAuth 2.0Pythonfrom endpoints_proto_datastore.ndb import EndpointsUserPropertyclass Photo(EndpointsModel):_message_fields_schema = (id, title, description,base64Photo, updatedtitle = ndb.StringProperty()description = ndb.StringProperty()base64_photo = ndb.BlobProperty(base64Photo, indexed=False)updated = ndb.DateTimeProperty(auto_now_add=True, indexed=False)owner = EndpointsUserProperty(required=True, raise_unauthorized=True)Alternative: Using models for auth
  36. 36. OAuth2.0 Demo - 1PythonThelivedemo
  37. 37. Interface Informed by Client● Network calls are expensive● "Client" photo library○ Lawnchair allows us to store photos metadata offline○ filer.js to store the photos○ Application Cache○ HTML5 Storage● DRY: Applies to code and to API calls○ Only retrieve photos that have been updated since the lastAPI call
  38. 38. Extending query_methodPythonfrom endpoints_proto_datastore.ndb import EndpointsAliasPropertyfrom endpoints_proto_datastore import utilsclass Photo(EndpointsModel):..._last_updated = None@EndpointsAliasProperty(name=lastUpdated, setter=LastUpdatedSet)def last_updated(self):if self._last_updated is not None:try:return utils.DatetimeValueToString(self._last_updated)except:raise endpoints.BadRequestException(Invalid timestamp for lastUpdated)
  39. 39. Extending query_methodPythonclass Photo(EndpointsModel):...def LastUpdatedSet(self, value):try:self._last_updated = utils.DatetimeValueFromString(value)if not isinstance(self._last_updated, datetime.datetime):self._last_updated = Noneraise TypeError(Not a datetime stamp.)except TypeError:raise endpoints.BadRequestException(Invalid timestamp for lastUpdated.)self._endpoints_query_info._filters.add(Photo.updated >= self._last_updated)
  40. 40. Extending query_methodPython@Photo.query_method(query_fields=(limit, pageToken,title, lastUpdated),path=photos, name=photo.list)def PhotoList(self, query):return query.order(Photo.updated)
  41. 41. Client Side ConventionsJavascriptPicturesqueApp.showCarousel = function() {if (!PicturesqueApp.localImagesAdded) {PicturesqueApp.populateCarouselFromLocalImages();};PicturesqueApp.applyLastUpdated(PicturesqueApp.listSinceUpdated);};
  42. 42. Key Take Aways● Build powerful applications with Google Cloud Endpoints● Cloud Endpoints makes for easy deployment at scale● Use AngularJS to be more productive● Leverage Modern Browser Features:○ Offline○ Web RTC○ Websockets○ New CSS3 artifacts○ Web workers#io13
  43. 43. Questions?Ido GreenDeveloper Relationshttp://plus.google.com/+greenidoApp:: https://picturesque-app-upgrade.appspot.com/Code: https://github.com/greenido/Slides: https://picturesque-app-upgrade.appspot.com/slidesDanny HermesDeveloper Programs Engineerplus.google.com/+DannyHermes
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×