Entity view (Content)

TWIG is coming in Drupal 8 - what about Web Components?

By myuasa
Aug. 25, 2014

So, front-end Drupal web development is 90% boring repetition and 10% exhilarating discovery. Wouldn't it be great if we could cut out all of that drudgery, and just get to the nuance and finesse work that is much more exciting? Not a new question, but it's one that has to continually be asked if we're going to reach that CSS Zen Garden at the end of the rainbow (am I mixing up my metaphors already?).

Front-end styling or "Theming" in Drupal hasn't advanced very much since the advent of PHPTemplate in 2005. That's nine years (!) for those playing along at home. HTML5 web development makes our sites more feature-rich. We've gotten used to writing less code with SASS/Compass, and frameworks like Zurb Foundation or Bootstrap. We punch up pages with jQuery when needed. None of these improvements are specific to Drupal though.

The good new is TWIG is coming to Drupal 8. It looks like a real improvement over the aging PHPTemplate (super clean and readable) but is it a big enough change for how we develop websites in 2014 and beyond?

What About Web Components?

People have been talking about Web Components for a couple of years now, but they seem poised to take over the front-end dev world. Things are still early on but it's moving very quickly. Warning! There is no tutorial to follow. There is no integration between Web Components and Drupal at the time of this writing. We're just talking blue sky stuff here.

TL;DR

Web Components allows us to:

  1. More closely control, extend and reuse your mark-up
  2. Limit the scope of your styles to only the elements you are working on
  3. Code less!

Sounds good? Go watch these videos right now!

A Slightly Deeper Dive

Web Components is an umbrella of specifications intended to make web UI more modular and reusable (something Drupal users will appreciate). There are 4 advances that enable this:

  1. Custom Elements: Drop a Google map in with a single element and 2 values. Sync a GIF to audio. Or roll your own custom tag. Find more Elements than you can shake a stick at here.
  2. HTML Imports: Look Ma! No PHP! File organization is not just for SASS partials anymore.
  3. Templates: Any reusable element such as a forum sig or a team member info card have its own template.
  4. Shadow DOM: Yes, it is as cool as it sounds. Instead of ever ything on a page belonging to a monolithic structure, each feature (a slideshow or navigation menu) or piece of content can have its own DOM and styles that pertain only to it!

Some of this (items 2 & 3) may not seem terribly exciting if you use PHP or Ruby but remember, this will be native in the W3C spec.

Responsive design is not explicity covered in Web Components but everything about it will make responsive easier. Google's new Material Design direction has responsive considerations built right in its DNA.

What about Support? Browser Support Chart

So when do we get to play with Web Components on Drupal? The short answer is: not soon. As I mentioned before, Drupal 8 is heading in a Symfony / Twig direction. This is still a huge improvement to PHPTemplate. Web Components and Drupal may become more of a possibility if and when Decoupled/Headless Drupal takes off. I will let smarter people than me figure that one out. Here's a snapshop of the current level of Web Component browser support.

Polymer Logo

Not every box in this support chart is green but the smart people at Google and Mozilla have come up with something called Polyfills that, like the eponymous wall-spackling goo, fill in the gaps that less modern browsers might have. These are Polymer and X-tag respectively. This Bosonic project on github looks promising as well.

What About React and Angular?

React by Facebook/Instagram has a more limited scope than Web Components, thus its support may be wider. Angular Logo

There is certainly more overlap between Angular and Polymer/Web Components. I won't do a deep dive here since we're "just talking." Essentially Angular is a framework for developing web applications, and Polymer is a standards-based library for building Web Components that can be used to build whatever! From my limited experience with it, Polymer looks much more readable.

More on the subject: Here’s the difference between Polymer and Angular | What is the difference between Polymer elements and AngularJS directives?

Conclusion

We are definitely too far along in Drupal 8 to shoehorn Web Components in, at least not natively. Can we go into hibernation until Drupal 9? Of course not, but we can take this moment before we switch to D8 in earnest to start thinking about how broad our front-end / site-building options really are. My hopes are riding on Headless Drupal. We'll see what the next 12-24 months hold.

Further Reading

Post Tags: