JUG Saxony Day 2024: Pioneering the revolution of web development with htmx and Spring

Download the PPTX, to see all code examples with animations.

To solve the overly complicated web application architecture of the present day we need to look back in time to the early days of the web and ask, did we take a false turn?

Web development is slower than ever before! The popular front-end JavaScript frameworks increase the complexity of our web applications drastically.

In this talk you will learn how we are building an enterprise-level web component library at alanda, leveraging htmx for interactivity and Spring for structure and composition.

htmx simplifies creating interactive web apps by extending HTML as a hypermedia, with no JavaScript needed.
Spring ViewComponent, allows us to create reusable server-rendered UI components with a type safe interface.

They are normal beans, meaning we can use all design patterns possible with a dependency injection framework, but for the User Interface!

1. Pioneering the revolution of web development with htmx and Spring JUG Saxony Day – 2024.09.27 Thomas Schühly

2. Thomas Schühly Spring Boot + Kotlin + HTMX = ❤️ Blogging: tschuehly.de Open-Source Developer: github.com/tschuehly/spring-view-component github.com/tschuehly/htmx-supabase-spring-boot-starter Youngest Speaker: Spring I/O Software Engineer: alanda.io

3. Who stays behind JSON API endpoints and doesn‘t touch the frontend ?

4. Software Engineering

5. Software Engineering

6. “ If an engineering approach to software development doesn’t help us to create better software faster, then it’s wrong and doesn’t qualify as “Engineering”. ” Dave Farley What is Modern Software Engineering?

7. Single Page Applications are an architectural style, that incurs additional complexity. Tradeoffs review is skipped, if requirements need a framework like React thoughtworks Technology Radar Vol. 27 www.thoughtworks.com/content/dam/thoughtworks/documents/radar/2022/10/tr_technology_radar_vol_27_en.pdf

8. Hypermedia is defined by the presence of application control information embedded within, or as a layer above, the presentation of information. Roy Fielding Architectural Styles and the Design of Network-based Software Architectures

9. https://roy.gbiv.com/untangled/2008/ rest-apis-must-be-hypertext-driven

10. htmx.org/ examples / active-search

11. htmx.org/essays/when-to-use-hypermedia/

12. github.com/tschuehly/spring-view-component

13. https://carbon.now.sh/?bg=rgba%28255%2C255%2C255%2C1%29&t=one-light&wt=sharp&l=text%2Fx-java&width=700&ds=false&dsyoff=20px&dsblur=68px&wc=true&wa=false&pv=0px&ph=0px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=%2540ViewComponent%250Apublic%2520class%2520SimpleViewComponent%2520%257B%250A%2520%2520%2509%2540Autowired%250A%2520%2520%2520%2520final%2520ExampleService%2520exampleService%253B%250A%2520%2520%250A%2509public%2520SimpleView%2520render%28%29%2520%257B%250A%2509%2509return%2520new%2520SimpleView%28exampleService.getHelloWorld%28%29%29%253B%250A%2520%2520%2520%2520%257D%250A%2520%2520%250A%2520%2520%2520%2520public%2520record%2520SimpleView%28String%2520helloWorld%29%2520implements%2520ViewContext%2520%257B%257D%250A%257D&tb=SimpleViewComponent.java https://carbon.now.sh/?bg=rgba%28255%2C255%2C255%2C1%29&t=one-light&wt=sharp&l=htmlmixed&width=806.5&ds=false&dsyoff=20px&dsblur=68px&wc=true&wa=false&pv=0px&ph=0px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=%253C%21--%252F*%2540thymesVar%2520id%253D%2522simpleView%2522%2520%250A%2509type%253D%2522de.tschuehly.example.thymeleafjava.web.simple.SimpleViewComponent.SimpleView%2522*%252F--%253E%250A%253Cdiv%2520th%253Atext%253D%2522%2524%257BsimpleView.helloWorld%28%29%257D%2522%253E%253C%252Fdiv%253E&tb=SimpleViewComponent.html

14. https://carbon.now.sh/?bg=rgba%28255%2C255%2C255%2C1%29&t=one-light&wt=sharp&l=text%2Fx-java&width=700&ds=false&dsyoff=20px&dsblur=68px&wc=true&wa=false&pv=0px&ph=0px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=%2540ViewComponent%250Apublic%2520class%2520SimpleViewComponent%2520%257B%250A%2520%2520%2509%2540Autowired%250A%2520%2520%2520%2520final%2520ExampleService%2520exampleService%253B%250A%2520%2520%250A%2509public%2520SimpleView%2520render%28%29%2520%257B%250A%2509%2509return%2520new%2520SimpleView%28exampleService.getHelloWorld%28%29%29%253B%250A%2520%2520%2520%2520%257D%250A%2520%2520%250A%2520%2520%2520%2520public%2520record%2520SimpleView%28String%2520helloWorld%29%2520implements%2520ViewContext%2520%257B%257D%250A%257D&tb=SimpleViewComponent.java https://carbon.now.sh/?bg=rgba%28255%2C255%2C255%2C1%29&t=one-light&wt=sharp&l=htmlmixed&width=806.5&ds=false&dsyoff=20px&dsblur=68px&wc=true&wa=false&pv=0px&ph=0px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=%253C%21--%252F*%2540thymesVar%2520id%253D%2522simpleView%2522%2520%250A%2509type%253D%2522de.tschuehly.example.thymeleafjava.web.simple.SimpleViewComponent.SimpleView%2522*%252F--%253E%250A%253Cdiv%2520th%253Atext%253D%2522%2524%257BsimpleView.helloWorld%28%29%257D%2522%253E%253C%252Fdiv%253E&tb=SimpleViewComponent.html

