Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI
description
Transcript of Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI
![Page 1: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/1.jpg)
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
![Page 2: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/2.jpg)
![Page 3: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/3.jpg)
So theming is
hard
![Page 4: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/4.jpg)
Theming is hardbecause
the render system
is complicated
![Page 5: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/5.jpg)
![Page 6: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/6.jpg)
![Page 7: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/7.jpg)
Things are getting better!
But rendering hasn'tchanged much.
![Page 8: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/8.jpg)
The render systemis complicated
because of
implementation
![Page 9: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/9.jpg)
The aspirations of Twig
node.html.twig
<img src="{{ content.field_image.1.src }}" />
![Page 10: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/10.jpg)
The aspirations of Twig
node.html.twig
<img src="{{ content.field_image.1.src }}" />
We can't do this
![Page 11: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/11.jpg)
The aspirations of Twig
node.html.twig
<img src="{{ content.field_image.1.src }}" />
We can't do thisbecause we have no true API.
![Page 12: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/12.jpg)
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.
![Page 13: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/13.jpg)
Instead we have
drupal_render()
![Page 14: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/14.jpg)
“ArrayPI”
![Page 15: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/15.jpg)
How drupal_render() “works.”
1. Create a big array of stuff.
![Page 16: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/16.jpg)
How drupal_render() “works.”
1. Create a big array of stuff.
2. Eat it!
![Page 17: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/17.jpg)
How drupal_render() “works.”
1. Create a big array of stuff.
2. Eat it!
3. Return a string that came from somewhere.
![Page 18: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/18.jpg)
How drupal_render() “works.”
One of the longest procedural functions in core.
drupal_render(), _theme()185 lines, 244 lines
![Page 19: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/19.jpg)
How drupal_render() “works.”
It's called a lot.For non-cached single node
up to 8 recurses, 200+ times total(via xhprof)
![Page 20: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/20.jpg)
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
![Page 21: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/21.jpg)
“array() is dead.”- 8.x
long live array()!
-drupal_render()
![Page 22: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/22.jpg)
This slide intentionally left blank.
![Page 23: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/23.jpg)
Let's talk conceptuallyLet's talk conceptuallyaboutabout
rendering.rendering.
![Page 24: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/24.jpg)
What do we need?What do we need?
![Page 25: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/25.jpg)
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.
![Page 26: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/26.jpg)
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.
![Page 27: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/27.jpg)
We have arrays!
![Page 28: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/28.jpg)
OBJECTS
![Page 29: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/29.jpg)
Render API principles:OBJECTS{{ demo }}
http://github.com/c4rl/renderapi
![Page 30: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/30.jpg)
Render API principles
1. Render arrays move to a
Builder pattern
Object creation is delegatedto a series of steps then finally
invoked.
![Page 31: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/31.jpg)
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.
![Page 32: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/32.jpg)
Render API principles
3. Building and decoration isn't invoked until the builder is cast to
a string.
__toString() magic method
![Page 33: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/33.jpg)
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.
![Page 34: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/34.jpg)
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
![Page 35: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/35.jpg)
...potentially :)
fixed
![Page 36: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/36.jpg)
This slide also intentionally left blank.
![Page 37: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/37.jpg)
@todo
Questions, feedback, reengage discussion.
Proof-of-concept in 8.x sandbox,tests & benchmarking.
![Page 38: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/38.jpg)
Please evaluate this sessionhttps://austin2014.drupal.org/node/2618
![Page 39: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/39.jpg)
![Page 40: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/40.jpg)
![Page 41: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/41.jpg)
![Page 42: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/42.jpg)
![Page 43: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/43.jpg)
![Page 44: Markup Ain't Easy or: How I Learned to love An Object-Oriented RenderAPI](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a2f8c1a28ab91478b45cb/html5/thumbnails/44.jpg)
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.