FITC presents: Mobile & offline data synchronization in Angular JS

FITC presents: Mobile & offline data synchronization in Angular JS

• 1.
  Mobile & OfflineData Synchronization in AngularJS http://bit.ly/zen-ng-pouchdb Daniel Zen @zendigital
• 2.
  My Background ● LongtimeJavaScript programmer ● Former XP Consultant for Google & Pivotal ● Started using AngularJS 2 years ago ● Started AngularJS-NYC Meetup May 2012 ● Reformed Zen Digital consultancy 2013 ○ Web & mobile application development ○ Focus on using latest technologies & solutions
• 3.
  Outline for thistalk: ● Requirements for AngularJS data models ● Standard Online Techniques ○ CRUD,RESTful APIs ○ $http, $resource ● Offline issues ● local storage options ● Sample Application walk through ○ Ionic ○ PouchDb
• 4.
  Requirements for datamodels in AngularJS:
• 5.
  Requirements for modelsin AngularJS: ABSOLUTELY NOTHING ● AngularJS is model agnostic ● Any variable or object can serve as a model ● No unique ID required ● No built-in persistence model for objects ● ng-model binds javascript variables to UI not to backend
• 6.
  What does thismean for data persistence ● There is no standard, yet ○ See AngularJS 2.0 Data Persistence Design Doc ● Various open source storage options ○ SQL ■ MySQL ■ PostgreSQL ○ NoSQL ■ MongoDB ■ CouchDB
• 7.
  Common Persistence Practices ●CRUD - Create, read, update and delete Each letter in the acronym can map to a standard SQL statement and HTTP method: Operation` SQL HTTP Create INSERT PUT / POST Read (Retrieve) SELECT GET Update (Modify) UPDATE PUT / PATCH Delete (Destroy) DELETE DELETE
• 8.
  Typically we employRESTful APIs ● RESTful APIs - Representational state transfer The name “Representational State Transfer” is intended to evoke an image of how a well-designed Web application behaves: a network of Web pages forms a virtual state machine, allowing a user to progress through the application by selecting a link or submitting a short data-entry form, with each action resulting in a transition to the next state of the application by transferring a representation of that state to the user. - Roy Fielding ● HTTP 1.1 based on REST
• 9.
  Common REST Practices ResourcePOST create GET read PUT update DELETE delete /accounts Create a new account List accounts Bulk update accounts Delete all accounts /accounts/123 Error Show account 123 If exists update account 123 If not error Delete account 123 /customers Create a new customer List customers Bulk update customers Delete all customers /customers/456 Error Show customer 456 If exists update customer 456 If not error Delete customer 456
• 10.
  $http Service ● TheAngularJS XmlHttpRequest API follows the Promise interface ($q service) ○ Returns a promise object with the standard then method and two http specific methods: success and error. $http({method: 'GET', url: '/someUrl'}). success(function(data, status, headers, config) { // this callback will be called asynchronously // when the response is available }). error(function(data, status, headers, config) { // called asynchronously if an error occurs // or server returns response with an error status. });
• 11.
  $resource - ahigher level abstraction ● service in module ngResource ● factory lets you interact with server-side data ● returns resource with methods for CRUD operations: get, save, query, remove, delete ● operations can be invoked by the following: ● no need to interact with the low level $http ● HTTP GET "class" actions: Resource.action([parameters], [success], [error]) ● non-GET "class" actions: Resource.action([parameters], postData, [success], [error]) ● non-GET instance actions: instance.$action([parameters], [success], [error])
• 12.
  $resource - ahigher level abstraction ● You can also access the raw $http promise via the $promise property on the object returned ● More reference: Angular communication $http & $resource var User = $resource('/users/:userId', {userId:'@id'}); User.get({userId:123}) .$promise.then(function(user) { $scope.user = user; })
• 13.
  But what aboutoffline? ● Web apps no longer dependent on servers ● Solution: richer clients (using AngularJS ;) ● Google Docs is a good example ● For offline first experience: ○ You need to store the data in the front end ○ You need it to sync to the server’s data store. ● In browser databases available: ○ derby.js, Lawnchair, Sench touch ● requirement: online synchronization
• 14.
  What have wecome to expect ● Email should work offline ○ Local copy of recent emails ○ Can read or delete ○ Can write new emails, and will send when online ● Google Docs keeps pushing threshold ○ In Chrome we can view and edit while offline ○ mobile version now has offline edit capability ● Conflict resolution ○ Intelligently merge documents with multiple edits
• 15.
  Connectivity Lifecycle Failures canhappen on: client push, or client pull/ server push ● Communicate or hide connectivity state ○ Chat app ● Enable client-side creation and editing features ○ Todo app ● Disable, modify, or hide features that won’t work ○ Facebook status, Twitter Tweets ● Notify user about possibly conflicting data ● Conflict resolution tools (merge)
• 16.
  How to dealwith being offline ● “You are offline” ○ “Unable to connect to the Internet” ○ We need to stop treating offline as an error condition ● Try not to block features completely ○ If you can’t update, show old data (with message) ○ Let user create data locally to be sent later ● Dealing with new incoming data. Options: ○ Show it as the most recent ○ Show it in chronological order
• 17.
  So what arelocal storage storage? ● Roll your own! ○ Use localstorage, indexDb, or WebSql directly ● Open source local storage databases that sync ○ PouchDB (JavaScript database that syncs!) ○ Hoodie (Another JS db that syncs. In preview mode) ○ remotestorage.io (IETF Proposed Standard) ● Proprietary solution? ○ Firebase (AngularFire) ■ Firebase transparently reconnects to server ■ But doesn’t persist to local storage
• 18.
  Firebase ● Pros ○ AngularJSlibrary (AngularFire) ○ 3-way binding with $bind ○ Free Developer (Hacker) plan ○ Paid solution with premium support ○ Hosted solution ○ Can deploy static hosted apps ● Cons ○ Proprietary solution ○ Hosted solution (can’t run local or on own servers) ○ No local storage solution
• 19.
  PouchDB ● Pros: ○ OpenSource ○ Lightweight Cross Browser JavaScript implementation ○ Syncs with open source CouchDB protocol servers ■ PouchDB-Server - a HTTP on top of PouchDB ■ Cloudant - A cluster aware fork of CouchDB ■ Couchbase Sync Gateway ● Cons: ○ No Standard AngularJS library (yet) ■ angular-pouchdb looks promising
• 20.
  Sample Application: ionic-pouchdb-todo ●Source code will be available at: ○ http://github.com/danielzen/ionic-pouchdb-todo (soon) ● Uses ionic hybrid mobile app framework ● Pre-requisites: ○ Node ○ CouchDb
• 21.
  Resources ● Data Persistencein Angular 2.0 ● Designing Offline - Alex Feyerke ● Building offline applications with AngularJS and PouchDB ● Sync multiple AngularJS apps without server via PouchDB ● TodoMVC (AngularJS) + Hood.ie = 60 minutes to awesome A copy of these slides is available at: http://bit.ly/zen-ng-pouchdb