Component based development in a Gutenberg world

What is component based development?

Component based development splits your website or application into more manageable, bite sized, reusable chunks or ‘components’.

This ‘style’ of development has been popularised by modern Front End frameworks such as Vue.js & React. Here at ClarityDX our usual development process does not always require these JavaScript frameworks. However, a lot of the methodologies and practices can be implemented into our standard WordPress development.

Why do we follow a component based approach?

Maintainability

Component based development allows for easier maintainability and reduces code duplication. Take a ‘button’ as an example. If a client requests a change like a different font size or updating the background colour, we know changing these properties will only affect that single component, but also that the updates would happen site wide wherever the component is used. We don’t have to worry about regression or things breaking elsewhere in the application.

If there was a bug on another component, we could easily find the source of the problem and debug without having to worry about conflicting elements. This has a huge benefit for both client and developer as we can both be assured that all instances will work.

Performance

By splitting elements into single components we can reduce the number of duplications drastically. We’ve come across multiple instances of elements across a number of WordPress sites where there would be tiny alterations between each of them. This could be slightly different spacing, font sizes or colour differences. By writing a component once and deploying across different areas of the site we know our the design and front end code will remain consistent, and so offer a cohesive user experience for the end user.

Doing so can drastically reduce the number of DOM elements (document object model), as well as reducing unwanted/unused CSS which increases file size and load times of your site.

Google and other search engines will penalise you and give reduced performance & SEO scores based on these attributes. So keeping your site as optimised as possible can have a huge benefit to your business and overall page rankings.

Component based development with Gutenberg

Gutenberg is a ‘new’ editing experience for WordPress. It gives our clients more flexibility when creating pages by utilising reusable ‘blocks’ and components.

We refer to these custom ‘blocks’ as modules – confusing I know, but we have been practicing component based development long before the introduction of Gutenberg so it’s stuck for now. Each of these modules are taken from the designs and each element is mapped out into a functional specification document where we declare each component and attributes related to that module.

This helps us as developers by already seeing how and where we can optimise, reuse and split out each element to better the performance of the site. We can already organise each of our modules into their own section and have code and styles set up to be as clean and performant as possible.

When it comes to building these blocks/modules for Gutenberg development we have two options.

Firstly to use ACF (Advanced Custom Fields) Blocks. This has been extremely useful for us in transitioning to Gutenberg, as it provides our developers with something they are already familiar with, and provides a smaller learning curve to get used to the Gutenberg block way of thinking, rather than having to learn a whole new framework which can take time. WordPress has always originally been written up in PHP so switching this to JavaScript can be a bit of a transition for some developers, and ACF has been a perfect go to alternative.

Our second option is writing custom Gutenberg blocks from scratch, this comes with some huge benefits such as inline editing and a better overall user experience, however this has a much steeper learning curve than the former as you have to be confident in JavaScript development and using frameworks such as React.

Both options have their benefits and drawbacks but the overall experience for our clients whichever method we choose are second to none and provide a wonderful editing experience. Both methods are organised and optimised for reusability and maintainability.

With Gutenberg becoming more and more popular (our preferred standard for new projects) we felt right at home, and for us the transition for our WordPress development team has been pretty seamless.

We follow the same mantra:

Write once, deploy wherever’