Slide 1

Slide 1 text

Simon Martinelli Simon Martinelli presents

Slide 2

Slide 2 text

About Me • 30 years of Software Engineering • Java for 25 years • Self-employed since 2009 • University teacher for 18 years • JUG Bern, Switzerland

Slide 3

Slide 3 text

The Rise and Fall of Full-Stack Development

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Single Page Applications (SPA) Client Server

Slide 10

Slide 10 text

SPA Challenges Client Server How does the client access the API? Where is the input validate? How is build and deployment done?

Slide 11

Slide 11 text

Return of the Full-Stack Developer

Slide 12

Slide 12 text

• 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

Slide 13

Slide 13 text

• 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

Slide 14

Slide 14 text

Web Frameworks for Java Devs

Slide 15

Slide 15 text

Frontend Styles • Server-Side Rendering • Spring MVC • Jakarta Faces (former JSF • Quarkus with Qute • Single Page Application • React, Angular, Vue etc. • Vaadin 15

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Component- based MVC Vaadin Jakarta Faces JTE Qute Java only HTML Templates Spring Quarkus Simon’s Selection

Slide 18

Slide 18 text

• 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

Slide 19

Slide 19 text

Why Components?

Slide 20

Slide 20 text

• Vaadin Components • Webcomponent-based • Primefaces • Huge component library for Jakarta Faces • Ajax-enabled by default Libraries

Slide 21

Slide 21 text

• 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

Slide 22

Slide 22 text

https://github.com/simasch/full-stack

Slide 23

Slide 23 text

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); } }

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Jakarta Faces < @Named @RequestScoped public class HelloBean { private String name; public String sayHello() { return "Hello " + name; } }

Slide 26

Slide 26 text

Jakarta Faces Lifecycle

Slide 27

Slide 27 text

Name< Say Hello< <

${greeting}<

Spring MVC with JTE @Controller public class HelloController { @GetMapping("/") public String hello(Model model) { model.addAttribute("name", "World"); return "hello"; } }

Slide 28

Slide 28 text

Quarkus and Qute Name< Say Hello< <

{greeting}<

@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"); } }

Slide 29

Slide 29 text

What About Dynamic Stuff?

Slide 30

Slide 30 text

• AJAX request support since 2009 Jakarta Faces < <

Slide 31

Slide 31 text

• htmx gives you access to • AJAX • CSS Transitions • WebSockets • Server Sent Events • Integrated in HTML using attributes Meet HTMX < <

Hello World Demo<

Click me <

< <

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Thank you! • Web martinelli.ch • EMail simon@martinelli.ch • Bluesky @martinelli.ch • LinkedIn https://linkedin.com/in/ simonmartinelli