The future is modular!

TLDR: Modular development enables the rapid creation of pages by both the developer and the site's administrators. It reduces duplicate code and creates more manageable projects. The use of modules keeps data clean and allows the easy export or transfer content when upgrading a CMS or website.

When putting together web pages, the actual content structure tends to be very similar throughout a site. There are plenty of different ways for us to display information to users, but quite often we're using the same components, whether it's text boxes, images, videos or forms. So how can developers build pages more effectively?

During the nineties and even into the noughties, the web development industry was using tables, WYSIWYG editors and static content to build web pages. Developers had to write the header and footer into every HTML file, and if it needed updating, the necessary change required implementation on every single page. Having to duplicate code over many different files made websites increasingly challenging to manage as they scaled, causing a higher chance to miss code, generate bugs and lose the consistency of presentation we all desire.

Once PHP started becoming more common-place, as software developers moved from software development to web development, software development methodologies followed suit, and websites began to be developed to include components on the page. Headers and footers could be included in a template and managed from a single file; this inclusion of a component from a single source formed the basis of modular web development.

Now, with the development of Model View Controller (MVC) frameworks, we are finding that websites developed with modular components are on the rise; however, the industry still hasn't adopted this way of working in its entirety just yet.

Building a website with modular components requires a change in methodology, developers must take their time and think "Where can code be re-used to make the system more efficient?".

The most common methodology used for this is Block Element Modifier (BEM). This methodology takes the principles of MVC and apples it to the front-end development of applications.

A single class name is created and applied to every instance, and class options utilised as a way to make minor changes without creating unnecessary duplicate code.
Developers building modular components need to consider that the client may want to use the component anywhere, so they need developing in such a way that they will work regardless of the location included.

An excellent example of this methodology is a button. The style of buttons should be consistent throughout the entire website, but sometimes a button is required to look slightly different for a specific purpose. In this case, a class can have an option assigned to it. Unlimited options can be added to get the desired variations throughout the entire site. The benefit of working in this way is that, should the colour of buttons throughout the site need to be changed, a developer need only change the colour in a single location and every button throughout the site will change.

This methodology ensures site-wide consistency. Keeping the site consistent promotes improved usability throughout the website, which in turn makes it easier for the user to navigate the site and interact with the User Interface (UI) in meaningful ways.

With so many different MVC technologies available, it's becoming more accessible than ever to include a component on a page and pass data from an argument, whether this is a model with many different properties or a simple string. Being able to include these components and pass-through data allows you to keep all code for a specific component in a single file, making it easier to update and making the project as a whole easier to manage.

Content Management Systems (CMS) are making it far easier to pass dynamic content to these components, and in some CMSs such as Umbraco, it is possible to pick the type of component required and then request the content from the database via that component.

Being able to pass content dynamically to these components also makes it much easier when it comes time to upgrade the website or CMS as it keeps the data clean. The logical data structure promoted by MVC and BEM allows easy exporting or preservation of data as opposed to static data entered in a WYSIWYG editor (considered dirty data).

Having this sort of functionality in a CMS is fantastic as it enables the rapid creation of pages not only for developers but also for clients. Giving the client more control over individual pages means developers aren't spending time and budget building basic pages, freeing them up for more advanced tasks. Isn't that what we all want?