O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
OFFLINE FIRST
Better UX, faster apps
Software Engineer
PhD in Computer Science
Codemotion speaker
Rollnext Co-founder
Salvatore A. Romeo
» The problem
» Our goals
» Some examples
» UX e DX
» Making an offline first app: dev techniques
» Shared Data VS User Da...
Something in common?
Goal
Make the user never break the experience
Some examples
UX: Why offline?
UX: Why offline?
1. Progressive enhancement
UX: Why offline?
1. Progressive enhancement
2. Fast / No lags
What about DX?
Is it really more complicated?
Making an app: a public news room
» The user can publish news with images
» The user sees the news published by all users
...
Making an offline app: the tools
1. The Html5 AppCache and Phonegap
2. Save the data, sync automatically: PouchDB
3. Savin...
Step 1: the app must work offline
Step 1: the app must work offline
=
Step 1: the app must work offline
=
Step 1: the app must work offline
=
The HTML5 AppCache
The HTML5 AppCache
Waiting for the ServiceWorker… a javascript module:
1. Enable/Disable the offline resources
2. Specify ...
The HTML5 AppCache
1. Enable/Disable the offline resources (iframe)
The HTML5 AppCache
1. Enable/Disable the offline resources (iframe)
The HTML5 AppCache
1. Enable/Disable the offline resources (server side)
The HTML5 AppCache
1. Enable/Disable the offline resources (server side)
The HTML5 AppCache
2. Specify the resources to save offline (cookies)
The HTML5 AppCache
2. Specify the resources to save offline (cookies)
The HTML5 AppCache
The HTML5 AppCache
3. Clean the manifest (iframe + cookies)
The HTML5 AppCache
3. Clean the manifest (server side)
The HTML5 AppCache
1.
2. The cookie _manifest is set with those resources
3. An iframe is set and points to the server
4. ...
Step 2: publishing the news
Step 2: publishing the news
Before:
Step 2: publishing the news
Before:
Now:
Step 2: publishing the news
Before:
Now:
Step 2: publishing the news
Before:
Now:
PouchDB
Somewhere in your code configuration:
PouchDB
Somewhere in your code configuration:
PouchDB
Somewhere in your code configuration:
PouchDB
Somewhere in your code configuration:
API:
Step 3: reading the news
Step 3: reading the news
Step 3: reading the news
Before:
Now:
Step 3: reading the news
Before:
Now:
Step 4: saving the images
Step 4: saving the images
Step 4: saving the images
We will use imgcache.js and a directive for img tags
https://github.com/chrisben/imgcache.js
Step 4: saving the images
We will use imgcache.js and a directive for img tags
https://github.com/chrisben/imgcache.js
Step 4: saving the images
We will use imgcache.js and a directive for img tags
https://github.com/chrisben/imgcache.js
Step 4: saving the images
We will use imgcache.js and a directive for img tags
https://github.com/chrisben/imgcache.js
The cache directive
The cache directive
The cache directive
The cache directive
The cache directive
The cache directive
Step 5: user private data
Step 5: user private data
PouchDB will sync everything with everyone!
Step 5: user private data
PouchDB will sync everything with everyone!
Step 5: user private data
PouchDB will sync everything with everyone!
Step 5: user private data
PouchDB will sync everything with everyone!
Step 5: user private data
PouchDB will sync everything with everyone!
For private data we use another approach: ydn-db
htt...
Step 5: user private data
PouchDB will sync everything with everyone!
For private data we use another approach: ydn-db
htt...
Step 5: user private data
Private data should be synchronized when online.
Step 5: user private data
Private data should be synchronized when online.
navigator.onLine is not trustable!
Step 5: user private data
Private data should be synchronized when online.
navigator.onLine is not trustable!
https://gith...
Step 5: user private data
Private data should be synchronized when online.
navigator.onLine is not trustable!
https://gith...
The Future
Internet everywhere?
References
https://github.com/plugback/angular/blob/master/manifest
http://pouchdb.com/
http://www.iriscouch.com/
https://...
github.com/salvatoreromeo
me@salvatoreromeo.com
@romeosalv
linkedin.com/in/salvatoreromeo
THANK YOU
Tech Webinar: Offline First: Creare un'app Phonegap che funzioni offline e si sincronizzi automaticamente
Tech Webinar: Offline First: Creare un'app Phonegap che funzioni offline e si sincronizzi automaticamente
Tech Webinar: Offline First: Creare un'app Phonegap che funzioni offline e si sincronizzi automaticamente
Tech Webinar: Offline First: Creare un'app Phonegap che funzioni offline e si sincronizzi automaticamente
Tech Webinar: Offline First: Creare un'app Phonegap che funzioni offline e si sincronizzi automaticamente
Tech Webinar: Offline First: Creare un'app Phonegap che funzioni offline e si sincronizzi automaticamente
Tech Webinar: Offline First: Creare un'app Phonegap che funzioni offline e si sincronizzi automaticamente
Próximos SlideShares
Carregando em…5
×

