Post on 22-Sep-2020
transcript
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
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