July 17-18th / New York CityJohn Jay College of Criminal Justice

Diamond Sponsors

Storybook and Drupal: Seamless frontend integration for decoupled sites

Jamie Hollern

Jamie Hollern

Amazee Labs
Jul 17 13:45pm

This session will explain how to use Twig with Storybook and Drupal to bring all the advantages of UI component libraries into a decoupled Drupal project.

Having a pattern library of UI components helps developers build faster and take advantage of a maintainable, reusable and consistent set of components for the frontend. Using pattern libraries like Storybook can cause problems during the integration phase(s) of development, especially when paired with Drupal.

When developing our UI components in Storybook we use Twig and supplement it with mock data structured exactly in the way that GraphQL queries deliver it. By using Twig and our Components module, we can use the templates built in Storybook. This means queries and templates can be built once and integrated smoothly with no refactoring.

This session will show you step-by-step how to build a component library for decoupled Drupal sites that will work seamlessly between the frontend and backend, improve development speed, ensure best practices for UI, and make maintenance a breeze.

Attendees should have a working knowledge of Drupal theming.

Back to Sessions

July 17-18th / New York City
John Jay College of Criminal Justice
524 W 59th St, New York, NY 10019