twig.js: The Templating Engine for the Client-Side

In this session, we will take an introductory look at twig.js, the Javascript port of the amazing Twig templating engine. We will learn how you can leverage all the power of Twig on the client-side including advanced features such as i18n support, inheritance, or macros. While twig.js can be used standalone, it also has first-class integration with Assetic. Therefore, we will also take a look at one of Assetic's latest features, asset variables, and how we can leverage it with twig.js.

Transcript

1. twig.js The Templating Engine for the Client-Side
2. 2 Johannes Schmitt | twig.js: The Templating Engine for the Client-Side | 06.06.2012 Agenda Why twig.js? How twig.js works Assetic Variables Use Cases
3. 3 Johannes Schmitt | twig.js: The Templating Engine for the Client-Side | 06.06.2012 Why twig.js? Aren‘t there already enough templating engines in Javascript like for example: - Underscore - John Resig‘s Micro-Templating - Mustache.js - Pure - jQote - embeddedJS - tryHandleBarsJs - dust.js - Trimpath - JAML - jSmart - TempoJS - jsViews - Yajet - Kite - BabaJS - vkTemplate - Beard - JsRender - json2html The short answer is no. The longer, it depends.
4. 4 Johannes Schmitt | twig.js: The Templating Engine for the Client-Side | 06.06.2012 twig.js offers some key benefits over existing solutions twig.js is: - fast - secure - flexible - concise - extensible twig.js offers key benefits over other templating engines: - exact same syntax like Twig - same templates for server and client-side (!) twig.js is not: A pure Javascript implementation
5. 5 Johannes Schmitt | twig.js: The Templating Engine for the Client-Side | 06.06.2012 twig.js internally uses Twig for parsing templates Twig parses .twig files twig.js writes AST as Javascript code Abstract Syntax Tree (AST) twig.js behaves as close as possible to Twig, but PHP is required for parsing, and compiling Javascript code.
6. 6 Johannes Schmitt | twig.js: The Templating Engine for the Client-Side | 06.06.2012 Agenda Why twig.js? How twig.js works Assetic Variables Use Cases
7. 7 Johannes Schmitt | twig.js: The Templating Engine for the Client-Side | 06.06.2012 In twig.js, there is a distinct difference between compilation and runtime Compilation Time Runtime Functions Filters Tests Compilation Time should generally be preferred when possible.
8. 8 Johannes Schmitt | twig.js: The Templating Engine for the Client-Side | 06.06.2012 twig.js has almost the same architecture like Twig JSCompiler FilterCompiler TypeCompiler TestCompiler Function Map Filter Map
9. 9 Johannes Schmitt | twig.js: The Templating Engine for the Client-Side | 06.06.2012 twig.js has almost the same architecture like Twig twig.Environment Filters Functions Tests Globals Extensions
10. 10 Johannes Schmitt | twig.js: The Templating Engine for the Client-Side | 06.06.2012 Agenda Why twig.js? How twig.js works Assetic Variables Use Cases
11. 11 Johannes Schmitt | twig.js: The Templating Engine for the Client-Side | 06.06.2012 twig.js allows you to easily internationalize your Javascript Twig Template Assetic English Version German Version French Version
12. 12 Johannes Schmitt | twig.js: The Templating Engine for the Client-Side | 06.06.2012 twig.js is integrated into Assetic AsseticFilter Compile Request CompilerRequestHandler JSCompiler
13. 13 Johannes Schmitt | twig.js: The Templating Engine for the Client-Side | 06.06.2012 Why twig.js? How twig.js works Assetic Variables Use Cases Agenda
14. 14 Johannes Schmitt | twig.js: The Templating Engine for the Client-Side | 06.06.2012 Use Case #1: Client-Side Application
15. 15 Johannes Schmitt | twig.js: The Templating Engine for the Client-Side | 06.06.2012 Use Case #2: Rendering Small Pieces on the Client-Side
16. 16 Johannes Schmitt | twig.js: The Templating Engine for the Client-Side | 06.06.2012 Use Case #3: Mixed Client-Side and Server-Side Rendering
17. 17 Johannes Schmitt | twig.js: The Templating Engine for the Client-Side | 06.06.2012 Thanks! Twitter: @JohannesMS Github: schmittjoh http://jmsyst.com/