Ryan Payne ryan@caddis.co Caddis the performance agency

A More Modular Web: Template Engines

Caddis the performance agency

A tool to separate business logic from presentation logic. Template languages create clean, readable

views.

What is a template engine?

Caddis the performance agencyCaddis the performance agency

• Template engines don’t completely separate logic from presentation

• Some logic (for loops, if/switch statements) is involved but core business logic is not included

• “Your templating engine sucks and everything you have ever written is spaghetti code (yes, you)” - http://bit.ly/QFlbrf

Caveat

Caddis the performance agency

• Acts as a middle man

• Populates data

• Write code shorthand

• Concise and readable syntax

Features

Caddis the performance agency

Client Side

Wee, Jquery Template, Handlebars, Mustache, Underscore, EJSSwig, Nunjucks, Hogan, Dust.js, Jade, doT.js, ECT, Template7, JTemplates, and more…

Server Side

Twig, Blade, Mustache, Smarty, Volt, ERB, Liquid, and more…

Lots of Options

Caddis the performance agency

http://todomvc.com

TodoMVC

Caddis the performance agency

Must have an “engine” to compile and output code.

• PHP => Twig, EE

• JS => Node.js

• Ruby => ERB, Haml

VROOM VROOM

Caddis the performance agencyCaddis the performance agency

• Websites and web apps

• Mobile apps

Where should I use a template engine?

Caddis the performance agencyCaddis the performance agency

• Breaks up code

• Flexible and maintainable

• Concise and readable

• Data does manual labor

Why should I use a template engine?

Caddis the performance agencyCaddis the performance agency

• Custom functions and helpers

• Simple to understand

• Creates a more independent front end dev

• Security

Why should I use a template engine?

Caddis the performance agency

Examples

Caddis the performance agency

1 <div id="primary" class="content-area"> 2 <main id="main" class="site-main" role="main"> 3 4 <?php 5 while ( have_posts() ) : the_post(); 6 7 get_template_part( 'template-parts/content', get_post_format() ); 8 9 the_post_navigation(); 10 11 // If comments are open or we have at least one comment, load up the comment template. 12 if ( comments_open() || get_comments_number() ) : 13 comments_template(); 14 endif; 15 16 endwhile; // End of the loop. 17 ?> 18 19 </main><!-- #main --> 20 </div><!-- #primary -->

A good start…but we can do better.

Caddis the performance agency

• Created by Fabien Potencier, creator of the Symfony framework

• “The flexible, fast, and secure template engine for PHP”

• Great documentation

• Custom tags, filters, functions, and operators

• Compiles to optimized PHP code

TWIG

http://twig.sensiolabs.org

Caddis the performance agency

1 <nav role="navigation" class="site-nav"> 2 <ul class="site-nav__list"> 3 <li class="site-nav__item"> 4 <a href="/services" class="site-nav__link">Services</a> 5 </li> 6 <li class="site-nav__item"> 7 <a href="/solutions" class="site-nav__link">Solutions</a> 8 </li> 9 <li class="site-nav__item"> 10 <a href="/locations" class="site-nav__link">Locations</a> 11 </li> 12 <li class="site-nav__item"> 13 <a href="/news" class="site-nav__link">News</a> 14 </li> 15 <li class="site-nav__item"> 16 <a href="/partners" class="site-nav__link">Partners</a> 17 </li> 18 </ul> 19 </nav>

Nav without template engine.

Caddis the performance agency

21 <nav role="navigation" class="site-nav"> 22 {% set navItems = { 23 'Services': '/services', 24 'Solutions': '/solutions', 25 'Locations': '/locations', 26 'News': '/news', 27 'Partners': '/partners' 28 } %} 29 30 <ul class="site-nav__list"> 31 {% for title, url in navItems %} 32 <li class="site-nav__item"> 33 <a href="{{ url }}" class="site-nav__link">{{ title }}</a> 34 </li> 35 {% endfor %} 36 </ul> 37 </nav>

Nav with template engine.

Caddis the performance agency

1 <footer role="contentinfo" class="footer"> 2 <div class="services"> 3 {{ globalMacros.footerList(entries.section('services'), '-services') }} 4 </div> 5 <div class="info"> 6 {% include ‘_includes/global/logo' %} 9 10 {{ globalMacros.footerList(entries.section('info'), '-info') }} 11 </div> 12 </footer>

Footer

Caddis the performance agency

1 {% macro footerList(list, modifier) %} 2 <ul class=“footer-list {{ modifier }}"> 3 {% for item in list %} 4 <li class=“footer-list__item {{ modifier }}"> 5 <a href="{{ item.uri }}" class=“footer-list__link {{ modifier }}"> 6 {{ item.title }} 7 </a> 8 </li> 9 {% endfor %} 10 </ul> 11 {% endmacro %}

Macros

Caddis the performance agency

• Caddis framework

• “Powerful template rendering engine for dynamic data”

• Small footprint

• DOM Manipulation

• Server/client side template sharing

Wee

https://www.weepower.com

Caddis the performance agency

1 <div class="confirmation"> 2 <ul class="confirmation__selections"> 3 {{ #steps|each }} 4 <li class="confirmation__selection{{ #purchased }} -is-purchased{{ /purchased }}"> 5 {{ title }} 6 </li> 7 {{ /steps }} 8 </ul> 9 </div>

Confirmation message

Caddis the performance agency

1 <table> 2 <tr> 3 <td>Subtotal</td> 4 <td> 5 {{ cart.itemSubtotalWithSale|currency() }} 6 </td> 7 </tr> 8 <tr> 9 <td>Discounts</td> 10 <td> 11 {{ cart.totalDiscount|currency() }} 12 </td> 13 </tr> 14 <tr> 15 <td>Shipping</td> 16 <td> 17 {{ cart.totalShippingCost|currency() }} 18 </td> 19 </tr> 20 <tr> 21 <td>Tax</td> 22 <td> 23 {{ cart.totalTax|currency() }} 24 </td> 25 </tr> 26 <tr> 27 <td>Total</td> 28 <td> 29 {{ cart.totalPrice|currency() }} 30 </td> 31 </tr> 32 </table>

Caddis the performance agency

• Modular and DRY

• Custom functions and helpers

• Consistency (includes/snippets)

• Data drives output and does the heavy lifting

Wrap Up

Caddis the performance agencyCaddis the performance agency

• How to Modularize HTML Using Template Engines and Gulp

• An Overview of JavaScript Templating Engines

• Comparison of web template engines

• Your templating engine sucks and everything you have ever written is spaghetti code (yes, you)

Helpful Resources