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/

667fbca1f58bc0215c744b5ae8f8e5d2?s=128

Manuel Rauber

October 24, 2016
Tweet

Transcript

  1. 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
  2. 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?
  3. 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.”
  4. 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
  5. 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 ! ! !
  6. 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
  7. 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
  8. 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
  9. 13.

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

    für alle? Leben Kranken Unfall Haftpflicht Recht Kraftfahrt ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! QA & Deployment ! ! !
  10. 14.

    Leben Kranken Unfall Haftpflicht Recht Kraftfahrt QA & Deployment SPA-Framework-Ratatouille:

    Angular, React und Co. im gleichen Projekt Jeder Bereich mit seinem Framework ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !
  11. 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
  12. 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
  13. 18.

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

    und Katze SPA-Frameworks mischen Realität Vorstellung
  14. 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
  15. 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
  16. 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
  17. 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
  18. 25.

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

    Wiederverwendbarkeit Komponentengedanke Website iFrame Komponente Website iFrame Komponente als iFrame
  19. 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
  20. 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 " " " "
  21. 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 " " " "
  22. 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 !
  23. 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 " " " " " "
  24. 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)
  25. 32.

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

    einer App DEMO https://github.com/LVM-IT/spa-prototype
  26. 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