#OfflineFirst

#OfflineFirst: It's time to think about offline as an application state. Offline is not an error, is a use-case that anyone think about it.

Links:
https://github.com/pazguille/offline-first
http://offlinestat.es
http://opensignal.com/coverage-maps/
http://gabrielecirulli.github.io/2048/

Transcript

1. Offline First
   @pazguille
   

   View Slide

2. View Slide

3. View Slide

4. Funcionalidad core
   UX! (css)
   Más UX! (JavaScript)
   

   View Slide

5. Offline NO es un error!
   

   View Slide

6. Offline ES un estado!
   

   View Slide

7. Offline ES mobile!
   

   View Slide

8. Offline ES realidad!
   

   View Slide

9. E
   

   View Slide

10. View Slide

11. Che, cuál era
    la dirección??
    

    View Slide

12. Nose chabón,
    no tengo wifi y
    el 3g anda
    como el ort*!
    

    View Slide

13. http://opensignal.com/coverage-maps/
    

    View Slide

14. Why?
    

    View Slide

15. UX
    

    View Slide

16. Performance
    

    View Slide

17. Security
    

    View Slide

18. How?
    

    View Slide

19. ● Separar Data - App (templates, assets)
    

    View Slide

20. ● Separar Data - App (templates, assets)
    ● Servir App (templates, assets)
    

    View Slide

21. ● Separar Data - App (templates, assets)
    ● Servir App (templates, assets)
    ● Guardar Data offline
    

    View Slide

22. ● Separar Data - App (templates, assets)
    ● Servir App (templates, assets)
    ● Guardar Data offline
    ● Detectar conexión
    

    View Slide

23. ● Separar Data - App (templates, assets)
    ● Servir App (templates, assets)
    ● Guardar Data offline
    ● Detectar conexión
    ● Sincronizar la Data (dificil)
    

    View Slide

24. Tools
    

    View Slide

25. ● Web Storage (localStorage, indexDB)
    

    View Slide

26. ● Web Storage (localStorage, indexDB)
    ● AppCache (manifest.appcache)
    

    View Slide

27. ● Web Storage (localStorage, indexDB)
    ● AppCache (manifest)
    ● ServiceWorkers
    

    View Slide

28. ● Web Storage (localStorage, indexDB)
    ● AppCache (manifest)
    ● ServiceWorkers
    ● Hood.ie
    

    View Slide

29. ● Web Storage (localStorage, indexDB)
    ● AppCache (manifest)
    ● ServiceWorkers
    ● Hood.ie
    ● PouchDB
    

    View Slide

30. navigator.onLine
    

    View Slide

31. Examples
    

    View Slide

32. offlinestat.es
    

    View Slide

33. View Slide

34. Thank you!
    @pazguille
    

    View Slide