Simon Martinelli: Full-stack Development is Dead, Long Live Full-stack Development!

This talk focuses on the evolution of full stack development, particularly within the Java ecosystem. The speaker, a Java Champion, discusses the transition from traditional client-server architectures to modern frameworks, including Java EE's transformation to Jakarta. He highlights the shift towards single-page applications (SPAs) using frameworks like React and Angular, while presenting alternative full stack frameworks such as Vaadin, Hilla, and HTMX. These frameworks allow Java developers to build interactive applications without needing extensive JavaScript knowledge. The speaker compares these frameworks in terms of architecture, ease of use, and their suitability for various types of applications, ultimately encouraging developers to consider their options based on project requirements.

[Music] hey welcome to the dev days conference we are in Hall one languages and Frameworks with our next speaker Simon now when I looked at this topic it said you know what happened to fullstack development Long Live fullstack development and especially my background coming in as a cop andet person and I look at Simon here he is with Java and you know are we going to start

off a new war but no you know in the end I've just realized over the years your clients have different needs your clients come with different ecosystems and you do what is right but then when you have c. net and Java and then you have new platforms like react and angular what do all theet and the Java developers do do we need to move to the new

platform or there is still hope for us and I think I'm hoping that Simon is going to prove us all wrong and tell us there is something to this so Simon the stage is yours thank you thank you very much for this nice introduction yeah my talk is about the full stack development and uh first of all I like to uh introduce myself a bit more I'm

uh very much into the Java ecosystem so I'm a Java Champion w champion nor Ace for Java and I'm also active at the jav USIC group in Switzerland I'm active in the jav community process and I'm freelance developer in Switzerland mainly with Java and I'm also teaching at the universities in Switzerland so first of all let's go back in history when I started with software development we

had something like that we had client server usually the client was directly talking with the server or database and mainly everything was written in one language and we had something like that it's called layer to architecture so we try to separate presentation business and persistence layer and especially in the Java space we had something called J2 This was later named Java e now we uh call it

Jakarta and there we also have the layers so that means we have a client machine and we have so-called Java applications or server where we have two containers web container and an EB container and web container you usually was serving static Pages created by jav Ser Pages or Surs and the we browser just displayed that so there was no interaction with the client machine but on the

other hand we had something called the application client container that means we had um a rich client or a fat client or a Thin Client depending on how much Logic the client had but this was also written uh in Java Swing or awt or eclipse RCP and uh that led to many Java UI Frameworks so on the left hand side we have um Frameworks for Rich client

development and on the right hand side we have strats JSF apach VI Tim leave or W in which are Java web Frameworks and there are many more so not only these but these are probably the most popular that uh are still used now the time moved on and um suddenly we had an architecture like that I call that history Pats but because what do we have now

we have client server applications that means we have on the client side um Frameworks like react angler or Vu or many more uh other Frameworks in the JavaScript space where you develop application as so-called single page applications and then on the right hand side you have the server you have to create an API this is usually a restful API um where you have HTTP communication and send

Jason back and forth through the API then you have Ser logic and the database now this separation of client and server gives us some issues um for example we have to manage to build and deployments so because we are in two separate ecosystems so on the service side we are in my case on the Javas space we usually have spring boot guaros or Micron out as the

framework on the server and on the client side we have all this JavaScript or typescript stuff where we have a separate build system with mpm and on the Ser we have Maven or Gradle so we have to learn both depending on the size of the team this may be okay because if you have a huge team and you have a strict separation between front end development and

back end development this is perfectly fine but imagine you have a smaller team where everybody in the team needs must know both words then it may become a bit hard on the other hand the question is how does the client access the API so if we do rest API do we want to create an Opa open API specification and generate client code or do we have graphql

for example as the APA how do we access um the back end in that case and finally there's a thir issue so we have to validate the user input but where do we do that and if we do it on the client and the service side how we keep um this validation consistent so if we avoid how do we avoid that the client is validating something that

