Enough about Classes, Let's Talk Templates

Jonathan Reinink Software developer from Canada Been writing PHP for
about 15 years Marketing agency for over a decade Started contract development this year Leadership group of The PHP League Wrote the Plates template library Wrote the Glide image library I <3 open source

Why do templates matter?

Templates often account for 25-50% of your overall code base.

Templates help separate your controller and domain logic from your
presentation logic.

Templates are often developed by both server-side developers, and front-end
developers.

Templates are always "spaghetti code". Because contain more than one
language in the same ﬁle.

Bad template code contributes to technical debt.

Step 1: Choose the right template library.

People have very strong opinions about templating.

“This blog post is not for the faint- hearted! Some
people will strongly disagree with me and some others will probably want to kill me at the upcoming Zend Conference.” —Fabien Potencier

“I'm not suggesting that native PHP templates are better than
compiled templates (like Twig).” —Me

“oh... puts the pitchfork down” —Friendly Reddit reader “hides torch
behind back…” —Another friendly Reddit reader

The native PHP vs compiled templates debate.

PHP is the oldest method of templating in PHP. (because
PHP is a templating language)

<html> ! <h1>Hello, <?=$name?></h1> ! <ul> <?php if ($stmt =
$mysqli->prepare("SELECT name FROM friends")) { $stmt->execute(); $stmt->bind_result($name); ! while ($stmt->fetch()) { echo '<li>'.$name.'</li>'; } } ?> </ul>

Important lesson: If your templates contain SQL code, you’re doing
it wrong.

While PHP has evolved into a mature, object oriented language,
it hasn’t improved much as a templating language.

Compiled templates ﬁll this void by offering a new syntax
speciﬁcally geared for templating.

{% extends "template.html" %} ! {% block title %}User Profile{%
endblock %} ! {% block content %} <h1>User Profile</h1> <p>Hello, {{ name }}</p> {% endblock %}

Since these compiled templates must be compiled, there is a
slight performance hit.

You can write good template code with most modern templating
libraries. Twig, Blade, Smarty, Moustache, Plates, Aura.View, Zend\View, etc…

I recommend you use Twig.

Choose a templating language with an easy learning curve. Easy
for both server-side developers and front-end developers.

Compiled languages offer very simple, template oriented syntax. {{ var
}}

<?php if ($items): ?> <?php foreach ($items as $item): ?>
<li><?php echo $item ?></li> <?php endforeach ?> <?php else: ?> <li>No items found.</li> <?php endif ?> {% for item in items %} <li>{{ item }}</li> {% else %} <li>No items found.</li> {% endfor %} Native PHP Twig

But, native PHP templates don’t have to be ugly.

Always use the short echo syntax. <?php echo $name; ?>
<?=$user->name?>

Never use blocks of PHP. <?php foreach ($users as $user)
{ echo $user->name; } ?> <?php foreach ($users as $user): ?> <?=$user->name?> <?php endforeach ?>

Only one statement per PHP tag. <?php if ($users) {
foreach ($users as $user) { ?> <?=$user->name?> <?php } } ?> <?php if ($users): ?> <?php foreach ($users as $user): ?> <?=$user->name?> <?php endforeach ?> <?php endif ?>

Never use curly brackets. <?php foreach ($users as $user) {
?> <?=$user->name?> <?php } ?> <?php foreach ($users as $user): ?> <?=$user->name?> <?php endforeach ?>

Never using semicolons. <?php echo $name; ?> <?=$user->name?>

<?php $this->layout('template', ['title' => 'User Profile']) ?> ! <h1>Hello <?=$this->e($name)?></h1>
! <h2>Friends</h2> <ul> <?php foreach($friends as $friend): ?> <li> <a href="/profile/<?=$this->e($friend->id)?>"> <?=$this->e($friend->name)?> </a> </li> <?php endforeach ?> </ul> ! <?php if ($invitations): ?> <h2>Invitations</h2> <p>You have some friend invites!</p> <?php endif ?>

Avoid XML attribute based templating languages.

Choose a templating language with syntax highlighting and auto- completion
in your editor of choice.

Always, always, always escape unsafe data.

Hello, <?=$name?>

Hello, Jonathan

Hello, <a href="http://xssattack.com/">Click here</a>

Hello, <a href="http://xssattack.com/ ">Click here</a>gt;

Hello, <a href="http://xssattack.com/">Click here</a>

Hello, <?=htmlspecialchars($name, ENT_QUOTES | ENT_SUBSTITUTE)?>

Hello, <?=$this->escape($name)?> Hello, <?=$this->e($name)?> Hello, <?=e($name)?>

1. HTML escaping 2. HTML attribute escaping 3. CSS escaping
4. JavaScript escaping 5. URL escaping Be aware of the different types of escaping:

If at all possible, use automatic escaping!

Hello, {{ name }}

Without automatic escaping, you MUST manually escape every single variable.
And you will probably forget once in a while!!!

It should also be VERY obvious in your templates when
you are outputting raw data.

