Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Templates don’t need to break the browser by Nikolas Martens

538 views

Published on

Despite the fact that most templates in web application are HTML documents, modern template engines are strictly text-manipulating, relying on specific mark-up. Although this makes them universally usable, it also imposes a burden by requiring extra tools to render a template, while making it unreadable for a common tool specialized in mark-up parsing: the browser.
In my talk, I’m proposing an approach to writing templates for web applications that leverages the capabilities of HTML to create highly maintainable templates by requiring no tools besides the browser for development and testing.

Published in: Technology, Spiritual
  • Be the first to comment

Templates don’t need to break the browser by Nikolas Martens

  1. 1. <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 } ?>
  2. 2. <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 } ?>
  3. 3. <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 } ?>
  4. 4. <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 } ?>
  5. 5. <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(); ?>
  6. 6. <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(); ?>
  7. 7. <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(); ?>
  8. 8. <? $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}}
  9. 9. <? $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}}
  10. 10. <? $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}}
  11. 11. <? $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}}
  12. 12. { date: 2010-05-10,slot: 9h - 14h }bookings: [],{ name: April… }months: [] ...
  13. 13. { date: 2010-05-10,slot: 9h - 14h }bookings: [],{ name: April… }months: [] ...
  14. 14. <div>Name: <span>John Wayne</span>Homepage: <a href="http://johnwayne.com"><span>johnwayne.com</span></a></div>
  15. 15. <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"}}}
  16. 16. <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"}}}
  17. 17. {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>
  18. 18. {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>
  19. 19. {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>
  20. 20. {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>
  21. 21. {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>
  22. 22. <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>
  23. 23. <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>

×