Skip to main content

High Velocity Frontend App

What is It?​

The High Velocity front end app is a truly composable Next.js commerce application.

Truly Composable?​

Headless commerce promises vendor flexibility. You get to mix and match your vendors based on your needs. That sounds great, but that promise isn't often realized.

Why?​

  1. Code Complexity - If not launched from a solid starting point, the codebase for a headless implementation can quickly become complicated and unmaintainable. The complexity of this code base can actually leave you with just as much vendor lock-in as a monolith!
  2. Monolithic Orchestration Layers - One approach is to create an orchestration layer for your headless app that integrates with all of you vendors, providing data models which your app consumes. That doesn't sound very "composable" to us.
  3. Budget - Building a really good app is time consuming and expensive. You don't have time to spend 6 months planning out an architecture (which may or may not be modified or dumped altogether when it encounters real world problems). So, you take a few shortcuts. See (1).

Architecture Overview​

The High Velocity storefront has a few principal building blocks:

  1. Next.js App
  2. UI Library
  3. Integration Packages
  4. Vendor Packages

Next.js App​

The Next.js app pulls together data models provided by the integration packages to build the storefront user experience. This is where your ui lives.

Integration Packages​

High Velocity decomposes integrations and data models based on integration type.

Here are some integration types:

  • Commerce
  • Content Management
  • Order / Inventory Management
  • Customer Authorization

Ok, but How are these decomposed?

The storefront app has an integration package installed for each integration type. These are just regular ol' npm workspace packages. They are responsible for exposing vendor agnostic services, api endpoints, hooks, and components.

Example:

The storefront app asks @hv/commerce integration package for an Catalog implementation. The @hv/commerce package checks the configuration for the site, and returns a concrete implementation of Catalog. It gets concrete implementation from the appropriate vendor package.

Vendor Packages​

Vendor packages integrate directly with your providers. They expose concrete services (and sometimes components) to the integration packages above. Vendor packages are where you normalize your data into data models that the app understands how to use.

What's it Built with?​

  • Next.js version 14+:
    • High Velocity is built with the Next.js app router and server components architecture.
  • Tailwind
    • Tailwind css enables rapid styling and theming, and is a perfect match for server components.
  • shadcn/ui
    • Shadcn is a copy and paste style component library for tailwind. It uses Radix UI for behavioral, but the styles are fully customizable