Hello, {!! $name !!} Hello, {{ name|raw }} Blade Twig

Automatic escaping is NOT possible in native PHP.

<h1><?=$this->name?></h1> Attempt 1: Object overloading

class Template { protected $values; ! public function __get($name) {
return $this->escape( $this->values[$name] ); } }

Problem: How do you escape object params and method calls?
<h1><?=$this->user->name?></h1>

Attempt 2: Object overloading with proxies <h1><?=$this->user->name?></h1>

class Template { protected $values; ! public function __get($name) {
return new TemplateProxy( $this->values[$name] ); } }

class TemplateProxy { protected $value; ! public function __get($name) {
return new TemplateProxy($this->name); } ! public function __call($name, $args) { return new TemplateProxy(...); } ! public function __toString() { return $this->escape($this->value); } }

Problems: double escaping, poor performance, horrible error debugging, collisions with
template methods, etc, etc.

Attempt 3: Compiled native php templates

<h1><?=$name?></h1> <h1><?=$this->escape($name)?></h1> Pre-compilation: Post-compilation:

Automatic escaping is NOT possible in native PHP.

Watch your whitespace, this isn’t the Wild Wild West.

Always use tabs, or always use spaces, NEVER MIX.

Watch your indenting.

<ul> {% for item in items %} <li>{{ item }}</li>
{% else %} <li>No items found.</li> {% endfor %} </ul>

Use comments that only appear in the template, not the
rendered markup.

{# This is a Twig comment #}

Your templates should be very low on logic.

Templates are not responsible for data lookup, persistence or other
complex tasks.

Anything outside of conditionals, loops and basic formatting is a
code smell.

Watch your control structures. Use: if, for, foreach Don’t use:
switch, while, do-while

So what exactly is basic formatting then? • Date formatting
• Case changes • String concatenation • String trimming • Number formatting • URL encoding

Consider using a logic- less templating language.

<ul> {{# users }} <li>{{ name }}</li> {{/ users }}
</ul>

namespace App\ViewModels; ! class UsersViewModel { public function users() {
return [ ['name' => 'Jonathan'], ['name' => 'Amy'], ['name' => 'Joey'], ]; } }

Some template logic is okay, but only if it’s presentation
logic.

Avoid accessing the global namespace.

@if (Request::is('/')) <a class="active" href="/">Home</a> @else <a href="/">Home</a> @endif

@if ($url === '/') <a class="active" href="/">Home</a> @else <a href="/">Home</a>
@endif

Preassign template data instead of accessing global variables.

$templates->addData(['url' => $url], 'header');

view()->composer('header', function ($view) { $view->with('url', $url); });

$twig->addGlobal('url', $url);

Use the dot notation for variable resolution. object.parameter Access arrays,
objects and methods the same way.

{{ user.name }} = $user['name'] {{ user.name }} = $user->name
{{ user.name }} = $user->name()

Templates should only know about one instance variable.

Rule #4: Controllers can instantiate only one object. Therefore, views
can only know about one instance variable and views should only send messages to that object. — Sandi Metz, rules for developers

Keep your templates as short as possible. Break templates into
smaller, reusables pieces.

<?php $this->insert('partials/header') ?> ! <p>Your page content.</p> ! <?php $this->insert('partials/footer')
?>

<?php $this->insert('partials/header', ['title' => 'Home']) ?> ! <p>Your page content.</p>
! <?php $this->insert('partials/footer') ?>

{% include 'partials/header.html' with {'title': 'Home'} %} ! <p>Your page
content.</p> ! {% include 'partials/footer.html' %}

Don't be afraid to repeat (very) small pieces of code.

<select> <?php foreach ($users as $user): ?> <option <?php if
($current_user === $user) echo 'selected' ?> value="<?=$user->id?>"> <?=$user->name?> </option> <?php endforeach ?> </select>

Use inheritance for even better organization of templates.

template.html {% extends "template.html" %} ! {% block title %}Profile{%
endblock %} {% block content %} <h1>Profile</h1> <p>Hello, {{ name }}</p> {% endblock %} proﬁle.html <html> <head> <title> {% block title %} Default title {% endblock %} </title> </head> <body> ! <main> {% block content %} <p>Default content</p> {% endblock %} </main> ! </body> </html>

Use a templating language that you can extend.

$templates->registerFunction('upper', function ($string) { return strtoupper($string); }); <h1>Hello <?=$this->upper($name)</h1>

Blade::directive('datetime', function ($expression) { return "<?php echo with{$expression}->format('m/d/Y H:i'); ?>";
}); @datetime($blog->publish_date)

Use a template language that’s easy to debug.

Use a template language that offers a sandbox mode.

Use a template language that performs well. Hint: they basically
all do.

Automatic escaping is WAY more important than the speed advantage
of native PHP templates.

Follow me on Twitter at @reinink Rate this talk joind.in/15753
Thanks!

Enough about Classes, Let's Talk Templates

Enough about Classes, Let's Talk Templates

More Decks by Jonathan Reinink

Other Decks in Technology

Featured

Transcript