Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Offline First - kein Netz, kein Fehler, zufriedene Nutzer (BEDcon 2018)

757c9763f01a3f8c04bb9f2d5ed3f6b1?s=47 Uli Deiters
September 06, 2018

Offline First - kein Netz, kein Fehler, zufriedene Nutzer (BEDcon 2018)

Bitte PDF downloaden, um alle Links verwenden zu können.

---

"High Speed Internet, permanently online, permanently connected, LTE überall, na klar geht alles nur online - der Rest ist Error Handling. Done."

Oft ist uns gar nicht mehr bewusst, dass wir damit Nutzer enttäuschen, ihre Zeit verschwenden und die Nutzung unserer Anwendungen einschränken. Leider ist Offline-Fähigkeit nachträglich oft ähnlich schlecht nachrüstbar wie die Unterstützung von Mobile Devices. Daher möchten ich Euch zeigen, wie man mit Offline First von Anfang an "offline denken" kann, vergleichbar mit Mobile First.

Ich werde Euch kurz in die Motivation für Offline-Funktionen, Nutzerwartungen, UX-Ansätze sowie Herausforderungen und Ansätze für die Anwendungsarchitektur und -sicherheit einführen und aufzeigen wie wir CAP und Eventual Consistency auf diese Problemstellung anwenden können.

Wir werfen einen Blick darauf, welche Technologien für Progressive Web Apps und Native Apps zur Verfügung stehen und wie Digital Business Platforms wie Salesforce oder die SAP Cloud Platform die Offlinefähigkeit unterstützen. Kann man wirklich schon „Offline as a Service“ dazukaufen?

Sourcecode für Service Worker und PouchDB Demos:

https://github.com/ulid000/offline-first-sw
https://github.com/ulid000/offline-first-sw-server
https://github.com/ulid000/offline-first-pouchdb

757c9763f01a3f8c04bb9f2d5ed3f6b1?s=128

Uli Deiters

September 06, 2018
Tweet

