Tweet
Tweet

Slide 1

Slide 1 text

twig.js The Templating Engine for the Client-Side

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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.

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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.

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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.

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

14 Johannes Schmitt | twig.js: The Templating Engine for the Client-Side | 06.06.2012 Use Case #1: Client-Side Application

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

17 Johannes Schmitt | twig.js: The Templating Engine for the Client-Side | 06.06.2012 Thanks! Twitter: @JohannesMS Github: schmittjoh http://jmsyst.com/