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

Der schwarze Schwan: Offlinefähigkeit

Der schwarze Schwan: Offlinefähigkeit

Der "schwarze Schwan" bezeichnet laut Nicholas Taleb ein Ereignis, das selten und höchst unwahrscheinlich ist und häufig extreme Konsequenzen nach sich zieht.
Gerade im Kontext des Enterprise-Web kann die zunehmende Anforderung der Offlinebereitstellung von umfangreichen Daten solch ein schwarzer Schwan sein.
Diese Session stellt Technologien und Möglichkeiten vor, die es ermöglichen, umfangreiche Datenmengen auch offline zur Verfügung zu stellen.

Holger Tiemeyer

February 06, 2020
Tweet

More Decks by Holger Tiemeyer

Other Decks in Technology

Transcript

  1. 3 Photo by Harli Marten on Unsplash IDENTITÄT Holger Tiemeyer

    ARBEIT 20 Jahre Erfahrung in Enterprise- Projekten ARCHITEKT Experte in Software- architekturen seit ca. 10 Jahren KONTAKT Via Pentasys oder LinkedIn: holger.tiemeyer @pentasys.de Automotive Banking Architektur Planung Design & Entwicklung Health
  2. 4 Photo by Harli Marten on Unsplash Photo by Tom

    Wheatley on Unsplash „Er ist immer da.“
  3. 5 Photo by Harli Marten on Unsplash Photo by Alex

    wong on Unsplash WEB-Architektur Baukasten
  4. 6 Photo by Harli Marten on Unsplash Photo by Alex

    wong on Unsplash Monolithische Architektur
  5. 7 Photo by Harli Marten on Unsplash Photo by Alex

    wong on Unsplash Frontend-/Asset-Server HTML Snippet Logik + Daten Multi-Page-Applikation (MPA)
  6. 8 Photo by Harli Marten on Unsplash Photo by Alex

    wong on Unsplash Single Page App Logik + Daten Single-Page-Applikation (SPA) Single Page App + Logik Daten
  7. 9 Photo by Harli Marten on Unsplash Photo by Alex

    wong on Unsplash [BACKEND] Daten(haltung) [FRONTEND] Sie ist immer da.
  8. 11 Photo by Harli Marten on Unsplash Photo by Alex

    wong on Unsplash Micro- service Micro- service UI Logik Datenbank Nach: „Mircoservices“ - Eberhard Wolff
  9. 12 Photo by Harli Marten on Unsplash Photo by Alex

    wong on Unsplash Nach: „Mircoservices“ - Eberhard Wolff Single Page App Logik Microservice Link REST SPA pro Microservice Single Page App Logik Microservice REST
  10. 13 Photo by Harli Marten on Unsplash Photo by Alex

    wong on Unsplash Nach: „Mircoservices“ - Eberhard Wolff SPA für alle Microservices Single Page App Modul Logik Microservice Modul Logik Microservice
  11. 14 Photo by Harli Marten on Unsplash Photo by Alex

    wong on Unsplash Nach: „Mircoservices“ - Eberhard Wolff HTML-Anwendungen HTML Logik Microservice HTML Logik Microservice Link Router Asset Server
  12. 15 Photo by Harli Marten on Unsplash Photo by Alex

    wong on Unsplash Nach: „Mircoservices“ - Eberhard Wolff Frontend-Server Frontend-/Asset-Server HTML Snippet Logik + Daten HTML Snippet Logik + Daten Microservice Microservice
  13. 19 © 2017 PENTASYS AG Photo by Jakub Kriz on

    Unsplash Photo by Jakob Braun on Unsplash
  14. 21 © 2017 PENTASYS AG Photo by Jakub Kriz on

    Unsplash Photo by Thomas Millot on Unsplash
  15. 23 © 2017 PENTASYS AG Photo by Jakub Kriz on

    Unsplash Photo by Joey Csunyo on Unsplash
  16. 25 © 2017 PENTASYS AG 1. Er ist ein Ausreißer

    (außerhalb des Bereichs der Er- wartungen) Nach: „Der Schwarze Schwan“ – Nassim Nicholas Taleb Photo by Jakub Kriz on Unsplash 2. Hat enorme Auswirkungen 3. Erklärungen im Nachhinein
  17. 26 © 2017 PENTASYS AG Logik des schwarzen Schwans: Das

    was wir nicht wissen, wird bedeutungsvoller Als das, was wir wissen. Nach: „Der Schwarze Schwan“ – Nassim Nicholas Taleb Schwarze Schwäne kommen unerwartet. Photo by Jakub Kriz on Unsplash Keine Vorhersage möglich.
  18. 28 © 2017 PENTASYS AG Photo by Adam Frazier on

    Unsplash Projektbeispiel: Baubeschreibung + Einrichtungshandbücher Baubeschreibung (Office, CAD, PDF) Einrichtung (Lotus Notes, SAP) Enterprise-Web- Anwendung
  19. 29 © 2017 PENTASYS AG Photo by Adam Frazier on

    Unsplash Projektbeispiel: Baubeschreibung + Einrichtungshandbücher 1:1-Abzug aus Lotus Notes (EXE) Komplexe, umfangreiche CAD-Zeichnungen Navigierbarkeit über Daten aus verschiedenen Versionen
  20. 31 © 2017 PENTASYS AG Micro- service Micro- service UI

    Logik Datenbank Service-Ebene: • Maschinenlesbares API (z.B. Atom-Feeds) • Event-Sourcing Datenbank: • Redundante Speicherung • Replika Caching, Redundanz, Synchronisation Photo by Daniel Olah on Unsplash
  21. 32 © 2017 PENTASYS AG Web-Storage (DOM Storage) Wird vollständig

    im Client gesteuert Key-Value-Paare (String) Lokale Speicherung: • Local Shared Objects (LSO) • Sind mit einer Domäne und dem lokalen Benutzerprofil des Zugriffsrechners verknüpft • Bleiben nach Beenden des Browsers bestehen • Firefox: Datenbankdatei (webappsstore.sqlite) Session Speicherung: • Sind mit dem Browser verknüpft • Daten werden beim Schließen des Browsers gelöscht Unterstützt somit mehrere Instanzen der Anwendung in verschiedenen Browserfenstern Photo by Daniel Olah on Unsplash
  22. 33 © 2017 PENTASYS AG Indexed Database API Transaktionale Datenbank

    (IndexedDB, Objektdatenbank), in der Webseiten dauerhaft Daten speichern können Ergänzt den Web-Storage um: • Sortierung • Effiziente Suche durch Indizes • Speicherung mehrfacher Werte pro Key Arbeitet asynchron (Registrierung von Callback-Funktionen) Hält an der SOP fest PouchDB, GunDB, RxDB, Hood.ie, etc. Photo by Daniel Olah on Unsplash
  23. 34 © 2017 PENTASYS AG Browser Session Storage Local Storage

    IndexedDB Chrome 10 MB 10 MB 6,6% des Gerätespeichers Firefox 10 MB 10 MB 10% des Gerätespeichers, < 2 GB Safari unlimitiert 5 MB unlimitiert Edge 10 MB 10 MB 4% des Gerätespeichers, < 2 GB Chrome Mobile 10 MB 10 MB 6,6 % des Gerätespeichers Safari Mobile unlimitiert 5 MB 50 MB / unlimitiert Photo by Daniel Olah on Unsplash
  24. 35 © 2017 PENTASYS AG Web Worker Client-Anwendung (Main Thread)

    Web Worker (Thread) Nachrichten (messages) Photo by Daniel Olah on Unsplash
  25. 36 © 2017 PENTASYS AG Service Worker Client-Anwendung (Main Thread)

    Service Worker (Thread) Nachrichten (messages) Cache Netzwerk Photo by Daniel Olah on Unsplash
  26. 37 Progressive Web App (PWA) Nutzen eine Vielzahl an Technologien

    (u.a. Service Worker), um Web-Anwendungen „nativ“ erscheinen zu lassen Responsive Offlinefähig (Service Worker) App- (Anwendungs-) ähnlichkeit und Nutzererfahrung Photo by Daniel Olah on Unsplash
  27. 38 Electron, Ionic, etc. Cross-Plattform Desktop-Anwendungen HTML, JavaScript, native Code

    Basieren auf Node.js Können auf sämtliche Aspekte des zugrunde liegenden Betriebssystems zugreifen. Photo by Daniel Olah on Unsplash
  28. 40 JSON Web Token Standard zum sicheren Übermitteln verschlüsselter Informationen

    Header Payload Signatur xxxxxx.yyyyy.zzzzzz {"alg": "HS256", "typ": "JWT"} Photo by Daniel Olah on Unsplash
  29. 41 OAuth 2 https : / / auth0 . com

    / docs / protocols / oauth2 Photo by Daniel Olah on Unsplash
  30. 44 © 2017 PENTASYS AG Karl Popper Verlor seine Illusion,

    dass Wissenschaft etwas Besonderes sei indem er: sah, dass Freudianer + Marxisten ihre Theorien durch Beispiele stützten (Normalität) bemerkte, dass die Theorien niemals „falsch“ zu sein scheinen Wurden am Beispiel menschlichen Verhaltens bestätigt Photo by Waldemar Brandt on Unsplash
  31. 45 © 2017 PENTASYS AG Karl Popper Schlussfolgerung: Wissenschaftliche Theorien

    schließen beobachtbare Tatbestände aus. Photo by Waldemar Brandt on Unsplash
  32. 46 © 2017 PENTASYS AG Karl Popper Mittwochs regnet es

    nie. Alle Stoffe dehnen sich bei Hitze aus. Zwischen Client + Server gibt es immer eine bestehende Verbindung. Photo by Waldemar Brandt on Unsplash
  33. 47 © 2017 PENTASYS AG Falsifikationismus Eine Hypothese muss, soll

    sie einen Beitrag zur Wissenschaft leisten, FALSIFIZIERBAR sein. Logische Möglichkeit zu zeigen, dass eine Hypothese nicht wahr ist. Photo by Waldemar Brandt on Unsplash
  34. 48 © 2017 PENTASYS AG Falsifikationismus Entweder es regnet oder

    es regnet nicht. Photo by Waldemar Brandt on Unsplash
  35. 49 © 2017 PENTASYS AG Falsifikationismus Der Mars bewegt sich

    auf einer elliptischen Bahn um die Sonne. Alle Planeten bewegen sich auf einer elliptischen Bahn um ihre jeweilige Sonne. Photo by Waldemar Brandt on Unsplash
  36. 50 © 2017 PENTASYS AG Photo by Porapak Apichodilok from

    Pexels Meinungen und Anschauungen nicht nach ihrer Plausibilität einordnen. Nach dem Schaden, den sie anrichten können. MENSCH SEIN!