Offline Sync for Progressive Web Apps Workshop at MobileMonday NYC API-First Hackathon

Slide 1

Slide 1 text

Bradley Holt, Developer Advocate Saturday, June 3, 2017 Offline Sync for Progressive Web Apps MobileMonday NYC API-First Hackathon ⌨ ⚙

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Prerequisite Knowledge & Skills §  Ability to write JavaScript at a novice level, at minimum §  A basic understanding of JavaScript promises https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html §  A basic understanding of HTML §  Ability to work with an application programming interface (API) https://github.com/bradley-holt/shop

Slide 4

Slide 4 text

Key Concepts

Slide 5

Slide 5 text

Progressive Web Apps A Progressive Web App provides both the discoverability of a web app and the reliable, fast, and engaging user experience of a native mobile app https://www.pokedex.org/

Slide 6

Slide 6 text

https://www.pwastats.com/

Slide 7

Slide 7 text

Polymer Libraries, tools, and patterns for building Progressive Web Apps using web platform features such as Web Components, Service Workers, and HTTP/2 https://www.polymer-project.org/

Slide 8

Slide 8 text

Web Components Open standard for components and widgets that are customizable, reusable, and encapsulated https://www.webcomponents.org/

Slide 9

Slide 9 text

Polymer App Toolbox Components, tools, and templates for building Progressive Web Apps with Polymer and Web Components https://www.polymer-project.org/2.0/toolbox/

Slide 10

Slide 10 text

The Polymer Shop App A demo Progressive Web App built using Polymer App Toolbox https://github.com/Polymer/shop

Slide 11

Slide 11 text

Offline First Progressive Web Apps must be Offline First in order to provide a reliable, fast, and engaging user experience regardless of network connectivity No Signal by Steve Hodgson, on Flickr (CC BY-SA 2.0).

Slide 12

Slide 12 text

Service Workers Use the Cache API (part of the Service Workers specification) to make URL addressable resources and content available while offline Service Workers fetch diagram by Mozilla Contributors (CC-BY-SA 2.5).

Slide 13

Slide 13 text

IndexedDB Use IndexedDB or localForage (a polyfill that uses WebSQL or localStorage if IndexedDB is not supported) to make application data available while offline https://caniuse.com/#feat=indexeddb

Slide 14

Slide 14 text

PouchDB An open source JavaScript database that syncs with anything that implements the CouchDB Replication Protocol https://pouchdb.com/

Slide 15

Slide 15 text

Apache CouchDB An open source document database featuring an HTTP API, JSON documents, clustering capabilities for horizontal scalability, and peer-to-peer replication http://couchdb.apache.org/

Slide 16

Slide 16 text

IBM Cloudant A fully-managed database-as-a-service (DBaaS) based on Apache CouchDB with additional full text and geospatial search capabilities https://cloudant.com/

Slide 17

Slide 17 text

Hoodie An open source backend framework for Offline First applications, leveraging Apache CouchDB on the server and PouchDB on the client http://hood.ie/

Slide 18

Slide 18 text

Workshop Outline 1.  Install and run the Polymer Shop app 2.  Install Hoodie 3.  Configure Hoodie, optionally using Apache CouchDB or IBM Cloudant 4.  Replace IndexedDB with the Hoodie store, which is a wrapper for PouchDB 5.  Integrate with the Hoodie account API, allowing users to sign up, sign in, and sign out 6.  Demonstrate the offline sync capabilities of Hoodie and PouchDB https://github.com/bradley-holt/shop

Slide 19

Slide 19 text

Initial Set Up ⌨

Slide 20

Slide 20 text

Check for Node.js Version 4 or Higher $ node -v! v7.10.0!

Slide 21

Slide 21 text

Install Node.js (if not already installed) § Download https://nodejs.org/en/download/ –or– § Install via a package manager https://nodejs.org/en/download/package-manager/

Slide 22

Slide 22 text

Install Bower $ npm install -g bower! https://github.com/bradley-holt/shop

Slide 23

Slide 23 text

Install Polymer CLI $ npm install -g polymer-cli! https://github.com/bradley-holt/shop

Slide 24

Slide 24 text

Install the Polymer Shop App $ git clone https://github.com/bradley-holt/shop.git! $ cd shop! $ git checkout upstream! $ bower install! https://github.com/bradley-holt/shop

Slide 25

Slide 25 text

Start the Polymer Development Server $ polymer serve! info: Files in this directory are available under the following URLs! applications: http://127.0.0.1:8081! reusable components: http://127.0.0.1:8081/components/shop/! https://github.com/bradley-holt/shop

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Install Hoodie

Slide 28

Slide 28 text

