Broadleaf Microservices
  • v1.0.0-latest-prod

Technology Used in the Starter

Here we cover the technologies used in the starter app.

Core Technologies


The JavaScript framework built by Facebook. Their docs.


Next.js is a React Framework that provides abstractions for handling

  • code bundling and compiling

  • server side and static rendering

  • production-build code optimizations

The compilation part is very important for developer quality-of-life while the server-side and static rendering matter primarily for SEO. A JavaScript compiler let’s us right code using TypeScript, JSX, and the latest ECMAScript standard.


This is the JavaScript specification. Older browsers will use an older version, while newer browsers are inconsistent in how much they implement of the newer specs. The compiler will transform the syntax to be compatible with the lowest-common denominator and add polyfills for missing features in older browsers. This let’s us use the latest and greatest while developing without needing to think too much about browser compatibility, as far as JS goes.


JSX is a syntax extension for JavaScript that let’s us write JS like it’s HTML. Under-the-hood, everything is a JS object. A big advantage with this is not just the convenience of the more familiar HTML-ish syntax, but it also gives us all the power of JS for custom logic.

With JSX
const Component = () => (
    <h1 className="title">Hello, world!</h1>
    <img src={user.avatarUrl} />
Without JSX
const H1 = React.createElement(
  {className: 'title'},
  'Hello, world!'
const Img = React.createElement(
  {src: user.avatarUrl}
const Content = React.createElement(
  [H1, Img]
  <h1 class="title">
    Hello, world!
  <img th:src="${user.avatarUrl}" />


TypeScript is a superset of JavaScript that introduces features of a strongly-typed language like Java where we can define the types of variables, inputs, and outputs. This is then compiled down into plain JS.


We’re using Jest and the React Testing Library for unit testing. We plan on adding Cypress for functional testing. See the Testing doc for more info.


We’re using TailwindCSS and PostCSS. See Style Sheet Best Practices for more info.

Code Style Enforcement

We’re using Prettier with ESLint to enforce standardized code styles. These are run in a pre-commit hook.