Return of the Full-Stack Developer

Full-stack development, where one developer works on both the front-end and back-end of an application, is becoming popular again. In this talk, I will explain why full-stack development is important today and the benefits it brings to modern projects. I will focus on how Java developers can use frameworks like Vaadin, Spring Boot with JTE, Quarkus with Qute and HTMX, and JSF to build complete web applications quickly and easily. Whether you are an experienced Java developer or just starting with full-stack development, this session will give you practical tips and examples to help you be more productive.

The source code can be found here: https://github.com/simasch/full-stack

Transcript

1. Simon Martinelli Simon Martinelli presents
2. About Me • 30 years of Software Engineering • Java for 25 years • Self-employed since 2009 • University teacher for 18 years • JUG Bern, Switzerland
3. The Rise and Fall of Full-Stack Development
9. Single Page Applications (SPA) Client Server
10. SPA Challenges Client Server How does the client access the API? Where is the input validate? How is build and deployment done?
11. Return of the Full-Stack Developer
12. • Improved efficiency by handling complete features from UI to database • Reduce communication overhead • Create more consistent applications • Debug problems more effectively because you can trace issues through the entire stack Advantages
13. • Broad(er) knowledge required • Managing both frontend and backend responsibilities can be overwhelming • Slower specialization - Instead of becoming very good at one thing, you spread your learning time across many areas Disadvantages
14. Web Frameworks for Java Devs
15. Frontend Styles • Server-Side Rendering • Spring MVC • Jakarta Faces (former JSF • Quarkus with Qute • Single Page Application • React, Angular, Vue etc. • Vaadin 15
17. Component- based MVC Vaadin Jakarta Faces JTE Qute Java only HTML Templates Spring Quarkus Simon’s Selection
18. • Reusable components • Suited for applications with complex business logic • Higher memory usage per user session because UI state is kept on server • Great for Java developers with UI development knowledge • No HTML Component-based UI Frameworks
19. Why Components?
20. • Vaadin Components • Webcomponent-based • Primefaces • Huge component library for Jakarta Faces • Ajax-enabled by default Libraries
21. • Traditional web frameworks using HTMLlike templates with special syntax for dynamic content • Templates are rendered on server, but UI state is managed in browser • Lower memory usage per user since less or no state on server Template Engines
22. https://github.com/simasch/full-stack
23. Vaadin @Route("") public class HelloWorldView extends VerticalLayout { public HelloWorldView() { var name = new TextField("Your name"); var sayHello = new Button("Say hello"); sayHello.addClickListener(e ->- { Notifcation.show("Hello " + name.getValue()); }); add(name, sayHello); } }
25. Jakarta Faces <h:form> <h:inputText id="name" value="##{helloBean.name}"//> <h:commandButton value="Say hello” //> <</h:form> <p> <h:outputText id="output” value="##{helloBean.sayHello()}"//> <</p> @Named @RequestScoped public class HelloBean { private String name; public String sayHello() { return "Hello " + name; } }
26. Jakarta Faces Lifecycle
27. <form method="post" action="/hello"> <label for="name">Name<</label> <input id="name" type="text" name="name"> <button type="submit">Say Hello<</button> <</form> <p>${greeting}<</p> Spring MVC with JTE @Controller public class HelloController { @GetMapping("/") public String hello(Model model) { model.addAttribute("name", "World"); return "hello"; } }
28. Quarkus and Qute <form method="post" action="/hello"> <label for="name">Name<</label> <input id="name" type="text" name="name"> <button type="submit">Say Hello<</button> <</form> <p>{greeting}<</p> @Path("/") public class HelloResource { @CheckedTemplate public static class Templates { public static native TemplateInstance hello(String name); } @GET @Produces(MediaType.TEXT_HTML) public TemplateInstance hello() { return Templates.hello("World"); } }
29. What About Dynamic Stuff?
30. • AJAX request support since 2009 Jakarta Faces <h:form> <h:inputText id="name" value="##{helloBean.name}"//> <h:commandButton value="Say hello"> <f:ajax execute="name" render="output"//> <</h:commandButton> <</h:form> <h:outputText id="output" value="##{helloBean.sayHello()}"//>
31. • htmx gives you access to • AJAX • CSS Transitions • WebSockets • Server Sent Events • Integrated in HTML using attributes Meet HTMX <html> <head> <script src="https:///unpkg.com/htmx.org"> <</script> <</head> <body> <h1>Hello World Demo<</h1> <button hx-get="/api/hello" hx-trigger="click" hx-target="#result"> Click me <</button> <div id="result"><</div> <</body> <</html>
32. Conclusion • Full-stack development can be more efficient • Reduced hand-overs and communication • The web frameworks are very mature • htmx is a great addition to make templates dynamic
33. Thank you! • Web martinelli.ch • EMail simon@martinelli.ch • Bluesky @martinelli.ch • LinkedIn https://linkedin.com/in/ simonmartinelli