LIBERATING WEB APPS
FROM THE SERVER
ALEX GYOSHEV

Front-end Engineer at Telerik Kendo UI
@agyoshev
AGENDA
Rationale
Offline storage
Caching apps
Backend as a service
Questions
WHY SEPARATE APPS FROM SERVERS?
REASONS TO SEPARATE

WORKFLOW team members can work on different functionality
ARCHITECTURE concerns are separated
PERFORM...
REASONS TO SEPARATE
EASIER TESTING

psscet(
ot.rae{
tte "yltl pn"
il: M ite oy,
bd:"redhpi mgc
oy Finsi s ai"
} fnto sces)...
REASONS TO SEPARATE
EASIER TESTING

psscet(
ot.rae{
tte "yltl pn"
il: M ite oy,
bd:"redhpi mgc
oy Finsi s ai"
} fnto sces)...
REASON TO SEAPARATE #1

WE LIVE IN A DISCONNECTED WORLD.
Reception when on the road
Roaming charges
OFFLINE FIRST

http://offlinefirst.org/
DEMO

CASHWISE: TRACKING EXPENSES
App: cashwise.herokuapp.com
Source: github.com/gyoshev/cashwise
Kendo UI Mobile + Teleri...
OFFLINE STORAGE
OFFLINE STORAGE
BROWSER SUPPORT
OFFLINE STORAGE
ABSTRACTIONS

Use the same API across all devices
IndexedDB-WebSQL adapter
Mozilla LocalForage
CACHING APPS
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...
CACHING APPS

APPCACHE: HARD TO WORK WITH
app is always loaded from appcache
files are refreshed when manifest changes
man...
CACHING APPS

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

NODE.JS DEVELOPMENT WORKFLOW
Generate manifest on server start
Use supervisor / forever / nodemon
to reload ...
CACHING APPS

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

SERVICEWORKER (W3C DRAFT)
/ idxhm
/ ne.tl
nvgtrsrieokrrgse(/okrj";
aiao.evcWre.eitr"wre.s)
/ wre.s
/ okrj
ti...
BACKEND AS A SERVICE (BAAS)
BACKEND AS A SERVICE (BAAS)
WHAT DOES IT LOOK LIKE?

/ ata ipeetto
/ cul mlmnain
bcedPsscet =fnto(aa dn){
akn.ot.rae
ucind...
BACKEND AS A SERVICE (BAAS)
PROS AND CONS

Pro: Outsource scalability
Pro: Get features out of the box
(social, auth, push...
BACKEND AS A SERVICE (BAAS)
#UXPROTIP

Be sure to notify your users about sync status
vrudtCnetoSau =fnto( {
a paeoncintts...
QUESTIONS?

@AGYOSHEV / ALEX@GYOSHEV.NET
Kendo UI Mobile + Basic Backend Services
for free at
telerik.com/platform
Upcoming SlideShare
Loading in …5
×

Liberating web apps from the server

1,549 views

Published on

Reasons and techniques for creating offline apps

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,549
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Liberating web apps from the server

  1. 1. LIBERATING WEB APPS FROM THE SERVER ALEX GYOSHEV Front-end Engineer at Telerik Kendo UI @agyoshev
  2. 2. AGENDA Rationale Offline storage Caching apps Backend as a service Questions
  3. 3. WHY SEPARATE APPS FROM SERVERS?
  4. 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. 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. 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. 7. REASON TO SEAPARATE #1 WE LIVE IN A DISCONNECTED WORLD. Reception when on the road Roaming charges
  8. 8. OFFLINE FIRST http://offlinefirst.org/
  9. 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. 10. OFFLINE STORAGE
  11. 11. OFFLINE STORAGE BROWSER SUPPORT
  12. 12. OFFLINE STORAGE ABSTRACTIONS Use the same API across all devices IndexedDB-WebSQL adapter Mozilla LocalForage
  13. 13. CACHING APPS
  14. 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. 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. 16. CACHING APPS APPCACHE: WORKS REALLY GOOD Previous version of cashwise works fine 1 year after server burned down
  17. 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. 18. CACHING APPS SERVICEWORKER (W3C DRAFT) github.com/slightlyoff/ServiceWorker From declarative to imperative From pages to apps
  19. 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. 20. BACKEND AS A SERVICE (BAAS)
  21. 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. 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. 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. 24. QUESTIONS? @AGYOSHEV / ALEX@GYOSHEV.NET Kendo UI Mobile + Basic Backend Services for free at telerik.com/platform

×