HOTWIRE - A new (old) approach for modern web applications

Transcript

1. HOTWIRE - HTML OVER THE WIRE
2. • IT Consultant @ codecentric • felix.riess@codecentric.de • https://github.com/felix185/ hotwire-with-quarkus • https://speakerdeck.com/ felix185 $ whoami
3. MODERN WEB APPLICATIONS
4. WEB APPLICATIONS APPLICATION STATE BUSINESS LOGIC ROUTING PRESENTATION LOGIC & TEMPLATING APPEARANCE & BEHAVIOR https://www.innoq.com/en/articles/2020/01/javascript-in-ma%C3%9Fen/
5. „TRADITIONAL“ WEB APPLICATIONS APPLICATION STATE BUSINESS LOGIC ROUTING PRESENTATION LOGIC & TEMPLATING APPEARANCE & BEHAVIOR https://www.innoq.com/en/articles/2020/01/javascript-in-ma%C3%9Fen/
6. „MODERN“ WEB APPLICATIONS APPLICATION STATE BUSINESS LOGIC ROUTING PRESENTATION LOGIC & TEMPLATING APPEARANCE & BEHAVIOR https://www.innoq.com/en/articles/2020/01/javascript-in-ma%C3%9Fen/
7. „MODERN“ WEB APPLICATIONS WITH OFFLINE CAPABILITIES APPLICATION STATE BUSINESS LOGIC ROUTING PRESENTATION LOGIC & TEMPLATING APPEARANCE & BEHAVIOR https://www.innoq.com/en/articles/2020/01/javascript-in-ma%C3%9Fen/
8. WE BUILT AN SPA TO AVOID FULL PAGE RELOADS INCLUDING REPARSING CSS AND JAVASCRIPT WE BUILT AN SPA FOR A BETTER USER EXPERIENCE WITH SMOOTH TRANSITIONS DURING NAVIGATION OUR DEVELOPERS HAVE BUILT ONLY SINGLE PAGE APPLICATIONS SO FAR
9. BROWSERS ARE AN UNCONTROLLED EXECUTION ENVIRONMENT!
10. https://hotwired.dev/ „HOTWIRE IS AN ALTERNATIVE APPROACH TO BUILDING MODERN WEB APPLICATIONS WITHOUT USING MUCH JAVASCRIPT BY SENDING HTML INSTEAD OF JSON OVER THE WIRE.“
11. „MODERN“ WEB APPLICATIONS? APPLICATION STATE BUSINESS LOGIC ROUTING PRESENTATION LOGIC & TEMPLATING APPEARANCE & BEHAVIOR
12. WE DON’T WANT FULL PAGE RELOADS! WE WANT SMOOTH TRANSITIONS DURING NAVIGATION! OUR DEVELOPERS DON’T WANT TO BUILD OLD SCHOOL JSF APPS. THEY WANT COOL TECHNOLOGIES!
13. HOTWIRE TURBO STIMULUS STRADA
14. TURBO DRIVE
16. TURBO FRAMES
17. <turbo-frame id="todolist"> <table> <thead> <tr> <th>Title</th> <th>Completed</th> <th>Mark as done</th> </tr> </thead> <tbody> <tr> <td><a href="/todos/123">Todo</a></td> <td>Open</td> <td> <form action="/todos/123" method="POST" enctype="multipart/form-data"> <input type="submit" value="Done"> </form> </td> </tr> </tbody> </table> </turbo-frame>
18. <turbo-frame id="todolist"> <table> <thead> <tr> <th>Title</th> <th>Completed</th> <th>Mark as done</th> </tr> </thead> <tbody> <tr> <td><a href="/todos/123">Todo</a></td> <td>Done</td> <td> <form action="/todos/123" method="POST" enctype="multipart/form-data"> <input type="submit" value="Done" disabled> </form> </td> </tr> </tbody> </table> </turbo-frame>
19. LAZY LOADING FOR FREE <h1>TODO List</h1> <turbo-frame id="todolist" src="/todos"> <div class="loader"></div> </turbo-frame>
20. LAZY LOADING FOR FREE
21. UPDATING FRAMES FROM OUTSIDE <h1>TODO List</h1> <turbo-frame id="todolist" src="/todos"> <div class="loader"></div> </turbo-frame> <h1>Create TODO</h1> <form action="/todos" method="POST" enctype="multipart/form-data" data-turbo-frame="todolist"> <label for="name">TODO:</label> <input type="text" id="name" name="name" required> <br> <input type="submit" value="Create"> </form>
22. TURBO STREAMS
23. <turbo-stream action="append" target="todolistTable"> <template> <tr id="123-row"> <td><a href="/todos/123">Todo</a></td> <td>Open</td> <td> <form action="/todos/stream/123" method="POST" enctype="multipart/form-data"> <input type="submit" value="Done"> </form> </td> </tr> </template> </turbo-stream> <turbo-stream action="remove" target="no-todos"></turbo-stream> text/vnd.turbo-stream.html
25. CONNECTING TO EVENT STREAMS <script type="text/javascript"> if (window["EventSource"] && window["Turbo"]) { Turbo.connectStreamSource(new EventSource("/todos/sse/connect")); } else { console.warn("Turbo Streams over SSE not available"); } </script>
26. DEMO
27. WOW THAT’S PRETTY COOL! SERVER SIDE RENDERING WITHOUT FULL RELOADS! SUCH A GREAT USER EXPERIENCE! IT’S SO FAST! HOTWIRE IS SO EASY TO LEARN AND INTEGRATES WELL WITH OUR QUARKUS SETUP! FRONTEND DEVELOPMENT JUST BECAME A JOY!
28. THERE IS MORE
29. STIMULUS
30. MICROFRONTENDS
31. IT DOES NOT ALWAYS HAVE TO BE AN SPA!
32. • IT Consultant @ codecentric • felix.riess@codecentric.de • https://github.com/felix185/ hotwire-with-quarkus • https://speakerdeck.com/ felix185 THANK YOU!
33. REFERENCES • Images: • Photo by Lautaro Andreani • Photo by Glenn Carstens-Peters • Photo by Rob Laughter