is not validated on the server or vice versa now these are all problems that arised from uh client server communication again with all these single page Frameworks but there are some Alternatives and I call these Alternatives assignment selection these are full stack web Frameworks for Java developers and uh let's directly go to selection um let's start on the left hand side maybe you already have heard of

HDMX HDMX is a tiny library that allows you to add interactivity to statically rendered HDMX or HTML pages so we will see that in the demo later on but the idea is you have uh a service site rendered uh web application so usually this is called like a controller and this controller then renders template and the template will contain HTML and then you can add HD mix

and make it more interactive uh then we have two um other Frameworks we have in the middle Vin VIN is also uh full stack web application framework it was created initially over 20 years ago but five years ago it had a major overhaul and what in flow is now technically based on web components and you have something in the browser that is communicating with the server but

you write your entire entire UI logic and your code is just in Java and but inflow handles the communication between the client and service so as a Java developer I don't have to learn um JavaScript to make interactive applications this will be handled by V inflow and the last framework is called Hilla Hilla is uh kind of different from the other to because this is a custom

single page application that you create with react or lit LD is a framework to create um web components but can also be used as an application framework and there you have classical end end points but not restful we will see that in a minute we have kind of a real client server communication but you don't have to care about that the difference between the first two and

the last two is that with Hilla you have to write your client code in typescript so let's move to the a bit uh deeper comparison so we see that on the programming model side we have different approaches with timely if we create HTML templates we add Dynamic with HDMX with what in we are fully on the Java side and with Hilla we have a typescript lit or

react front end with the Java back end um if you look at the the skill level we see that in most cases we just need to know Java for sure we need some CSS knowledge to make the styling and in case of the Tim Le templates we need also to know HTML and uh only on the Hiller side we need typescript JavaScript knowledge but this is somehow

limited and uh could be easily approached by Java developers then something that is different between these three approaches is that with Ely you just have HTML for sure you can use something like tail Vine CSS to have nice looking templates for your components but you don't have really a component model but with Vin VIN provides a rich web component model with default default seams that you can

extend or change to your needs and there are because these are web components you can more or less integrate all web components that are out there plus what in has third P party component directory with around 2,000 components where you can choose from but uh when we go to the build ecosystem we see we can use mainor Gradle with all three but we don't have to use

npm so npm is in Brackets because V and Hilla will use mpm to build the front end code but you don't have to that uh then the last thing that I want to talk about is State um time if you can have state because you're using spring boot you could have session State uh if you like to but Hiller you have no State because it's classical like

a single page application architecture but with WD you would have service date because the component is hold on the server and what inflow will communicate with the server and exchange data there so that's how these Frameworks differ from each other but uh the best way to get into the Frameworks for sure is to have a look at it so I would like to start with W in

because maybe this is uh something new for most Java developers by the way there is a demo project um I will provide the link to the GitHub repository later and there we have the same application uh done with vin time leave and Hiller so maybe first I start um the VIN application that we can see how this looks um here we have the application and let's make

it a bit bigger so you can see we have an input field where you can enter uh some name for example then say hello and then we will display a notification that's one part of the application and the other part of the application is we have a master detail view uh with the grid and an editor on the side and we for example can uh change the

name save it and it will immediately be changed here so that's a typical what I called business application uh um with a lot of data with tables with forms so it's kind of a data Centric application and that's something that you usually do now if you want to do sech application with the single page application framework you have a lot of work because first of all you

have to create server site and you provide the rest API you have to test the rest API and server and finally you have to write the client code and test it and uh if you look look at the W in code we can see two views let's start with the simpler one we have a Hello World View and as you can see this is all plain Java

code let's make it a bit bigger for you like that so we have uh an annotation called route uh the route annotation is uh used to uh have uh URL for the view so this is hello or we can have also an allias so it will be on the context route then we create a class that extends from something and that something is in that case a

horizontal layout so w comes with the vertical horizontal form layout uh split layout and so on and you can use that and uh this is kind of HTML um template and then you go ahead and uh create a textt field a button with a click listener you add the text field and the button then you can um have some styling like here we say that uh the

vertical component alignment should be um by the end and that's it so that's all that you need to do and then you're done now let's have a look at uh grid uh the grid is a bit more complicated uh but still here you have the route you extend this time from a diff and then you create we create the layout and in the split layout we create

the grid the grid is you can add columns um then we can set the items and the great thing about the grid is uh it's very simple so the grid here has a type it's from person person is a regular uh entity in that case uh that's just for Simplicity but usually you would prefer to use a dto that just contains the data you want to display

but here you also have a direct data binding so what we specify here when we create the columns is just the name of the property and finally if we set the data with set items you see here I provide a Lambda and the pro the Lambda uh gets a quer and the query is of type what in querying contains for example the page and the page size

and the sort that means our grid is fully um pageable without doing anything so we have like if I scroll down we may see it exactly so there was like um the reload of the second page so we have paging automatically we don't have to care about that we also have integrated sorting so I can click on the headers for example to sort that and this will

all get into this set meed with uh the query and we have also what in Spring data helper here because it's very common to use what in with spring boot that's a default choice of the backend framework and that's why we have a helper here to um create out of the Ving query a sort object for um spring data and uh then we uh want to see

what's happen when we click on arow so as you've seen before we can click here and form will be filled with the data so here we just have a uh value change list on select event and then we navigate here to the same view but we provide the ID that means if you click here as you can see on top um the URL changes so this is

also bookmarkable and uh then when navigating to here we can go to the before enter and here we pass uh the route parameter take it out as a person ID then fetch the person from the back end and populate the form and populating the form is very easy we have a concept of data binding so there's a binding class where we can read the bean and it

will populate the form and we can also write the bean then we get back the dat data from the form into our object and finally the form as we can see here consists of a form layout with the text Fields a date picker and the checkbox so finally we can do everything in Java we have no need to write a single line of JavaScript code but the

interesting thing about Vin is the run time so if we uh have a look at the the tools for example and have a look at the elements so let's Zoom a bit sorry make it a bit bigger um and then we see that if we look at the body we see a outlet element so that's like a single page application by the end where you also have

this kind shell and uh if we go down there we can see that we have oh sorry uh we have a flow container then we have a layout and somewhere down there we have um our content and we see that we have a grid for example with the with the cells and everything is there and as you can see all the components have Vin prefix that means

these are web components and what web components need to have a dash in it with as a prefix to distinguish it from normal HTML component and um that's finally how uh V in works with the web components now this is V where you have fully Java application so let's move to uh Hilla before we go to uh the last one Hilla has more or less has the

same components but the difference is we have not a JavaScript Java back end we do JavaScript or typescript in the front end but what Hilla is helping us is you don't have to care about the validation you don't have to care about client server communication and you don't have to worry about that build because if we have a look at the P file we see that we

have a spring Bood parent and we have a Hilla dependency and Hilla spring boot starter and this will do everything for us we also have a Hilla uh plugin down here and this Hilla plugin will then finally generate the bundle that we want to um deliver so also Vin and Hilla both have like a death um time environment and the production build so the production build uh

mini m is the bundle that will be delivered but with both application Frameworks you finally get the jar file that you have to install so you don't get a separate um front end and separate backend bundle you just get one and you can for example put that in a container and then you run it on any container orchestration solution for example so let's have a look at

uh the end points we still have the same services and entities as we had before but the difference is we now have Hello World endpoint and person endpoint so let's have a look at the hello endpoint first and this one is annotated with endpoint endpoint is a annotation from Hilla and we have an anous allow annotation that allows you to call um the endpoint because by default

