Building Offline First apps with Hoodie

Slide 1

Slide 1 text

OFFLINE FIRST APPS WITH HOODIE @gr2m | js.la March’17

Slide 2

Slide 2 text

HI, I’M GREGOR! @GR2M ! HOOD.IE ! OFFLINEFIRST.ORG ! NEIGHBOURHOOD.IE @gr2m | js.la March’17

Slide 3

Slide 3 text

DEMO ! @gr2m | js.la March’17

Slide 4

Slide 4 text

RECAP ! @gr2m | js.la March’17

Slide 5

Slide 5 text

$ mdkir sweet.la $ cd sweet.la # creates package.json $ npm init -y # installs hoodie and sets "start" script $ npm install --save hoodie $ npm start @gr2m | js.la March’17

Slide 6

Slide 6 text

Load Hoodie Client Data hoodie.store.add({name: 'honey'}) hoodie.store.on('change', renderItems) Account hoodie.account.signIn({username: 'foo', password: 'secret'}) @gr2m | js.la March’17

Slide 7

Slide 7 text

hoodie.account.signUp() hoodie.account.signIn() hoodie.account.signOut() hoodie.account.destroy() hoodie.account.on() hoodie.store.add() hoodie.store.find() hoodie.store.findOrAdd() hoodie.store.findAll() hoodie.store.update() hoodie.store.updateOrAdd() hoodie.store.updateAll() hoodie.store.remove() hoodie.store.removeAll() hoodie.store.pull() hoodie.store.push() hoodie.store.sync() hoodie.store.connect() hoodie.store.disconnect() hoodie.store.on() hoodie.connectionStatus.startChecking() hoodie.connectionStatus.stopChecking() hoodie.connectionStatus.on() @gr2m | js.la March’17

Slide 8

Slide 8 text

HOW DOES IT WORK? @gr2m | js.la March’17

Slide 9

Slide 9 text

@gr2m | js.la March’17

Slide 10

Slide 10 text

@gr2m | js.la March’17

Slide 11

Slide 11 text

@gr2m | js.la March’17

Slide 12

Slide 12 text

@gr2m | js.la March’17

Slide 13

Slide 13 text

@gr2m | js.la March’17

Slide 14

Slide 14 text

@gr2m | js.la March’17

Slide 15

Slide 15 text

@gr2m | js.la March’17

Slide 16

Slide 16 text

@gr2m | js.la March’17

Slide 17

Slide 17 text

@gr2m | js.la March’17

Slide 18

Slide 18 text

HOODIE IS OPEN SOURCE ▸ built with JavaScript, hapi, CouchDB, PouchDB ▸ extendable with app specific or npm plugins ▸ "most welcoming Open Source community" 1 1 many people say so :) @gr2m | js.la March’17

Slide 19

Slide 19 text

! HOOD.IE ! GITHUB.COM/HOODIEHQ ! TWITTER.COM/HOODIEHQ @gr2m | js.la March’17

Slide 20

Slide 20 text

OFFLINE FIRST APPS WITH HOODIE @gr2m | js.la March’17

Slide 21

Slide 21 text

OFFLINE FIRST APPS WITH HOODIE @gr2m | js.la March’17

Slide 22

Slide 22 text

OFFLINE FIRST IS AN APPROACH TO BUILD APPS THAT ALWAYS WORK, WITHOUT ANY LOADING BARS, UNDER ANY NETWORK CONDITIONS. @gr2m | js.la March’17

Slide 23

Slide 23 text

WHAT MOBILE FIRST WAS TO UI OFFLINE FIRST IS TO CONNECTIVITY @gr2m | js.la March’17

Slide 24

Slide 24 text

OFFLINE FIRST IS RELIABLE PERFORMANCE @gr2m | js.la March’17

Slide 25

Slide 25 text

OFFLINE FIRST TECHNOLOGY @gr2m | js.la March’17

Slide 26

Slide 26 text

1. ASSETS 2. DATA @gr2m | js.la March’17

Slide 27

Slide 27 text

1. ASSETS ▸ Install from App Store ▸ Service Worker ▸ AppCache (Deprecated) ▸ ! Think of app updates @gr2m | js.la March’17

Slide 28

Slide 28 text

2. DATA ▸ Store data offline ▸ Sync ▸ ! Watch out for conflicts / data loss @gr2m | js.la March’17

Slide 29

Slide 29 text

! REMEMBER ! FRIENDS DON’T LET FRIENDS BUILT THEIR OWN SYNC ENGINE @gr2m | js.la March’17

Slide 30

Slide 30 text

OFFLINE FIRST DESIGN @gr2m | js.la March’17

Slide 31

Slide 31 text

OFFLINE FIRST RULE #1 OFFLINE != ERROR @gr2m | js.la March’17

Slide 32

Slide 32 text

OFFLINE FIRST JOY #1 CONVERSION ! @gr2m | js.la March’17

Slide 33

Slide 33 text

OFFLINE FIRST JOY #2 SAVE? ALL. THE. TIME. @gr2m | js.la March’17

Slide 34

Slide 34 text

OFFLINE FIRST JOY #3 SERVER DOWN? MAINTENANCE? ¯\_(ϑ)_/¯ @gr2m | js.la March’17

Slide 35

Slide 35 text

OFFLINE FIRST JOY #4 LATENCY? ZERO. @gr2m | js.la March’17

Slide 36

Slide 36 text

OFFLINE FIRST JOY #5 SECURITY ! ▸ Intranet apps to go ▸ local encryption @gr2m | js.la March’17

Slide 37

Slide 37 text

OFFLINE FIRST VIABILITY @gr2m | js.la March’17

Slide 38

Slide 38 text

UBIQUITOUS CONNECTIVITY IS A MYTH™ @gr2m | js.la March’17

Slide 39

Slide 39 text

OFFLINE FIRST TRIVIA LTE IN THE US SLOWED DOWN BY 50% IN 20162 2 twinprime.com/lte-has-slowed-by-50-in-the-us/ @gr2m | js.la March’17

Slide 40

Slide 40 text

OFFLINE FIRST TRIVIA ALMOST 60% OF MOBILE IS 2G3 3 http://www.gsma.com/mobileeconomy/ @gr2m | js.la March’17

Slide 41

Slide 41 text

OFFLINE FIRST TRIVIA 100 MILLION PEOPLE CAME ONLINE IN INDIA IN 20164 4 http://www.internetlivestats.com/internet-users-by-country/ @gr2m | js.la March’17

Slide 42

Slide 42 text

OFFLINE FIRST TRIVIA DO YOU KNOW WHY THE OFFLINE DINOSAUR IS SO CUTE? @gr2m | js.la March’17

Slide 43

Slide 43 text

Because you see it so much. @gr2m | js.la March’17

Slide 44

Slide 44 text

! Questions? @gr2m | js.la March’17

Slide 45

Slide 45 text

RESOURCES http://offlinefirst.org/ https://medium.com/offline-camp http://hood.ie/blog/say-hello-to-offline-first.html https://nolanlawson.com/2016/10/13/progressive-enhancement-isnt- dead-but-it-smells-funny/ https://pwa.rocks @gr2m | js.la March’17