Getting Started With Sencha.io Sync, a New Cloud- Based ...

uglyveinInternet and Web Development

Jun 24, 2012 (5 years and 1 month ago)

491 views



Getting Started With Sencha.io Sync,
a New Cloud
-
Based Synchronization Service for the HTML5 Web


NOTE: This is a beta version of the getting started guide for Sencha.io
Sync to go along with the beta version of the service. As it is doing with
the service
itself, Sencha is working hard to improve the Sencha.io Sync
instructional material. Your feedback is important to help us do that, so
please give us your feedback on this document and on the service once
you’ve had the chance to try it. Leave your commen
ts on the Forum.

--
The Sencha team, September 2011


Sencha.io Sync lets your Sencha Touch
-
based app store and synchronize
data simultaneously to both the local device and to the cloud by inserting
a single JavaScript method in your app. With Sencha.io Sync
, an app can
create complete, identical versions of its database on both the local
device and in a remote location, and the databases can continually sync
with each other. Users will always have complete access to the latest data
from your app, even when t
he network is unavailable.

All you have to do is replace your app’s current store with a new store
called
syncstorage
as well as put some thought into when your app
calls
sync
and how your app’s data model maps to its corresponding
storage model.

More on
how you implement Sencha.io Sync a little later. Let’s talk first
about the problem it solves and why it matters.


The Network Problem

Most of us have run into

and had to design apps around

an essential
conflict between modern mobile apps and today’s m
obile networks.

Apps create and depend on data, lots of it. And they store and then
retrieve all that data to and from different sources, including an app
server and various locations in the cloud.

The network, however, creates an inherent drawback for w
orking with
data. The network’s fundamental unreliability

created by latency,
unpredictable availability, and irregular bandwidth

mean that apps and
their users have to wait to get data. Often, that wait can be so long that
the entire mobile app breaks
.



In practical terms, for the developer this means that all the work you put
in to building cool app features and a great user interface can all go to
waste just because the user can’t get to data. As a user of mobile apps,
how many times have you given u
p on an app because it seems to take all
day just to get the data you just created, or to retrieve the data that
makes the app interesting in the first place?



Sencha.io Sync: Solving the Network Problem and More

With Sencha.io Sync, the new
syncstorage

data store means that your
app always writes data to a database stored locally on the device using
the HTML5 Local Storage facility, and

when the network allows

to an
identical remote copy. And, whenever your app calls
sync
and the
network is availabl
e, the two databases efficiently synchronize so app
users always have access to their data and always have a complete
backup.

This means that users never have to go without their data, even when the
network is unavailable. Data reads and writes work even
when the
network isn’t available, data is backed up in the cloud when it is, and
once a sync takes place, both the local device and the remote storage
location have a complete copy of the database.

By resolving the conflict between apps and the network,
Sencha.io Sync
makes it much easier for you to create Sencha Touch
-
based application
functionality that depends on immediate access to data. It also makes it
much easier for users of those apps to interact with their data. Sencha.io
Sync makes the data por
table and it makes it much easier for apps to
share data, opening a wide variety of possibilities for user collaborations
based on shared data.

Among the ways you can use Sencha.io Sync are the following:

·

Create an instant backup and restore or recovery fa
cility without
adding anything to your code. Lost devices no longer create
nightmares for your users.

·

Let users easily share data between the same apps running on
multiple devices

·

Develop functionality that helps users share data and collaborate
with each
other in nearly real
-
time



·

Create new app functionality that depends on high data availability
or a connection to a local server for getting data.

·

Build into your apps communications between groups of users who
all need quick access to the same data.

The
same
syncstorage
store makes it all possible

without you having
to add lines and lines of complex code to your app.

The rest of this document will get you started with Sencha.io Sync,
helping you understand how to design and build apps that can easily t
ake
advantage of this new service.


Getting started with Sync: The Basics

There are just a few things you have to do to get started with Sencha.io
Sync. We’ve alluded to a few of them already. Here’s a complete list:



Replace the current store your Sencha
Touch
-
based app uses for
storage with
syncstorage

·

Obtain a Sync API key from Sencha and place it in your app

Note: during the Beta, the API key will be the same as your Sencha ID (i.e.
the account you use to log in to the forums).



Make sure your app calls

sync
at times that are natural for the
user and assure that new data is regularly synced to both local and
remote databases



Give some extra thought to how your application model maps to its
underlying data model to be sure you aren’t creating conflict
prob
lems when multiple users are all trying to sync with the same
databases

Let’s take a closer look at each of these one at a time.

Replace Current
sync
Method

Your current Sencha Touch app has a component that lets it store data
when the user wants to perfor
m any of the ‘CRUD’ actions, that is create,
read, update, or delete data. Your app probably uses a store called
something like the following:



store



localstorage





ajaxstorage



memorystorage

To take advantage of the Sencha.io Sync capability, you need to repl
ace
that store with
syncstorage
. Your app will now be able to create
identical copies of its database on both the local device and a remote
server and constantly synchronize with both databases whenever the user
wants to interact with the data. You can see
how this looks in Example 1,
taken from the
Contacts demo app
on the Sencha website. This example
creates a Model called
Contact
and gives the model set of fields. The
model then defines its prox
y configuration, which is of the type
syncstorage
.


Example 1: The
syncstorage
method in the Sencha Contacts demo
app.

/**

* @class Contact

* @extends Ext.data.Model

* The Contact model

*/

Ext.regModel("Contact", {

fields: [

{name: "id",
type: "string"},

{name: "firstName", type: "string"},

{name: "lastName", type: "string"},

{name: "email", type: "string"},

],



proxy: {





id: 'contacts',





type:
'syncstorage'
,





key: 'yoursenchaidname'

}

});


