who's afraid of front end databases

26
WHO’S AFRAID OF FRONT-END DATABASES? Gil Fink CEO and Senior Consultant, sparXys @gilfink

Upload: gil-fink

Post on 11-Feb-2017

191 views

Category:

Software


2 download

TRANSCRIPT

WHO’S AFRAID OF

FRONT-END DATABASES?

Gil Fink

CEO and Senior Consultant, sparXys

@gilfink

Front-end Storage Problem

Cookies Are such an old technology…

How localStorage feels like

About Me • sparXys CEO and senior consultant

• ASP.NET/IIS Microsoft MVP in the last 7 years

• Pro Single Page Application Development (Apress)

co-author

• 4 Microsoft Official Courses (MOCs) co-author

• GDG Rashlatz and Angular UP co-organizer

Agenda • IndexedDB

• Libraries to the rescue

Storing Data in The Browser

• Cookies o Super small storage, string based, API not friendly

• Web Storage (localStorage/sessionStorage) o String based dictionary, synchronous API

• Web SQL database o Deprecated!

localStorage Demo

IndexedDB • Advanced key-value data management

IndexedDB Front-end

App

Fast

Reliable

Limited capacity

Local access only

Information loss

IndexedDB • Made of records holding simple values or

hierarchical objects o Each record is a key/value pair

• Enables o Storage of large numbers of objects locally

o Fast insertion and extraction

• Satisfy some of the offline data requirements for

web applications

IndexedDB

Database

objectStore

Cursor on objectStore

key : value

key : value

key : value

Index

Cursor on index

IndexedDB API • Very massive API!

• API is asynchronous o Note: Synchronous APIs were deprecated by W3C

• Exposed through window.indexedDB object

IndexedDB – Open the Database

var db;

var request = window.indexedDB.open(“dbName");

request.onerror = function(event) {

console.log(“Database error on open: ” + event.target.errorCode);

};

request.onsuccess = function(event) {

db = request.result;

};

IndexedDB – Creating an objectStore

var request = indexedDB.open(‘dbName’, 2);

request.onupgradeneeded = function(event) {

// Create an objectStore to hold information about customers.

var objectStore = db.createObjectStore(“products", { keyPath: “id" });

// Create an index to search customers by name.

objectStore.createIndex("name", "name", { unique: false });

// Store value in the newly created objectStore.

objectStore.add({ id: 3, name: “db“ });

};

IndexedDB – Creating a Transaction

var transaction = db.transaction([“products"], “readwrite”);

transaction.oncomplete = function(event) {

console.log(“Transaction completed”);

};

transaction.onerror = function(event) {

// handle transaction errors

};

// will add the object into the objectStore

var objectStore = transaction.objectStore(“products”);

var request = objectStore.add({ id: 7, name: “IndexedDB" });

request.onsuccess = function(event) {

// event.target.result == object.id

}

IndexedDB – Using a Cursor

var transaction = db.transaction([“products”]);

var objectStore = transaction.objectStore(“products”);

var cursor = objectStore.openCursor();

cursor.onsuccess = function(event) {

var cursor = event.target.result;

if (cursor) {

console.log(“id:”+cursor.key+” has name:”+cursor.value.name);

cursor.continue();

}

else {

console.log(“No entries”);

}

};

IndexedDB – Working with Indexes

var transaction = db.transaction([“products”]);

var objectStore = transaction.objectStore(“products”);

var index = objectStore.index(“name”);

var request = index.get(“IndexedDB");

request.onsuccess = function(event) {

console.log(“id: " + event.target.result.id);

};

IndexedDB Demo

Problems? • Verbose syntax

o Too much boilerplate

• No support for queries style SQL

• No full text search

• And more

Libraries to the Rescue • PouchDB - https://pouchdb.com/

o Good wrapper on top of IndexedDB with fallbacks

• Working in Angular? o Angular 1 service - https://github.com/bramski/angular-indexedDB

o angular2-indexeddb experimental service -

https://github.com/gilf/angular2-indexeddb

angular2-indexeddb Demo

Summary • IndexedDB is a full blown database in your app’s

front-end

• It can help you to persist your front-end data

• IndexedDB is suitable for offline scenarios

Thank You!