General concepts

The tools provided by the PWA Studio project allows you to create websites that are fast, mobile-friendly, and reliable. This topic lists the basic concepts you need to know to work with PWA Studio tools.

data-width=100%

data-slots=heading, link, text

Development concepts

CSS modules
CSS modules are modular and reusable CSS styles. This allows you to develop components with styles that do not conflict with external style definitions.
data-width=100%

data-slots=link, text
Configuration management
PWA Studio provides tools to help manage configurations across different environments, such as local development, staging, and production.
data-width=100%

data-slots=link, text
GraphQL
GraphQL is a specification for a data query language on the client side and a service layer on the server side. It is used to request and push data in a progressive web application.
data-width=100%

data-slots=link, text
Routing
Routing is the process of mapping a URL to specific page resources. Learn what tools PWA Studio provides to support both server-side and client-side routing.
data-width=100%

data-slots=link, text
State management
State management describes the way the application handles changing state data as a result of user interactions.
data-width=100%

data-slots=link, text
Talons
Peregrine Talons are the logic component counterparts for Venia UI components. Each Talon in Peregrine is designed to provide data or perform side effects for a specific Venia UI component.
data-width=100%

data-slots=heading, link, text

Application features

Application shell
An application shell provides the basic user interface structure for a progressive web application.
data-width=100%

data-slots=link, text
Client-side caching
Client-side caching is the process of storing data into a local cache after a network fetch.
data-width=100%

data-slots=link, text
Content rendering
Content rendering explains how a browser gets the final HTML content for a requested page.
data-width=100%

data-slots=link, text
Extensibility
Learn about PWA Studio's extensibility framework and how you can extend the base Venia storefront application.
data-width=100%

data-slots=link, text
Internationalization
Internationalization (i18n) is a feature that lets you localize content for a culture, region, or language.

Common terms

The following is a list of common terms and definitions associated with PWA Studio development.

Service worker : A service worker is a script that runs in the background. Progressive web applications use service workers for caching and resource retrieval.

Component data binding : Component data binding refers to the way data flows between the source and a UI component. Progressive web applications use data binding patterns to connect dynamic data with the user interface.

Client state, reducers, and actions : Client state, reducers, and actions are Redux concepts used to manage and handle the state of a web application.

Loading and offline states : Loading and offline are both states that must be handled by progressive web applications.

Container extensibility : Writing extensible containers allow others to re-use and alter your container without modifying the source.

Performance patterns : Performance is an important feature for a progressive web app. There are many strategies and patterns available to help boost the performance of a PWA.

Root components and routing : The root component of an application is the DOM node under which all other nodes are managed by React. Routing is the ability to map a URL pattern to the appropriate handler.

Critical path : The critical path for rendering refers to the steps the browser takes to process the HTML, CSS, and JavaScript files to display a website. Optimizing the critical path is important to get the best performance out of a progressive web application.