Transcript

  1. #OfflineFirst

  2. Mit Menschen Software für Menschen entwickeln Ulrich Deiters Software Architect

    @ T-Systems Multimedia Solutions GmbH https://xing.to/ulid Uli @ulid000 #Berlin #Fahrrad …
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. Noch mehr: http://offlinestat.es

  13. None
  14. https://www.telekom.de/start/netzausbau https://www.telekom.de/breitbandausbau-deutschland?ActiveTabID=map Stand: August 2017

  15. https://www.telekom.de/start/netzausbau https://www.telekom.de/breitbandausbau-deutschland?ActiveTabID=map Stand: August 2017

  16. https://www.telekom.de/start/netzausbau https://www.telekom.de/breitbandausbau-deutschland?ActiveTabID=map Stand: August 2017

  17. https://opensignal.com/ https://opensignal.com/ Stand: August 2017

  18. https://opensignal.com/ Stand: August 2017

  19. Was war nochmal vor ONLINE?

  20. None
  21. Letdorf / CC-BY-SA-3.0

  22. None
  23. Offline - das hatten wir doch schon immer! Oh, offline

    geht auch. Prima. Was das geht auch offline? Wow!
  24. Trappatoni / CC-BY-SA-3.0

  25. None
  26. None
  27. App-Cloud ist das neue Client-Server Client/App Server/Cloud

  28. Qualitätsattribute ISO 25010: Reliability (Zuverlässigkeit) Maturity (Reife) Availability (Verfügbarkeit) Fault

    Tolerance (Fehlertoleranz) Recoverability (Wiederherstellbarkeit) Performance Efficiency (Effizienz) Security (Sicherheit) … https://www.iso.org/obp/ui/#iso:std:iso-iec:25010:ed-1:v1:en https://www.embarc.de/software-qualitaet-iso-25010/ Resilience
  29. CAP Theorem (Eric Brewer, 1998) http://robertgreiner.com/2014/08/cap-theorem-revisited/ https://www.infoq.com/articles/cap-twelve-years-later-how-the-rules-have-changed https://martin.kleppmann.com/2015/05/11/please-stop-calling-databases-cp-or-ap.html http://abiasforaction.net/cap-theorem/ Linearizable

    Consistency Availability Network Partition Tolerance In the case of a network Partition choose one: Linearizable Consistency vs. Availability context: read/write operations
  30. Eventual Consistency (Werner Vogels, 2008) https://dl.acm.org/citation.cfm?doid=1466443.1466448 https://www.allthingsdistributed.com/2008/12/eventually_consistent.html Wenn keine weiteren

    Schreibvorgänge stattfinden 
 und keine Netzwerkfehler existieren, werden die Daten schließlich 
 über alle Knoten konsistent.
  31. Systemüberblick und Herausforderungen UI Logic Service Service Synchronisation Validierung Sicherheit/


    Verschlüsselung Client/App Server/Cloud User Experience Caching
  32. Beispiele 1. Service Worker (PWA) 2. Database Synchronisation (PouchDB, CouchDB)

    3. Google Android Architecture Components 4. SAP Cloud Platform Mobile Services + iOS SDK
  33. Service Worker PWA „A service worker is a programmable network

    proxy that lets you control how network requests from your page are handled.“ Fetch is the new XHR Lifecycle Offline Cookbook Google Workbox https://jakearchibald.com/2014/offline-cookbook/ https://developers.google.com/web/tools/workbox/ Portions of this page are reproduced from work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License. Stale While Revalidate
  34. Service Worker UI Logic REST API Service
 Worker JS Web

    App im Browser vert.x GET /message App Cache Memory Demo https://github.com/ulid000/offline-first-sw-server https://github.com/ulid000/offline-first-sw
  35. Database Synchronisation PouchDB 
 => Browser/node (JavaScript) Apache CouchDB 


    => Server (Erlang) Multiversion Concurrency Control (MVCC) Replication Protocol Conflict Resolution Image from https://github.com/oreilly/couchdb-guide available under a Creative Commons Attribution license
  36. Database Synchronisation UI Logic CouchDB
 REST API PouchDB JS Web

    App im Browser CouchDB CouchDB 
 Replication Protocol Indexed DB CouchDB Demo https://github.com/ulid000/offline-first-pouchdb
  37. Google Android Architecture Components Portions of this page are modifications

    based on work created and shared by the Android Open Source Project and used according to terms described in the Creative Commons 2.5 Attribution License. https://developer.android.com/topic/libraries/architecture/guide.html
  38. Google Android Architecture Components - NetworkBoundResource Portions of this page

    are modifications based on work created and shared by the Android Open Source Project and used according to terms described in the Creative Commons 2.5 Attribution License. https://developer.android.com/topic/libraries/architecture/guide.html
  39. Architecture Components Sample App Activity/ Fragment ViewModel GitHub
 REST API

    Repository
 Android App GitHub HTTP GET … SQLite Demo https://github.com/googlesamples/android-architecture-components/tree/master/GithubBrowserSample Model Remote
 Data
 Source Room
  40. https://experience.sap.com/fiori-design-ios/article/offline/ https://www.sap.com/developer/tutorial-navigator/mobile-interactive-tutorials/offline/native-ios.html https://www.sap.com/developer/tutorials/fiori-ios-hcpms-offline-odata-introduction.html https://help.sap.com/viewer/fc1a59c210d848babfb3f758a6f55cb1/Latest/en-US/8117b4fc553d4e1ea91129eee788677f.html SAP Cloud Platform Mobile Services +

    iOS SDK Demo UI Logic HCPMS
 Offline Service ODataModel iOS App SAP Cloud Platform MobiLink Protocol Ultralite OData
 Demo Service OfflineODataProvider (OnlineODataProvider)
  41. User Experience Freshness Reach Assurance • Zeitstempel der letzten Änderung

    der Daten • Zeitstempel der letzten Synchronisation • Erreichbar • Nicht erreichbar • Unbekannt • Gespeichert • Synchronisiert • Speicherung/Synchronisation fehlgeschlagen • Unbekannt https://medium.com/@jessebeach/my-biggest-takeaway-from-the-second-offline-camp-in-santa-margarita-ca-d0dd930cd02b Expressing offline syncing to the end user
  42. Was noch? … CouchDB, PouchDB, Couchbase, IBM Cloudant realm.io AWS

    AppSync Google Firebase Offline Data Sync in Azure Mobile Apps Salesforce SmartSync, SmartStore …
  43. #OfflineFirst Nicht nachrüsten, sondern vorher berücksichtigen

  44. None
  45. Danke!