Frontend Components: Balancing between Reusability, Flexibility and Maintainability

Everyone talks today about how to implement Frontend Components. But once you know how to implement them you most likely need to reuse them between projects, or at least between different instances within one project. And here is where this talk could help you.

This session is less about implementing the particular components and more about architecture of components as a system. In other words, we will talk about how to reuse, customize, maintain them and balance in between.

Part I: Concepts:

• Separation of concerns (aka MVC): data, styling, functionality.
• Inheritance and multiple inheritance.
• Data interfaces and contracts.
• Reusability vs Flexibility vs Maintainability.

Part II: Techniques:

• Maintain separate components and manage their dependencies (eg: Yarn Workspaces, git submodules).
• Control components in a declarative way and w/o js (eg: data- attrs).
• Provide components with data and build all together (eg: Twig includes).
• Integrate components with Drupal or other CMS.
• Organize components in Fractal or other pattern library.

Part III: Workshop/demos:

• Basic component.
• Carousel: Generic, Custom by style, Custom by behavior.
• Gallery: Generic, Custom by style, Custom by behavior.
• Modal: Generic, Custom by style, Custom by behavior.
• Compound: Carousel+Gallery, Gallery+Modal, Timeline (Carousel+Gallery+Custom).

In this session I want to share a real experience when designing a frontend architecture of large multi-lingual and multi-layout Drupal websites for enterprise, academics and digital.

However these techniques can be applied for almost ANY project disregarding its size and frontend/backend frameworks.