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

Micronaut Turbo - Return of the Monolith

Micronaut Turbo - Return of the Monolith

Talk at GeeCON Prague 2022

Sergio del Amo

October 25, 2022
Tweet

More Decks by Sergio del Amo

Other Decks in Programming

Transcript

  1. 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
  2. Copyright © 2021 by Object Computing, Inc. (OCI). All rights

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

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

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

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

    reserved. 11 WEB 👨💻👩💻 👨💻👩💻 👩💻👨💻👩💻 👩💻👨💻👩💻
  7. 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
  8. Copyright © 2021 by Object Computing, Inc. (OCI). All rights

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

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

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

    reserved. 16 JS Front End / JVM Backend Traditional Approach vs ❌ MORE MONEY
  12. 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
  13. Copyright © 2021 by Object Computing, Inc. (OCI). All rights

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

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

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

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

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

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

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

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

    reserved. 26 NO LONGER MIRRORING LOGIC ON BOTH SIDES OF A JSON DIVIDE
  22. 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
  23. Copyright © 2022 by Object Computing, Inc. (OCI). All rights

    reserved. Micronaut Views 30 TEMPLATE RENDERING ON THE SERVER Pebble Rocker Soy Freemarker
  24. 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 <body> element ‣ Merges the <head> element ‣ Javascript window and document, and the <html> persist. 32 DRIVE Intercepts all links to same domain
  25. 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
  26. Copyright © 2021 by Object Computing, Inc. (OCI). All rights

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

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

    reserved. STREAMS ACTIONS ❖ append ❖ prepend ❖ replaces ❖ update ❖ remove ❖ before ❖ after 41
  29. 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
  30. 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
  31. 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