Architecture and stack

Architecture overview

There are 4 parts to the architecture:

  • API hub
  • Developer tooling
  • studio
  • Frontend delivery

Architecture - 6 (1).jpg

At the heart of what we do are Frontend components, which are React components with a schema. They're built by developers, added to pages by business users, the data is brought in from the API hub, and they're delivered optimized for performance to your customers.

Developers build Frontend components. We provide all the tools you need to build, deploy, and iterate on your site. This includes: the CLI, sandboxes, GitHub customer repository, Continuous Integration, and more.

Frontend components get data through our API hub. The API hub connects and dispatches information requests to any service API. To speed up your connector development, you can use our extension library for bootstrapping.

Once built, the Frontend components are ready-to-use in the studio, where you can build your entire site, all without code. From creating menus to optimizing pages and filling your site with content, it's all done in one easy-to-use interface.

commercetools Frontend provides the delivery layer that displays your Frontend components to your customers. It utilizes Next.js to serve a Progressive Web App (PWA), optimized for performance and mobile first. This also provides Server Side Rendering (SSR), auto-scaling, and fail-safe hosting.

commercetools Frontend stack

Our technology stack consists of community-proven applications, tools, frameworks, and components.

Next.js When working within development, you'll mainly be using ReactJS as provided by Next.js.

You can work on your code in the frontend as you like. Behind the JSX/TSX entry point of a Frontend component, you can break down the frontend experience into any number of React components as well as regular JavaScript files.

We generally recommend structuring your code in well-designed ReactJS components. We also recommend extracting complex logic into independent, pure JavaScript classes that are decoupled from ReactJS and HTML interaction.

TypeScript commercetools Frontend uses TypeScript by default for any backend extension. This lets you easily work with the APIs using auto-completion in your favorite IDE and safety checks at compile time to prevent many bugs upfront.

Yarn We use Yarn as our package manager for JavaScript.