Real World Drupal 8... for Front-End Developers

October 16, 2015
1
1

Thinking about becoming an early adopter of Drupal 8?

Hesitate no longer. More than 400 sites are already running on it. Manhattan Associates is one of these Drupal 8 pioneers — here’s why they made that decision, and why they’re happy with it.

Manhattan Associates — a supply chain management software provider — wanted a modern, 100% mobile responsive, and flexible redesign. A leading Drupal development company, Mediacurrent, helped Manhattan determine that choosing Drupal 8 was the best approach to achieving those goals, and was well worth the early adopter risk.

Why? First, consider just a few of the many changes from Drupal 7 to Drupal 8, on the front-end side of things:

  • Fully HTML5 markup
  • 75% fewer CSS ids than in Drupal 7
  • Out of the box responsive and mobile ready
  • New and improved theme/template system: Twig

For Manhattan, Drupal 8’s mobile-first approach and improved theming -- thanks to Twig templates -- were key to their decision to go with Drupal 8. Let's take a closer look at why that worked for Manhattan Associates.

 

Responsive out of the box

A key requirement of Manhattan Associates was a modern, mobile-first approach that would allow them to serve great, relevant content to all devices. Drupal 8 helped them create an elegant and responsive mobile site with increased SEO, larger potential audience, and a stellar experience for their customers.

Drupal 8 was designed with a mobile first approach. Drupal 8’s default theme, Bartik, is fully responsive, so right away you can get a mobile responsive site up and running. Elements like menus and blocks will automatically reshape to fit well on any screen size; Drupal 8 also includes built-in support for responsive images, so images will shrink or grow to the appropriate size for desktop, tablet, smartphone. Going beyond the default themes, it’s also just easier to build a responsive site, since that was a core focus throughout Drupal 8’s development and design.

Mobile with Drupal 8 isn’t just better for customers, it’s better for developers. The new mobile-friendly administrative toolbar makes it easy for admins to hop around the site wherever, whenever.

Not only does Manhattan’s mobile site look beautiful, Drupal front-end performance improvements were built into the core. For example, jQuery was swapped out for native JavaScript where possible. Out-of-the-box Drupal 8 loads zero JavaScript files for anonymous visitors, and JavaScript-intensive features like the Overlay module were replaced with lightweight alternatives. While building a responsive site, Manhattan Associates ended up with a faster site as well, lowering bounce rate and retaining more traffic.

 

Elegant and powerful templating

For Manhattan, a fast-moving company that develops and maintains many new features in-house, having a clean and easy to maintain templating system was essential.

Drupal 8 uses Twig, a modern templating engine that generates performant PHP code. (It’s replacing PHPTemplate, so all the theme functions and PHPTemplate based *.tpl.php files have been replaced with *.html.twig files, which you’ll find in a new folder called templates).

It’s cleaner because there’s now a clear separation between the logic and the view — so there’s no more PHP code within template files. Debugging is easier, with Twig’s helpful messages including the problematic filename and line number for any syntax error (all you have to do to enable Twig Debugging is set the debug variable in the twig.config to "true").

Here's the node.tpl.php file from Drupal 7:

<?php print render($title_prefix); ?>
<?php if (!$page): ?>
  <h2<?php print $title_attributes; ?>><a href="<?php print $node_url; ?>"><?php print $title; ?></a></h2>
<?php endif; ?>
<?php print render($title_suffix); ?>

And here's the node.html.twig file from Drupal 8:

{{ title_prefix }}
  {% if not page %}
    {{ label }}
  {% endif %}
{{ title_suffix }}

The new syntax is concise, easy to learn, and easy to read. That was a huge plus for Manhattan Associates, since their development team needs to design and adapt new features across platforms quickly. Twig’s power and simplicity allows them to iterate faster and increase their speed to market. Plus, increased security for the Drupal theme layer comes for free, because Twig uses a domain-specific language, which will automatically generate escaped, secure and correct HTML5, rather than embedding insecure, handwritten PHP and HTML directly. Additionally, Twig offers powerful sandboxing, which allows restricted execution of untrusted code for safe integration with 3rd party themes and components. Read more about Twig and theming in Drupal 8 here: http://d8.sqndr.com/index.html

 

Sign-up for our Developer Blog Newsletter

Thanks!

Add comment

By submitting this form, you accept the Mollom privacy policy.

Online tool recommended

Hi Jessica! I believe that developers will find useful this online localization tool called https://poeditor.com/. Simple and easy to use, no need for technical skills, plenty of features (API, WordPress plugin, Bitbucket integration, translation memory), POEditor can help users to simplify their workflow.