Atomic Design in Drupal with GraphQL & Twig - Webinar Recap

The second Amazee Labs webinar took place last Friday, 28th September 2018. Philipp Melab gave a stunning presentation on “Atomic Design in Drupal with GraphQL & Twig”. Here's a short recap of what we learned together.

We kick-started the webinar with a summary of what we learned in the first webinar, in case you missed that you can read up on it here. This time our focus was to build a real-world example website for a fictional web agency called Amazing Apps.

Philipp wanted to pack as much information as possible into the webinar, so he set up a Github repository with everything you need to get started. We were shown a brief design of the end goal then jumped straight into the meat of the presentation by dissecting the git history of each commit in the repository together.

Clean, concise, & a well-structured frontend.

Fractal is a tool to help you build and document web component libraries and then integrate them into your projects. We were led through the basics of what Fractal provides as a starting point. Then we jumped through the repository to a point where we had a couple of components built, along with colours defined using CSS variables along with demo text content.

As part of Atomic Design, we explored and learned the use of atoms, molecules, and organisms. Atoms demonstrate all your base styles at a glance, such as a logo or a button. Molecules are UI elements containing two or more atoms functioning together as a unit, such as a menu. Organisms are relatively complex UI components containing multiple molecules, atoms, or other organisms, such as the header or footer.

fragment Menu on Menu {
  links {
    label
    url {
      path
    }
  }
}

Once we got to the menu component, we were treated with the first GraphQL fragment, from here we could navigate up the templates from molecule to the header organism, and then to the page layout template which called the twig block named header. We can then override these blocks with the use of the twig tag extends to inject our Fractal based templates as necessary along with our GraphQL fragment.

GraphQL Twig should be used to decouple things where it makes sense, building a fully decoupled solution still costs a lot regarding development; therefore GraphQL Twig is the right solution to enhance and modernise a site in a feature based manner.

Learnings as a webinar host

It was our second webinar, so we had a few learnings from our first edition which we incorporated into the new session. We made sure to start earlier with the marketing campaign to ensure a good turn out, and ideally a larger audience; we ended up with over 40% increase in the total audience!

Check out the Github repository and accompanying videos:

Amazee Labs would like to thank everyone who attended the live session, we enjoyed being able to share this with you, and we look forward to hosting another Amazee Labs webinar in the future.

You can watch the entire webinar here: