Micronaut Turbo - Return of the Monolith

Talk at GeeCON Prague 2022

Transcript

1. RETURN OF
   THE MONOLITH
   

   View Slide

2. Copyright © 2021 by Object Computing, Inc. (OCI).
   
   All rights reserved.
   Sergio del Amo
   https://sergiodelamo.com
   
   @sdelamo
   
   Member of the Micronaut Foundation Board of
   Directors
   
   Micronaut Lead Engineer at Object Computing Inc.
   
   Micronaut Developer Advocate
   
   Involved with Micronaut since its inception.
   
   Micronaut Core committer. Micronaut Guides.
   Micronaut Starter, Security, AWS, Views, RSS,
   Problem+JSON, Email,
   
   2
   

   View Slide

3. THANK YOU TO OUR SPONSORS
   

   View Slide

4. Copyright © 2021 by Object Computing, Inc. (OCI).
   
   All rights reserved.
   4
   FREEDOM
   

   View Slide

5. Copyright © 2021 by Object Computing, Inc. (OCI).
   
   All rights reserved.
   5
   OBJECTIVE-C
   SWIFT
   

   View Slide

6. Copyright © 2021 by Object Computing, Inc. (OCI).
   
   All rights reserved.
   6
   JAVA
   KOTLIN
   

   View Slide

7. Copyright © 2021 by Object Computing, Inc. (OCI).
   
   All rights reserved.
   7
   RUBY
   WEB
   PYTHON
   GROOVY JAVA
   SCALA
   PHP
   KOTLIN GO
   RUST
   C#
   

   View Slide

8. Copyright © 2021 by Object Computing, Inc. (OCI).
   
   All rights reserved.
   8
   HELIDON
   WEB
   MICRONAUT
   SPRING KTOR
   GRAILS
   QUARKUS
   

   View Slide

9. Copyright © 2021 by Object Computing, Inc. (OCI).
   
   All rights reserved.
   9
   RUBY
   WEB
   PYTHON
   GROOVY
   JAVA
   SCALA
   PHP
   KOTLIN
   GO
   RUST C#
   JAVASCRIPT
   

   View Slide

10. Copyright © 2021 by Object Computing, Inc. (OCI).
    
    All rights reserved.
    10
    WEB
    👩💻👨💻👩💻
    👨💻👩💻
    👩💻👨💻👩💻
    👨💻👩💻
    👩💻👨💻👩💻
    👩💻👨💻👩💻
    👩💻👨💻👩💻
    

    View Slide

11. Copyright © 2021 by Object Computing, Inc. (OCI).
    
    All rights reserved.
    11
    WEB
    👨💻👩💻
    👨💻👩💻
    👩💻👨💻👩💻
    👩💻👨💻👩💻
    

    View Slide

12. Copyright © 2022 by Object Computing, Inc. (OCI).
    
    All rights reserved.
    12
    Server-side rendered HTML
    
    Language: Java, Apache Groovy
    
    Backend build: Maven Gradle
    
    Backend framework: SpringBoot Grails
    
    Test Framework: JUnit Spock
    
    UI Testing: Selenium Geb
    
    Template Engines: e.g. Thymleaf
    
    Lightweight JS library (e.g. JQuery) for
    small animations.
    Traditional Approach
    JSON API
    
    Backend Languages: Java, Groovy,
    Kotlin
    
    Backend build: Maven Gradle
    
    Backend framework: Micronaut
    SpringBoot Quarkus Helidon
    
    Test Framework: JUnit Spock
    
    Frontend languages: Javascript,
    Typescript
    
    Frontend framework: Vue.js React
    Angular
    
    Front end build: npm, Webpack
    
    Front end testing: cypress
    JS Front End / JVM Backend
    

    View Slide

13. Copyright © 2021 by Object Computing, Inc. (OCI).
    
    All rights reserved.
    13
    JS Front End / JVM Backend
    Traditional Approach
    vs
    ❌ MIRRORED LOGIC
    

    View Slide

14. Copyright © 2021 by Object Computing, Inc. (OCI).
    
    All rights reserved.
    14
    JS Front End / JVM Backend
    Traditional Approach
    vs
    ❌ MORE COMPLEX
    

    View Slide

15. Copyright © 2021 by Object Computing, Inc. (OCI).
    
    All rights reserved.
    15
    JS Front End / JVM Backend
    Traditional Approach
    vs
    ❌ MORE DEVELOPERS
    

    View Slide

