From Legacy to modern Web

My talk(German) I gave at JavaLand 2017 / Cologne. It shows how a hexagonal architecture style in combination with cross-compiling technologies can be used to create portable applications.

Transcript

1. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de From Legacy to modern Web Ein Reisebericht
2. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Wer steht hier? Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Habe Spaß an Technologie und deren Anwendung @mirkosertic mirko@mirkosertic.de https://www.mirkosertic.de https://github.com/mirkosertic
3. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Warum ein Reisebericht? Eine (Technologie-) Reise durch die letzten Jahre Ein Tagebuch der Erlebnisse und Erfahrungen Ein Rückblick und auch ein Ausblick
4. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Eine Idee… Die Welt verändert sich schnell! Welche Technologie, welches Framework? Was ist wirklich nachhaltig? Was funktioniert? Ich brauche ein Testbed!
5. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Eine Idee… Bitte nicht noch ein Hello-World! Ich brauche komplexe Domänenlogik mit synchronen und asynchronen Komponenten performancekritisch und transportabel
6. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Das Reiseziel Ich möchte etwas prüfen und dabei lernen Spaß mit Arbeit kombinieren, Stichwort Gamification
7. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Das Reiseziel Ich möchte etwas prüfen und dabei lernen Spaß mit Arbeit kombinieren, Stichwort Gamification Yes, GAMIFICATION!!
8. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Das Reiseziel Ein Computerspiel hat alles: Komplexe Domänenlogik Synchrone und asynchrone Komponenten Performancekritisch Plattformunabhängig
9. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Koffer packen Java als plattformunabhängige Programmiersprache Domain-driven Design für die Modellierung Fachliteratur und Werkzeuge
10. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Fachliteratur
11. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Fremde Sprachen lernen Computerspiele können echt komplex sein! Was sind Objects, Instances, Behaviors,Templates, Views, Events, Sprites, Sounds? Wie passt das alles zusammen, wo ist mein Wörterbuch?
12. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Fremde Sprachen lernen Ich nutze Domain-driven Design als Wörterbuch Hexagonale Architektur, um adaptiv zu bleiben Reaktiver Style(Events) für alle Komponenten
13. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Das erste Wörterbuch Domain
14. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Das erste Wörterbuch Core Domain
15. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Das erste Wörterbuch Core Domain Input Adapter Game State Renderer Process Manager Physics Resource Loader Sound System
16. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Hexagonale Architektur Core Domain Game State Renderer
17. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Hexagonale Architektur Core Domain Game State Renderer <<Interface>> GameView <<Class>> GameViewImpl
18. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Die Reise nach JavaSwingLand Einfaches Jump & Run für den Desktop Java Swing für die UI Java Sound API Keyboard Events für die Eingabe
19. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Die Reise nach JavaSwingLand Core Domain
20. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Die Reise nach JavaSwingLand Core Domain
21. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Die Reise nach JavaSwingLand Core Domain Swing JPanel Java Sound API Keyboard Events Java File IO
22. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Die Reise nach JavaSwingLand
23. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Die Reise nach JavaFXLand JavaFX für die UI Java Sound API Keyboard Events für die Eingabe Die Game IDE betritt die Bühne
24. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Die Reise nach JavaFXLand Core Domain
25. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Die Reise nach JavaFXLand Core Domain JavaFX Canvas & JavaFX IDE Java Sound API Keyboard Events Java File IO
26. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Die Reise nach JavaFXLand
27. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Neue Länder am Horizont Mobileland, z.B. Android? War da nicht jeder schon mal? Das ganze große Internetland? Da gibt’s bestimmt viele neue Benutzer!
28. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Die Reise nach AndroidLand Android Canvas für die UI SoundPool API Touch Events für die Eingabe
29. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Die Reise nach AndroidLand Core Domain
30. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Die Reise nach AndroidLand Core Domain Android Canvas Android AudioMgr Touch Events Android AssetMgr
31. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Die Reise nach AndroidLand
32. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Das Reisebudget prüfen Java als Programmiersprache Domain-driven Design Hexagonale Architektur
33. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Das Reisebudget prüfen Java als Programmiersprache Domain-driven Design Hexagonale Architektur
34. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Das Reisebudget prüfen Java als Programmiersprache Domain-driven Design Hexagonale Architektur
35. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Das Reisebudget prüfen Java als Programmiersprache Domain-driven Design Hexagonale Architektur
36. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Das Reisebudget prüfen Java als Programmiersprache Domain-driven Design Hexagonale Architektur
37. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Das Reisebudget prüfen Java als Programmiersprache Domain-driven Design Hexagonale Architektur
38. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Die Reise nach InternetLand Moment, hier ist was anders Desktop != Browser Die reden hier alle JavaScript!
39. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Der Subkontinent GWTLand Java-to-JavaScript Source-to-Source Transpiler Dadurch kleine Anpassungen an der Modulstruktur (gwt.xml) Hilf mir, hexagonale Architektur!
40. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Der Subkontinent GWTLand Core Domain
41. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Der Subkontinent GWTLand Core Domain HTML5 Canvas HTML5 Audio Touch Events & Keyboard Events Sprite Sheets
42. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Der Subkontinent GWTLand
43. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Am Horizont ist noch mehr Was ist mit anderen Sprachen auf der JVM? Warum die gwt.xml, muss das so invasiv sein? Geht das nicht auch schneller mit dem transpilieren?
44. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Der Subkontinent TeaVMLand JVM Bytecode-to-JavaScript Transpiler Keine Anpassungen an der Modulstruktur (keine gwt.xml) Extrem schnell Hilf mir, hexagonale Architektur!
45. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Der Subkontinent TeaVMLand Core Domain
46. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Der Subkontinent TeaVMLand Core Domain Pixi.js WebGL & Canvas API Howler.js Audio Touch Events & Keyboard Events Sprite Sheets
47. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Der Subkontinent TeaVMLand
48. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Am Horizont ist noch mehr Im Internet ist doch alles vernetzt, oder? Warum nicht im Netz miteinander spielen? Wie passt das mit dem Konzept zusammen?
49. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Reaktiv durch und durch Im Domänenmodell ist doch alles ein Event Schicken wir die Events doch über die Leitung und synchronisieren so verteilte Modelle!
50. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Ankunft in NetzwerkLand Core Domain
51. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Ankunft in NetzwerkLand Core Domain Firebase als Event Forwarder
52. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Ankunft in NetzwerkLand Core Domain #1 Firebase als Event Forwarder Core Domain #2
53. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Ankunft in NetzwerkLand
54. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Ankunft in NetzwerkLand
55. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Ankunft in NetzwerkLand
56. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Am Horizont ist noch mehr Die Game IDE im Netz wäre super und bitte GitHub Integration etwas modernere Optik wäre auch toll
57. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Ankunft in TeaVM PolymerLand TeaVM als Grundlage Polymer (WebComponents) für UI Komponenten IndexedDB als Datenspeicher oAuth / GitHub JavaScript API für die Integration
58. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Ankunft in TeaVM PolymerLand Core Domain
59. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Ankunft in TeaVM PolymerLand Core Domain Polymer & Pixi.js Howler.js Audio Touch Events & Keyboard Events Sprite Sheets & IndexedDB
60. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Ankunft in TeaVM PolymerLand
61. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Zurück nach Desktopland Webanwendungen mit Electron paketieren Raus aus der Sandkiste, Zugriff auf das lokale Dateisystem Immer ein Chromium, weniger Testaufwand
62. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Zurück nach Desktopland
63. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Gegenwart und Futureland Hohe Produktivität durch Java und die komplette Tooling Landschaft Hexagonale Architektur hilft, adaptiv zu bleiben „Reaktiver Style“ hilft, Komplexität besser abzubilden
64. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Gegenwart und Futureland Das Web ist überall JavaScript ist gekommen um zu bleiben Transpiler funktionieren und werden auch eingesetzt (GWT, TeaVM, aber auch SASS/LESS, Typescript oder Kotlin)
65. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Gegenwart und Futureland Java -> JavaScript -> JIT -> CPU Opcodes JavaScript ist ein notwendiger Zwischenschritt
66. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Gegenwart und Futureland Java -> Webassembly -> CPU Opcodes für AOT-Kompilierung
67. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Gegenwart und Futureland Deep Learning ! AI in Computerspielen ist ideales Testgebiet für Planung, Mustererkennung, Sprach / Gestenerkennung, … Tests mit ConvNetJS stehen an ☺
68. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Lessons learned Domain-driven Design, DSLs und Skript Engines
69. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Lessons learned Objektorientierung ist ein mächtiges Werkzeug „ Ein Name ist ein Name und kein String “ - * *Autor unbekannt
70. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Lessons learned Promise API für Ressourcen
71. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Lessons learned Arrays vs. Java Collection Framework
72. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Lessons learned Compile Speed: GWT 2.8.0 43s / 1540kb JS Code TeaVM 0.4.3 12s / 1013kb JS Code
73. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Fragen? falls nicht, besten Dank für Ihre Aufmerksamkeit! Quellcode gibt es hier: https://github.com/mirkosertic/GameComposer