SlideShare a Scribd company logo
Using PouchDB
Offline with UI5
Krishna Kishor Kammaje
Gaurav Shroff
2
1. Introduction to Offline and Solutions
2. Start with an online ToDo application
3. Intro to PouchDB
4. Demo Offline application
5. Code Walkthrough - PouchDB APIs to make the app Offline
6. Further Enhancements
Agenda
3
• Internet Reliability
• Remote areas covered by field workers
• Oil Drilling vessels using Satellite internet
Why Offline?
4
Demo - Online Application
ToDo Application
https://github.com/UI5Con-Blore-OfflineUI5
5
Communications of an UI5 app
● Static resources (UI5 Library and UI5 App)
● Data calls to the server
6
SAP's recommendation for offline options with UI5
● SCP Mobile Service (Cordova or Native)
7
How offline apps are built in the non-SAP world?
● Static resources (UI5 Library and UI5 App)
 AppCache, ServiceWorker
 Cordova, Electron
● Data calls to the server
 LocalStorage, WebSQL, IndexedDB
 PouchDB js library
8
Intro to PouchDB
● What is PouchDB?
● Json Document Store
● Offline First Approach
● Progressive Web App (PWA)
● History
● Relational Database – "Column and Rows"
● Non Relational Database – CouchDb
● Instead of Fixed Schema there is only mapping of keys to document
9
Advantages of PouchDB
● Supports using indexedDB
● Works across browsers
● Reduce query over the network
● Production version is just 46kb
● Supports WebSQL. So can be useful with Cordova
● PouchDB offers plugins for Cordova
● Ease of handling attachments
● Easy to learn
● Open Source
10
Browser and platform supporting PouchDB
● Firefox 29+ (Including Firefox OS and Firefox for Android)
● Chrome 30+
● Safari 5+
● Internet Explorer 10+
● Opera 21+
● Android 4.0+
● iOS 7.1+
● Windows Phone 8+
11
PouchDB APIs
Using db.put( ) :- Create a new document or update an existing document. If the document
already exists, you must specify its revision _rev.
12
PouchDB APIs
● Using db.get(docId, [options], [callback]) :- Retrieves a document, specified
by docId.
13
PouchDB APIs
Using db.bulkDocs(docs, [options], [callback]) :- Create, update or delete
multiple documents.
14
PouchDB APIs
Using db.allDocs([options], [callback]) :- Fetch multiple documents, indexed
and sorted by the _id.
15
PouchDB APIs
Using db.changes(options) :- A list of changes made to documents in the
database, in the order they were made.
16
Architecture with PouchDB - Query
SYNC
UI5 App
OData Model
GATEWAY SERVER
JSON Model
17
Architecture with PouchDB - Insert/Update/Delete
Update Operations
UI5 App
OData Model
GATEWAY SERVER
Local Data
Transactions
JSON Model
18
Offline App Demo
● View PouchDB contents
● View sync call to the backend
https://github.com/UI5Con-Blore-OfflineUI5
19
Using PouchDB - Adding to the UI5 project
Download from https://pouchdb.com/
Add in manifest.json (sap.ui5 -> resources -> js)
20
Finding if Online
Using local event handlers – online/offline
● No xhr calls
● GW need not be available
Ping GW server (https://<gw server>/sap/bc/ping)
● Overhead for GW server
21
Using PouchDB - How many databases?
One for storing the local data
One for storing a list of pending transactions
22
Initial Query of ToDos - Pseudocode
1. Find the initial online status
2. Call Sync function
23
Sync Operation
1. Fetch changes to be synced from transactionDB
2. For each change, trigger deferred OData changes
3. 'submitChanges' - Single batch call with multiple changesets
4. Clear the pending count
5. Clear the entries in transactionDB
6. If online, reload ToDos from the server
24
Create operation
● Add to the pending transaction count
● Add new entry to the transactionDB
● Update the localDB, which in turn updates the JSON model to show the new entry in UI
● If online, trigger a sync
25
Update Operation
● Add to the pending transaction count
● Add new entry to the transactionDB
● Update the localDB. If it is 'Done' operation, then remove the entry from JSON model
● If online, trigger a sync
26
Enhancements
● Merging multiple changes on the same object
● Conflict Handling
● Using eTags
● Using AppCache, Service Worker for UI5 resources
● Using Cordova with PouchDB for a complete Offline app
● Using ServiceWorker/PouchDB for static value helps
27
Thanks
Krishna Kishor Kammaje
kkammaje@convergentis.com
https://www.linkedin.com/in/kammaje/
Gaurav Shroff
gshroff@convergentis.com
https://www.linkedin.com/in/gaurav-shroff555/

More Related Content

What's hot

Database constraints
Database constraintsDatabase constraints
Database constraints
Khadija Parween
 
Intro to Javascript
Intro to JavascriptIntro to Javascript
Intro to Javascript
Anjan Banda
 
Three Key Concepts for Understanding JSR-352: Batch Programming for the Java ...
Three Key Concepts for Understanding JSR-352: Batch Programming for the Java ...Three Key Concepts for Understanding JSR-352: Batch Programming for the Java ...
Three Key Concepts for Understanding JSR-352: Batch Programming for the Java ...
timfanelli
 
437 b powermeter and sensor calibration procedure
437 b powermeter and sensor calibration procedure437 b powermeter and sensor calibration procedure
437 b powermeter and sensor calibration procedure
heru setiawan
 
embedded-static-&dynamic
embedded-static-&dynamicembedded-static-&dynamic
embedded-static-&dynamic
Saranya Natarajan
 
Abap slides user defined data types and data
Abap slides user defined data types and dataAbap slides user defined data types and data
Abap slides user defined data types and dataMilind Patil
 
5. Other Relational Languages in DBMS
5. Other Relational Languages in DBMS5. Other Relational Languages in DBMS
5. Other Relational Languages in DBMSkoolkampus
 
Database programming in vb net
Database programming in vb netDatabase programming in vb net
Database programming in vb netZishan yousaf
 

What's hot (9)

Database constraints
Database constraintsDatabase constraints
Database constraints
 
Intro to Javascript
Intro to JavascriptIntro to Javascript
Intro to Javascript
 
Three Key Concepts for Understanding JSR-352: Batch Programming for the Java ...
Three Key Concepts for Understanding JSR-352: Batch Programming for the Java ...Three Key Concepts for Understanding JSR-352: Batch Programming for the Java ...
Three Key Concepts for Understanding JSR-352: Batch Programming for the Java ...
 
437 b powermeter and sensor calibration procedure
437 b powermeter and sensor calibration procedure437 b powermeter and sensor calibration procedure
437 b powermeter and sensor calibration procedure
 
embedded-static-&dynamic
embedded-static-&dynamicembedded-static-&dynamic
embedded-static-&dynamic
 
Abap dictionary 1
Abap dictionary 1Abap dictionary 1
Abap dictionary 1
 
Abap slides user defined data types and data
Abap slides user defined data types and dataAbap slides user defined data types and data
Abap slides user defined data types and data
 
5. Other Relational Languages in DBMS
5. Other Relational Languages in DBMS5. Other Relational Languages in DBMS
5. Other Relational Languages in DBMS
 
Database programming in vb net
Database programming in vb netDatabase programming in vb net
Database programming in vb net
 

Similar to Ui5 con@Banglore - UI5 App with Offline Storage using PouchDB

Offline-First Mobile Web Apps with PouchDB, IBM Cloudant, and IBM Bluemix
Offline-First Mobile Web Apps with PouchDB, IBM Cloudant, and IBM BluemixOffline-First Mobile Web Apps with PouchDB, IBM Cloudant, and IBM Bluemix
Offline-First Mobile Web Apps with PouchDB, IBM Cloudant, and IBM Bluemix
IBM
 
KubeCon EU 2016 Keynote: Pushing Kubernetes Forward
KubeCon EU 2016 Keynote: Pushing Kubernetes ForwardKubeCon EU 2016 Keynote: Pushing Kubernetes Forward
KubeCon EU 2016 Keynote: Pushing Kubernetes Forward
KubeAcademy
 
Open Source LinkedIn Analytics Pipeline - BOSS 2016 (VLDB)
Open Source LinkedIn Analytics Pipeline - BOSS 2016 (VLDB)Open Source LinkedIn Analytics Pipeline - BOSS 2016 (VLDB)
Open Source LinkedIn Analytics Pipeline - BOSS 2016 (VLDB)
Issac Buenrostro
 
From CoreOS to Kubernetes and Concourse CI
From CoreOS to Kubernetes and Concourse CIFrom CoreOS to Kubernetes and Concourse CI
From CoreOS to Kubernetes and Concourse CI
Denis Izmaylov
 
Docker tlv
Docker tlvDocker tlv
Docker tlv
Ariel Moskovich
 
CBDW2014- Intro to CommandBox; The ColdFusion CLI, Package Manager, and REPL ...
CBDW2014- Intro to CommandBox; The ColdFusion CLI, Package Manager, and REPL ...CBDW2014- Intro to CommandBox; The ColdFusion CLI, Package Manager, and REPL ...
CBDW2014- Intro to CommandBox; The ColdFusion CLI, Package Manager, and REPL ...
Ortus Solutions, Corp
 
Interop 2018 - Understanding Kubernetes - Brian Gracely
Interop 2018 - Understanding Kubernetes - Brian GracelyInterop 2018 - Understanding Kubernetes - Brian Gracely
Interop 2018 - Understanding Kubernetes - Brian Gracely
Brian Gracely
 
Running Airflow Workflows as ETL Processes on Hadoop
Running Airflow Workflows as ETL Processes on HadoopRunning Airflow Workflows as ETL Processes on Hadoop
Running Airflow Workflows as ETL Processes on Hadoop
clairvoyantllc
 
OpenCms Days 2014 - Updating to OpenCms 9.5
OpenCms Days 2014 - Updating to OpenCms 9.5OpenCms Days 2014 - Updating to OpenCms 9.5
OpenCms Days 2014 - Updating to OpenCms 9.5
Alkacon Software GmbH & Co. KG
 
The App Developer's Kubernetes Toolbox
The App Developer's Kubernetes ToolboxThe App Developer's Kubernetes Toolbox
The App Developer's Kubernetes Toolbox
Nebulaworks
 
Implementing a build manager in Ada
Implementing a build manager in AdaImplementing a build manager in Ada
Implementing a build manager in Ada
Stephane Carrez
 
ITB2017 - Keynote
ITB2017 - KeynoteITB2017 - Keynote
ITB2017 - Keynote
Ortus Solutions, Corp
 
Mobile App Development With IBM Cloudant
Mobile App Development With IBM CloudantMobile App Development With IBM Cloudant
Mobile App Development With IBM Cloudant
IBM Cloud Data Services
 
Introduction to MongoDB
Introduction to MongoDBIntroduction to MongoDB
Introduction to MongoDB
Chun-Kai Wang
 
R meetup 20161011v2
R meetup 20161011v2R meetup 20161011v2
R meetup 20161011v2
Niels Ole Dam
 
NoSQL on the move
NoSQL on the moveNoSQL on the move
NoSQL on the move
Codemotion
 
Icinga 2009 at OSMC
Icinga 2009 at OSMCIcinga 2009 at OSMC
Icinga 2009 at OSMC
Icinga
 
Mobile web development
Mobile web developmentMobile web development
Mobile web development
Maher Alshammari
 
Griffon for the Enterprise
Griffon for the EnterpriseGriffon for the Enterprise
Griffon for the Enterprise
James Williams
 
Kandroid for nhn_deview_20131013_v5_final
Kandroid for nhn_deview_20131013_v5_finalKandroid for nhn_deview_20131013_v5_final
Kandroid for nhn_deview_20131013_v5_finalNAVER D2
 

Similar to Ui5 con@Banglore - UI5 App with Offline Storage using PouchDB (20)

Offline-First Mobile Web Apps with PouchDB, IBM Cloudant, and IBM Bluemix
Offline-First Mobile Web Apps with PouchDB, IBM Cloudant, and IBM BluemixOffline-First Mobile Web Apps with PouchDB, IBM Cloudant, and IBM Bluemix
Offline-First Mobile Web Apps with PouchDB, IBM Cloudant, and IBM Bluemix
 
KubeCon EU 2016 Keynote: Pushing Kubernetes Forward
KubeCon EU 2016 Keynote: Pushing Kubernetes ForwardKubeCon EU 2016 Keynote: Pushing Kubernetes Forward
KubeCon EU 2016 Keynote: Pushing Kubernetes Forward
 
Open Source LinkedIn Analytics Pipeline - BOSS 2016 (VLDB)
Open Source LinkedIn Analytics Pipeline - BOSS 2016 (VLDB)Open Source LinkedIn Analytics Pipeline - BOSS 2016 (VLDB)
Open Source LinkedIn Analytics Pipeline - BOSS 2016 (VLDB)
 
From CoreOS to Kubernetes and Concourse CI
From CoreOS to Kubernetes and Concourse CIFrom CoreOS to Kubernetes and Concourse CI
From CoreOS to Kubernetes and Concourse CI
 
Docker tlv
Docker tlvDocker tlv
Docker tlv
 
CBDW2014- Intro to CommandBox; The ColdFusion CLI, Package Manager, and REPL ...
CBDW2014- Intro to CommandBox; The ColdFusion CLI, Package Manager, and REPL ...CBDW2014- Intro to CommandBox; The ColdFusion CLI, Package Manager, and REPL ...
CBDW2014- Intro to CommandBox; The ColdFusion CLI, Package Manager, and REPL ...
 
Interop 2018 - Understanding Kubernetes - Brian Gracely
Interop 2018 - Understanding Kubernetes - Brian GracelyInterop 2018 - Understanding Kubernetes - Brian Gracely
Interop 2018 - Understanding Kubernetes - Brian Gracely
 
Running Airflow Workflows as ETL Processes on Hadoop
Running Airflow Workflows as ETL Processes on HadoopRunning Airflow Workflows as ETL Processes on Hadoop
Running Airflow Workflows as ETL Processes on Hadoop
 
OpenCms Days 2014 - Updating to OpenCms 9.5
OpenCms Days 2014 - Updating to OpenCms 9.5OpenCms Days 2014 - Updating to OpenCms 9.5
OpenCms Days 2014 - Updating to OpenCms 9.5
 
The App Developer's Kubernetes Toolbox
The App Developer's Kubernetes ToolboxThe App Developer's Kubernetes Toolbox
The App Developer's Kubernetes Toolbox
 
Implementing a build manager in Ada
Implementing a build manager in AdaImplementing a build manager in Ada
Implementing a build manager in Ada
 
ITB2017 - Keynote
ITB2017 - KeynoteITB2017 - Keynote
ITB2017 - Keynote
 
Mobile App Development With IBM Cloudant
Mobile App Development With IBM CloudantMobile App Development With IBM Cloudant
Mobile App Development With IBM Cloudant
 
Introduction to MongoDB
Introduction to MongoDBIntroduction to MongoDB
Introduction to MongoDB
 
R meetup 20161011v2
R meetup 20161011v2R meetup 20161011v2
R meetup 20161011v2
 
NoSQL on the move
NoSQL on the moveNoSQL on the move
NoSQL on the move
 
Icinga 2009 at OSMC
Icinga 2009 at OSMCIcinga 2009 at OSMC
Icinga 2009 at OSMC
 
Mobile web development
Mobile web developmentMobile web development
Mobile web development
 
Griffon for the Enterprise
Griffon for the EnterpriseGriffon for the Enterprise
Griffon for the Enterprise
 
Kandroid for nhn_deview_20131013_v5_final
Kandroid for nhn_deview_20131013_v5_finalKandroid for nhn_deview_20131013_v5_final
Kandroid for nhn_deview_20131013_v5_final
 

Recently uploaded

FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance
 
Elevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object CalisthenicsElevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object Calisthenics
Dorra BARTAGUIZ
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
DanBrown980551
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
OnBoard
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
Laura Byrne
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
Guy Korland
 
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Ramesh Iyer
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
James Anderson
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
ThousandEyes
 
Generating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using SmithyGenerating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using Smithy
g2nightmarescribd
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
Alan Dix
 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
Thijs Feryn
 
Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with Parameters
Safe Software
 
Knowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backKnowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and back
Elena Simperl
 
How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
Product School
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
RTTS
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
DianaGray10
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
Ana-Maria Mihalceanu
 

Recently uploaded (20)

FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
 
Elevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object CalisthenicsElevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object Calisthenics
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
 
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
 
Generating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using SmithyGenerating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using Smithy
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
 
Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with Parameters
 
Knowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backKnowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and back
 
How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
 

Ui5 con@Banglore - UI5 App with Offline Storage using PouchDB

  • 1. Using PouchDB Offline with UI5 Krishna Kishor Kammaje Gaurav Shroff
  • 2. 2 1. Introduction to Offline and Solutions 2. Start with an online ToDo application 3. Intro to PouchDB 4. Demo Offline application 5. Code Walkthrough - PouchDB APIs to make the app Offline 6. Further Enhancements Agenda
  • 3. 3 • Internet Reliability • Remote areas covered by field workers • Oil Drilling vessels using Satellite internet Why Offline?
  • 4. 4 Demo - Online Application ToDo Application https://github.com/UI5Con-Blore-OfflineUI5
  • 5. 5 Communications of an UI5 app ● Static resources (UI5 Library and UI5 App) ● Data calls to the server
  • 6. 6 SAP's recommendation for offline options with UI5 ● SCP Mobile Service (Cordova or Native)
  • 7. 7 How offline apps are built in the non-SAP world? ● Static resources (UI5 Library and UI5 App)  AppCache, ServiceWorker  Cordova, Electron ● Data calls to the server  LocalStorage, WebSQL, IndexedDB  PouchDB js library
  • 8. 8 Intro to PouchDB ● What is PouchDB? ● Json Document Store ● Offline First Approach ● Progressive Web App (PWA) ● History ● Relational Database – "Column and Rows" ● Non Relational Database – CouchDb ● Instead of Fixed Schema there is only mapping of keys to document
  • 9. 9 Advantages of PouchDB ● Supports using indexedDB ● Works across browsers ● Reduce query over the network ● Production version is just 46kb ● Supports WebSQL. So can be useful with Cordova ● PouchDB offers plugins for Cordova ● Ease of handling attachments ● Easy to learn ● Open Source
  • 10. 10 Browser and platform supporting PouchDB ● Firefox 29+ (Including Firefox OS and Firefox for Android) ● Chrome 30+ ● Safari 5+ ● Internet Explorer 10+ ● Opera 21+ ● Android 4.0+ ● iOS 7.1+ ● Windows Phone 8+
  • 11. 11 PouchDB APIs Using db.put( ) :- Create a new document or update an existing document. If the document already exists, you must specify its revision _rev.
  • 12. 12 PouchDB APIs ● Using db.get(docId, [options], [callback]) :- Retrieves a document, specified by docId.
  • 13. 13 PouchDB APIs Using db.bulkDocs(docs, [options], [callback]) :- Create, update or delete multiple documents.
  • 14. 14 PouchDB APIs Using db.allDocs([options], [callback]) :- Fetch multiple documents, indexed and sorted by the _id.
  • 15. 15 PouchDB APIs Using db.changes(options) :- A list of changes made to documents in the database, in the order they were made.
  • 16. 16 Architecture with PouchDB - Query SYNC UI5 App OData Model GATEWAY SERVER JSON Model
  • 17. 17 Architecture with PouchDB - Insert/Update/Delete Update Operations UI5 App OData Model GATEWAY SERVER Local Data Transactions JSON Model
  • 18. 18 Offline App Demo ● View PouchDB contents ● View sync call to the backend https://github.com/UI5Con-Blore-OfflineUI5
  • 19. 19 Using PouchDB - Adding to the UI5 project Download from https://pouchdb.com/ Add in manifest.json (sap.ui5 -> resources -> js)
  • 20. 20 Finding if Online Using local event handlers – online/offline ● No xhr calls ● GW need not be available Ping GW server (https://<gw server>/sap/bc/ping) ● Overhead for GW server
  • 21. 21 Using PouchDB - How many databases? One for storing the local data One for storing a list of pending transactions
  • 22. 22 Initial Query of ToDos - Pseudocode 1. Find the initial online status 2. Call Sync function
  • 23. 23 Sync Operation 1. Fetch changes to be synced from transactionDB 2. For each change, trigger deferred OData changes 3. 'submitChanges' - Single batch call with multiple changesets 4. Clear the pending count 5. Clear the entries in transactionDB 6. If online, reload ToDos from the server
  • 24. 24 Create operation ● Add to the pending transaction count ● Add new entry to the transactionDB ● Update the localDB, which in turn updates the JSON model to show the new entry in UI ● If online, trigger a sync
  • 25. 25 Update Operation ● Add to the pending transaction count ● Add new entry to the transactionDB ● Update the localDB. If it is 'Done' operation, then remove the entry from JSON model ● If online, trigger a sync
  • 26. 26 Enhancements ● Merging multiple changes on the same object ● Conflict Handling ● Using eTags ● Using AppCache, Service Worker for UI5 resources ● Using Cordova with PouchDB for a complete Offline app ● Using ServiceWorker/PouchDB for static value helps
  • 27. 27 Thanks Krishna Kishor Kammaje kkammaje@convergentis.com https://www.linkedin.com/in/kammaje/ Gaurav Shroff gshroff@convergentis.com https://www.linkedin.com/in/gaurav-shroff555/