The Problem with Traditional Approaches
The traditional workflow to create web applications using a framework like Drupal is to start with site building and back-end work, then implement the theme on a markup. This workflow is not as simple and clean as it could be, which complicates the front-end work and maintenance.
This approach makes it difficult for back-end and front-end teams to work in parallel from the start, since front-end developers must wait for the feature to be built before drilling down into the sea of divs to target the right elements often with custom selectors, making it difficult to keep it DRY. Styles are not isolated, so the risk of some overriding others is high and continues to get more complicated over time. This is even more likely if the team doesn’t carefully follow a methodology like BEM (Block, Element, Modifier).
Another difficulty with this approach is that project managers, clients, and QA members are forced to wait until the project is getting very close to completion to start their reviews. Such a delay puts unnecessary stress on every member of the team and the client.
The Solution: Component-Driven Development
Component-driven development helps solve these problems, allowing every part of a web application to be defined and designed independently. Therefore, teams are generating a style guide from the very beginning.
Components can be as simple as a button and can be grouped to create more complicated structures. All the markup, styles, and JavaScript required by the component are encapsulated, avoiding the risk of accidentally modifying other elements and eliminating the need for extra selectors. Components can be defined once, then reused, and tested on the browser for responsiveness from the beginning without waiting for the backend to be ready.
Additionally, this approach provides a good experience for back-end developers. They know exactly what markup structure is needed to generate to bring each component to life, and they can immediately view modifications made to features.
Using components simplifies the task of creating sustainable technical architecture. Maintenance of the project can be much simpler with this approach due to a library of independent elements with its own HTML, CSS, and JavaScript that allows for reusable and efficient code. Further, this accelerates development which allows testing to start earlier in the build and ensures a consistent experience.
A component-driven development approach is becoming more recognized as a best practice among development teams. On the client-side, clients will love to see and interact with a living style guide early in the initiative that can be consistently modified and improved. Implementing a component-driven development workflow can bring significant improvements to all aspects of your development lifecycle.
