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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide