Java meets TypeScript: full-stack web app development with Spring Boot and React by Marcus Hellberg

Spring I/O 2024 - 30-31 May, Barcelona
As Java developers, we know the benefits of type-safety when building apps. The problem? Usually, that type-safety ends when we leave the server. What if it didn’t have to be that way?
In this presentation, you’ll learn how to build a full-stack reactive web app through live code examples. We’ll use Spring Boot and Java on the backend and React with TypeScript on the frontend, connecting the two with the new Hilla framework from Vaadin.

[@TechTalksWeekly]

This talks is excellent and it has been featured in the last issue of Tech Talks Weekly newsletter 🎉!

[@marcinnnWL]

Nice approach to make full-stack life easier.

[@ashishkarn9283]

Wow.. This is amazing.

[@nkomanyaotoman3599]

This is just amazing! I love it

[@fipabrate]

I love this! This is amazing! I will try it for sure! I love both react and java. This is like a dream for me. Angular + Java next?

[@marcushellberg13]

Maybe. We want to get Hilla working really well for React first before branching out into other frameworks. Angular is on our list of potential things to support, but nothing confirmed yet.

[@WinWell-ml5jh]

This is the future

[@potatosheep]

If Hilla supports VueJs, we will be using Vaadin in our organization without a doubt.

[@marcushellberg13]

We don't have Vue support at the moment. You can use some features of Hilla with Vue (like the type safe browsercallable endpoints) if you change the contents of src/main/frontend to a Vue project, but you wouldn't get stuff like file based routing. We may add support for other frontend frameworks down the road, but right now we're focused on getting the product just right for React.

[@glasskaar]

Looks really cool! Would it work with kotlin and ktor or is it java + spring boot only?

Kotlin should work as long as you use -Xemit-jvm-type-annotations but the runtime environment is tied to Spring Boot

[@SomjitNag]

Kotlin support ?

[@arkosarkar343]

Isn't it much similar to Google Web Toolkit architecture?

[@marcushellberg13]

There are some similarities, like with the RPC calls. But overall, the experience is quite different with using React for the frontend.

[@arkosarkar343]

@@marcushellberg13 thanks for your reply.

[@WinWell-ml5jh]

Is it possible to integrate with redux?

I don't see any reason why you couldn't do that since Redux mostly integrates with the part of React that Hilla doesn't directly cover.

[@WinWell-ml5jh]

The reason is that, if service is annotated with @BrowserCallable, and used directly from a component, how does come in. Am saying this because I don't know much about, but give me a clue, can it support fetching data from using a thunk api?

[@marcushellberg13]

You can use a browser callable service anywhere you would use a fetch() call, so there shouldn't be any issues using Redux

[@ewolz]

Any connection of Vaadin to Hilla ?

[@ManuelCarrascoMonino]

Don't understand well your question, Hilla is part of Vaadin, and if you refer Vaadin as the other framework for Java, it's still there its called Flow. In summary, you can create your frontend app in pure Java (that is flow views) or Pure TS (that is hilla views), and from vaadin 24.4.0 you can mix both in your app

[@WinWell-ml5jh]

How do we handle deployment

It's just a Spring Boot application so you deploy it like any other such application. Run it as a standalone jar, pack it up in a Docker container, or build a war that you deploy to a Java application server.

[@akashkarmakar5798]

This thing is best bro. You guys have any intention of RSC support??

[@IvanRandomDude]

For RSC you need node server.

[@marcushellberg13]

We don't have any plans right now. It _should_ be possible to run RSC also on GraalVM, but not something we've looked into

[@cviniciusm]

I disagree, I see developers having difficulties with a single stack of development, to follow its evolution, much worse trying to follow the evolution of several stacks. More old are you then less time to study and research.

[@ooijaz6063]

I mean, have you seen any non-hello-world project that uses only 1 technology? Usually it's a tech stack - combination of few frameworks / libraries / languages often with few apps, where some of them may be legacy on older versions and are nearly "readonly". That's the reality that I've seen so far.

[@hangar18k]

very impressive, but Vaadin...

[@marcushellberg13]

Care to elaborate? 😆

[@isaacoach6041]

@@marcushellberg13 Tell us your secret, how you guys deploy the app?? [ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.11.0:compile (default-compile) on project vaadin-create-countdown: Fatal error compiling: error: release version 21 not supported -> [Help 1] I just downgraded the compiler, cause the default version 3.13.0 (for now) is showing the same error with Java 21.

[@isaacoach6041]

@marcushellberg13 Tell us your secret, how you guys deploy the app?? [ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.11.0:compile (default-compile) on project vaadin-create-countdown: Fatal error compiling: error: release version 21 not supported -> [Help 1] I just downgraded the compiler, cause the default version 3.13.0 (for now) is showing the same error with Java 21.

[@user-ij9vi6sn8g]

can't we just ditch javascript, typescript and just use webassembly and java just like how c# use blazor, now webassembly have gc.

[@joonaslehtinen5175]

For 100% Java approach, take a look at Vaadin's Flow framework. It also now integrates seamlessly with Hilla and thus you have best of the both worlds.