What Panels can Teach us About Web Components

Presented by Steve Persch (@stevector)

Steve Persch

Senior Engineer and Team Lead at Palantir.net

@stevector on Twitter

Defining the terms

What are Web Components?

An (extremely) abbreviated history of HTML

Before HTML5

The Select Element

Los AngelesAustinPortlandAmsterdamPragueMunich

HTML5

Your user agent does not support the HTML5 Audio element.

Your user agent does not support the HTML5 Audio element.

After HTML5:Web Components

X-Gif Web Component

Separating the definition of an element from the usage

dist/
├── layout.html
├── platform.js
├── polymer.html
├── polymer.js
├── polymer.js.map
├── x-gif.angular.js
├── x-gif.css
├── x-gif.html
├── x-gif.js
└── x-gif.local.html
    

Proof of Concept in Drupal

< ? php print $front; ?>< ?php print $back; ?>

Chris Ruppel

Web Component demo

What is Panels?

Panels is a user interface for theme()

But let's forget about the UI for a minute

Panels is a way to take data (Context)

    stdClass Object
(
    [vid] => 1
    [uid] => 1
    [title] => This is an Article
    [log] => 
    [status] => 1
    [comment] => 0
    [promote] => 1
    [sticky] => 0
    [nid] => 1
    [type] => article
    [language] => und
    [created] => 1431529567
    [changed] => 1431529567
    [tnid] => 0
    [translate] => 0
    [revision_timestamp] => 1431529567
    [revision_uid] => 1
    [body] => Array
        (
            [und] => Array
                (
                    [0] => Array
                        (
                            [value] => With a Body field!
                            [summary] => 
                            [format] => plain_text
                            [safe_value] => 

With a Body field!

And get it ready for printing in a template

By passing the data through user defined configuration

$handler = new stdClass();
$handler->disabled = FALSE; /* Edit this to true to make a default handler disabled initially */
$handler->api_version = 1;
$handler->name = 'node_view_panel_context';
$handler->task = 'node_view';
$handler->subtask = '';
$handler->handler = 'panel_context';
$handler->weight = 1;
$handler->conf = array(
 'title' => 'Person',
 'no_blocks' => 0,
 'pipeline' => 'standard',
 'body_classes_to_remove' => '',
 'body_classes_to_add' => '',
 'css_id' => '',
 'css' => '',
 'contexts' => array(),
 'relationships' => array(),
 'access' => array(
 'logic' => 'and',
 'plugins' => array(
 0 => array(
 'name' => 'node_type',
 'settings' => array(
 'type' => array(
 'person' => 'person',
 ),
 ),
 'context' => 'argument_entity_id:node_1',
 'not' => FALSE,
 ),
 ),
 ),
);
$display = new panels_display();
$display->layout = 'onecol';
$display->layout_settings = array();
$display->panel_settings = array(
 'style_settings' => array(
 'default' => NULL,
 'middle' => NULL,
 ),
);
$display->cache = array();
$display->title = '%node:title';
$display->content = array();
$display->panels = array();
 $pane = new stdClass();
 $pane->pid = 'new-1';
 $pane->panel = 'middle';
 $pane->type = 'custom';
 $pane->subtype = 'custom';
 $pane->shown = TRUE;
 $pane->access = array(
 'plugins' => array(
 0 => array(
 'name' => 'entity_field_value:node:person:field_ref_term_designation',
 'settings' => array(
 'field_ref_term_designation' => array(
 'und' => array(
 0 => array(
 'tid' => '73',
 ),
 ),
 ),
 'field_ref_term_designation_tid' => array(
 73 => '73',
 1 => NULL,
 2 => NULL,
 3 => NULL,
 72 => NULL,
 ),
 ),
 'context' => 'argument_entity_id:node_1',
 'not' => FALSE,
 ),
 ),
 );
 $pane->configuration = array(
 'admin_title' => 'Honorary Member',
 'title' => '',
 'body' => '

Honorary Member

Overly-simplified Panels Pseudo-code

function render_a_panel($nodes_or_other_data, $name_of_panels_config) {

  // Each Panels layout plugin becomes a theme hook.
  $name_of_theme_hook = $this->get_theme_hook_name($name_of_panels_config);

  // Panels stringifies render arrays before passing to theme().
  $printable_vars = $this->get_printable_vars($nodes_or_other_data, $name_of_panels_config);

  // Dead simple insertion of variables into a template. 
  return theme($name_of_theme_hook, $printable_vars);
}

Panels can operate on multiple levels

• Panels Everywhere for the page.tpl.php level
• Page Manager for the hook_menu() level
• Panelizer for View Modes
• Mini Panels for Block level

Why should we care about Web Components* ?

• Or Angular
• React
• Ember
• Backbone + Marionette
• Riot
• Knockout
• Whatever was released during this session

The ability to componentize and reuse is a measure of progress

What caused the PHP Renaissance?

• Class autoloading
• Github
• Namespaces
• The PHP Standards Group
• Composer
• Common Interfaces

Larry "Crell" Garfield

What do we have to show for it?

vendor/
├── autoload.php
├── behat
├── bin
├── composer
├── doctrine
├── easyrdf
├── egulias
├── fabpot
├── guzzlehttp
├── masterminds
├── mikey179
├── phpunit
├── psr
├── react
├── sdboyer
├── sebastian
├── symfony
├── symfony-cmf
├── twig
└── zendframework

And we're doing well on the front end

assets/vendor/
├── backbone
├── ckeditor
├── classList
├── domready
├── farbtastic
├── html5shiv
├── jquery
├── jquery-form
├── jquery-joyride
├── jquery-once
├── jquery-ui-touch-punch
├── jquery.cookie
├── jquery.ui
├── matchMedia
├── modernizr
├── normalize-css
├── picturefill
└── underscore

We are playing out the Ship of Theseus thought experiment

Ship of Theseus video

In our markup, can we

• write less?
  • Yes (Thanks Twig!)
• reuse more?
  • Yes (Stay for John's Core Conversation)
• Share more?
  • With the outside world?

The Dependency Injection Container bridges between 3rd-party interfaces and Drupal's internals

Panels does analogous wiring for Markup between source data and templates

To use Web Components properly, we will need to bridge data and display without strong coupling

Lessons from Panels

Lesson: Not all theme hooks require equal attention

Drupal 7 theming:

With great power comes great responsibility

Where to start customizing Drupal markup?

John Albin Wikins in Drupal 7 module development(Packt Publishing)

Panels priortizes some layers

Lesson: “A good architecture allows you to defer critical decisions”

(Uncle) Bob Martin

Lesson: Separate names indicate separation of concerns

The name of the template matches the name of the internal data

What is the name of the template used by article node teasers?

node--article--teaser.tpl.php

Panelizer gives you the option to make the article teaser's template be

the-design-component-name.tpl.php

Lesson: Simple mental models help

The modern front end world has its patterns of choice

Model View Controller

Wikipedia

Model View Presenter

WikipediaUsed by riot.js and Backbone (kind of)

Model View ViewModel

WikipediaUsed by Knockout.js

Presentation Abstraction Control

WikipediaUsed by Drupal?

Drupal Drupal Drupal

Diagram from John Albin Wilkins

D8 Render Pipeline

The Drupal 8 Render Pipeline

Symfony HTTP Kernel

Symfony Documentation

The time browsers take to process Web Components is nothing compared to that which brains take to understand them.

Lesson: Nesting is hard

Lesson: Define dependencies / properties

$plugin = array(
  'title' => t('Three column 33/34/33 stacked'),
  'category' => t('Columns: 3'),
  'icon' => 'threecol_33_34_33_stacked.png',
  'theme' => 'panels_threecol_33_34_33_stacked',
  'css' => 'threecol_33_34_33_stacked.css',
  'regions' => array(
    'top' => t('Top'),
    'left' => t('Left side'),
    'middle' => t('Middle column'),
    'right' => t('Right side'),
    'bottom' => t('Bottom')
  ),
);

Panels Plugin definition

-me

Questions for conversation

• Can we separate the thing that prints data at all from the thing that says how it gets printed?
• Is sharing our markup outside of Drupal something we even want to do?
• Does someone need to write a Web Component theme?
• How many Invented-Here parts of Drupal can we strip and still be Drupal?
• Which pattern do you see Drupal implementing now? (MVC, PAC, ADR)
• Which pattern do you want Drupal to use?
• Which part of the D8 render pipeline do you expect to think about most?