all endpoints in Hilla are secured so you need to log in to uh get access to it but as we don't have Security in place we have to add Anonymous allowed and everybody can call say hello but the difference here to a single page application is we don't have a rest API so we really have like we had back in the days an RPC or remote procedure

call Api we can call say hello we have some annotations here for example we can tell Hilla that um say hello will always return a string and never null and we also can tell that the name uh in the parameter list is must always be not null otherwise we will have an error and this is not only used for uh the communication this is also used because

Hilla will generate client access code from these endpoints now let's go ahead to uh the front end code here we have the hello world view and in that case it's lit um today we usually use react because react is much more popular but I let the demo with um lit because in my opinion it's easier to understand at least for the demo here and what we see

here we have something called the custom element so this is um a web component that will be created from my hello world view this extends view from um Hilla and finally we have like connector call pack that is called if the um component is attached to the Dom and then we have a render method with an HTML template where we use a text field and the button

and these two components are exact the same components that we had in the VIN application so if you know Vin and Vin text field a VIN button you also know it how to use it directly here in hill so this could be uh an easier way to learn that if you already know what and we also have change event for example here we set the name of

our component to the current value and then as you can see here we call say hello on the server side and uh what we get here is a Hello World endpoint that means Vin is create Hilla is creating from our endpoint on the server a hello world endpoint class here uh on the client side that we can use to access the server that means we just call

say hello and get the string back and can uh display the notification that means as you can see there is absolutely no um client server communication involved for us so you don't have to call any HTP clients or stuff like that just use the L World endpoint and on the other hand we have uh the master detail you this one is a bit more complicated because we

have the grid here with the columns and we also have an editor with the form layout and we here we have data binding so it is dollar curly brackets field um style we can find uh to a model and the model means that we have on the service side person entity and based on that because this is used on the person endpoint so we sending here back

a list of person uh then we can also bind that directly to um text fields or date Pickers or checkboxes or whatever components we have where we can use data binding and the binder here is more or less the same binder as we had on the serice side with a slightly difference because we get the person model generated and the person model model is like a metadata

of our backend person model and with that uh all the modification not the modification the verification can be done so we have validation on um if the field is null or not or if it's an email or stuff like that and this is based everything is um see on the person and the person here has uh for example an email annotation and nonnull annotations so the email

annotation is an annotation from Jakarta validation you can use use all the cheart validation constraints and this will also be checked on the client side without the need that you have to do it yourself so if we start uh the hill application we see kind of a difference to the um Vin application so here it says that it does a front content build and now we are

here on the same application and we can call that and we see it also renders hello notification with the name that we entered there so in terms of architecture the Ving application is uh kind of different because uh there you have something like a synchronization from the client to the server the state is on the server whereas Hill is a full single page application framework with react

or in my case with lid and you get the communication to the server for free and you also get the validation the same validation on the back end and the front end and you don't have to care about the build because everything runs in one application and npm Plugin or the plugin uses npm to build the application now moving back to vatin let's have a look at

um what really happens because this is quite interesting uh from a architecture point of view so let's go the network View and uh let's clear that for that we just get one request and now let's make that bigger that you can see it so we have Network and that's now let's that's because I click there so let's enter test and click hello now you can see some

requests and let's check which one was the first one you can see that's a sync request then we take that one and here we see that uh we clicked on to say hello button Buton so this will create a call to the server and it will return more or less what uh what in flow so the server site component has to do and here we see that

we have a v notification and here we also see a note uh with hello test so that means if you click here hello test this Json structure will be returned from the server and will rendered for you in the client so that's the architecture of Vin and if you look at Hilla and do the same so let's uh check out also here what's happened if we click

on the say hello button here we see that we call say hello as a URL and it returns hello test so this is like regular RPC style um interface where we just call uh um a method so here we call say hello for example uh with the request and in the request we somehow have uh the hello inside and the response will then return hello test so

