Javascript Template Engine - Getting Started

Javascript Template Engine

PrabhakaranUX Developer, Reportbee

Executive Member, RIA-RUI Society

Javascript Template Engine?

Javascript Template Engine?

Output = Template( input, data )

Input Data

Output

Why & When to use?

• Decouple HTML and JS• Code maintainability• For large projects

Why & When to use?

• When you think you are JS Ninja• When you need to work on your code again • Good value for your resume• Follow the trend

Client-side Templates

• Mustache.js• Handlebars.js• EJS• Underscore.js• JsRender• Hogan.js by Twitter• Dust.js by Linkedin• jQuery templates• etc, etc…

Server-side Templates

• Jade• Slim• etc, etc…

Templates Type

• Logical templates• Logicless templates

Logical Templates

Logicless Templates

Choosing Right Template

• Speed• Logic or Logicless• Pre-compilation• Active development• Community support• File size• Client or Server side

Mustache

Handlebars?

• Has advanced features and can satisfy almost all kinds of requirement

• Has most active community• Its a logicless templating engine• Lot of frameworks use Handlebars by default

Handlebars

• Expressions• Data or context• Compiler• Block helpers• Partials

Expressions

Data

Compile

Block Helper

Get hands dirty

( Check sample.html )

Karan.prabhu@gmail.c

om

@prabhakaran_v