Tech Webinar: Offline First: Creare un'app Phonegap che funzioni offline e si sincronizzi automaticamente

7.084 visualizações

Publicada em

Salvatore Romeo ci spiega come realizzare un'app completa che funzioni offline e sincronizzi automaticamente le informazioni quando la rete è disponibile, utilizzando Phonegap, AngularJS e PouchDB.

Iscriviti qui per partecipare ad altri Tech Webinar gratuiti: http://goo.gl/iW81VD

Scrivici a: training@codemotion.it
Tw: http://twitter.com/CodemotionTR

Publicada em: Celular, Tecnologia
  • Do you want a longer and thicker penis without expensive surgery, extenders or suction devices that just don't work? Introducing the Penis Enlargement Bible, a 94 page downloadable e-book that has an exclusive two step system that can growth your penis by between 2 and 4 inches within 89 days using safe natural methods  https://tinyurl.com/getpebible2019
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Unlock Her Legs - How to Turn a Girl On In 10 Minutes or Less... ■■■ https://tinyurl.com/unlockherlegss
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Nice !! Download 100 % Free Ebooks, PPts, Study Notes, Novels, etc @ https://www.ThesisScientist.com
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui

Tech Webinar: Offline First: Creare un'app Phonegap che funzioni offline e si sincronizzi automaticamente

  1. OFFLINE FIRST Better UX, faster apps
  2. Software Engineer PhD in Computer Science Codemotion speaker Rollnext Co-founder Salvatore A. Romeo
  3. » The problem » Our goals » Some examples » UX e DX » Making an offline first app: dev techniques » Shared Data VS User Data » The future
  4. Something in common?
  5. Goal Make the user never break the experience
  6. Some examples
  7. UX: Why offline?
  8. UX: Why offline? 1. Progressive enhancement
  9. UX: Why offline? 1. Progressive enhancement 2. Fast / No lags
  10. What about DX? Is it really more complicated?
  11. Making an app: a public news room » The user can publish news with images » The user sees the news published by all users » The user has a private profile » Syncing Shared data VS Syncing Private data
  12. Making an offline app: the tools 1. The Html5 AppCache and Phonegap 2. Save the data, sync automatically: PouchDB 3. Saving images offline: imgcache.js 4. Saving Private Data: ydn-db 5. ‘Are we Online?’ check: OnlineJS
  13. Step 1: the app must work offline
  14. Step 1: the app must work offline =
  15. Step 1: the app must work offline =
  16. Step 1: the app must work offline =
  17. The HTML5 AppCache
  18. The HTML5 AppCache Waiting for the ServiceWorker… a javascript module: 1. Enable/Disable the offline resources 2. Specify the resources to save offline 3. Clean the manifest
  19. The HTML5 AppCache 1. Enable/Disable the offline resources (iframe)
  20. The HTML5 AppCache 1. Enable/Disable the offline resources (iframe)
  21. The HTML5 AppCache 1. Enable/Disable the offline resources (server side)
  22. The HTML5 AppCache 1. Enable/Disable the offline resources (server side)
  23. The HTML5 AppCache 2. Specify the resources to save offline (cookies)
  24. The HTML5 AppCache 2. Specify the resources to save offline (cookies)
  25. The HTML5 AppCache
  26. The HTML5 AppCache 3. Clean the manifest (iframe + cookies)
  27. The HTML5 AppCache 3. Clean the manifest (server side)
  28. The HTML5 AppCache 1. 2. The cookie _manifest is set with those resources 3. An iframe is set and points to the server 4. The server parsers the resources in the cookie and returns the corresponding manifest file 5. Available as an angular service at https://github.com/plugback/angular/blob/master/manifest
  29. Step 2: publishing the news
  30. Step 2: publishing the news Before:
  31. Step 2: publishing the news Before: Now:
  32. Step 2: publishing the news Before: Now:
  33. Step 2: publishing the news Before: Now:
  34. PouchDB Somewhere in your code configuration:
  35. PouchDB Somewhere in your code configuration:
  36. PouchDB Somewhere in your code configuration:
  37. PouchDB Somewhere in your code configuration: API:
  38. Step 3: reading the news
  39. Step 3: reading the news
  40. Step 3: reading the news Before: Now:
  41. Step 3: reading the news Before: Now:
  42. Step 4: saving the images
  43. Step 4: saving the images
  44. Step 4: saving the images We will use imgcache.js and a directive for img tags https://github.com/chrisben/imgcache.js
  45. Step 4: saving the images We will use imgcache.js and a directive for img tags https://github.com/chrisben/imgcache.js
  46. Step 4: saving the images We will use imgcache.js and a directive for img tags https://github.com/chrisben/imgcache.js
  47. Step 4: saving the images We will use imgcache.js and a directive for img tags https://github.com/chrisben/imgcache.js
  48. The cache directive
  49. The cache directive
  50. The cache directive
  51. The cache directive
  52. The cache directive
  53. The cache directive
  54. Step 5: user private data
  55. Step 5: user private data PouchDB will sync everything with everyone!
  56. Step 5: user private data PouchDB will sync everything with everyone!
  57. Step 5: user private data PouchDB will sync everything with everyone!
  58. Step 5: user private data PouchDB will sync everything with everyone!
  59. Step 5: user private data PouchDB will sync everything with everyone! For private data we use another approach: ydn-db https://github.com/yathit/ydn-db
  60. Step 5: user private data PouchDB will sync everything with everyone! For private data we use another approach: ydn-db https://github.com/yathit/ydn-db API:
  61. Step 5: user private data Private data should be synchronized when online.
  62. Step 5: user private data Private data should be synchronized when online. navigator.onLine is not trustable!
  63. Step 5: user private data Private data should be synchronized when online. navigator.onLine is not trustable! https://github.com/PixelsCommander/OnlineJS will set the variable window.onLine to true when the user is really online!
  64. Step 5: user private data Private data should be synchronized when online. navigator.onLine is not trustable! https://github.com/PixelsCommander/OnlineJS will set the variable window.onLine to true when the user is really online! You can use it also for online only tasks (search, real time data, chat, …)
  65. The Future Internet everywhere?
  66. References https://github.com/plugback/angular/blob/master/manifest http://pouchdb.com/ http://www.iriscouch.com/ https://github.com/chrisben/imgcache.js https://github.com/yathit/ydn-db https://github.com/PixelsCommander/OnlineJS http://www.html5rocks.com/en/features/offline https://plus.google.com/+IlyaGrigorik/posts/WPZsWr4QGqR http://www.theodo.fr/blog/2014/11/how-to-build-web-applications-work-offline- pouchdb/ http://nolanlawson.com/2014/10/03/offline-first-is-people-first http://www.lukew.com/ff/entry.asp?1902 https://github.com/pazguille/offline-first
  67. github.com/salvatoreromeo me@salvatoreromeo.com @romeosalv linkedin.com/in/salvatoreromeo THANK YOU

×