Offline survival in the deadzone

Offline Survival
in the Deadzone
by Scott Steinbeck

www.agritrackingsystems.com
AGRI TRACKING
SYSTEMS
2
ABOUT ME
• Scott Steinbeck
• Entrepreneur
• CF Engineer 10 Years
• Hybrid App developer
• Hardware/IOT Geek
• Amateur Woodworker
• Husband
• Father

AGRI TRACKING
SYSTEMS
3

AGRI TRACKING
SYSTEMS
4THE PROBLEM: LOAD TIMES…

AGRI TRACKING
SYSTEMS
5

AGRI TRACKING
SYSTEMS
6

AGRI TRACKING
SYSTEMS
7THE SOLUTION

AGRI TRACKING
SYSTEMS
WebSQL
Indexed DB
Lets play a little game called
name that crappy browser

AGRI TRACKING
SYSTEMS

AGRI TRACKING
SYSTEMS
Cookies
Local Storage

AGRI TRACKING
SYSTEMS
Cookies
•Small Storage (4k Max)
•Limit 50 per domain
•Meant for storing simple data such as a
session token
•No default getter/setter API
•Only String Support

AGRI TRACKING
SYSTEMS
Cookies
//Set
document.cookie = "username=John Doe";
//Set with expire
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013
12:00:00 UTC";
//Edit
document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013
12:00:00 UTC; path=/";
//Delete (set the expire date to before now)
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00
UTC";

AGRI TRACKING
SYSTEMS
Cookies (jCookie)
//Create a cookie, valid across the entire site:
Cookies.set('name', ‘value');
//Create a cookie that expires 7 days from now:
Cookies.set('name', 'value', { expires: 7 });
//Read cookie:
Cookies.get('name'); // => ‘value' or undefined
//Read all visible cookies:
Cookies.get(); // => { name: 'value' }
//Delete cookie:
Cookies.remove('name');

AGRI TRACKING
SYSTEMS
Local Storage
•Medium Storage (10M Max)
•Key-Value pair
•Simple getter/setter syntax
•Can only store strings
• Local Storage (persistent after browser
close)
•Session Storage (removed when tab is
closed)

AGRI TRACKING
SYSTEMS
//Create a local storage item
localStorage.setItem('name', 'value');
//Create a local storage with object
var fullNameObj = {'first': 'John', 'last': ‘Smith'};
localStorage
.setItem(‘fullname',JSON.stringify(fullNameObj));
//Read local storage item:
localStorage.getItem('name'); // => 'value' or undefined if doesnt exist
//Read local storage object
JSON.parse(localStorage.getItem('fullname'));
// => {'first': 'John', 'last': ‘Smith'}
//Delete local storage item:
localStorage.removeItem('name');

AGRI TRACKING
SYSTEMS
Local Storage (in the browser)

AGRI TRACKING
SYSTEMS
Cookie & Local Storage Gotchas!
• only stores strings. which means anything being stored
gets converted to a string.
8 -> “8”
true -> “true”
{“a”:1} -> [object Object]
JSON.stringify(), JSON.parse()
Solution

AGRI TRACKING
SYSTEMS
20
But what happens when our data get more complicated?
Both IndexedDB & WebSQL can serve as great solutions for this problem.
WebSQL Indexed DB
Except we have some support issues…..
We need to search?
Join Data?
Add / Edit / Delete Items inside of our object?
Sync Data?

AGRI TRACKING
SYSTEMS
Client Side Storage Solutions
WebSQL
•Large Storage (50M Max)
•Relational Database (SQL lite)
•Tables and relationships, moderately fast
IndexedDB
•Large Storage (50M Max)
•Document Store DB (NoSQL)
•Indexable, large row storage
•No tables, Super fast

AGRI TRACKING
SYSTEMS
Client Side Storage Frameworks
Loki JS
javascript embedded / in-memory
database
Lovefield
Lovefield is a relational
database written in pure
JavaScript. It provides SQL-like
AlaSQL.js
JavaScript SQL database for
browser and Node.js. Handles both
traditional relational tables and
nested JSON data (NoSQL)
Lawnchair
A lightweight client side JSON
document store
NoSQL SQL

AGRI TRACKING
SYSTEMS
Client Side Storage Frameworks
Pouchdb
PouchDB is an open-source
JavaScript database inspired
by Apache CouchDB
Firebase
Firebase provides a realtime
database synchronized across
clients and stored on Firebase's
cloud.
WebSqlSync
Automatically synchronize a local
WebSql database (SQLite of the
browser) with a server
Persistence.js
An asynchronous Javascript
database mapper library.
NoSQL Syncing Frameworks SQL Syncing Frameworks

AGRI TRACKING
SYSTEMS
Which one do you use?

AGRI TRACKING
SYSTEMS
Database Usage
By Type 2015

AGRI TRACKING
SYSTEMS
A Pie Chart of My Favorite Bars

AGRI TRACKING
SYSTEMS
A Bar Chart of My Favorite Pies

AGRI TRACKING
SYSTEMS
Interest Over Time

AGRI TRACKING
SYSTEMS
The SQL vs NoSQL Holy War
SQL and NoSQL do the same thing: store data. They take different approaches, which may help or
hinder your project. Despite feeling newer and grabbing recent headlines, NoSQL is not a replacement
for SQL — it’s an alternative.
SQLNoSQL

AGRI TRACKING
SYSTEMS
WebSQL

AGRI TRACKING
SYSTEMS
WebSQL Storage
• Persists after the
browser is closed
• Storage is shared
across all pages on
a domain
Column Types
• TEXT
• NUMERIC
• INTEGER
• REAL
• BLOB
• Sorting
• Grouping
• Compound
SELECTs
• JOINs
• last_insert_rowid(
)
• like, between, in
• indexes
• Primary Key
• Autoincrement
• Limit, Offset
Most Common
Features Supported

AGRI TRACKING
SYSTEMS
//Create Our Database
var db = openDatabase('mydb', '1.0', 'my first
database', 2 * 1024 * 1024);
//Create a transaction and run our qureies inside of it
db.transaction(function (tx) {
//Create Table
tx.executeSql('CREATE TABLE IF NOT EXISTS foo (id unique, text)');
//Insert Data without params (BAD)
tx.executeSql('INSERT INTO foo (id, text) VALUES (1, "synergies")');
});
WebSQL

AGRI TRACKING
SYSTEMS
WebSQL
var id = 2;
var userValue = 'creativity';
//Insert Data with params
tx.executeSql(
'INSERT INTO foo (id, text) VALUES (?, ?)',
[id, userValue]
);
});
//Delete Data with params
tx.executeSql(‘DELETE FROM foo WHERE id = ?', [id]);
});

AGRI TRACKING
SYSTEMS
WebSQL
// Return Data
// executeSql(query,params,callback)
tx.executeSql('SELECT * FROM foo', [], function (tx, results) {
var len = results.rows.length, i;
for (i = 0; i < len; i++) {
alert(results.rows.item(i).text);
}
});
});
Gotchas
Results is not a array of objects.
The results array is very similar to a query object in CF.
It has a length property
and can be iterated over using parens instead of brackets
you can easily turn it into an array of objects, works great for using in
angular, etc.

