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
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. 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. SPA-Framework-Ratatouille: Angular, React und Co. im gleichen Projekt Landwirtschaftlicher Versicherungsverein Münster a. G. Fallbeispiel LVM-Versicherung
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
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 ! ! !
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
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
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
10. SPA-Framework-Ratatouille: Angular, React und Co. im gleichen Projekt HTML5: Ein Gruß aus der Küche
11. SPA-Framework-Ratatouille: Angular, React und Co. im gleichen Projekt Kochduell Welches SPA-Framework? VS
12. SPA-Framework-Ratatouille: Angular, React und Co. im gleichen Projekt Welches SPA-Framework? Stellen wir die richtige Frage?
13. SPA-Framework-Ratatouille: Angular, React und Co. im gleichen Projekt Ein Framework für alle? Leben Kranken Unfall Haftpflicht Recht Kraftfahrt ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! QA & Deployment ! ! !
14. Leben Kranken Unfall Haftpflicht Recht Kraftfahrt QA & Deployment SPA-Framework-Ratatouille: Angular, React und Co. im gleichen Projekt Jeder Bereich mit seinem Framework ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !
15. SPA-Framework-Ratatouille: Angular, React und Co. im gleichen Projekt Welche Version nehmen wir?
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
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
18. SPA-Framework-Ratatouille: Angular, React und Co. im gleichen Projekt Wie Hund und Katze SPA-Frameworks mischen Realität Vorstellung
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
20. SPA-Framework-Ratatouille: Angular, React und Co. im gleichen Projekt Separation durch Shadow DOM
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
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
23. SPA-Framework-Ratatouille: Angular, React und Co. im gleichen Projekt Datenaustausch mit PostMessages
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
25. SPA-Framework-Ratatouille: Angular, React und Co. im gleichen Projekt Kappselung und Wiederverwendbarkeit Komponentengedanke Website iFrame Komponente Website iFrame Komponente als iFrame
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
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 " " " "
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 " " " "
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 !
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 " " " " " "
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)
32. SPA-Framework-Ratatouille: Angular, React und Co. im gleichen Projekt Alles in einer App DEMO https://github.com/LVM-IT/spa-prototype
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
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