markup ain't easy or: how i learned to love an object-oriented renderapi

Markup Ain't Easyor

How I Learned to love AnObject-Oriented RenderAPI

Carl Wiedemann • Drupalcon Austin

June 4, 2014 1:00PM - 2:00PMRoom 15 - Commerce Guys, 4th floorhttps://austin2014.drupal.org/node/2618

So theming is

hard

Theming is hardbecause

the render system

is complicated

Things are getting better!

But rendering hasn'tchanged much.

The render systemis complicated

because of

implementation

The aspirations of Twig

node.html.twig

<img src="{{ content.field_image.1.src }}" />

The aspirations of Twig

node.html.twig

<img src="{{ content.field_image.1.src }}" />

We can't do this

The aspirations of Twig

node.html.twig

<img src="{{ content.field_image.1.src }}" />

We can't do thisbecause we have no true API.

The aspirations of Twig

node.html.twig

<img src="{{ content.field_image.1.src }}" />

We can't do thisbecause we have no true API.

src is in template_preprocess_image()

...which happens after template_preprocess_node() so the node template has no access

...because we want to render things on the fly (which is good)

…but arrays aren't smart.

Instead we have

drupal_render()

“ArrayPI”

How drupal_render() “works.”

1. Create a big array of stuff.

How drupal_render() “works.”

1. Create a big array of stuff.

2. Eat it!

How drupal_render() “works.”

1. Create a big array of stuff.

2. Eat it!

3. Return a string that came from somewhere.

How drupal_render() “works.”

One of the longest procedural functions in core.

drupal_render(), _theme()185 lines, 244 lines

How drupal_render() “works.”

It's called a lot.For non-cached single node

up to 8 recurses, 200+ times total(via xhprof)

The problem with ArrayPI:

“I am not convinced that this proposed change will give us performance increase that will

justify the complexity we'll have to introduce.”- jessebeach

https://drupal.org/node/2099131

“array() is dead.”- 8.x

long live array()!

-drupal_render()

This slide intentionally left blank.

Let's talk conceptuallyLet's talk conceptuallyaboutabout

rendering.rendering.

What do we need?What do we need?

What do we need?What do we need?

I. An abstracted, alterable, I. An abstracted, alterable, consistent model of consistent model of structured content.structured content.

What do we need?What do we need?

I. An abstracted, alterable, I. An abstracted, alterable, consistent model of consistent model of structured content.structured content.

II. A sensible, accessibleII. A sensible, accessibleAPI for this model.API for this model.

We have arrays!

OBJECTS

Render API principles:OBJECTS{{ demo }}

http://github.com/c4rl/renderapi

Render API principles

1. Render arrays move to a

Builder pattern

Object creation is delegatedto a series of steps then finally

invoked.

Render API principles

2. Preprocess/process moves to a

Decorator pattern

Behavior added to object dynamically at runtime without affecting other objects of the

same class.

Render API principles

3. Building and decoration isn't invoked until the builder is cast to

a string.

__toString() magic method

The aspirations of Twig

node.html.twig

<img src="{{ content.field_image.1.src }}" />

We can't do thisbecause we have no true API.

src is in template_preprocess_image()

...which happens after template_preprocess_node() so the node template has no access

...because we want to render things on the fly (which is good)

…but arrays aren't smart.

The aspirations of Twig

node.html.twig

<img src="{{ content.field_image.1.src }}" />

We can't do thisbecause we have no true API.

src is in template_preprocess_image()

...which happens after template_preprocess_node() so the node template has no access

...because we want to render things on the fly (which is good)

…but arrays aren't smart.

FIXED

...potentially :)

fixed

This slide also intentionally left blank.

@todo

Questions, feedback, reengage discussion.

Proof-of-concept in 8.x sandbox,tests & benchmarking.

Please evaluate this sessionhttps://austin2014.drupal.org/node/2618

Photos

http:/ en.wikipedia.org/wiki/George_Washington_Universityhttp://flickr.com/photos/vanessaberry/4128711965

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.