What is component based development?
Component based development splits your website or application into more manageable, bite sized, reusable chunks or ‘components’.
Why do we follow a component based approach?
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.
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.
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’
93digital make it to the finals of the UK Digital Experience Awards 2020
Applying ‘The Golden Circle’ to web projects
Do you have an exciting strategic project coming up that you would like to talk about?