these are uh the differences by the way with the newest version of Vin that is coming soon Vin 244 there we can mix both applications so because Vin is has service date so that means it's not offline capable but if you want to add offline capable views to your application you can mix them and say okay we create uh our application with body in and if you

have something that must be must also work if uh the client has no internet connection we can add it with the react for example have a local store and and get it from there so and the last one that I like to show you is more a different ID we have time leave uh it really doesn't matter which kind of template that we are using but uh

here we can see that uh I use um Tim timely for that it's a HTML template where we have um some input field and also the button so let's start that as well and we have it here so this looks a bit different because we don't have the Rin components I use bootstrap here just kind of a layout and here I can say say hello and it

renders um the message and if you have a look at it clearly then you see that it just changed the text above below and this is done with the framework called HDMX HDMX is used to uh change only parts of uh the application or of the template and this can be done like so that we have uh new um attributes on the components they all have the

pric HX for HDMX and here we have a post this means that HDMX will do a post for that and then we have a Target here where we can see say okay the response of the post request will be uh Target to the greeting uh element El and the greeting element in my case is this fragment here and then it will be replaced by HDMX so that

means we are doing uh not a rest API call with Jason that's coming back and having a JavaScript that is using that um Json to rerender parts of the page we just send back the fragment so if you have a look at um the hello we see that we have the regular get mapping to get back the page and then we have this post mapping greet but

this times it's an H HX request it's by Vim the blow it's an addition for spring boot where you can use that and then we get model attribute the name uh and then we can render just a fragment so we just render this greeting fragment and so we really kept HDM lb back from the server and if we have a look at that as well in the

web inspector let's clear that and say test again and say hello then we see that we get the hello request but the response here is finally everything that we have inside this diff so we get fragments back and this is also code called Progressive enhancement so we can just exchange parts that means hmx is not related to Tim leaf or to screen or to Java this can

be used in any um application that is using sde rendering to enhance or to add some um Dynamic uh information or dynamic uh Behavior also the same uh is implemented for the scrolling so we see here just um the persons that we have and if I scroll down you see that it reloads uh the other persons and this is also done with the HDMX maybe we can

have a look at that this as well this is a bit more complicated because we have here multiple a aex tags um we have a get that's used for pay p in here we see that we pass the size and also the page to the back end then we have a trigger the trigger is if the last row is hit then uh we do that and then

we have a swap attribute that will add the last row um to um the table itself so we can do the same uh with HDX so we can use this paging now you've seen that we have three choices as Java developers that we could use and now the question is in which cases do we use uh those options in my opinion W is very useful if you're

developing data Centric business applications so if you have a lot of gits and you have forms you have dashboards you have charts um you have these class classic business applications where usually have a lot of forms a lot of grids uh only a few users the applications are U mostly used in the back office like an Erp system or CRM system and you don't have uh customer

facing applications and if you only want to use Java then V is to go to solution for that by the way you can also create mobile applications or mobile first appli a let call it I'm currently working in a project where we create a progressive web application with modin withit push functionality and stuff like that uh entirely in Java on the other hand we have Hilla so

if you need a lot of client interaction or you want to have offline capable applications or if you want to use a lot of the browser apis that are provided then you can go with Hilla as I said you can Al mix Hilla and Vin to create the hybrid application and Hiller is also very suitable if you have front end developers in your team or other fullstack

developers that already know JavaScript or typescript react or lit and then they can use their uh knowledge uh build applications more easily because you don't have to um think about the rest API you don't have uh separate validation and you also have just one build process and finally time leave if you want to have full control over the HTML for example if you want to do search

engine optimization or if you have more like customer facing website style application then you can go with that approach HDMX with will allow you to get some um Dynamic Parts in the application you can also take full advantage of service side rendering because there's no JavaScript involved you don't have to write any JavaScript just use HDMX and you also can cache uh these sites very easily so