Create a package.json File $ npm init! ! package name: (shop) ! version: (1.0.0) 1.1.2! description: ! entry point: (service-worker.js) index.js! test command: ! git repository: (https://github.com/bradley-holt/shop.git) ! keywords: ! license: (ISC) BSD-3-Clause! https://github.com/bradley-holt/shop

Slide 29

Slide 29 text

Install Hoodie $ npm install hoodie --save! https://github.com/bradley-holt/shop

Slide 30

Slide 30 text

Start Hoodie $ npm start! ! > shop@1.1.2 start /Users/bradleydholt/shop! > hoodie! ! Your Hoodie app has started on: http://localhost:8080! Stop server with control + c! https://github.com/bradley-holt/shop

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

Move Polymer App to public Directory (1/2) $ rm app.yaml! $ mkdir public! $ mv bower.json bower_components data images index.html manifest.json polymer.json service-worker.js src sw-precache-config.js test public! https://github.com/bradley-holt/shop

Slide 33

Slide 33 text

Move Polymer App to public Directory (2/2) .! ├── README.md! ├── node_modules! ├── package.json! └── public! ├── bower.json! ├── bower_components! ├── data! ├── images! ├── index.html! ├── manifest.json! ├── polymer.json! ├── service-worker.js! ├── src! ├── sw-precache-config.js! └── test! https://github.com/bradley-holt/shop

Slide 34

Slide 34 text

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

Install Bower Dependencies via npm install https://github.com/bradley-holt/shop

Slide 37

Slide 37 text

Test npm install! $ npm install! ! > shop@1.1.2 postinstall /Users/bradleydholt/shop! > cd public && bower install! https://github.com/bradley-holt/shop

Slide 38

Slide 38 text

Configure Hoodie ⚙

Slide 39

Slide 39 text

Hoodie Configuration Options Hoodie can be configured through command line arguments, environment variables, a .hoodierc file, and/or a hoodie key in package.json! http://docs.hood.ie/en/latest/guides/configuration.html

Slide 40

Slide 40 text

Set the Admin Password in .hoodierc! {! "adminPassword": "password"! }! https://github.com/bradley-holt/shop

Slide 41

Slide 41 text

Hoodie Admin Dashboard Create, view, and edit user accounts with the Hoodie Admin Dashboard https://github.com/bradley-holt/shop

Slide 42

Slide 42 text

Hoodie Store API

Slide 43

Slide 43 text

Create Hoodie Polymer Element https://github.com/bradley-holt/shop

Slide 44

Slide 44 text

Import Hoodie Polymer Component https://github.com/bradley-holt/shop

Slide 45

Slide 45 text

Replace localStorage with Hoodie Store (1/9) $ cd public! $ bower uninstall app-storage --save! $ cd ..! https://github.com/bradley-holt/shop

Slide 46

Slide 46 text

Replace localStorage with Hoodie Store (2/9) https://github.com/bradley-holt/shop Note: This line will have been removed by the previous command.

Slide 47

Slide 47 text

Replace localStorage with Hoodie Store (3/9) https://github.com/bradley-holt/shop

Slide 48

Slide 48 text

Replace localStorage with Hoodie Store (4/9) https://github.com/bradley-holt/shop

Slide 49

Slide 49 text

Replace localStorage with Hoodie Store (5/9) https://github.com/bradley-holt/shop

Slide 50

Slide 50 text

Replace localStorage with Hoodie Store (6/9) https://github.com/bradley-holt/shop

Slide 51

Slide 51 text

Replace localStorage with Hoodie Store (7/9) https://github.com/bradley-holt/shop

Slide 52

Slide 52 text

Replace localStorage with Hoodie Store (8/9) https://github.com/bradley-holt/shop

Slide 53

Slide 53 text

Replace localStorage with Hoodie Store (9/9) https://github.com/bradley-holt/shop

Slide 54

Slide 54 text

Hoodie Account API

Slide 55

Slide 55 text

Create Sign Up Page (1/2) https://github.com/bradley-holt/shop

Slide 56

Slide 56 text

Create Sign Up Page (2/2) https://github.com/bradley-holt/shop

Slide 57

Slide 57 text

Create Sign In Page (1/2) https://github.com/bradley-holt/shop

Slide 58

Slide 58 text

Create Sign In Page (2/2) https://github.com/bradley-holt/shop

Slide 59

Slide 59 text

Add Sign Up and Sign In Views to App https://github.com/bradley-holt/shop

Slide 60

Slide 60 text

Create Hoodie Account Component https://github.com/bradley-holt/shop

Slide 61

Slide 61 text

Add Hoodie Account Component to App (1/2) https://github.com/bradley-holt/shop

Slide 62

Slide 62 text

Add Hoodie Account Component to App (2/2) https://github.com/bradley-holt/shop

Slide 63

Slide 63 text

Offline Sync

Slide 64

Slide 64 text

Offline Sync For signed in users, Hoodie store is live sync'd with the server automatically, cleared on sign out, and available to the user again after sign in

Slide 65

Slide 65 text

What's next?

Slide 66

Slide 66 text

Next Steps for the Shop App §  Fix bug with cart sync'ing from the server §  Handle replication conflicts §  Use Apache CouchDB or the Cloudant Developer Edition for local development §  Fix Polymer builds §  Deploy to IBM Bluemix and use IBM Cloudant §  Consider separating the backend and frontend application codebases

Slide 67

Slide 67 text

Offline Camp From the Catskill Mountains, to the Central Coast of California, to Berlin, we're building the Offline First community, one campfire at a time Image credit: Aaron Ross

Slide 68

Slide 68 text

Get Involved in the Offline First Community! §  Join the Offline First Slack team: offlinefirst.org/chat/ §  Follow @OfflineCamp on Twitter §  Read the Offline Camp Medium publication: medium.com/offline-camp §  Join us at an upcoming Offline Camp: http://offlinefirst.org/camp/

Slide 69

Slide 69 text

Further Reading and Resources §  Offline Sync for Progressive Web Apps – IBM Watson Data Lab §  Voice of InterConnect – IBM Watson Data Lab §  Deploying the Hoodie Tracker demo app to IBM Bluemix §  Hoodie documentation on storing data with IBM Cloudant §  Offline Camp Medium publication §  Offline First resources §  Offline First on YouTube §  Make&Model (consultancy specializing in user experience design for Offline First apps) §  Neighbourhoodie Software (IBM Business Partner specializing in architecting Offline First apps)