Save 10% off ANY FITC event with discount code 'slideshare' See our upcoming events 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.

1. Mobile & Offline Data Synchronization
in AngularJS
http://bit.ly/zen-ng-pouchdb
Daniel Zen
@zendigital

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. 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. Requirements for data models in
AngularJS:

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. 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. 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 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. 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. $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. $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. $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. 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. 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. 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. 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. 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. 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. 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. 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 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