Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Mirko Sertic

March 28, 2017
Tweet

More Decks by Mirko Sertic

Other Decks in Programming

Transcript

  1. @mirkosertic | [email protected] | https://www.mirkosertic.de
    From Legacy to modern Web
    Ein Reisebericht

    View Slide

  2. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Wer steht hier?
    Mirko Sertic
    Software Craftsman im Web / eCommerce Umfeld
    Habe Spaß an Technologie und deren Anwendung
    @mirkosertic
    [email protected]
    https://www.mirkosertic.de
    https://github.com/mirkosertic

    View Slide

  3. @mirkosertic | [email protected] | 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

    View Slide

  4. @mirkosertic | [email protected] | 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!

    View Slide

  5. @mirkosertic | [email protected] | 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

    View Slide

  6. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Das Reiseziel
    Ich möchte etwas prüfen und dabei lernen
    Spaß mit Arbeit kombinieren, Stichwort Gamification

    View Slide

  7. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Das Reiseziel
    Ich möchte etwas prüfen und dabei lernen
    Spaß mit Arbeit kombinieren, Stichwort Gamification
    Yes, GAMIFICATION!!

    View Slide

  8. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Das Reiseziel
    Ein Computerspiel hat alles: Komplexe Domänenlogik
    Synchrone und asynchrone Komponenten
    Performancekritisch
    Plattformunabhängig

    View Slide

  9. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Koffer packen
    Java als plattformunabhängige Programmiersprache
    Domain-driven Design für die Modellierung
    Fachliteratur und Werkzeuge

    View Slide

  10. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Fachliteratur

    View Slide

  11. @mirkosertic | [email protected] | 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?

    View Slide

  12. @mirkosertic | [email protected] | 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

    View Slide

  13. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Das erste Wörterbuch
    Domain

    View Slide

  14. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Das erste Wörterbuch
    Core
    Domain

    View Slide

  15. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Das erste Wörterbuch
    Core
    Domain
    Input
    Adapter
    Game
    State
    Renderer
    Process
    Manager
    Physics
    Resource
    Loader
    Sound
    System

    View Slide

  16. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Hexagonale Architektur
    Core Domain
    Game State
    Renderer

    View Slide

  17. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Hexagonale Architektur
    Core Domain
    Game State
    Renderer
    <>
    GameView
    <>
    GameViewImpl

    View Slide

  18. @mirkosertic | [email protected] | 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

    View Slide

  19. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Die Reise nach JavaSwingLand
    Core
    Domain

    View Slide

  20. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Die Reise nach JavaSwingLand
    Core
    Domain

    View Slide

  21. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Die Reise nach JavaSwingLand
    Core
    Domain
    Swing
    JPanel
    Java Sound
    API
    Keyboard
    Events
    Java File IO

    View Slide

  22. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Die Reise nach JavaSwingLand

    View Slide

  23. @mirkosertic | [email protected] | 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

    View Slide

  24. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Die Reise nach JavaFXLand
    Core
    Domain

    View Slide

  25. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Die Reise nach JavaFXLand
    Core
    Domain
    JavaFX
    Canvas
    &
    JavaFX IDE
    Java Sound
    API
    Keyboard
    Events
    Java File IO

    View Slide

  26. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Die Reise nach JavaFXLand

    View Slide

  27. @mirkosertic | [email protected] | 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!

    View Slide

  28. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Die Reise nach AndroidLand
    Android Canvas für die UI
    SoundPool API
    Touch Events für die Eingabe

    View Slide

  29. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Die Reise nach AndroidLand
    Core
    Domain

    View Slide

  30. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Die Reise nach AndroidLand
    Core
    Domain
    Android
    Canvas
    Android
    AudioMgr
    Touch
    Events
    Android
    AssetMgr

    View Slide

  31. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Die Reise nach AndroidLand

    View Slide

  32. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Das Reisebudget prüfen
    Java als Programmiersprache
    Domain-driven Design
    Hexagonale Architektur

    View Slide

  33. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Das Reisebudget prüfen
    Java als Programmiersprache
    Domain-driven Design
    Hexagonale Architektur

    View Slide

  34. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Das Reisebudget prüfen
    Java als Programmiersprache
    Domain-driven Design
    Hexagonale Architektur

    View Slide

  35. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Das Reisebudget prüfen
    Java als Programmiersprache
    Domain-driven Design
    Hexagonale Architektur

    View Slide

  36. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Das Reisebudget prüfen
    Java als Programmiersprache
    Domain-driven Design
    Hexagonale Architektur

    View Slide

  37. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Das Reisebudget prüfen
    Java als Programmiersprache
    Domain-driven Design
    Hexagonale Architektur

    View Slide

  38. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Die Reise nach InternetLand
    Moment, hier ist was anders
    Desktop != Browser
    Die reden hier alle JavaScript!

    View Slide

  39. @mirkosertic | [email protected] | 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!

    View Slide

  40. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Der Subkontinent GWTLand
    Core
    Domain

    View Slide

  41. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Der Subkontinent GWTLand
    Core
    Domain
    HTML5
    Canvas
    HTML5
    Audio
    Touch
    Events &
    Keyboard
    Events
    Sprite
    Sheets

    View Slide

  42. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Der Subkontinent GWTLand

    View Slide

  43. @mirkosertic | [email protected] | 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?

    View Slide

  44. @mirkosertic | [email protected] | 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!

    View Slide

  45. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Der Subkontinent TeaVMLand
    Core
    Domain

    View Slide

  46. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Der Subkontinent TeaVMLand
    Core
    Domain
    Pixi.js
    WebGL &
    Canvas API
    Howler.js
    Audio
    Touch
    Events &
    Keyboard
    Events
    Sprite
    Sheets

    View Slide

  47. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Der Subkontinent TeaVMLand

    View Slide

  48. @mirkosertic | [email protected] | 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?

    View Slide

  49. @mirkosertic | [email protected] | 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!

    View Slide

  50. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Ankunft in NetzwerkLand
    Core
    Domain

    View Slide

  51. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Ankunft in NetzwerkLand
    Core
    Domain
    Firebase als
    Event
    Forwarder

    View Slide

  52. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Ankunft in NetzwerkLand
    Core
    Domain
    #1
    Firebase als
    Event
    Forwarder
    Core
    Domain
    #2

    View Slide

  53. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Ankunft in NetzwerkLand

    View Slide

  54. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Ankunft in NetzwerkLand

    View Slide

  55. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Ankunft in NetzwerkLand

    View Slide

  56. @mirkosertic | [email protected] | 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

    View Slide

  57. @mirkosertic | [email protected] | 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

    View Slide

  58. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Ankunft in TeaVM PolymerLand
    Core
    Domain

    View Slide

  59. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Ankunft in TeaVM PolymerLand
    Core
    Domain
    Polymer &
    Pixi.js
    Howler.js
    Audio
    Touch
    Events &
    Keyboard
    Events
    Sprite
    Sheets
    &
    IndexedDB

    View Slide

  60. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Ankunft in TeaVM PolymerLand

    View Slide

  61. @mirkosertic | [email protected] | 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

    View Slide

  62. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Zurück nach Desktopland

    View Slide

  63. @mirkosertic | [email protected] | 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

    View Slide

  64. @mirkosertic | [email protected] | 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)

    View Slide

  65. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Gegenwart und Futureland
    Java -> JavaScript -> JIT -> CPU Opcodes
    JavaScript ist ein notwendiger Zwischenschritt

    View Slide

  66. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Gegenwart und Futureland
    Java -> Webassembly -> CPU Opcodes
    für AOT-Kompilierung

    View Slide

  67. @mirkosertic | [email protected] | 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 ☺

    View Slide

  68. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Lessons learned
    Domain-driven Design, DSLs und Skript Engines

    View Slide

  69. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Lessons learned
    Objektorientierung ist ein mächtiges Werkzeug
    „ Ein Name ist ein Name und kein String “ - *
    *Autor unbekannt

    View Slide

  70. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Lessons learned
    Promise API für Ressourcen

    View Slide

  71. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Lessons learned
    Arrays vs. Java Collection Framework

    View Slide

  72. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Lessons learned
    Compile Speed:
    GWT 2.8.0 43s / 1540kb JS Code
    TeaVM 0.4.3 12s / 1013kb JS Code

    View Slide

  73. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Fragen?
    falls nicht, besten Dank für Ihre Aufmerksamkeit!
    Quellcode gibt es hier:
    https://github.com/mirkosertic/GameComposer

    View Slide