A More Modular Web: Template Engines - Meetupfiles.meetup.com/18616278/A More Modular Web -...
Transcript of A More Modular Web: Template Engines - Meetupfiles.meetup.com/18616278/A More Modular Web -...
![Page 2: A More Modular Web: Template Engines - Meetupfiles.meetup.com/18616278/A More Modular Web - Template...Caddis the performance agency Client Side Wee, Jquery Template, Handlebars, Mustache,](https://reader034.fdocuments.in/reader034/viewer/2022051913/60038c0485c3f10c882adf58/html5/thumbnails/2.jpg)
Caddis the performance agency
A tool to separate business logic from presentation logic. Template languages create clean, readable
views.
What is a template engine?
![Page 3: A More Modular Web: Template Engines - Meetupfiles.meetup.com/18616278/A More Modular Web - Template...Caddis the performance agency Client Side Wee, Jquery Template, Handlebars, Mustache,](https://reader034.fdocuments.in/reader034/viewer/2022051913/60038c0485c3f10c882adf58/html5/thumbnails/3.jpg)
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
![Page 4: A More Modular Web: Template Engines - Meetupfiles.meetup.com/18616278/A More Modular Web - Template...Caddis the performance agency Client Side Wee, Jquery Template, Handlebars, Mustache,](https://reader034.fdocuments.in/reader034/viewer/2022051913/60038c0485c3f10c882adf58/html5/thumbnails/4.jpg)
Caddis the performance agency
• Acts as a middle man
• Populates data
• Write code shorthand
• Concise and readable syntax
Features
![Page 5: A More Modular Web: Template Engines - Meetupfiles.meetup.com/18616278/A More Modular Web - Template...Caddis the performance agency Client Side Wee, Jquery Template, Handlebars, Mustache,](https://reader034.fdocuments.in/reader034/viewer/2022051913/60038c0485c3f10c882adf58/html5/thumbnails/5.jpg)
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
![Page 7: A More Modular Web: Template Engines - Meetupfiles.meetup.com/18616278/A More Modular Web - Template...Caddis the performance agency Client Side Wee, Jquery Template, Handlebars, Mustache,](https://reader034.fdocuments.in/reader034/viewer/2022051913/60038c0485c3f10c882adf58/html5/thumbnails/7.jpg)
Caddis the performance agency
Must have an “engine” to compile and output code.
• PHP => Twig, EE
• JS => Node.js
• Ruby => ERB, Haml
VROOM VROOM
![Page 8: A More Modular Web: Template Engines - Meetupfiles.meetup.com/18616278/A More Modular Web - Template...Caddis the performance agency Client Side Wee, Jquery Template, Handlebars, Mustache,](https://reader034.fdocuments.in/reader034/viewer/2022051913/60038c0485c3f10c882adf58/html5/thumbnails/8.jpg)
Caddis the performance agencyCaddis the performance agency
• Websites and web apps
• Mobile apps
Where should I use a template engine?
![Page 9: A More Modular Web: Template Engines - Meetupfiles.meetup.com/18616278/A More Modular Web - Template...Caddis the performance agency Client Side Wee, Jquery Template, Handlebars, Mustache,](https://reader034.fdocuments.in/reader034/viewer/2022051913/60038c0485c3f10c882adf58/html5/thumbnails/9.jpg)
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?
![Page 10: A More Modular Web: Template Engines - Meetupfiles.meetup.com/18616278/A More Modular Web - Template...Caddis the performance agency Client Side Wee, Jquery Template, Handlebars, Mustache,](https://reader034.fdocuments.in/reader034/viewer/2022051913/60038c0485c3f10c882adf58/html5/thumbnails/10.jpg)
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?
![Page 11: A More Modular Web: Template Engines - Meetupfiles.meetup.com/18616278/A More Modular Web - Template...Caddis the performance agency Client Side Wee, Jquery Template, Handlebars, Mustache,](https://reader034.fdocuments.in/reader034/viewer/2022051913/60038c0485c3f10c882adf58/html5/thumbnails/11.jpg)
Caddis the performance agency
Examples
![Page 12: A More Modular Web: Template Engines - Meetupfiles.meetup.com/18616278/A More Modular Web - Template...Caddis the performance agency Client Side Wee, Jquery Template, Handlebars, Mustache,](https://reader034.fdocuments.in/reader034/viewer/2022051913/60038c0485c3f10c882adf58/html5/thumbnails/12.jpg)
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.
![Page 13: A More Modular Web: Template Engines - Meetupfiles.meetup.com/18616278/A More Modular Web - Template...Caddis the performance agency Client Side Wee, Jquery Template, Handlebars, Mustache,](https://reader034.fdocuments.in/reader034/viewer/2022051913/60038c0485c3f10c882adf58/html5/thumbnails/13.jpg)
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
![Page 14: A More Modular Web: Template Engines - Meetupfiles.meetup.com/18616278/A More Modular Web - Template...Caddis the performance agency Client Side Wee, Jquery Template, Handlebars, Mustache,](https://reader034.fdocuments.in/reader034/viewer/2022051913/60038c0485c3f10c882adf58/html5/thumbnails/14.jpg)
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.
![Page 15: A More Modular Web: Template Engines - Meetupfiles.meetup.com/18616278/A More Modular Web - Template...Caddis the performance agency Client Side Wee, Jquery Template, Handlebars, Mustache,](https://reader034.fdocuments.in/reader034/viewer/2022051913/60038c0485c3f10c882adf58/html5/thumbnails/15.jpg)
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.
![Page 16: A More Modular Web: Template Engines - Meetupfiles.meetup.com/18616278/A More Modular Web - Template...Caddis the performance agency Client Side Wee, Jquery Template, Handlebars, Mustache,](https://reader034.fdocuments.in/reader034/viewer/2022051913/60038c0485c3f10c882adf58/html5/thumbnails/16.jpg)
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
![Page 17: A More Modular Web: Template Engines - Meetupfiles.meetup.com/18616278/A More Modular Web - Template...Caddis the performance agency Client Side Wee, Jquery Template, Handlebars, Mustache,](https://reader034.fdocuments.in/reader034/viewer/2022051913/60038c0485c3f10c882adf58/html5/thumbnails/17.jpg)
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
![Page 18: A More Modular Web: Template Engines - Meetupfiles.meetup.com/18616278/A More Modular Web - Template...Caddis the performance agency Client Side Wee, Jquery Template, Handlebars, Mustache,](https://reader034.fdocuments.in/reader034/viewer/2022051913/60038c0485c3f10c882adf58/html5/thumbnails/18.jpg)
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
![Page 19: A More Modular Web: Template Engines - Meetupfiles.meetup.com/18616278/A More Modular Web - Template...Caddis the performance agency Client Side Wee, Jquery Template, Handlebars, Mustache,](https://reader034.fdocuments.in/reader034/viewer/2022051913/60038c0485c3f10c882adf58/html5/thumbnails/19.jpg)
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
![Page 20: A More Modular Web: Template Engines - Meetupfiles.meetup.com/18616278/A More Modular Web - Template...Caddis the performance agency Client Side Wee, Jquery Template, Handlebars, Mustache,](https://reader034.fdocuments.in/reader034/viewer/2022051913/60038c0485c3f10c882adf58/html5/thumbnails/20.jpg)
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>
![Page 21: A More Modular Web: Template Engines - Meetupfiles.meetup.com/18616278/A More Modular Web - Template...Caddis the performance agency Client Side Wee, Jquery Template, Handlebars, Mustache,](https://reader034.fdocuments.in/reader034/viewer/2022051913/60038c0485c3f10c882adf58/html5/thumbnails/21.jpg)
Caddis the performance agency
• Modular and DRY
• Custom functions and helpers
• Consistency (includes/snippets)
• Data drives output and does the heavy lifting
Wrap Up
![Page 22: A More Modular Web: Template Engines - Meetupfiles.meetup.com/18616278/A More Modular Web - Template...Caddis the performance agency Client Side Wee, Jquery Template, Handlebars, Mustache,](https://reader034.fdocuments.in/reader034/viewer/2022051913/60038c0485c3f10c882adf58/html5/thumbnails/22.jpg)
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