How Does Using Component-Based Development in Drupal 8 Benefit Your Team More Precisely?

With the Twig templates replacing the old PHP templates, Drupal has been brought to a whole new “era”. We can now leverage the advantages of a component-based development in Drupal 8. But what does that mean, more precisely?

How does this (not so) new approach in software development benefit you? Your own team of developers...

And everyone's talking about tones of flexibility being unlocked and about the Twig templates' extensibility. About how front-end developers, even those with little knowledge of Drupal, specialized in various languages, can now... “come right on board”. Since they're already familiar with the Twig engine...

Also, we can't ignore all the hype around the advantage of the streamlined development cycles in Drupal and of the consistent user experience across a whole portfolio of Drupal apps/websites.

But let's take all these tempting advantages of component-based UI development in Drupal 8 and point out how they benefit your team precisely.
 

1. But First: What Is a Component?

It's a standalone piece of software that can appear in multiple places across your Drupal website/application.

One of the most relevant examples is that of a content hub. One displaying teasers of the latest blog posts, events... You could set up a component that would determine how each item in that content hub should look like.

In short:
 

• one single component can be used by several types of content
• any update to its template/style would automatically reflect on all those content types, as well
   

Accessible via an API, this independent piece of software explicitly defines all its application dependencies.|

Your team could then easily architect a new interface by just scanning through and selecting from the library of components.
 

2. What Is Component-Driven Development? What Problems Does It Solve?

A succinct definition of component-based software engineering would be:

A software development technique where you'd select off-the-shelf, reusable components and put them together according to a pre-defined software architecture.

“And what challenges does it address?”

It streamlines and lowers the level of complexity of otherwise intricate, time-consuming development and design processes. As the author of given components, your role is to get them implemented.

No need to worry about how they'll get “assembled”; this is what the well-defined external structure is there for.

Word of caution: mind you don't get too... engrossed in putting together the right components, in architecting the best component-based structure, for you then risk investing too little time in... building them properly.
 

3. Component-Based Development in Drupal 8

Now, if we are to focus our attention on the component-based UI approach in relation to Drupal 8 software development, here are the key aspects worth outlining:

 

• with the Twig engine in Drupal 8, you're free to “joggle with” extensible templates; once you've defined a Twig template in one place, we get to reuse it across the whole Drupal website/app
   
• the Component Libraries module allows you to set up template files (storing all their needed JS and CS), assign a namespace for them and place them pretty much anywhere on your Drupal filespace (not just in your themes' “templates” directory)
   
• you then get to use the KSS Node library and define a living style guide; it's where you'll store all the component templates built for your Drupal website (styles, markup, JS behaviors, etc.)
  
   

By filling in your toolboxes with all these tools — the results of a joint effort of the Drupal and the front-end communities  —  you're empowered to design themes that are more modular. And, therefore, more efficient...

4. The Top 6 Benefits of the Component-Based UI Approach
 

4.1. It Ensures UX Consistency Across All Your Drupal 8 Websites

Take your library of components as the “headquarters” for all the teams involved in your Drupal project: QA, business, development, design teams...

It's there that they can find the pre-defined standards they need to keep the consistency of the features they implement or of other tasks they carry out across multiple projects.

A consistency that will bubble up to the user experience itself, across your whole portfolio of Drupal 8 websites/applications...
 

4.2. It Accelerates the Process of Turning Your Visual Design into a UI 

Embracing the component-based development in Drupal 8 you'd avoid those unwanted, yet so frequent scenarios where the front-end developer gets tangled up in the wireframe he receives and:
 

• he/she translates parts of it the... wrong way
• he digs up all types of “surprise” issues  
   

By using a component-driven UI approach translating a visual design into a user interface gets much more... event-less. 

With:
 

• a pre-defined component architecture to rely on
• well-established standards to follow
• a whole library of component templates at hand
   

… there are fewer chances of discrepancies between the UX defined in the visual design and the one delivered via the resulting user interface.

Not to mention the reduced delivery timelines...
 

4.3. It Streamlines the Whole Development Process 

“Sustainability” is the best word to define this approach to Drupal software development.

Just think about it:

 

• whether it's a particular grid, navigation or layout that your front-end developer needs when working on a new project, he/she can pull it right from the component library at hand
   
• … and “inject” it into the app/website that he's working on
   
• in case that element needs further updating, the developer will already have the baseline to start with
   
• … there's no need for new components to be designed, from the ground up, with every single project: the already existing ones can always get further extended
  
   

And that can only translate into significant savings of both time and money.
 

4.4. It Reduces the Time Spent on Setting Up the Functionality & Defining the UX

And this is one of the key benefits of using component-based development in Drupal 8. Your various teams would no longer need to define the UX requirements and the functionality every single time during the design process.

With an easily accessible library of components, they can always pull a component standing for a specific requirement (display of complex data, filtering, pagination in grids, etc.) and just define its extensions. And the business logic, as well.
 

4.5. It Enables You to Systematically Reuse Your Components

And “reusability” goes hand in hand with “sustainability”. I would even say that it's a synonym for “future-proofing”, as well...

Just think about it: by having a Drupal 8 website in a component-based format you can always rearrange components as technologies grow outdated and new ones emerge...

In short, embracing a component-based development in Drupal 8 enables you to remove the need of rebuilding your website every time its underlying technologies “grow out of fashion”.

With your component library at hand, you'll be able to swap your guidelines, design patterns and various content templates in and out, keeping your Drupal app or website up to date.
 

4.6. It Integrates Seamlessly into the Development Process 

By leveraging a component-based development in Drupal 8, you'd also gain better control over the whole development cycle. The update process here included...

Since you'd then build your components and manage your production quality user interface code in a repository like GitHub, every update that you'd make will be displayed in there. And be easily accessible to everyone in your team.

In short, your developers get to pull pieces of code from the repository to further extend them, then re-submit them to GitHub (or to another source code repository) for review.

With the ability to version your component library, your team can keep a close track of all your Drupal applications with their corresponding versions of the approved UX.
 

The END!

This is how the component-based development in Drupal 8 would benefit you and your team. Have we left out other key advantages of using this approach?


Image by Arek Socha from Pixabay