Ola Gasidlo - Developer for +10 years - Core Member of Hoodie - - - PowerPoint PPT Presentation

▶
ola gasidlo
SMART_READER_LITE
LIVE PREVIEW

Ola Gasidlo - Developer for +10 years - Core Member of Hoodie - - - PowerPoint PPT Presentation

Dec 18, 2022 867 likes •2.23k views

Say Hello To Offline First How to build applications for the real world we <3 GOTOBerlin Ola Gasidlo - Developer for +10 years - Core Member of Hoodie - Co-Organizer of OTSConf && RejectJS twitter: @misprintedtype Agenda 1. What

slide-1
SLIDE 1

Say Hello To Offline First

How to build applications for the real world

we <3 GOTOBerlin

slide-2
SLIDE 2

Ola Gasidlo

  • Developer for +10 years
  • Core Member of Hoodie
  • Co-Organizer of OTSConf && RejectJS

twitter: @misprintedtype

slide-3
SLIDE 3

Agenda

  • 1. What & why?
  • 2. Problems
  • 3. New approach
  • 4. Implementation

@misprintedtype

slide-4
SLIDE 4

What & why?

@misprintedtype

slide-5
SLIDE 5

The internet turned 25 last year!

@misprintedtype

slide-6
SLIDE 6

We grew up.

@misprintedtype

slide-7
SLIDE 7

@misprintedtype

slide-8
SLIDE 8

amount of mobile-only web users is out of reach

@misprintedtype

slide-9
SLIDE 9

Tell me...

@misprintedtype

slide-10
SLIDE 10

@misprintedtype

slide-11
SLIDE 11
slide-12
SLIDE 12
slide-13
SLIDE 13

Problems

@misprintedtype

slide-14
SLIDE 14

@misprintedtype

slide-15
SLIDE 15

@misprintedtype

slide-16
SLIDE 16
  • ffline > error handling

@misprintedtype

slide-17
SLIDE 17

inform user

@misprintedtype

slide-18
SLIDE 18

@misprintedtype

slide-19
SLIDE 19

build trust

@misprintedtype

slide-20
SLIDE 20

http://branch.com/b/redesigning-the-save-symbol-let-s-do-this

slide-21
SLIDE 21

http://branch.com/b/redesigning-the-save-symbol-let-s-do-this

slide-22
SLIDE 22
  • rganise data

@misprintedtype

slide-23
SLIDE 23

@misprintedtype

slide-24
SLIDE 24

decide

@misprintedtype

slide-25
SLIDE 25
slide-26
SLIDE 26
slide-27
SLIDE 27

@misprintedtype

slide-28
SLIDE 28

@misprintedtype

slide-29
SLIDE 29

@misprintedtype

slide-30
SLIDE 30

@misprintedtype

slide-31
SLIDE 31

@misprintedtype

?

slide-32
SLIDE 32

@misprintedtype

slide-33
SLIDE 33

@misprintedtype

slide-34
SLIDE 34

@misprintedtype

slide-35
SLIDE 35

@misprintedtype

slide-36
SLIDE 36

@misprintedtype

slide-37
SLIDE 37

@misprintedtype

?

slide-38
SLIDE 38

@misprintedtype

?

slide-39
SLIDE 39

@misprintedtype

?

slide-40
SLIDE 40

@misprintedtype

slide-41
SLIDE 41

@misprintedtype

?

slide-42
SLIDE 42

@misprintedtype

slide-43
SLIDE 43
slide-44
SLIDE 44
slide-45
SLIDE 45

New Approaches

@misprintedtype

slide-46
SLIDE 46

Rethink!

(but how?)

@misprintedtype

slide-47
SLIDE 47

http://hood.ie

slide-48
SLIDE 48
slide-49
SLIDE 49
slide-50
SLIDE 50
slide-51
SLIDE 51
slide-52
SLIDE 52
slide-53
SLIDE 53
slide-54
SLIDE 54

Implementation

@misprintedtype

slide-55
SLIDE 55

files data

slide-56
SLIDE 56

files data

slide-57
SLIDE 57

Manifest

@misprintedtype

slide-58
SLIDE 58

App Cache

is a douchebag!

http://alistapart.com/article/application-cache-is-a-douchebag

slide-59
SLIDE 59

App Manifest

  • 1. Files always come from the cache

(also if you are online!)

@misprintedtype

slide-60
SLIDE 60

App Manifest

  • 2. App Cache only updates if manifest changed

@misprintedtype

slide-61
SLIDE 61

App Manifest

  • 3. App Cache is an additional cache

@misprintedtype

slide-62
SLIDE 62

App Manifest

  • 4. Non-cached resources will not load

@misprintedtype

slide-63
SLIDE 63

App Cache nanny

https://www.npmjs.org/package/appcache-nanny

@misprintedtype

slide-64
SLIDE 64

Work it!

@misprintedtype

slide-65
SLIDE 65

Web what?!

@misprintedtype

slide-66
SLIDE 66

web worker

  • HTML5 feature
  • runs JS in browser

@misprintedtype

slide-67
SLIDE 67

@misprintedtype

slide-68
SLIDE 68

DOM large API data UI Events

@misprintedtype

slide-69
SLIDE 69

@misprintedtype

slide-70
SLIDE 70

async !== concurrency

@misprintedtype

slide-71
SLIDE 71

@misprintedtype

slide-72
SLIDE 72

@misprintedtype

slide-73
SLIDE 73

@misprintedtype

