Micro Frontends for Java Microservices
Tags: java, security, programming
Published: 2022-10-21 15:41:26

> Original post written by [Matt Raible](https://auth0.com/blog/authors/matt-raible/) for Auth0 blog.

### This tutorial explains what micro frontends are and how you can use them with Java microservices.

### <br>

Microservices have been quite popular in the Java ecosystem ever since Spring Boot and Spring Cloud made them easy to build and deploy. Things have gotten even easier in recent years with the proliferation of new Java frameworks built specifically for microservices: MicroProfile, Micronaut, Quarkus, and Helidon. Not only do these frameworks provide an excellent developer experience, but they also tend to have built-in Docker support. They even work with GraalVM, so you can compile your apps to native code!

_To be fair, MicroProfile isn't a framework; it's a spec with many implementations. In fact, both Quarkus and Helidon have MicroProfile flavors you can use._

Today, I'll show you how to build a Java microservices architecture that leverages micro frontends for the UI. The backend will use Spring Boot and Spring Cloud, while the frontend will use React. You can also use Angular or Vue if you'd like.

**Prerequisites:**

- [Java](https://sdkman.io/) 11+
- [Node.js](https://nodejs.com/) 16+
- [Docker Desktop](https://www.docker.com/products/docker-desktop/)
- [JHipster](https://www.jhipster.tech/installation/) 7.9.3

You can install JHipster with npm:

```shell
npm i -g generator-jhipster@7.9.3
```

## Java Microservices with Spring Boot and JHipster

JHipster is an application generator that creates a Spring Boot backend. You can configure it to use SQL or NoSQL databases, plain ol' Spring MVC, or reactive with WebFlux. It also generates a UI for your REST API and offers you the choice of Angular, React, or Vue. Last year, I showed you how to build [reactive Java microservices with Spring Boot and JHipster](https://developer.okta.com/blog/2021/01/20/reactive-java-microservices). In this tutorial, you'll build a gateway with Spring Cloud Gateway. Then, you create a blog microservice and a store microservice, each with its own database.

![Java Microservices](https://images.ctfassets.net/23aumh6u8s0i/4JowfxrED2S8r5XcJ6Wr46/2e14fc70576244cdae83b2bf619bda40/01-jhipster-microservices.png)

This microservices architecture had one major flaw: the UI for it is a monolith, with all its files on the gateway. This isn't good from a loose-coupling point of view because changes in a microservice might require changes in the UI. Instead of being able to deploy the microservice independently, you have to deploy the gateway too.

Today, I'm proud to show you how you can solve this problem with micro frontends. JHipster recently added support for micro-frontends. Microfrontends provide a way for you to remotely load and execute code at runtime so your microservice's UI can live in the same artifact without being coupled to the gateway!

![Java Microfrontends](https://images.ctfassets.net/23aumh6u8s0i/7IHgn1MlqHLyfwGlqLsPE1/5d9ab6f7a2fab02a649f89dde3d2d43b/02-jhipster-microfrontends.png)

In the previous paragraph, you might notice I spelled micro frontends three different ways. The current literature is all over the place on this one!

<include src="Tweet" tweetId="1499098253920460802" staticQuote="" staticAuthor="" />

I'm going to use "micro frontends" for the remainder of this post since that's what [Cam Jackson](https://twitter.com/thecamjackson) used in his [Micro Frontends article](https://martinfowler.com/articles/micro-frontends.html) on Martin Fowler's blog.

## A Quick Introduction to Module Federation

Webpack's [Module Federation](https://webpack.js.org/concepts/module-federation/) is one of the best-known implementations for micro frontends. Its [`ModuleFederationPlugin`](https://webpack.js.org/plugins/module-federation-plugin) allows a build to provide or consume modules with other independent builds at runtime. It even allows you to share libraries between frontends to reduce the size of remote bundles.

[Zack Jackson](https://twitter.com/ScriptedAlchemy) is the creator of Module Federation and recently [collaborated](https://twitter.com/ScriptedAlchemy/status/1564411584851505153) with [Manfred Steyer](https://twitter.com/ManfredSteyer) to create Native Federation. This means you can use micro frontend concepts with any build tool, not just webpack.

<include src="Tweet" tweetId="1564312149580582912" staticQuote="" staticAuthor="" />

## Why Should Java Developers Care?

I think micro frontends are a fascinating architectural concept. Microservices weave everything together on the backend with protocols like HTTP and gRPC. With micro frontends, it's all HTTP. You can see your app get stitched together by watching your browser's network console and seeing remote modules-load.

I've encountered quite a few monoliths UIs in my time as a consultant. The backend was beautiful microservice architecture, but it was all tightly coupled on the frontend. There's a good chance many Java developers don't care about the UI because they just work on the beautiful backends. However, if you consider yourself a Java _web_ developer, micro frontends are as revolutionary as HTML5!

And that's the beauty of this tutorial; you don't have to write any micro frontends. JHipster can create them for you!



[Read more...](https://auth0.com/blog/micro-frontends-for-java-microservices/?utm_source=devto&utm_medium=sc&utm_campaign=devto)