Obtain Sync API Key

In Example 2, you can see a key referenced just below
syncstorage
.
This is an alphanumeric API key that uniquely identifies your app and any
data associated with it.

Example 2: The API key in the Sencha Contacts demo app. (Note: the ke
y
shown here is not the actual key for the Contacts app; it’s made up just
to show its format and location in the code.)



/**

* @class Contact

* @extends Ext.data.Model

* The Contact model

*/

Ext.regModel("Contact", {

fields: [

{name: "id",
type: "string"},

{name: "firstName", type: "string"},

{name: "lastName", type: "string"},

{name: "email", type: "string"},

],



proxy: {





id: 'contacts',





type: 'syncstorage',





key: 'yoursenchaidname'

}

});


During the beta, your key will be the same as your Sencha ID. Your
Sencha ID is the same as your forum account. For example, if you log in
to the Forums as ‘johndoe’, your key will be ‘johndoe’.


Calling
sync
from your app

You have to make sure your app c
alls the
syncstorage
method so when
a user adds or makes changes to app data the user action is reflected in
the app database. Once the sync is performed, Sencha.io Sync makes sure
there’s a complete copy of the new data on both the device and in the
cloud
.

You can connect calls to
sync
with user actions. For example, in the
Contacts demo app, the app calls
sync
any time a user performs a
CRUD, that is:

·

Create data

·

Read data

·

Update data

·

Delete data

You could also add interface elements to be sure that the
user syncs app
data. In the Contacts app, when a user clicks the circular refresh arrow in
the upper right corner, the app calls
sync
. See Figure 1.




Figure 1. Contacts app user interface.



Or, you could tie sync calls to even
ts within the app, such as mouseovers,
refreshes, clicks, keystrokes, and so on. The Sencha
Crossword demo app

works a little like this: Every time the user enters a new letter to the
crossword p
uzzle, the app calls
sync
and syncs the new data.

You could also create a
setTimeout
to call sync every n seconds. This
would mean syncs take place without the user having to do anything.


Mapping the app model to the data model

For Sencha.io Sync to wor
k well, you have to put some thought into how
you design the data model for your app. That is, you have to think about
how your app creates and interacts with data and how to refer to and
organize the resulting database.

One of the reasons you use Sencha.
io Sync is to let multiple users get
access to the same data. For example, an interactive game needs to let
users exchange data from the game or it isn’t much fun. Take even a
simple game like Tic Tac Toe: User A places an X on the game board, and
now the
game includes the data attached to that X. Now User B places an
O on the board, and so on. With each turn, the players can be said to be
exchanging or sharing the data that has been added to the game.
Expressed in terms of the data attached to the game, yo
u can think of Tic
Tac Toe as a shared database of information about the state of the game.

The Contacts demo app works in pretty much the same way, except the
shared database is made up of personal contact information: If you add a
sample contact to the a
pp, everyone else who tries the app will be able to
see that contact. (So, be a little careful how you use it, OK?)

This means that at any given moment, more than one person could be
interacting with and changing data. What happens when multiple users


try
to sync data at the same, or almost the same moment? It creates
conflicts that the database needs to resolve.

Other conflicts can occur, such as when old data from some user’s device
tries to update a newer version of the database in the cloud. Or when one

user deletes data from a shared app only to have a second user log in to
the app with a local version of the database that does not yet know about
the deletions.

Part of the design of the Sencha.io Sync service

as with any so
-
called
“eventually consiste
nt” database system

is a conflict resolution policy.
To boil this policy down to its essence, with Sencha.io Sync, the last
request to write new data “wins.” Sencha.io Sync looks for the time
associated with changes to data, uses the latest write request
, and throws
away any data resulting from older requests.

This has implications for the way your app approaches and organizes
data. To make the most out of Sencha.io Sync, you have to think about
app data in its smallest form

as a set of attribute values
. Here’s an
example of this approach: When it was initially written, the Sencha
Crossword demo app stored all answers from attempts to solve the
crossword puzzle in a single string. Sencha.io Sync viewed this string as
the smallest form of data and, if one
user played the game and tried to
create a new word, sync would cause all the other answers just to
disappear.

So, to work with Sync, Sencha redesigned the app to store each letter of
every attempted answer separately. This means that Sync now views each

letter as the smallest form of data, minimizing the potential for conflict.

When it comes to your own app’s storage model, the important points to
remember are the following:

1.

Try to think through potential conflicts that might occur when
multiple users tr
y to change data in your app

2.

Organize and store the data associated with your app based on the
smallest unit you can conceive.


Add Sencha.io Sync To Your App

The best way to start figuring out how to approach the way your app
stores data is to take Sencha
.io Sync for a test drive. Download it, get an
API key, and add
syncstorage
to your app. This will help you get used to
the way you add it to your app, the way it works, and the way you have to
think about app data to make the most out of the service.



Whi
le Sencha.io Sync is still in its Beta release, we recommend you use it
in the following instances, where it will be simplest to implement the
service and where you’re likely to get the best result:

·

When you want to sync the entire app database, whether it
’s for an
individual user or a group of users

·

When you want to let an individual user sync and have access to
just the data associated with her use of a multiuser app for just her
use.

We’ll make more information available soon to help you implement Sync.

And check back regularly for updates to the service as we continue to
develop it and make it more robust.

For the moment, we’d urge you to dive in and see how it works, and
please
give us feedback
. We expect you’ll see that it can improve your
users’ abil
ity to work with data on mobile apps and help your apps solve
some of the problems associated with today’s mobile networks.