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

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/