Reasons and techniques for creating offline apps

1. LIBERATING WEB APPS
FROM THE SERVER
ALEX GYOSHEV
Front-end Engineer at Telerik Kendo UI
@agyoshev

2. AGENDA
Rationale
Offline storage
Caching apps
Backend as a service
Questions

3. WHY SEPARATE APPS FROM SERVERS?

4. REASONS TO SEPARATE
WORKFLOW team members can work on different functionality
ARCHITECTURE concerns are separated
PERFORMANCE cache is faster than any connection
ACCESSIBILITY a person with no connection is still a person
ECONOMICS your app can compete with native ones

5. REASONS TO SEPARATE
EASIER TESTING
psscet(
ot.rae{
tte "yltl pn"
il: M ite oy,
bd:"redhpi mgc
oy Finsi s ai"
} fnto sces){
, ucin ucs(
/ pse
/ otd
};
)
/ ts mc
/ et ok
bcedPsscet =fnto(aa dn){
akn.ot.rae
ucindt, oe
o(aatte;
kdt.il)
o(aabd)
kdt.oy;
dn(;
oe)
}
;

6. REASONS TO SEPARATE
EASIER TESTING
psscet(
ot.rae{
tte "yltl pn"
il: M ite oy,
bd:"redhpi mgc
oy Finsi s ai"
} fnto sces){
, ucin ucs(
/ pse
/ otd
};
)
/ ata ipeetto
/ cul mlmnain
bcedPsscet =fnto(aa dn){
akn.ot.rae
ucindt, oe
$ps(
.ot{
ul "psscet"
r: /ot/rae,
dt:dt,
aa aa
sces dn
ucs: oe
};
)
}
;

7. REASON TO SEAPARATE #1
WE LIVE IN A DISCONNECTED WORLD.
Reception when on the road
Roaming charges

8. OFFLINE FIRST
http://offlinefirst.org/

9. DEMO
CASHWISE: TRACKING EXPENSES
App: cashwise.herokuapp.com
Source: github.com/gyoshev/cashwise
Kendo UI Mobile + Telerik Backend Services
Git tags for each part of the talk

10. OFFLINE STORAGE

11. OFFLINE STORAGE
BROWSER SUPPORT

12. OFFLINE STORAGE
ABSTRACTIONS
Use the same API across all devices
IndexedDB-WebSQL adapter
Mozilla LocalForage

13. CACHING APPS

14. CACHING APPS
APPCACHE
CCEMNFS
AH AIET
/oopg
lg.n
/p.s
apcs
ht:/oejur.o/qey11..i.s
tp/cd.qeycmjur-.10mnj
/p.s
apj
<dcyehm>
!otp tl
<tlmnfs=cceapah"
hm aiet"ah.pcce>
<ed
ha>
<il>yAp/il>
tteM p<tte
<ikrl"tlset he=apcs>
ln e=syehe" rf"p.s"
<ha>
/ed
<oy
bd>
<citsc"tp/cd.qeycmjur-.10mnj"<srp>
srp r=ht:/oejur.o/qey11..i.s>/cit
<citsc"p.s>/cit
srp r=apj"<srp>
<bd>
/oy
<hm>
/tl

15. CACHING APPS
APPCACHE: HARD TO WORK WITH
app is always loaded from appcache
files are refreshed when manifest changes
many other caveats
chrome://appcache-internals/ &
about:cache are your friends!
get used to refreshing twice
go home, AppCache, you're drunk

16. CACHING APPS
APPCACHE: WORKS REALLY GOOD
Previous version of cashwise
works fine 1 year after
server burned down

17. CACHING APPS
NODE.JS DEVELOPMENT WORKFLOW
Generate manifest on server start
Use supervisor / forever / nodemon
to reload app when files change
sprio - 'tlj,s'- wbj
uevsr e hm,scs - e.s

18. CACHING APPS
SERVICEWORKER (W3C DRAFT)
github.com/slightlyoff/ServiceWorker
From declarative to imperative
From pages to apps

19. CACHING APPS
SERVICEWORKER (W3C DRAFT)
/ idxhm
/ ne.tl
nvgtrsrieokrrgse(/okrj";
aiao.evcWre.eitr"wre.s)
/ wre.s
/ okrj
ti.eso =1
hsvrin
;
ti.dEetitnr"ec" fnto(){
hsadvnLsee(fth, ucine
i (.eus.r = "tp/eapecmdt.sn){
f erqetul = ht:/xml.o/aajo"
ersodihnwRsos(
.epnWt(e epne{
sauCd:20
ttsoe 0,
bd:JO.tigf( rsls {/ ..* }}
oy SNsrniy{ eut:
* . /
)
})
);
}
};
)

20. BACKEND AS A SERVICE (BAAS)

21. BACKEND AS A SERVICE (BAAS)
WHAT DOES IT LOOK LIKE?
/ ata ipeetto
/ cul mlmnain
bcedPsscet =fnto(aa dn){
akn.ot.rae
ucindt, oe
$ps(
.ot{
ul "psscet"
r: /ot/rae,
dt:dt,
aa aa
sces dn
ucs: oe
};
)
}
;
psscet(
ot.rae{
tte "yltl pn"
il: M ite oy,
bd:"redhpi mgc
oy Finsi s ai"
} fnto sces){
, ucin ucs(
/ pse
/ otd
};
)

22. BACKEND AS A SERVICE (BAAS)
PROS AND CONS
Pro: Outsource scalability
Pro: Get features out of the box
(social, auth, push notifications)
Pro: Reduce own codebase
Pro: Overall faster development
Con: Dependency.
Con: Remote. Dependency.

23. BACKEND AS A SERVICE (BAAS)
#UXPROTIP
Be sure to notify your users about sync status
vrudtCnetoSau =fnto( {
a paeoncintts
ucin)
vrsau =nvgtroLn ?'nie :'fln'
a tts
aiao.nie
oln'
ofie;
dcmn.eEeetyd'tts)casae=sau;
ouetgtlmnBI(sau'.lsNm
tts
}
;
wno.dEetitnr'nie, udtCnetoSau)
idwadvnLsee(oln'
paeoncintts;
wno.dEetitnr'fln' udtCnetoSau)
idwadvnLsee(ofie, paeoncintts;

24. QUESTIONS?
@AGYOSHEV / ALEX@GYOSHEV.NET
Kendo UI Mobile + Basic Backend Services
for free at
telerik.com/platform