Your SlideShare is downloading. ×
0
Mobile & Offline Data Synchronization
in AngularJS
http://bit.ly/zen-ng-pouchdb
Daniel Zen
@zendigital
My Background
● Longtime JavaScript programmer
● Former XP Consultant for Google & Pivotal
● Started using AngularJS 2 yea...
Outline for this talk:
● Requirements for AngularJS data models
● Standard Online Techniques
○ CRUD,RESTful APIs
○ $http, ...
Requirements for data models in
AngularJS:
Requirements for models in AngularJS:
ABSOLUTELY NOTHING
● AngularJS is model agnostic
● Any variable or object can serve ...
What does this mean for data persistence
● There is no standard, yet
○ See AngularJS 2.0 Data Persistence Design Doc
● Var...
Common Persistence Practices
● CRUD - Create, read, update and delete
Each letter in the acronym can map to a standard
SQL...
Typically we employ RESTful APIs
● RESTful APIs - Representational state transfer
The name “Representational State Transfe...
Common REST Practices
Resource POST
create
GET
read
PUT
update
DELETE
delete
/accounts Create a new
account
List accounts ...
$http Service
● The AngularJS XmlHttpRequest API follows the
Promise interface ($q service)
○ Returns a promise object wit...
$resource - a higher level abstraction
● service in module ngResource
● factory lets you interact with server-side data
● ...
$resource - a higher level abstraction
● You can also access the raw $http promise via
the $promise property on the object...
But what about offline?
● Web apps no longer dependent on servers
● Solution: richer clients (using AngularJS ;)
● Google ...
What have we come to expect
● Email should work offline
○ Local copy of recent emails
○ Can read or delete
○ Can write new...
Connectivity Lifecycle
Failures can happen on: client push, or client pull/ server push
● Communicate or hide connectivity...
How to deal with being offline
● “You are offline”
○ “Unable to connect to the Internet”
○ We need to stop treating offlin...
So what are local storage storage?
● Roll your own!
○ Use localstorage, indexDb, or WebSql directly
● Open source local st...
Firebase
● Pros
○ AngularJS library (AngularFire)
○ 3-way binding with $bind
○ Free Developer (Hacker) plan
○ Paid solutio...
PouchDB
● Pros:
○ Open Source
○ Lightweight Cross Browser JavaScript implementation
○ Syncs with open source CouchDB proto...
Sample Application: ionic-pouchdb-todo
● Source code will be available at:
○ http://github.com/danielzen/ionic-pouchdb-tod...
Resources
● Data Persistence in Angular 2.0
● Designing Offline - Alex Feyerke
● Building offline applications with Angula...
Upcoming SlideShare
Loading in...5
×

FITC presents: Mobile & offline data synchronization in Angular JS

8,655

Published on

Mobile & Offline Data Synchronization in AngularJS with Daniel Zen
Presented at FITC Spotlight: AngularJS on June 07 2014
More info at www.FITC.ca

OVERVIEW
Are you building mobile or web applications with AngularJS and wish they would work when you were offline? You can read, send and delete mail from your mobile email client when you are offline, why not from your AngularJS app? AngularJS is completely agnostic when it comes to creating your data models. Let’s explore what is required to allow your application to be useful to your users even without an internet connection.

INTENDED AUDIENCE - BEGINNER - INTERMEDIATE
This presentation is for developers that know they are looking for offline and data synchronization capabilities. Or, possibly for managers that wish to have a greater understanding of what their options are in AngularJS to create such functionality.


Daniel Zen, CEO, Zen Digital
Daniel Zen is the CEO of Zen Digital, founder of the New York AngularJS Meetup, a frequent lecturer, and a former consultant for Google, Pivotal Labs and various Fortune 500 companies. Zen Digital uses Agile techniques to move projects forward while continuously integrating new code and ideas, producing elegant frontend experiences and efficient backend systems for web and mobile applications.

Published in: Technology
1 Comment
18 Likes
Statistics
Notes
No Downloads
Views
Total Views
8,655
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
87
Comments
1
Likes
18
Embeds 0
No embeds

No notes for slide

Transcript of "FITC presents: Mobile & offline data synchronization in Angular JS"

  1. 1. Mobile & Offline Data Synchronization in AngularJS http://bit.ly/zen-ng-pouchdb Daniel Zen @zendigital
  2. 2. My Background ● Longtime JavaScript 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. 3. Outline for this talk: ● 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. 4. Requirements for data models in AngularJS:
  5. 5. Requirements for models in 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. 6. What does this mean 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. 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. 8. Typically we employ RESTful 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. 9. Common REST Practices Resource POST 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. 10. $http Service ● The AngularJS 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. 11. $resource - a higher 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. 12. $resource - a higher 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. 13. But what about offline? ● 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. 14. What have we come 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. 15. Connectivity Lifecycle Failures can happen 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. 16. How to deal with 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. 17. So what are local 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. 18. Firebase ● Pros ○ AngularJS library (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. 19. PouchDB ● Pros: ○ Open Source ○ 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. 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. 21. Resources ● Data Persistence in 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
  1. A particular slide catching your eye?

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

×