4-way Data-binding: Offline

Data Synchronization in
AngularJS

http://zndg.tl/ng-pouchdb
Daniel Zen
@zendigital
admin@zen.digital

My Background
Systems Architect, Developer & Trainer
Agile Engineering / XP Background
Started AngularJS-NYC Meetup mid-2012
Formed zen.digital in 2014
User Experience for Web & Mobile
Scalable MicroService based APIs
Best Practices for Development & Deployment
Corporate Training
Full Stack JavaScript
Node.js
MongoDb
etc.

Outline for this talk:

Requirements for AngularJS data models
Standard Online Techniques
CRUD, RESTful APIs
$http, $resource
Higher Level Abstractions

Offline issues
local storage options
Sample Application walk through
http://github.com/danielzen/todo-ng-pouchdb
ng-PouchDb Collection & Binding

Requirements for data models

in AngularJS:

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

What does this mean for data

persistence
There is no standard, yet
Angular 2 did not add one

Various open source storage options

SQL
MySQL
PostgreSQL
NoSQL
MongoDB
CouchDB

Common Persistence Practices

CRUD Create, read, update and delete
Each letter in the acronym can map to
a standard
SQL
statement and HTTP
Operation`
SQL
HTTP
method:
Create
INSER PUT / POST
T
Read
(Retrieve)

SELEC GET
T

Update
(Modify)

UPDAT PUT /
E
PATCH

Delete
(Destroy)

DELET DELETE
E

Typically we employ CRUD via

RESTful APIs
RESTful APIs Representational state transfer
The name Representational State Transfer is
intended to evoke an image of how a welldesigned 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

Common REST Practices

Reso
urce

PO
ST
crea
te

GET
read

PUT
upda
te

DEL
ETE
delet
e

/
acco
unts

Cre
ate
a
new
acc
ount

List
acco
unts

Bulk
upda
te
acco
unts

Dele
te all
acco
unts

/
acco
unts/
123

Erro
r

Sho
w
acco
unt
123

If
exist
s
upda
te
acco
unt
123

Dele
te
acco
unt
123

If not
error

$http Service
The AngularJS XmlHttpRequest API
follows the Promise interface ($q
service)
Returns a promise object with the standard
$http({method:
'GET',
'/someUrl'}).
then
method
andurl:
two
http specific methods:
success(function(data, status, headers, config) {
success
error.
// thisand
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.
});

$resource - a higher level

abstraction
service in module ngResource
factory lets you interact with server-side
data
returns resource with methods for CRUD
(Create, Read, Update, Delete)
operations: get, save, query, remove, delete

operations can be invoked by the

following:
no need to interact with the low level
$http
More reference:

But what about offline (&

higher level)?
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 servers data store.

In browser databases available:

derby.js, Lawnchair, Sench touch

requirement: online synchronization

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

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

wont work
Facebook status, Twitter Tweets

Notify user about possibly conflicting

data

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 cant 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

So what are local storage

options?
Wait for AngularJS 2.0
Roll your own!
Use localstorage, indexDb, or WebSql directly

Proprietary solution?
Firebase (AngularFire)
Firebase transparently reconnects to server
But doesnt persist to local storage

Open source local storage databases

that sync
Hoodie (Another JS db that syncs. In preview
mode)
remotestorage.io (IETF Proposed Standard)
PouchDB (JavaScript database that syncs!)

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 (cant run local or on own
servers)
No local storage solution

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 is a decent wrapper

Sample Application: todo-ngpouchdb

Source code is available at:
https://github.com/danielzen/todo-ng-pouchdb

Uses ionic hybrid mobile app framework

Pre-requisites:
Node
CouchDb

2-Way Data Binding AngularJS

User Interface
(DOM)

Data Model
(JavaScript)

3-Way Data Binding AngularFire

User Interface
(DOM)

Data Model
Data Model
(JavaScript)

Internet

Database
(Firebase)

4-Way Data Binding - ngpouchdb

User Interface
(DOM)

Data Model
Data Model
(JavaScript)

Local Storage
(PouchDb)

Internet

Database
(CouchDb)

Sample Application: ngpouchdb

Source code is available at:
http://github.com/danielzen/todo-ng-pouchdb

Uses angular-pouchdb wrapper

wraps pouchs methods with Angular Promise
($q)

Pre-requisites:
Node
CouchDb
for 4-way sync

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://zndg.tl/ng-pouchdb