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

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

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/

Manuel Rauber

October 24, 2016
Tweet

More Decks by Manuel Rauber

Other Decks in Programming

Transcript

  1. Marco Frodl
    @marcofrodl
    [email protected]
    SPA-Framework-Ratatouille:
    Angular, React und Co. im gleichen Projekt
    WebTechCon 2016
    Manuel Rauber
    @manuelrauber
    [email protected]

    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
    [email protected]
    @manuelrauber
    Marco Frodl
    [email protected]
    @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