Developer Blogs: State Management at Cox Automotive

Hi there!

Welcome to the first in a long series of Cox Automotive Developer Blogs.

These are aimed at giving our clients, customers, and colleagues some insight into the development and software engineering side of our business. This entry is intended to be beginner-level, and require little to no prior technical knowledge.

To kick things off, something that's been in many of my team's conversations lately is front-end state management!

What is State Management?

When you visit a website, everything you see on your screen and interact with is the 'front-end' - all the forms, buttons, links, images, text, etc. At any given time, the specific status of all those elements can be referred to as their current 'state'.

If you've ever switched a website from light-mode to dark-mode, or filled out a form, congratulations - you've personally updated the state of a front-end web application.

When we talk about state in this context, we are generally referring to the current condition of a website and its elements - which means we also need to know, understand and handle all the different possible states a website might have, given all the different ways our users can interact with it! For example, a button on a form may be enabled or disabled according to the state of the form, and the button's state (enabled or disabled) should change accordingly.

The more your website grows, the more there are different possible states and combinations of state to consider.

Enter state management

State management refers to a system that allows developers to organise the website's code in a way that's cohesive, safe, and scalable.

State management is often divided into two areas - local state and global state. Local state is generally the state of your application's "components". Or in other words, all the little building blocks that make up the different areas of your app; those buttons and forms will typically have their own local state. Global state refers to things that your entire application needs to know about, like if a user is logged in or not.

These days, the front end of many web applications are built using several popular libraries and frameworks like Angular, React or Vue. Each of these have their own built-in ways of managing the local state of their components. They also each have their own respective global state management options - Redux for React, Angular can use NgRx, and Vue can use Vuex.

If Angular, React and Vue are the different 'engines' that fuel the front end you see and interact with, Redux, NgRx and Vuex can be considered the different speciality tools that each engine uses to keep things running smoothly.

How do state management systems work?

Each library and their respective tools are unique and require a great deal of time and effort to fully understand and master. That being said, they do share some common ideas - particularly around the concept of your web application having a single source of truth, often referred to as a 'store'.

Imagine an online catalogue of cars to buy and sell - this involves a great deal of state to consider. How many cars are there? Which ones should be shown to a user? How many should be shown at a time? Each car will have its own state too - has a given car just been reserved by somebody? What if someone's just posted a new car to sell?

The primary purpose of a state management system is to provide a one-stop-shop to answer all of these questions - a single source of truth for your entire application's front-end.

When a customer wants to view available cars, we can go to the store from anywhere in our application and retrieve the available cars. If the customer buys that car, we can let the store know about this so it can update its catalogue correctly. Because we always provide and retrieve updates from a single source, the store, that means any other part of the application can always get the latest and most up to date state from that same source.

As our car website grows in scale and complexity, we can always rely on the store for knowing what state to provide in any circumstance - it's the brain, and the centrepiece of the entire operation.

Driving forward

While state management solutions are not required for every application, they are becoming increasingly popular. Implementing state management at a global level can mean some initial heavy lifting with learning and adapting to something new, but even with smaller websites, it can often be far easier and faster in the long term to work with centralised state management.

At Cox Automotive we know our products and offerings grow and develop over time, and that increase in complexity means that we benefit a great deal from implementing strong state management solutions.

Brian Wood

Our cookies

We use analytics cookies to collect information about how our site is being used. We use these cookies to allow us to improve our services. Tell me more