Theme vs Storefront

An Adobe Commerce or Magento Open Source store uses theme components to define the look and feel of the front-end store. PWA Studio introduces a different approach for creating a custom front-end experience using storefront applications. This topic compares the traditional theme development approach of Adobe Commerce and Magento Open Source with a more modern approach of developing a progressive storefront using PWA Studio tools.

Definitions

Adobe Commerce and Magento Open Source theme

An Adobe Commerce or Magento Open Source theme is a type of component that defines how a store looks. It is deeply integrated with the application and depends on the core code for functionality.

A theme is always built on top of an existing parent theme. Out of the box, the Adobe Commerce and Magento Open Source applications provide the Blank and Luma themes that developers extend or customize to create custom storefronts.

All themes inherit from a parent theme. At the top of the inheritance chain is the Blank theme, which provides the base files for a theme. Every other theme builds on, overrides, or customizes these files.

For more information on themes, see the Frontend Developer Guide for the core application.

PWA Studio storefront application

A PWA Studio storefront application is a progressive web app built using PWA Studio tools.

It is made up of an application shell that exists in the browser and a middle tier service layer that sits between the shell and a headless backend running Adobe Commerce or Magento Open Source.

Unlike an Adobe Commerce or Magento Open Source theme, a storefront application does not inherit from a parent theme. Instead, the application is composed of React modules that provide the different pieces of functionality. These pieces can be swapped out to change behavior or even removed entirely.

For an example of a storefront application, read about the Venia storefront, a reference implementation created using PWA Studio tools.

Components

Both theme and storefront applications use pieces that are known as components, but each approach uses a different definition of this term.

In theme development, components mostly refers to Adobe's UI Components. These components are standard UI elements, such as tables, buttons, and dialogs, that Adobe provides to make theme development easier.

In PWA Studio, components refers to React components. React components are modular pieces that make up a React application, such as a PWA storefront. These pieces can contain pure logic, such as Peregrine components, or visual elements, such as Venia's UI components.

Dependency management

A theme uses a Composer file to specify its dependencies and relies on the application's file resolution mechanism to make sure the required theme files are available.

PWA Studio uses Yarn for dependency management and validation scripts to make sure it is compatible with the backend application server.

Inheritance vs modularity

Since themes inherit from a parent theme, the effort needed to create a custom storefront is dependent on the additional customizations needed on top of a base theme. Some themes build off Luma or other existing themes and apply minimal customizations, such as logo and color changes, to create a unique look for a store. Other themes use Blank as the base and require more customization work.

This inheritance approach tightly couples a theme with the parent themes up its inheritance chain. As a result, parent theme updates can lead to unexpected side effects for its dependent child themes.

PWA storefront development uses a more modular approach for creating a storefront.

Instead of starting with a base theme and customizing the pieces, a developer puts together a storefront from scratch using different React modules. This approach provides greater flexibility and control during the storefront creation process.

Since they are independent and modular, side effects from updating each piece is minimized. Non-breaking updates can be applied to other modules while keeping others to a stable version.

Required skillset

The skillset required to work with themes is different from the skillset required for a PWA storefront because of the technologies used in each approach.

Adobe Commerce and Magento Open Source frontend developers

In addition to knowing standard JS libraries, such as jQuery and KnockoutJS, theme developers for Adobe Commerce and Magento Open Source need general knowledge about the application's components and specialized knowledge about its templating and layout system.

The following table is a summary of general skills needed for theme development:

PWA storefront developers

The barrier for entry for a PWA Studio developer is lower than a theme developer. PWA Studio development requires less specialized knowledge to create a custom storefront, and the tools and concepts it uses are more common and standard among the general front-end developer community.

The following table is a summary of general skills needed for PWA storefront development:

Last updated 9/13/2023

Was this helpful?

Yes

No