Drupal 8 Ready: What's new for Themers?

What are the core skills, tools and practices you will need to be Drupal 8 ready? How do you get them now? This summary is a companion to PreviousNext's DrupalCon presentation "Drupal 8 Ready".

Web & front-end technologies

Twig

Need to know

  • How to use Twig for Drupal templating

Twig is a template language written for PHP. It replaces PHPTemplate for template files.

PHP was originally written as a kind of template language, however it is both verbose and difficult to learn. Twig is designed specifically for the purpose of templating, and brings a number of improvements vs normal PHP, including a concise template syntax, escaping and filtering functions, and other benefits.

Resources

Backbone.js (& underscore.js)

Need to know

  • How to use Backbone.js

Backbone is a JavaScript library with a RESTful JSON interface and is based on the model–view–presenter (MVP) application design paradigm. Backbone is known for being lightweight, as its only dependency is on one JavaScript library, Underscore.js. It is designed for developing single-page web applications, and for keeping various parts of web applications (e.g. multiple clients and the server) synchronized. 

Backbone makes Drupal entities and views available from within JavaScript. This allows you to build more complex JavaScript based web applications.

Find out more

Responsive design

Need to know

  • What is “Responsive Design” and how does it work
  • Use of Picture element
  • Use of Breakpoints

Simply, responsive design is the practice of providing a seamless, single viewing experience across multiple platforms and devices.

Not so much a new “feature”, as a maturing design idiom. the majority of Drupal’s components are now compatible with Responsive practices, and product owners are going to expect it.

  • Mobile-compatible toolbar
  • Responsive core themes
  • Picture element
  • Breakpoints

Resources

JavaScript accessibility features

Need to know

  • Drupal.announce() for speaking text
  • Drupal.tabbingManager assists with keyboard navigation

Drupal 8 introduces two new JavaScript accessibility features to improve accessibility in specific cases. The first is Drupal.announce(), which can be used to turn text into speech easily. The second is the tabbingManager, which handles restricting tabbing to specific element sets. In core, for example, this is used to restrict tabbing to to the overlay

Resources

jQuery 2.0

Need to know

  • Drupal 8 uses jQuery 2.0 and jQuery UI 1.10
  • API parity with jQuery 1.9
  • But… no support for IE 6/7/8

This latter part is intended to be available in contrib, however a quick scan reveals no contenders currently. If you do find yourself with a Drupal 8 site which needs to support 8 (and if you work with government that may yet happen), then a workaround will be required.

Resources

Drupal

CSS Coding standards

Need to know

  • The Drupal 8 CSS coding standards and authoring guidelines

CSS must now following coding standards, like the rest of Drupal. These cover formatting, architecture, and file organisation. 

Coding standards help us in several ways. They help set a baseline for creating new styles, they ensure that styles are consistent, and they reduce changes to functional, rather than formatting, alterations.

Resources

Technology stack

Understanding PHP Class & Namespace usage

Need to know

  • How to call namespaced Class functions
  • How to call static methods on Classes

When written well, object-oriented code is considerably more powerful, easier to debug, and more flexible. Apart from an early foray into named PHP Classes in early versions of Drupal, Drupal has generally stayed away from object-oriented PHP. Thats all about to change in Drupal 8, which introduces a significant amount of object-oriented code, where previously there was procedural.

Themers will benefit from a little bit of knowledge about PHP Classes and Namespaces.

Find out more

Back to top

Comments

Posted by Anonymous | December 3, 2013

How do you bring your own javascript into your theme? I can't find that info anywhere!

Post a comment