slide-74
SLIDE 74

@misprintedtype

slide-75
SLIDE 75

Encoding && decoding large strings Complex mathematical calculations Prefetching && caching data

@misprintedtype

slide-76
SLIDE 76
slide-77
SLIDE 77

Network requests Manipulation on localStorage Image manipulation

@misprintedtype

slide-78
SLIDE 78
slide-79
SLIDE 79

real-time text analysis processing video or audio data Polling web services

@misprintedtype

slide-80
SLIDE 80

@misprintedtype


 // window
 window.alert(`Work it!`); // document
 document.getElementById(`danceParty`); // parent
 window.globalFunction();

// worker.js - no access

slide-81
SLIDE 81

no libs depending on these objects, for example

@misprintedtype

slide-82
SLIDE 82

@misprintedtype / @lewiscowper

slide-83
SLIDE 83

@misprintedtype


 // navigator
 navigator.onLine; // location
 location.href; // xhr
 xmlhttp.send();

// worker.js

slide-84
SLIDE 84

@misprintedtype


 // appCache
 applicationCache.status; // import
 import `worker-script`;

// worker.js

slide-85
SLIDE 85

@misprintedtype / @lewiscowper

slide-86
SLIDE 86

Web workers

  • amazing litte helpers

@misprintedtype

slide-87
SLIDE 87
slide-88
SLIDE 88
slide-89
SLIDE 89
slide-90
SLIDE 90

2 tyqes of workers

  • dedicated workers
  • shared workers

@misprintedtype

slide-91
SLIDE 91

dedicated worker

@misprintedtype

slide-92
SLIDE 92

shared worker

@misprintedtype

slide-93
SLIDE 93

@misprintedtype


 function areWorkersAvailable() {

return !!window.Worker; }

// available?

slide-94
SLIDE 94

@misprintedtype


 // app.js
 var worker = new Worker(`task.js`);

// run worker run!

slide-95
SLIDE 95

@misprintedtype

slide-96
SLIDE 96

?

@misprintedtype

slide-97
SLIDE 97
slide-98
SLIDE 98

demo


 // map.js


http://slides.html5rocks.com/#web-workers

@misprintedtype

slide-99
SLIDE 99

more demot


 // examples.js


http://greenido.github.io/Web-Workers-Examples-/

@misprintedtype

slide-100
SLIDE 100

@misprintedtype / @lewiscowper

slide-101
SLIDE 101

@misprintedtype / @lewiscowper

slide-102
SLIDE 102
slide-103
SLIDE 103
slide-104
SLIDE 104

@misprintedtype / @lewiscowper

SPWA MPS

slide-105
SLIDE 105

Service Worker

@misprintedtype

slide-106
SLIDE 106
slide-107
SLIDE 107

Service Worker


 Why?

@misprintedtype

slide-108
SLIDE 108

https://jakearchibald.com/2014/offline-cookbook/

slide-109
SLIDE 109

https://jakearchibald.com/2014/offline-cookbook/

slide-110
SLIDE 110
slide-111
SLIDE 111

Service Worker


 shut down at end of events

@misprintedtype

slide-112
SLIDE 112

Service Worker


 scriptable caches

@misprintedtype

slide-113
SLIDE 113

Service Worker


 promises

@misprintedtype

slide-114
SLIDE 114

SW lifecycle




@misprintedtype

slide-115
SLIDE 115

http://www.html5rocks.com/en/tutorials/service-worker/introduction/

slide-116
SLIDE 116

http://www.html5rocks.com/en/tutorials/service-worker/introduction/

slide-117
SLIDE 117

http://www.html5rocks.com/en/tutorials/service-worker/introduction/

slide-118
SLIDE 118




https://jakearchibald.github.io/isserviceworkerready/

@misprintedtype

slide-119
SLIDE 119

Service Worker

https://github.com/slightlyoff/ServiceWorker https://jakearchibald.github.io/isserviceworkerready/

https://www.youtube.com/watch?v=SmZ9XcTpMS4&list=PL37ZVnwpeshGPw2RfUGNQbPsU_WGpi05J

@misprintedtype

slide-120
SLIDE 120
  • ffline cookbook




http://jakearchibald.com/2014/offline-cookbook/

@misprintedtype

slide-121
SLIDE 121

files data

slide-122
SLIDE 122

files data

slide-123
SLIDE 123

Do not harm humans!

(first law of robotics)

@misprintedtype

slide-124
SLIDE 124

Do not lose data!

(first law of offline first)

@misprintedtype

slide-125
SLIDE 125

PouchDB + CouchDB = <3

@misprintedtype

slide-126
SLIDE 126
slide-127
SLIDE 127
slide-128
SLIDE 128

CouchDB

@misprintedtype

slide-129
SLIDE 129

@misprintedtype

Stephans data
 (share with Hannes) Hannes data Stephans partial data (replicated)

slide-130
SLIDE 130

@misprintedtype

slide-131
SLIDE 131

PouchDB

@misprintedtype

?

slide-132
SLIDE 132

PouchDB

browser storage limitation confirm Firefox IndexedDB unlimited y Chrome / Opera / Android 4.4+ IndexedDB % of storage y IE 10+ SQLite 250MB n Mobile Safari WebSQL 50MB n Safari WebSQL 5MB -> 500MB y Android 4.3 and lower IndexedDB 200MB n

slide-133
SLIDE 133
slide-134
SLIDE 134

hoodie <3 you

@misprintedtype / @hoodiehq