Why We Love Component-based Thinking (and We’re Excited for the Future of WordPress!)

Component-based thinking has dramatically changed the way we design and develop WordPress websites. This article details the shifts and advantages to component-based thinking.

Imagine: You wake up in the morning and turn on your Breakfast Maker 3000™. It’s an all-in-one breakfast-making machine. Right away, it starts to brew a cup of coffee, toast a piece of bread and get an egg on a griddle. It covers all your bases – sounds great, right?

Now imagine you’ve overslept and need to quickly make a big batch of coffee. Unfortunately, you’ve got the Breakfast Maker™ — you can’t make coffee without making toast, eggs, waffles and bacon. 

Even worse, imagine you wake up to make a cup of coffee, and discover that your coffee maker is broken. No problem, you’ll just pop some bread in the toaster. Oh wait, your toaster is actually connected to your coffee machine, so it’s broken too. Not an issue, you’ll fry up some…oh gosh, the griddle’s busted as well.

Sounds like a fragile, inflexible system, right? Yet, for a long time, that’s how web pages worked. Many were built on templates that comprised entire pages. This meant that small changes to one page could have consequences for the rest of your site.

Component-based trend

Thankfully, we’ve witnessed a major trend in web development in recent years. Websites are now being built with ready-made components, referred to as component-based design and development. That means building the coffee maker separate from the toaster, with the ability to use either one as much or as little as needed without affecting the other. Additionally, an upgrade to the waffle-maker doesn’t affect your coffee maker. And you can make as many cups of coffee as you want without overloading your griddle. 

In regard to your website, this thinking translates into web pages created with smaller, reusable pieces, such as text blocks, a photo banner, a contact form, or a call-to-action block. Each page becomes a collection of manageable, reusable parts. It is a fundamental shift in how we design and develop web pages: not as full pages, but as components – pieces of pages put together to make a whole.

Components can be thought of as discrete, reusable building blocks that are part of a larger design concept for a web site. Because they are developed to be modular and independent, editing or moving a component has a low impact on the whole website. In short, web components are becoming popular with developers because they are reusable, composable, and testable.

Why all the hype for component-based design?

Reusable

Web components are reusable. They are built once and then pulled into any page they are needed on. In addition, they can be repeated on each page as much or as little as needed. 

For example, you could build a card with an area for an image and some text to be re-used on multiple pages. On each page, it can contain a different image or text as needed. But the overall design stays the same across all pages, keeping the design of the site cohesive.

Composable

Web components are composable. They can be selected and assembled in various combinations to satisfy the design needs of different pages.

For example, you could build two different pages that use the same card with an area for an image and text. On one page, the card is followed by a repeating component of job listings. And on the other, it is followed by a list of staff members. In other words, components are like LEGO bricks, which you can assemble in various ways to build your subpages by composing and arranging them in various ways in order to achieve the desired goal.

Testable

Web components are easy to test. They can be tested ahead of time in a variety of contexts and scenarios to ensure they will not break when placed in different areas of a website.

For example, if you need to test the functionality of a button on your site, you can test the button component on one page. Because you know the button is modular and reusable, there is no need to test the button on every page it is placed. This saves developer time and headaches both when testing the button and making any updates in the future.

Okay, so what does this have to do with WordPress?

In keeping with the times, WordPress itself has revamped its core code to allow for component-based development. That means that it is going to get easier and easier for users to add and re-use components, which are called blocks in the WordPress universe. With the launch of WordPress 6.0, we continue to see more tools that allow users to compose and save pages built with their specific theme’s blocks without the constraint of having just a few page templates to work from. In short, the WordPress block system makes available a component-based design system for WordPress users. And we are excited about it!

One of our core guiding principles at Glantz is to shun complacency. That’s why we’re looking at component-based design and assessing the tools and strategies we use to develop web projects. We aren’t having this conversation just because WordPress has launched the Block Editor. We’re keeping WordPress in our toolbox and bringing it into 2023 with us. 

We are excited to see that the developers at WordPress are having the same conversations we are as a studio. We are talking about major changes in web development, and implementing features that keep up with component-based design and development. That’s why it’s an energizing time to be a WordPress developer. 

In essence, WordPress embracing component-based development has made it easy for us to recommit to using it in some of our biggest, most complicated web projects. With that in mind, 2023 promises to be one packed with opportunities to create functional, modern websites using free, open-source WordPress technology that we already know our clients love.