This document discusses Comic Relief's transition to building reusable websites on Drupal 8. They wanted a platform to power all their editorially controlled websites. They developed a pattern library and used pattern lab driven development. They automated builds and testing. This involved things like configuration checks, installation tests, behavior tests, and visual regression tests. They also minimized custom code and contributed reusable modules. Their goal was to build a productized ecosystem for their sites using Drupal 8.

1. Building reusable websites on Drupal 8
Lessons learned from transforming rednoseday.com

2. I am Peter Vanhee
@pvhee
Tech Lead at
Comic Relief
Founder at
Marzee Labs

3. Comic Relief is a major charity in the UK.
We’ve raised over £ 1 billion since we
started out in 1985 & organise two main
campaigns: Sport Relief and
Red Nose Day.

4. Drupal at Comic Relief
• 2014: comicrelief.com
• 2015: 2015.rednoseday.com … hmm … multi-site?
• 2016: sportrelief.com … oh well, multi-site again?

6. “We want to build a platform — a
product — to power all our editorially
controlled websites”
Editor Experience
Automation & Streamlining
Decoupled Services

7. Editor Experience

13. Meet our Pattern Lab
Twig template
generated via KSS,
a CSS documentation syntax
dictionary
of components

14. Pattern Lab Driven Development
Component
idea
Pattern Lab
(with Style Guide)
using KSS
HTML, SCSS, JS
Prototype
Review
Multi-device QA
Sign-off
Drupal development
Content model
View modes
Component module
Twig / PHP
Editorial process
of building pages
using components

15. Landing pages in Drupal
• First iteration: panels with panelizer
• Second iteration: panels with panelizer and embedded paragraphs
• Third iteration: paragraphs with block_reference

16. Header with Menu
Footer
Paragraph 1
Paragraph 2
Paragraph 3
Paragraph n
… library of blocks
custom blocks
(like email signup)
Editorial blocks
Paragraph types
“content wall”
(rows + teasers are blocks)
Cards
blocks are reusable
paragraphs are not reusable
Quotes
Embed
Node Block reference

17. Automate & streamline
everything

18. A build in one step
• Package up our website product using an installation profile and
using CMI, via config_devel
• Default content in JSON
• Use a build tool — we use Phing composer and run phing build
composer install and composer drupal:install often

19. No automation without tests
• Code quality checks using CodeSniffer, phpmd, phpcpd
• Configuration checks using config_devel
• Distribution installation tests using composer drupal:install
• Behavior tests on distribution using Behat
• Drupal log checks (no errors, warnings generated by Behat)
• Visual regression tests using BBC’s Wraith

20. Continuous Integration

21. Preview branches

22. Better code with
decoupled services

23. Slide from Chet Haase

24. Minimise custom code
• we have around 2000 custom lines of PHP code (options callbacks, custom
Display Suite fields, Solr tweaks)
• “Non-glue code” is contributed back as standalone Drupal modules:
rabbitmq, social_links

25. The Embed Pattern

26. The Queue Pattern
Producer = Drupal Queue Consumer = 3rd party
an example: email list subscription
- Producer: Email Signup Form
- Queue: messages with email address, template ID, etc.
- Consumer: custom app talking to e.g. Mailchimp

27. Our platform ecosystem
www.rednoseday.com www.rednoseday.org
new comicrelief.com

28. Join Us for Contribution Sprints
First-Time Sprinter
Workshop
9:00am-12:00pm
Room: 307-308
#drupalsprints
Friday, April 28, 2017
Mentored Core Sprint
9:00am-12:00pm
Room:301-303
General Sprints
9:00am-6:00pm
Room:309-310

29. THANK YOU!
WHAT DID
YOU THINK?
Locate this session at the
DrupalCon Baltimore website:
https://events.drupal.org/baltimore2017/sessions/
building-reusable-websites-drupal-8-lessons-learned-
transforming
Take the survey
https://www.surveymonkey.com/r/drupalconbaltimore