Quinoa - A Quarkus extension to create Modern UI with no hassle
Quinoa… To be honest I wasn’t really a fan at first, but then my wife made them in a bowl like a salad with avocado and raw salmon. Now I really enjoy it with a touch of soy sauce. Let’s not digress too much, I am not here to talk about healthy food in this post, this is about an extension to enjoy coding modern UI with Quarkus.
| This extension is not a Quarkus core extension, it is available as part of the Quarkiverse. Early feedback and contribution are requested to mature the idea. |
Get started
Create a new Quinoa project (with a base Quinoa starter code):
-
With code.quarkus.io
-
With the Quarkus CLI:
quarkus create app quinoa-app -x=io.quarkiverse.quinoa:quarkus-quinoa
Then start the live-coding and navigate to http://0.0.0.0:8080/quinoa.html:
quarkus devHere is the Quinoa guide to go deeper and configure your app with any Node based Web UI framework such as React, Angular, Lit, Webpack, Rollup, …
A bit of context
Alongside Quarkus, interacting with web frameworks such as React and Angular is a natural need. Many users have been requesting a smooth integration since the early stages of Quarkus (#588). This is why I created the Quinoa extension for Quarkus.
Since the creation of Quarkus (3 years ago), many blog articles have popped up to help in that matter, most of them taking advantage of the frontend-maven-plugin. As the creator of code.quarkus.io, I have also been confronted with this situation and I, like many others, have filled the gap using this plugin. It does the job for sure and has been good enough to fill the need for the time being. Unfortunately the overall process could be more streamlined and easier to get started with, it involves a lot of configuration, some tricky setup to copy the resources to the right place and test the frontend at the right moment. Live coding requires starting two processes and a proxy to make it work together.
Let’s start cooking
With this experience behind me, I was in a good position to contribute something to ease our lives a bit. I put an eye to all the needs, issues, propositions and blog articles and came up with a new extension to create healthy modern user-interfaces (UI) with Quarkus: Quinoa (standing for Quarkus UI with NO hAssle :).
Quinoa is taking care of hiding all the tasks around Web UI build/wiring/live-config to let you take care of your web application logic. Whether you create a full-stack Single Page Application or Microservice (micro-frontend); things are made easier for you.
Node.js has great tooling to create modern frontend web applications. Quarkus has a broad ecosystem to build reliable modern backends in the cloud (microservices, rest, DBs, events, cloud native…). Quinoa is the glue to get the best of both worlds.
The only prerequisite for the NodeJS project to be compatible with Quinoa is to have a build script. It should produce static files in a specific directory (index.html, javascript, css, …). Since teams can be different, to make everyone happy, it is possible to either have the web UI in the Quarkus project (default is src/main/webui) or outside (as long as it is available on the disk at build time).
It is not necessary (but possible) to configure the package manager (NPM, Yarn or PNPM), it will be auto-detected depending on the project lockfile.
Quinoa will take care of the generated UI static files. During the Quarkus build, they will be bundled in the jar or native binary. At runtime, they will be served as efficiently as any other static resource in Quarkus. UI developers were also asking to enable Single Page App routing, it is now just a boolean configuration.
Now, what about live coding? It’s a popular feature of Quarkus and most NodeJS UI frameworks already have such a mode. Quinoa provides two options:
-
Delegate to the UI live coding server. You configure the port of the UI server. By convention Quinoa will call the
startscript from the package.json to start the UI server process. Then it will transparently proxy relevant requests to the given port. -
Quarkus watches the files and Quinoa triggers a new Web UI build on changes (you can configure different builds for dev and prod).
Either way, when starting Quarkus dev-mode your Web UI will be served seamlessly (by default on http://0.0.0.0:8080). Both are viable options and allow you to live-code on both backend and frontend at the same time with close to no setup! Pretty awesome right?
