SPA-Framework-Ratatouille: Angular, React und Co. im gleichen Projekt

Single Page Applications sind aktuell der Toptrend in der webbasierten Anwendungsentwicklung. Doch die notwendige Entscheidung für ein konkretes SPA-Framework bedeutet auch, dass sich alle Entwicklerteams eines Projekts zwingend nur noch in dieser Frameworkdomäne bewegen können. Vorhandenes Wissen zu anderen Frameworks bleibt ungenutzt und spätere Frameworkwechsel oder Versionsupdates sind faktisch unmöglich. Oder doch nicht? Manuel Rauber und Marco Frodl mögen die Gleichberechtigung und präsentieren einen Weg, der den Traum von unterschiedlichen SPA-Frameworks und Frameworkversionen auch in größeren Softwareprojekten Realität werden lässt.

Mehr Information: http://lvm-it.github.io/

Transcript

1. Marco Frodl
   @marcofrodl
   marco.frodl@thinktecture.com
   SPA-Framework-Ratatouille:
   Angular, React und Co. im gleichen Projekt
   WebTechCon 2016
   Manuel Rauber
   @manuelrauber
   manuel.rauber@thinktecture.com
   

   View Slide

2. SPA-Framework-Ratatouille:
   Angular, React und Co. im gleichen Projekt
   Womit wir euch Appetit machen wollen
   Was ihr erwarten dürft
   • Single-Page Application in the wild
   • Kunden-Retrospektive
   • Praktisches Fallbeispiel
   • Wie “kocht” Thinktecture?
   • Alle Insides als OpenSource
   Was euch nicht erwartet
   • Keine reine Coding-Session
   • Kein fertiges Gericht zum Mitnehmen
   • Kein allgemeingültiges Rezept
   Was kommt heute auf den Tisch?
   

   View Slide

3. SPA-Framework-Ratatouille:
   Angular, React und Co. im gleichen Projekt
   Eure Köche heute
   Manuel Rauber
   manuel.rauber@thinktecture.com
   @manuelrauber
   Marco Frodl
   marco.frodl@thinktecture.com
   @marcofrodl
   “Bei gutem Essen muss alles perfekt
   zusammen passen.”
   “Essen stelle ich nach Lust und
   Laune zusammen.”
   

   View Slide

4. SPA-Framework-Ratatouille:
   Angular, React und Co. im gleichen Projekt
   Landwirtschaftlicher Versicherungsverein Münster a. G.
   Fallbeispiel LVM-Versicherung
   

   View Slide

5. SPA-Framework-Ratatouille:
   Angular, React und Co. im gleichen Projekt
   Architekturen im Wandel der Zeit
   • Akquise-& Verwaltungssystem aus 2000
   • Frontend und Backend in Java
   => Sticky version
   • View-only Thin-Client
   => eingeschränkte Interaktivität/Speed
   • Befüllung und Interaktion auf Server
   => Roundtrip-Time
   => Online only
   • monolithisches System
   => one build to rule them all
   • starke Abhängigkeiten bei Dev-Teams
   Quelle: http://lvm-it.github.io/index_de.html
   Aktuelle Herausforderungen der LVM
   Quelle: https://www.lvm.de/medien/web/31917/s,x,1024/innovation.jpg
   

   View Slide

6. SPA-Framework-Ratatouille:
   Angular, React und Co. im gleichen Projekt
   So kochen Entwickler in Versicherungen
   Sparten-Denken
   Leben
   Kranken
   Unfall
   Haftpflicht
   Recht
   Kraftfahrt
   !
   !
   !
   !
   !
   !
   !
   !
   !
   !
   !
   !
   !
   !
   !
   !
   !
   !
   QA & Deployment
   !
   !
   !
   

   View Slide

7. SPA-Framework-Ratatouille:
   Angular, React und Co. im gleichen Projekt
   Wir suchen geeignete Alternativen zum aktuellen Frontend.
   Dabei wurde der Fokus auf browserbasierte Ansätze gelegt,
   da desktopbasierte native Bibliotheken zukünftige
   Plattformwechsel erschweren würden.
   — LVM IT auf GitHub
   

   View Slide

8. SPA-Framework-Ratatouille:
   Angular, React und Co. im gleichen Projekt
   • UserExperience
   • Integrationsfähigkeit
   • Browserfunktionalität
   • Entwicklerproduktivität
   • Langlebigkeit
   • Testbarkeit
   • Modularisierung
   • Anpassbarkeit
   • Mobilfähigkeit
   Quelle: https://github.com/LVM-IT/spa-prototype/blob/master/docs/readme.md
   Anforderungen an die neue Lösung
   HTML5+CSS3
   Touchoptimiert,
   Flexibel und Responsive
   SPA-Framework
   Schnelle Interaktionen,
   Cross-Platform
   JavaScript
   Single Codebase
   Web und App
   Real Cross-Platform,
   Web, Mobiles, Desktop
   TypeScript
   Typsicherheit,
   Umsteigerfreundlich
   Komponenten
   Wiederverwendung,
   zentrale Entwicklung
   

   View Slide