that's it from my side you can find uh the code on github.com C that's my um GitHub account and full stack is dead is Pro just download it from there and then you can uh try it yourself uh if you like to get in touch I have a website with a block it's called martini. CH you find my uh email address also there and I have a

Twitter account CH where you also can get in touch and now I'm open to questions if Simon thank you so much for this session and uh I found it very very interesting I mean even when I come from a cop or a net area to just see where uh Java is going and what I really liked about your presentation was that you gave three different options and

then let people decide where you are in whichever Enterprise application you're supporting and then give them the option to even plug and play and even have hybrid op between the three so I think that's a very interesting place to be um I'm just going to just a minute let me just jump over to the uh Pine and see if there are any Q&A coming here it does

not look like that but uh good so it it looks like I think more people might just ping you during the course of the conference or using your contact just drop a question later um for me I just found it very interesting and uh where do you think you know there's something interesting because when I now get into teams I support teams as a technical project manager

and uh there are some teams which you know when they're newly building up they pick a entire stack and new teams which tend to pick up Stacks they tend to pick up react or angular and new teams which have been established for a longer time seem to have either a net platform or a Java platform uh where which they build on where do you think this is

going I mean yeah it's very interesting you know there is something called uh CV driven development maybe you heard about that so the IDE is you go to conference you read like a blog post or you are on a whatever uh meet up for example and you hear about new technology so developers tend to uh want to use that technology because they think they only stay relevant

if they use that technology that is hype at the moment so that may be true but this is kind of the cause of the problem right so I would say if you want to build application and I'm building application for 30 years already then you uh must think for the future because when I started as a developer people say yeah you build an application it will stay

for two to three years then we will replace it but you know yourself this never happens so application no no prototype the Prototype that you wrote is still running in production for the next three to five years exactly and that's that's a point because uh if you're using like a new or if you're using Frameworks in the JavaScript space they tend to change so I was also

in charge of an application that we built back in the days with angler JS and they they move to angler and this was completely different framework and so we they had issue to migrate from one framework to another and if you can stay like in a single ecosystem or do things very simple then you are also able to move to something else but if you're going full

in with the framework then you will stuck there and you can't move out of that I mean angular as example we used to have uh reactive stores for example on the client side but now we have signals so signals are everywhere and what do we do now now we have Legacy reactive stores and how do we move to signals should we move to signals and if we

can stay on a framework that is more stable and by the way you mentioned net I like bler and stuff like that that's very interesting technology as well uh kind of similar but different right like and uh such Frameworks are much easier to use if you're a full stack developer or if you must use or create back end back office business application stuff like that and you

you you really should think about using the right tool for for the right job but requires uh the developers that they know more of the Frameworks and that's why I'm doing these talks to give them an idea that there are other Frameworks that they could use instead of all the obvious I mean it's it's a it's it's also very interesting to notice uh because there are some

projects where I was involved in where they said oh are you are you from cop.net well then why don't you take care of the back end and we'll let the other platforms take care of the frontend and you're like oh that's interesting I I mean as if you're like being demoted to the back there is maybe a last word about that in my opinion often people say

oh no don't do full stack development so you're jack of all trades but not an expert of anything at the end right but that's not true and you don't have to be that because if you're creating applications it's much better if you implement one use cases from the front end to the back end because the code will be simpler at the end and if you're a team

you don't need to have experts you you need to have maybe a front end expert and the backend expert but all the other team members can learn from them and they can help them and you don't have to to be an expert in one thing because you will never be an expert of everything but you will get experts in the things that you're doing no matter if

it's full stack if it's database whatever but during the project you will learn a lot and in the next project you will be the expert so it's a misconception that uh companies are trying to find experts they should hire for potential not for skills because it doesn't matter uh what you're doing if you have the potential I can teach you CP tomorrow right if you don't have

it doesn't matter I'm gonna I'm gonna quote you on that last line in the future um looking forward to hearing from you more on LinkedIn and other platforms yeah that's great thanks much bye great day bye