15. https://carbon.now.sh/?bg=rgba%28255%2C255%2C255%2C1%29&t=one-light&wt=sharp&l=text%2Fx-java&width=700&ds=false&dsyoff=20px&dsblur=68px&wc=true&wa=false&pv=0px&ph=0px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=%2540ViewComponent%250Apublic%2520class%2520SimpleViewComponent%2520%257B%250A%2520%2520%2509%2540Autowired%250A%2520%2520%2520%2520final%2520ExampleService%2520exampleService%253B%250A%2520%2520%250A%2509public%2520SimpleView%2520render%28%29%2520%257B%250A%2509%2509return%2520new%2520SimpleView%28exampleService.getHelloWorld%28%29%29%253B%250A%2520%2520%2520%2520%257D%250A%2520%2520%250A%2520%2520%2520%2520public%2520record%2520SimpleView%28String%2520helloWorld%29%2520implements%2520ViewContext%2520%257B%257D%250A%257D&tb=SimpleViewComponent.java https://carbon.now.sh/?bg=rgba%28255%2C255%2C255%2C1%29&t=one-light&wt=sharp&l=htmlmixed&width=806.5&ds=false&dsyoff=20px&dsblur=68px&wc=true&wa=false&pv=0px&ph=0px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=%253C%21--%252F*%2540thymesVar%2520id%253D%2522simpleView%2522%2520%250A%2509type%253D%2522de.tschuehly.example.thymeleafjava.web.simple.SimpleViewComponent.SimpleView%2522*%252F--%253E%250A%253Cdiv%2520th%253Atext%253D%2522%2524%257BsimpleView.helloWorld%28%29%257D%2522%253E%253C%252Fdiv%253E&tb=SimpleViewComponent.html

16. https://carbon.now.sh/?bg=rgba%28255%2C255%2C255%2C1%29&t=one-light&wt=sharp&l=text%2Fx-java&width=530.25&ds=false&dsyoff=20px&dsblur=68px&wc=true&wa=false&pv=0px&ph=0px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=%2540Controller%250Apublic%2520class%2520SimpleController%2520%257B%250A%2520%2520%2509%2540Autowired%250A%2520%2520%2520%2520private%2520final%2520SimpleViewComponent%2520simpleViewComponent%253B%250A%2520%2520%250A%2520%2520%2520%2520%2540GetMapping%28%2522%252Fsimple%2522%29%250A%2520%2520%2520%2520ViewContext%2520simple%28%29%2520%257B%250A%2520%2520%2520%2520%2520%2520%2520%2520return%2520simpleViewComponent.render%28%29%253B%250A%2520%2520%2520%2520%257D%250A%257D&tb=SimpleController.java

17. https://carbon.now.sh/?bg=rgba%28255%2C255%2C255%2C1%29&t=one-light&wt=sharp&l=text%2Fx-java&width=530.25&ds=false&dsyoff=20px&dsblur=68px&wc=true&wa=false&pv=0px&ph=0px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=%2540Controller%250Apublic%2520class%2520SimpleController%2520%257B%250A%2520%2520%2509%2540Autowired%250A%2520%2520%2520%2520private%2520final%2520SimpleViewComponent%2520simpleViewComponent%253B%250A%2520%2520%250A%2520%2520%2520%2520%2540GetMapping%28%2522%252Fsimple%2522%29%250A%2520%2520%2520%2520ViewContext%2520simple%28%29%2520%257B%250A%2520%2520%2520%2520%2520%2520%2520%2520return%2520simpleViewComponent.render%28%29%253B%250A%2520%2520%2520%2520%257D%250A%257D&tb=SimpleController.java

18. https://codeblinks.com/?codeBlinks=%7B%22state%22%3A%7B%22resolution%22%3A%22720p%22%2C%22header%22%3Atrue%2C%22font%22%3A%22JetBrains_Mono%22%2C%22padding%22%3A12%2C%22codePadding%22%3A24%2C%22borderRadius%22%3A16%2C%22fileTabs%22%3Atrue%2C%22theme%22%3A%22github-light%22%2C%22background%22%3A%7B%22backgroundColor%22%3A%22AliceBlue%22%7D%2C%22windowControls%22%3A%22Mac%22%2C%22duration%22%3A%222%22%2C%22fontSize%22%3A%2224%22%2C%22transparency%22%3Afalse%2C%22lineNumbers%22%3Atrue%2C%22shadow%22%3Afalse%2C%22language%22%3A%22java%22%2C%22format%22%3A%22Landscape%22%2C%22blurCode%22%3Afalse%2C%22keyUpdateCount%22%3A0%7D%2C%22version%22%3A0%7D

19. ImagePreviewComponent

20. Thank you for listening ! tschuehly.de github.com / tschuehly x.com / tschuehly linkedin.com /in/ tschuehly