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

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? 

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.” 

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

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 

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 ! ! ! 

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 

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 

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 

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

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

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

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

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

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

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 

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 

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

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 

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

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 

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 

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

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 

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

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 

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 " " " " 

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 " " " " 

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 ! 

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 " " " " " " 

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) 

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

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 

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