16. Copyright © 2021 by Object Computing, Inc. (OCI).
    
    All rights reserved.
    16
    JS Front End / JVM Backend
    Traditional Approach
    vs
    ❌ MORE MONEY
    

    View Slide

17. Copyright © 2021 by Object Computing, Inc. (OCI).
    
    All rights reserved.
    17
    JS Front End / JVM Backend
    Traditional Approach
    vs
    ✅ SPEED OF NAVIGATION
    NOT CONSTANTLY TEARING DOWN THE APPLICATION PROCESS
    
    ONLY TO REINITIALISE IT ON THE VERY NEXT PAGE
    

    View Slide

18. Copyright © 2021 by Object Computing, Inc. (OCI).
    
    All rights reserved.
    18
    JAVASCRIPT
    SERVER SIDE
    RENDERING
    TRANSPILERS
    

    View Slide

19. Copyright © 2021 by Object Computing, Inc. (OCI).
    
    All rights reserved.
    19
    JAVASCRIPT
    SERVER SIDE
    RENDERING
    BETTER BROWSER
    IMPLEMENTATION
    

    View Slide

20. Copyright © 2021 by Object Computing, Inc. (OCI).
    
    All rights reserved.
    20
    JAVASCRIPT
    SERVER SIDE
    RENDERING
    ES6
    TYPESCRIPT
    

    View Slide

21. Copyright © 2021 by Object Computing, Inc. (OCI).
    
    All rights reserved.
    21
    JS Front End / JVM Backend
    Traditional Approach
    vs
    Hotwire / Backend
    vs
    

    View Slide

22. Copyright © 2021 by Object Computing, Inc. (OCI).
    
    All rights reserved.
    22
    Hotwire HTML Over the wire
    REAL LIFE EXAMPLES
    

    View Slide

23. Copyright © 2021 by Object Computing, Inc. (OCI).
    
    All rights reserved.
    23
    SIMPLER MORE PRODUCTIVE
    DEVELOPMENT EXPERIENCE
    

    View Slide

24. Copyright © 2021 by Object Computing, Inc. (OCI).
    
    All rights reserved.
    24
    RENDERING SHOULD HAPPEN
    ONCE FOR ONE SET OF
    TEMPLATES
    

    View Slide

25. Copyright © 2021 by Object Computing, Inc. (OCI).
    
    All rights reserved.
    25
    SIMPLER ALTERNATIVE TO
    CLIENT-SIDE FRAMEWORKS
    

    View Slide

26. Copyright © 2021 by Object Computing, Inc. (OCI).
    
    All rights reserved.
    26
    NO LONGER MIRRORING
    LOGIC ON BOTH SIDES OF A
    JSON DIVIDE
    

    View Slide

27. Copyright © 2021 by Object Computing, Inc. (OCI).
    
    All rights reserved.
    27
    SIMPLER CONTROL FLOW
    

    View Slide

28. Copyright © 2021 by Object Computing, Inc. (OCI).
    
    All rights reserved.
    28
    YOU DON’T NEED TO SERIALISE
    THE NEW MESSAGE AS JSON,
    RECEIVE IT IN JAVASCRIPT,
    RENDER A CLIENT-SIDE TEMPLATE
    

    View Slide

29. Copyright © 2021 by Object Computing, Inc. (OCI).
    
    All rights reserved.
    29
    Hotwire
    +
    

    View Slide

30. Copyright © 2022 by Object Computing, Inc. (OCI).
    
    All rights reserved.
    Micronaut Views
    30
    TEMPLATE RENDERING ON
    THE SERVER
    Pebble
    Rocker
    Soy
    Freemarker
    

    View Slide

31. Copyright © 2021 by Object Computing, Inc. (OCI).
    
    All rights reserved.
    31
    DRIVE
    

    View Slide

32. Copyright © 2021 by Object Computing, Inc. (OCI).
    
    All rights reserved.
    Click Link
    ❖ Prevents the browser from following it
    
    ❖ Changes the browser’s URL using the History API
    
    ❖ Request the new page using fetch
    
    ❖ Renders the HTML Response
    
    ‣ Replaces the element
    
    ‣ Merges the element
    
    ‣ Javascript window and document, and the persist.
    32
    DRIVE
    Intercepts all links to same domain
    

    View Slide

33. Copyright © 2021 by Object Computing, Inc. (OCI).
    
    All rights reserved.
    Form submission
    ❖ Set the “submitter” element’s disabled attribute when the submission begins
    
    ❖ Remove the attribute after the submission ends
    
    ❖ After a stateful request from a form submission, Turbo Drive expects the server
    to return an HTTP 303 redirect response, which it will then follow and use to
    navigate and update the page without reloading
    33
    DRIVE
    

    View Slide

34. Copyright © 2021 by Object Computing, Inc. (OCI).
    
    All rights reserved.
    34
    DRIVE
    DEMO
    

    View Slide

35. Copyright © 2021 by Object Computing, Inc. (OCI).
    
    All rights reserved.
    35
    @TurboFrameView
    MICRONAUT
    

    View Slide

36. Copyright © 2021 by Object Computing, Inc. (OCI).
    
    All rights reserved.
    36
    FRAMES
    

    View Slide

37. Copyright © 2021 by Object Computing, Inc. (OCI).
    
    All rights reserved.
    37
    FRAMES
    EFFICIENT CACHING
    

    View Slide

38. Copyright © 2021 by Object Computing, Inc. (OCI).
    
    All rights reserved.
    38
    FRAMES
    PARALLELISED
    EXECUTION
    

    View Slide

39. Copyright © 2021 by Object Computing, Inc. (OCI).
    
    All rights reserved.
    39
    FRAMES
    READY FOR MOBILE
    

    View Slide

40. Copyright © 2021 by Object Computing, Inc. (OCI).
    
    All rights reserved.
    40
    STREAMS
    

    View Slide

41. Copyright © 2021 by Object Computing, Inc. (OCI).
    
    All rights reserved.
    STREAMS
    ACTIONS
    ❖ append
    
    ❖ prepend
    
    ❖ replaces
    
    ❖ update
    
    ❖ remove
    
    ❖ before
    
    ❖ after
    41
    

    View Slide

42. Copyright © 2021 by Object Computing, Inc. (OCI).
    
    All rights reserved.
    STREAMS
    ACTIONS
    42
    NOT POSSIBLE TO CALL CUSTOM
    JAVASCRIPT FUNCTIONS AS PART OF
    TURBO STREAMS ACTION
    

    View Slide

43. Copyright © 2021 by Object Computing, Inc. (OCI).
    
    All rights reserved.
    43
    MICRONAUT
    

    View Slide

44. Copyright © 2021 by Object Computing, Inc. (OCI).
    
    All rights reserved.
    STREAMS
    44
    WEBSOCKETS / SSE
    

    View Slide

45. Copyright © 2021 by Object Computing, Inc. (OCI).
    
    All rights reserved.
    45
    NATIVE
    

    View Slide

46. Copyright © 2021 by Object Computing, Inc. (OCI).
    
    All rights reserved.
    📖 Guide: Build with the Micronaut Framework a chat application such as the Rails application
    demonstrated in the Hotwire announcement screencast.
    Micronaut Turbo Resources
    ❖ https://guides.micronaut.io/latest/hotwire-turbo-micronaut-chat.html
    46
    📖 Guide: Run the Turbo Native Demo with a Micronaut application as the backend.
    ❖ https://guides.micronaut.io/latest/micronaut-turbo-native.html
    📃 Micronaut Views Turbo
    ❖ https://micronaut-projects.github.io/micronaut-views/latest/guide/#turbo
    📃 Turbo
    ❖ https://turbo.hotwired.dev/
    📼 Hotwire Turbo Chat with the Micronaut Framework
    ❖ https://www.youtube.com/watch?v=Fas3Scyk9Ps
    📼 Turbo Native iOS demo with the Micronaut Framework
    ❖ https://www.youtube.com/watch?v=ZyEdv_xQTK4
    📼 Turbo Native Android demo with the Micronaut Framework
    ❖ https://www.youtube.com/watch?v=zgRRlp0779A
    

    View Slide

47. Copyright © 2021 by Object Computing, Inc. (OCI).
    
    All rights reserved.
    Q & A
    47
    

    View Slide

48. Copyright © 2021 by Object Computing, Inc. (OCI).
    
    All rights reserved.
    Micronaut Resources
    ❖ https://launch.micronaut.io
    
    ❖ https://micronaut.io/docs
    
    ❖ https://guides.micronaut.io
    
    ❖ https://micronautpodcast.com
    
    ❖ https://gitter.im/micronautfw
    
    ❖ https://twitter.com/micronautfw
    
    ❖ https://micronaut.io/blog
    
    ❖ https://micronaut.io/category/webinar
    
    ❖ https://micronaut.io/resources/community-support
    
    ❖ https://github.com/micronaut-projects
    
    ❖ https://micronaut.io/foundation
    
    ❖ https://micronaut.io/commercial-support
    
    ❖ https://objectcomputing.com/products/micronautsolutions
    48
    

    View Slide