Component Driven Design and Front End Development

The Web is in permanent evolution, specially the Front end world. Solutions like Responsive Web Design have transformed our day-to-day and forced us to rethink our workflow constantly.

Working with components means to take a step back to integrate and improve this workflow. New tools and methodologies that can help us are appearing every day and it only takes small mindset shifts to take full advantage of them.

Atomic design is an amazing example of these methodologies that are able to assist us with this change. It relies on interlocking components, from small bits like labels (atoms) to large systems like full page templates.
This applies to all the pieces involved in the Front end layer: from the design to the prototype creation or the final code, or also live Styleguides like KSS or CSS methodologies like BEM or SMACSS.
On top of all the above, it will allow us to test our Front end layer, avoiding regressions and preparing it for large-scale projects.

In this session, we will cover:

• What is a component
• How CSS methodologies like BEM or SMACSS can help to create or use components
• Why Design Systems are necessary
• When can we introduce this changes in our process
• Why Stylesguides can make the difference
• What can we do to have a more component-based Drupal project

This talk is intended for those who want an overview of this new Front End methodologies and workflows. There is no needed a deep knowledge of Frontend End technologies but a basic a basic understanding of HTML or CSS preprocessors is recommended. After this session you will be able to know what tools and changes could be necessary to improve your daily workflow.