AGRI TRACKING
SYSTEMS
So by 2018 we should have full support…. nope
Web SQL was deprecated because standards are really
important and turning Web SQL into a proper standard
would have been prohibitively difficult.

AGRI TRACKING
SYSTEMS
If it is critical to your project to have support on many
different browsers polyfills have been created to
implement support.
In this case local storage would be used to implement
it,
(since it works cross platform, persists across browser
tabs, and persists after browser restarts)
Lovefield - A relational database written in pure JavaScript. It
provides SQL-like syntax and works cross-browser. Created By
Google,
Web Developers
Cordova/PhoneGap sqlite storage adapter
- Drop-in replacement for HTML5/Web SQL API:
Only Change:
window.openDatabase() -> window.sqlitePlugin.openDatabase()
Mobile Developers

AGRI TRACKING
SYSTEMS
IndexedDB
window.indexedDB =
window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB
|| window.msIndexedDB;
window.IDBTransaction =
window.IDBTransaction || window.webkitIDBTransaction ||
window.msIDBTransaction;
window.IDBKeyRange =
window.IDBKeyRange || window.webkitIDBKeyRange ||
window.msIDBKeyRange
if (!window.indexedDB) {
window
.alert("Your browser doesn't support a stable version of IndexedDB.")
}

AGRI TRACKING
SYSTEMS
IndexedDB
var db;
var request = window.indexedDB.open("newDatabase", 1);
request.onerror = function(event) {
console.log("error: ");
};
request.onsuccess = function(event) {
db = request.result;
console.log("success: "+ db);
};

AGRI TRACKING
SYSTEMS
IndexedDB
//Add a record
var request = db.transaction(["employee"], "readwrite")
.objectStore("employee")
.add({ id: "00-03", name: "Kenny", age: 19, email: "kenny@planet.org" });
alert("Kenny has been added to your database.");
};
request.onerror = function(event) {
alert("Unable to add datarnKenny is aready exist in your database! ");
}
//Remove a record
var request = db.transaction(["employee"], "readwrite")
.objectStore("employee")
.delete("00-03");
alert("Kenny's entry has been removed from your database.");
};

AGRI TRACKING
SYSTEMS
IndexedDB (in the browser)

AGRI TRACKING
SYSTEMS
Agri Tracking Systems keeps track of your
farms, fields, crops, nutrient samples,
budgets all the way down to your daily
operations. Our purpose is simple, we want
to give you the power to become more
efficient by staying informed.
Agri Mapping makes its simple to build
your maps without having to read through
tons of help guides. We provide all the
information and tools you need, and none
of the ones you don’t. And the best part is
it is accessible from anywhere!
www.agrimapping.com
OUR PRODUCTS

Offline survival in the deadzone

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to Offline survival in the deadzone

Similar to Offline survival in the deadzone (20)

Recently uploaded

Recently uploaded (20)

Offline survival in the deadzone

Editor's Notes