From Legacy to modern Web

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.

219cd340806b9ddcaee60427c2d07d26?s=128

Mirko Sertic

March 28, 2017
Tweet

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