This guide is intended as a high-level overview of the modern WooCommerce development environment and how new tools and features such as an increasingly React-based user interface fits into the broader user experience and development environment.
Recommended foundational reading
- Tutorial: Intro to React
The traditional way
- A person interacts with WordPress by clicking links and buttons or perhaps submitting form fields, at which point their browser sends an HTTP request for a particular resource (URL).
- WordPress receives the request and uses it to decide what kind of processing must be done to return the correct response to the user’s browser. For instance, WordPress may need to communicate with its underlying SQL database to perform CRUD operations on records, fetch data from external services, concatenate template files, or any number (and combination) of different operations.
- As WordPress processes a request, it encounters points in its execution where additional behavior or data can be plugged in to modify the default processing of the request. These are the Hooks and Filters that make so much of WordPress’ extensibility possible.
- Once WordPress has finished processing the request, it returns a response to the browser, which, more often than not, takes the form of a rendered HTML page in the user’s browser window.
Note: From a technical standpoint, the steps outlined above are admittedly an oversimplification of a much more complex process, but for the purposes of representing the user’s interaction, these steps provide a sufficient sketch of what’s happening.
The new way
The result is a user experience that much more closely resembles the behavior in desktop applications, where functionality is event driven and based on granular user actions, such as clicking a button, pressing a key, or hovering over an element. Because of this distinction, it’s more difficult to express the typical user interaction as a single series of steps like we did above. Things are much more fluid and varied, but there are a few key concepts worth highlighting in this new paradigm.
HTML elements are defined using JSX inside of modular React components. These components are typically nested into a component hierarchy with a shared application state. A component hierarchy is inserted into the corresonding page’s DOM when the element is needed on the page. This insertion can happen when the script loads, during an initializion function, or even, in the case of WordPress and WooCommerce, as the result of an action or filter hook.
Granular event-driven behavior
HTML elements are rendered with event handlers that are bound to their DOM events. These event handlers process the events and update the shared state, which in turn causes the nested elements to automatically re-render as needed.
This modernized user experience requires its own dedicated tools for development and testing, many of which may be unfamiliar if you have primarily worked with PHP. Let’s take a look at a few of those tools and what you’ll use them for.
NVM is a version manager for Node.js. Different projects might require different versions of Node. This tool helps you maintain multiple installations of Node on your system and switch between them as needed.
NPM is a bit like a Swiss Army Knife for Node applications. It consists of a website that hosts a registry of packages that you can explore and use in your projects, as well as a command-line utility that you can use to interact with the registry and manage the development workflow in your projects. In a WooCommerce development environment, you’ll use it to:
- Declare and install dependencies
- Run build scripts that orchestrate tools which transpile and package your source files into servable assets
- Assist with general development tasks such as linting, testing, and all sorts of other things
A WooCommerce development environment relies on a number of different Node modules as dependencies for various things. Outlining each dependency’s functionality and purpose is outside the scope of this guide, but we recommend exploring the
devDependencies objects in the
package.json file of the WooCommerce Admin repository to get an idea of what kinds of modules a modern WooCommerce extension might use.
One package worth highlighting here, however, is a utility that handles a critical piece of your development workflow: Webpack.
Architecture of a project
- ✅ Update your version control configuration to ignore the the superfluous supporting files that Node generates.
- ✅ Initialize a
- ✅ Declare and install dependencies.