Templating separates logic from presentation in different files, but we still need to glue them together somehow so we use a specialized mark-up language. And nobody minds yet another language or the burden when testing the templates. But there already is a widely used and proven mark-up language in every HTML document: HTML itself. In this talk, I'm proposing an new approach to writing templates for web applications, called Template Animation, that leverages the capabilities of HTML to create highly maintainable templates, requiring no tools besides the browser for development and testing.

19. <h1>There are no messages</h1>
<?php if($db->fetchOne('select count(*) from messages')) { ?>
<?php $messages = $db->fetchAll('select * from messages'); ?>
<h1>There are <?php echo count($messages); ?> messages:<h1>
<ul>
<li>From <?php echo $message['from']; ?></li>
<?php foreach ($messages as $message) { ?>
<?php } ?>
</ul>
<?php } else { ?>
<php } ?>

20. <h1>There are no messages</h1>
<?php if($db->fetchOne('select count(*) from messages')) { ?>
<?php $messages = $db->fetchAll('select * from messages'); ?>
<h1>There are <?php echo count($messages); ?> messages:<h1>
<ul>
<li>From <?php echo $message['from']; ?></li>
<?php foreach ($messages as $message) { ?>
<?php } ?>
</ul>
<?php } else { ?>
<php } ?>

21. <h1>There are no messages</h1>
<?php if($db->fetchOne('select count(*) from messages')) { ?>
<?php $messages = $db->fetchAll('select * from messages'); ?>
<h1>There are <?php echo count($messages); ?> messages:<h1>
<ul>
<li>From <?php echo $message['from']; ?></li>
<?php foreach ($messages as $message) { ?>
<?php } ?>
</ul>
<?php } else { ?>
<php } ?>

22. <h1>There are no messages</h1>
<?php if($db->fetchOne('select count(*) from messages')) { ?>
<?php $messages = $db->fetchAll('select * from messages'); ?>
<h1>There are <?php echo count($messages); ?> messages:<h1>
<ul>
<li>From <?php echo $message['from']; ?></li>
<?php foreach ($messages as $message) { ?>
<?php } ?>
</ul>
<?php } else { ?>
<php } ?>

23. <h1>There are no messages</h1>
<? if (count($messages)) { ?>
<h1>There are <?= count($messages) ?> messages:<h1>
<ul>
<li>From <?= $message['from']; ?></li>
<? foreach ($messages as $message) { ?>
<?php } ?>
</ul>
<? } else { >
<php } ?>
<? $messages = $messageStore->getAll(); ?>

24. <h1>There are no messages</h1>
<? if (count($messages)) { ?>
<h1>There are <?= count($messages) ?> messages:<h1>
<ul>
<li>From <?= $message['from']; ?></li>
<? foreach ($messages as $message) { ?>
<?php } ?>
</ul>
<? } else { >
<php } ?>
<? $messages = $messageStore->getAll(); ?>

25. <h1>There are no messages</h1>
<? if (count($messages)) { ?>
<h1>There are <?= count($messages) ?> messages:<h1>
<ul>
<li>From <?= $message['from']; ?></li>
<? foreach ($messages as $message) { ?>
<?php } ?>
</ul>
<? } else { >
<php } ?>
<? $messages = $messageStore->getAll(); ?>

26. <? $messages = $store->getMessages();
'messageCount' => count($messages),
'messages' => $messages
$model = array(
); ?>
<h1>There are no messages</h1>
{{^messageCount}}
<h1>There are {{messageCount}} messages:<h1>
<ul>
<li>From {{from}}</li>
{{#messages}}
{{/messages}}
</ul>
{{/messageCount}}{{#messageCount}}
{{/messageCount}}

27. <? $messages = $store->getMessages();
'messageCount' => count($messages),
'messages' => $messages
$model = array(
); ?>
<h1>There are no messages</h1>
{{^messageCount}}
<h1>There are {{messageCount}} messages:<h1>
<ul>
<li>From {{from}}</li>
{{#messages}}
{{/messages}}
</ul>
{{/messageCount}}{{#messageCount}}
{{/messageCount}}

31. <? $messages = $messageStore->getAll(); ?>
<h1>There are no messages</h1>
<? if (count($messages)) { ?>
<h1>There are <?= count($messages) ?> messages:<h1>
<ul>
<li>From <?= $message['from']; ?></li>
<? foreach ($messages as $message) { ?>
<?php } ?>
</ul>
<? } else { >
<php } ?>
<h1>There are no messages</h1>
{{^messageCount}}
{{/messageCount}}
<h1>There are {{messageCount}} messages:<h1>
<ul>
<li>From {{from}}</li>
{{#messages}}
{{/messages}}
</ul>
{{#messageCount}}
{{/messageCount}}

32. <? $messages = $messageStore->getAll(); ?>
<h1>There are no messages</h1>
<? if (count($messages)) { ?>
<h1>There are <?= count($messages) ?> messages:<h1>
<ul>
<li>From <?= $message['from']; ?></li>
<? foreach ($messages as $message) { ?>
<?php } ?>
</ul>
<? } else { >
<php } ?>
<h1>There are no messages</h1>
{{^messageCount}}
{{/messageCount}}
<h1>There are {{messageCount}} messages:<h1>
<ul>
<li>From {{from}}</li>
{{#messages}}
{{/messages}}
</ul>
{{#messageCount}}
{{/messageCount}}

68. { date: '2010-05-10',
slot: '9h - 14h' }
bookings: [
],
{ name: 'April'
… }
months: [
] ...

69. { date: '2010-05-10',
slot: '9h - 14h' }
bookings: [
],
{ name: 'April'
… }
months: [
] ...

83. <div>
Name: <span>John Wayne</span>
Homepage: <a href="http://johnwayne.com">
<span>johnwayne.com</span>
</a>
</div>

84. <div>
Name: <span>John Wayne</span>
Homepage: <a href="http://johnwayne.com">
<span>johnwayne.com</span>
</a>
</div>
{
person: {
name: "John Wayne",
url : {
href: "http://johnwayne.com",
caption: "johnwayne.com"
}
}
}

85. <div property="person">
Name: <span property="name">John Wayne</span>
Homepage: <a property="url" href="http://johnwayne.com">
<span property="caption">johnwayne.com</span>
</a>
</div>
{
person: {
name: "John Wayne",
url : {
href: "http://johnwayne.com",
caption: "johnwayne.com"
}
}
}

86. {
person: {
name: "John Wayne",
url : {
href: "http://johnwayne.com",
caption: "johnwayne.com"
}
}
}
<div property="person">
Name: <span property="name">John Wayne</span>
Homepage: <a property="url" href="http://johnwayne.com">
<span property="caption">johnwayne.com</span>
</a>
</div>

87. {
person: {
name: "John Wayne",
url : {
href: "http://johnwayne.com",
caption: "johnwayne.com"
}
}
}
<div property="person">
Name: <span property="name">John Wayne</span>
Homepage: <a property="url" href="http://johnwayne.com">
<span property="caption">johnwayne.com</span>
</a>
</div>

88. {
person: {
name: "John Wayne",
url : {
href: "http://johnwayne.com",
caption: "johnwayne.com"
}
}
}
<div property="person">
Name: <span property="name">John Wayne</span>
Homepage: <a property="url" href="http://johnwayne.com">
<span property="caption">johnwayne.com</span>
</a>
</div>

89. {
person: {
name: "John Wayne",
url : {
href: "http://johnwayne.com",
caption: "johnwayne.com"
}
}
}
<div property="person">
Name: <span property="name">John Wayne</span>
Homepage: <a property="url" href="http://johnwayne.com">
<span property="caption">johnwayne.com</span>
</a>
</div>

90. {
person: {
name: "John Wayne",
url : {
href: "http://johnwayne.com",
caption: "johnwayne.com"
}
}
}
<div property="person">
Name: <span property="name">John Wayne</span>
Homepage: <a property="url" href="http://johnwayne.com">
<span property="caption">johnwayne.com</span>
</a>
</div>

97. <div property="person">
Name: <span property="name">John Wayne</span>
Homepage: <a property="url" href="http://johnwayne.com">
<span property="caption">johnwayne.com</span>
</a>
</div>

98. <div property="person" typeof="Person">
Name: <span property="name">John Wayne</span>
Homepage: <a property="url" href="http://johnwayne.com">
<span property="caption">johnwayne.com</span>
</a>
</div>
<div vocab="http://schema.org/">
</div>