06 Dec 2016

SES: Drupal 8, front-end teardown

We’ve just designed and built a new website for the world-leading satellite operator, SES. SES connects and enables broadcast, telecom, corporate and government customers, and enriches the lives of billions of people worldwide.

We’re really proud of how it’s turned out, and as it’s one of the first batch of high-profile large Drupal 8 websites, we’ve been asked by a wide range of people about our technical approach to building a complex site using the latest version of Drupal.

You can read our case study here on the project as a whole, but here is Stuart Wilson, Head of Frontend Development at Catch to explain a little more around our front-end approach:

“The sheer scale of the SES website demanded a scalable and comprehensive front end system. As a team we approached the transition from design to code by creating a static style guide of individual components which would then be used to power the Drupal 8 website.

Our modular CSS was written in SASS using NPM to run build scripts and wrapping it up with PostCSS’ Autoprefixer for greater resilience to browser inconsistencies. Using BEM syntax and championing an OOCSS approach allowed us to write configurable componentry which was open to extension, but closed to core modification which meant that QA testing could happen earlier on in the build.

“The sheer scale of the SES website demanded a scalable and comprehensive front end system."

STUART WILSON, HEAD OF FRONT END DEVELOPMENT AT CATCH

Thanks to Drupal 8’s use of the Twig templating engine, we could test the flexibility of our HTML templates using mock data which was then swappable for real content from the CMS. This created a unified theming workflow with clear ownership between the front and back end of the website and helped reduce code overhead whilst instilling scalability within the UI.

Thanks to our modular approach, we were able to utilise Drupal Paragraphs to promote greater flexibility across content types in the CMS, enabling SES to realise any combination of page designs they required.”

Visit www.ses.com and stay tuned for future SES developments. We’re continuing to work with the team in Luxembourg on increased website functionality and a range of other exciting digital products.

Related news and work

A global conservation platform

Zoological Society London

Leveraging digital to promote and achieve the worldwide conservation of animals and their habitats

Digital transformation for a global payment giant

Worldpay

Digital transformation for the global leader in payment processing technology

ZSL wins Group Leisure Award for Best Website

10 Nov 2015

ZSL London Zoo has been awarded the Best Travel and Leisure website 2015 in the Group Leisure Awards, designed and developed by Catch in 2014.

21 Feb 2016

Can you use Drupal 8 yet?

Hi, I’m Robyn and I’ve been a Drupal Developer Apprentice at Catch for three months.

As developers, modules are crucial to everything we do. They help manage media and content across complex sites, they simplify back-end processes and PHP development, and they help implement complex components and features across sites in a matter of minutes where they’d normally take hours. They are the bread-and-butter of Drupal development, and without stable modules available our job would be very, very difficult.

As such, when Drupal 8 was released we took a special interest in the state of module development. Because Drupal 7 has benefitted from more than 5 years of contribution and development from the Drupal community, Drupal 7 is an incredibly stable and powerful platform.

We’ve been a bit spoiled, and despite the really amazing changes and improvements that we’ve been promised with Drupal 8, we were hesitant to jump on the bandwagon until we’d done a bit more research on what modules were really available for use.

So, back in early December (shortly after Drupal 8 was released) I started to track the development status of modules in Drupal 8. I put together a list of the most-used Drupal modules and examined each module’s development status.

Here's what I found:

Status of Drupal’s top 25 most-used modules (Dec 2015):

In Core: 7

Stable: 5

Percent Usable: 48%

In Alpha & Beta: 3

Unstable: 7

Unavailable: 3

Percent Unusable: 52%

If I’m 100% honest, I was pretty stunned at these numbers. With only 48% of Drupal’s most-used modules available at the time, it seemed that developing a complex site in Drupal 8 would have been a worrying prospect, given the inherent stability of Drupal 7.

This was a disappointing outcome - we really wanted to start building in Drupal 8 but it just wasn’t ready for us!

Given the dedicated and active Drupal community, I was curious to see how quickly things would improve. I figured it was just a matter of time before more people started getting involved.

And so, three months have passed since that initial review and now, with Drupal Camp London just around the corner (Mar 4th - 6th), I thought it would be a good time to take another look.

Status of Drupal’s top 25 most-used modules (Feb 2016):

In Core: 11

Stable: 6

Percent Usable: 68%

In Alpha & Beta: 4

Unstable: 4

Unavailable: 0

Percent Unusable: 32%

These results represent a 20% increase in the availability of Drupal’s top-modules within just a three month time frame.

While that number may not sound terribly impressive at first glance, it represents a significant effort on behalf of the Drupal community to get Drupal 8 up-and-running.

As Drupal is completely open-source and dependent on the unpaid contributions of its members, that 20% improvement is 100% fueled by the voluntary efforts and pure dedication of people throughout the community. And that’s just downright impressive. Plus, pathauto and admin toolbar work now!

But, don't just take my word for it. Feel free to take a look at my research!