9. SPA-Framework-Ratatouille:
   Angular, React und Co. im gleichen Projekt
   • UserExperience
   • Integrationsfähigkeit
   • Browserfunktionalität
   • Entwicklerproduktivität
   • Langlebigkeit
   • Testbarkeit
   • Modularisierung
   • Anpassbarkeit
   • Mobilfähigkeit
   Quelle: https://github.com/LVM-IT/spa-prototype/blob/master/docs/readme.md
   Anforderungen an die neue Lösung
   HTML5+CSS3
   Touchoptimiert,
   Flexibel und Responsive
   SPA-Framework
   Schnelle Interaktionen,
   Cross-Platform
   JavaScript
   Single Codebase
   Web und App
   Real Cross-Platform,
   Web, Mobiles, Desktop
   TypeScript
   Typsicherheit,
   Umsteigerfreundlich
   Komponenten
   Wiederverwendung,
   zentrale Entwicklung
   

   View Slide

10. SPA-Framework-Ratatouille:
    Angular, React und Co. im gleichen Projekt
    HTML5: Ein Gruß aus der Küche
    

    View Slide

11. SPA-Framework-Ratatouille:
    Angular, React und Co. im gleichen Projekt
    Kochduell
    Welches SPA-Framework?
    VS
    

    View Slide

12. SPA-Framework-Ratatouille:
    Angular, React und Co. im gleichen Projekt
    Welches SPA-Framework?
    Stellen wir die richtige Frage?
    

    View Slide

13. SPA-Framework-Ratatouille:
    Angular, React und Co. im gleichen Projekt
    Ein Framework für alle?
    Leben
    Kranken
    Unfall
    Haftpflicht
    Recht
    Kraftfahrt
    !
    !
    !
    !
    !
    !
    !
    !
    !
    !
    !
    !
    !
    !
    !
    !
    !
    !
    QA & Deployment
    !
    !
    !
    

    View Slide

14. Leben
    Kranken
    Unfall
    Haftpflicht
    Recht
    Kraftfahrt
    QA & Deployment
    SPA-Framework-Ratatouille:
    Angular, React und Co. im gleichen Projekt
    Jeder Bereich mit seinem Framework
    !
    !
    !
    !
    !
    !
    !
    !
    !
    !
    !
    !
    !
    !
    !
    !
    !
    !
    !
    !
    !
    

    View Slide

15. SPA-Framework-Ratatouille:
    Angular, React und Co. im gleichen Projekt
    Welche Version nehmen wir?
    

    View Slide

16. SPA-Framework-Ratatouille:
    Angular, React und Co. im gleichen Projekt
    Einmal All-you-can-eat bitte!
    Wunschszenario
    Ein Team –
    ein Framework
    Eine
    Zielanwendung
    Ein Framework –
    mehrere Versionen
    Keinen
    Updatezwang
    Modulares
    Deployment
    Wiederverwendbare
    Komponenten
    

    View Slide

17. SPA-Framework-Ratatouille:
    Angular, React und Co. im gleichen Projekt
    Einmal All-you-can-eat bitte!
    Wunschszenario
    Ein Team –
    ein Framework
    Eine
    Zielanwendung
    Ein Framework –
    mehrere Versionen
    Keinen
    Updatezwang
    Modulares
    Deployment
    Wiederverwendbare
    Komponenten
    

    View Slide

18. SPA-Framework-Ratatouille:
    Angular, React und Co. im gleichen Projekt
    Wie Hund und Katze
    SPA-Frameworks mischen
    Realität
    Vorstellung
    

    View Slide

19. SPA-Framework-Ratatouille:
    Angular, React und Co. im gleichen Projekt
    Separation durch Shadow DOM
    Shadow DOM provides encapsulation for the JavaScript,
    CSS and templating in a Web Component. Shadow DOM
    makes it so these things remain separate from the DOM of
    the main document. You can also use Shadow DOM by
    itself, outside of a web component.
    — Mozilla Developer Network
    

    View Slide

20. SPA-Framework-Ratatouille:
    Angular, React und Co. im gleichen Projekt
    Separation durch Shadow DOM
    

    View Slide

21. SPA-Framework-Ratatouille:
    Angular, React und Co. im gleichen Projekt
    Separation durch iFrames
    Wie wir uns an iFrames erinnern…
    DEMO
    Wie iFrames heute sind
    https://github.com/thinktecture/spa-
    framework-ratatouille/tree/master/demo-1
    

    View Slide

22. SPA-Framework-Ratatouille:
    Angular, React und Co. im gleichen Projekt
    Daten und Events übertragen
    Rede mit mir…
    Ich muss Dir was sagen
    Website iFrame
    Button wurde geklickt
    Verarbeitet, danke!
    Website iFrame
    

    View Slide

23. SPA-Framework-Ratatouille:
    Angular, React und Co. im gleichen Projekt
    Datenaustausch mit PostMessages
    

    View Slide

24. SPA-Framework-Ratatouille:
    Angular, React und Co. im gleichen Projekt
    Datenaustausch mit PostMessages
    DEMO
    https://github.com/thinktecture/spa-framework-ratatouille/tree/master/demo-2
    

    View Slide

25. SPA-Framework-Ratatouille:
    Angular, React und Co. im gleichen Projekt
    Kappselung und Wiederverwendbarkeit
    Komponentengedanke
    Website
    iFrame
    Komponente
    Website
    iFrame
    Komponente
    als iFrame
    

    View Slide

26. SPA-Framework-Ratatouille:
    Angular, React und Co. im gleichen Projekt
    Kappselung und Wiederverwendbarkeit
    Komponentengedanke
    DEMO
    https://github.com/thinktecture/spa-framework-ratatouille/tree/master/demo-3
    

    View Slide

27. SPA-Framework-Ratatouille:
    Angular, React und Co. im gleichen Projekt
    Einmal All-you-can-eat bitte!
    Wunschszenario
    Ein Team –
    ein Framework
    Eine
    Zielanwendung
    Ein Framework –
    mehrere Versionen
    Keinen
    Updatezwang
    Modulares
    Deployment
    Wiederverwendbare
    Komponenten
    "
    "
    "
    "
    

    View Slide

28. SPA-Framework-Ratatouille:
    Angular, React und Co. im gleichen Projekt
    Einmal All-you-can-eat bitte!
    Wunschszenario
    Ein Team –
    ein Framework
    Eine
    Zielanwendung
    Ein Framework –
    mehrere Versionen
    Keinen
    Updatezwang
    Modulares
    Deployment
    Wiederverwendbare
    Komponenten
    "
    "
    "
    "
    

    View Slide

29. SPA-Framework-Ratatouille:
    Angular, React und Co. im gleichen Projekt
    Zielanwendung mit modularem Deployment
    Zielanwendung
    https://crm.schreck24.ag
    PostMessage-Interfaces
    Vertragsdaten
    https://vertrag.schreck24
    PostMessage-Interfaces
    Kundenverwaltung
    https://kunde.schreck24
    PostMessage-Interfaces
    Komponenten
    https://shared.schreck24
    PostMessage-Interfaces
    !
    

    View Slide

30. SPA-Framework-Ratatouille:
    Angular, React und Co. im gleichen Projekt
    Einmal All-you-can-eat bitte!
    Wunschszenario
    Ein Team –
    ein Framework
    Eine
    Zielanwendung
    Ein Framework –
    mehrere Versionen
    Keinen
    Updatezwang
    Modulares
    Deployment
    Wiederverwendbare
    Komponenten
    "
    "
    "
    "
    " "
    

    View Slide

31. SPA-Framework-Ratatouille:
    Angular, React und Co. im gleichen Projekt
    Alles in einer App
    Written with Angular 2
    Written with Angular 1.5
    Written with Angular 1.5 and
    independent from the surrounding
    App Zone (reusable)
    

    View Slide

32. SPA-Framework-Ratatouille:
    Angular, React und Co. im gleichen Projekt
    Alles in einer App
    DEMO
    https://github.com/LVM-IT/spa-prototype
    

    View Slide

33. SPA-Framework-Ratatouille:
    Angular, React und Co. im gleichen Projekt
    Oder: Zutaten, die noch nicht im Kochtopf sind
    • Optimierung der iFrame-Ladezeiten durch
    • iFrame-Caching und
    • iFrame-Reusing
    • Cross-iFrame Touchinteraktionen
    • Multi-Window, Multi-Monitor
    • Automatische Schnittstellengenerierung auf Basis von Modellen
    Ausblick
    

    View Slide

34. Danke! Fragen?
    Repositories
    https://github.com/thinktecture/spa-framework-ratatouille
    https://lvm-it.github.io/index_de.html
    https://github.com/LVM-IT/spa-prototype
    Kontakt:
    @manuelrauber
    @marcofrodl
    

    View Slide