with Templating Engines

April 23, 2012

twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms

1

udayms
about.me/udayms
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 2

Prototyping
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 3

Making ideas and designs REAL
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 4

Quick

April 23, 2012

twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms

5

Iterative

April 23, 2012

twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms

6

Pixel Perfect

April 23, 2012

twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms

7

Real Data

April 23, 2012

twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms

8

Complete Flows
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 9

Small & Portable
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 10

Almost ‘Production Quality’
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 11

How?

April 23, 2012

twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms

12

Templating Frameworks
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 13

WTF is that?

April 23, 2012

twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms

14

Frameworks that allow bring in science to FE Development

April 23, 2012

twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms

15

There are server side ones and client side ones.

April 23, 2012

twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms

16

Let’s talk client side Templates

April 23, 2012

twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms

17

Focus on Logic-less Templates

April 23, 2012

twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms

18

Why?

April 23, 2012

twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms

19

April 23, 2012

twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms

20

April 23, 2012

twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms

21

April 23, 2012

twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms

22

April 23, 2012

twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms

23

April 23, 2012

twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms

24

Let’s take a simple example
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 25

Template

<div> <span> {{first_name}} </span> <span> {{second_name}} </span> <br/> <span> {{city}} </span> </div>

April 23, 2012

twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms

26

JSON

{ “first_name” : “Uday”, “second_name” : “Shankar”, “city” : “Bangalore” }

April 23, 2012

twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms

27

Compiled HTML

<div> <span> Uday </span> <span> Shankar </span> <br/> <span> Bangalore </span> </div>

April 23, 2012

twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms

28

Rendered Output

Uday Shankar Bangalore

April 23, 2012

twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms

29

Looks like too much work to print three words?
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 30

<h1> {{heading}} </h1> <ul>

Template

{{#tweeters}} <li>{{name}} [@{{twitter_handle}}]</li> {{/tweeters}} </ul> <h2> {{hashtag}} </h2>

April 23, 2012

twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms

31

{

JSON
}

“heading” : “I follow them…”, “tweeters” : [ {“name”: “Harish”,“twit_handle”: “hsivaram”}, {“name”: “Amit”,“twit_handle”: “amit_pande”}, {“name”: “Snook”,“twit_handle”: “snookca”}, {“name”: “Mrinal”,“twit_handle”: “mrinal”}, {“name”: “Sudar”,“twit_handle”: “sudarmuthu”}, ], “hashtag”: “#metarefresh”

April 23, 2012

twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms

32

Compiled HTML

<h1> I follow them… </h1> <ul> <li>Harish [@hsivaram]</li> <li>Amit [@amit_pande}}]</li> <li>Snook [@snookca]</li> <li>Mrinal [@mrinal]</li> <li>Sudar [@sudarmuthu]</li> </ul> <h2> #metarefresh </h2>

April 23, 2012

twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms

33

Rendered Output

I follow them…
• • • • • Harish [@hsivaram] Amit [@amit_pande}}] Snook [@snookca] Mrinal [@mrinal] Sudar [@sudarmuthu]

#metarefresh

April 23, 2012

twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms

34

Wait! There’s more… Lot more!
April 23, 2012

twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms

35

mustache.github.com
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 36

handlebarsjs.com
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 37

{dust}
akdubya.github.com/dustjs
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 38

underscore.js, Jade, haml-js, jQote2, doT, Stencil, Parrot, Eco, EJS, jQuery templates, nodeasyncEJS, mustache, dust.js, handlebars, Google Closure Templates, Nun, Mu, kite., jazz, jshtml, jm, jsdom, Liquor, Coffeekup, CoffeeMug, bliss, DryKup, plates, shift, whiskers, node-dom, stencil, node-jst, tpl, TwigJs, Templ8, PURE, JinJs (and more….)

Many out there!
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 39

Source: http://engineering.linkedin.com/frontend/client‐side‐templating‐throwdown‐mustache‐handlebars‐dustjs‐and‐more April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 40

Source: http://engineering.linkedin.com/frontend/client‐side‐templating‐throwdown‐mustache‐handlebars‐dustjs‐and‐more April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 41

Source: http://engineering.linkedin.com/frontend/client‐side‐templating‐throwdown‐mustache‐handlebars‐dustjs‐and‐more April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 42

Source: http://engineering.linkedin.com/frontend/client‐side‐templating‐throwdown‐mustache‐handlebars‐dustjs‐and‐more April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 43

Source: http://engineering.linkedin.com/frontend/client‐side‐templating‐throwdown‐mustache‐handlebars‐dustjs‐and‐more April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 44

Source: http://engineering.linkedin.com/frontend/client‐side‐templating‐throwdown‐mustache‐handlebars‐dustjs‐and‐more April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 45

Source: http://engineering.linkedin.com/frontend/client‐side‐templating‐throwdown‐mustache‐handlebars‐dustjs‐and‐more April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 46

Source: http://engineering.linkedin.com/frontend/client‐side‐templating‐throwdown‐mustache‐handlebars‐dustjs‐and‐more April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 47

Source: http://engineering.linkedin.com/frontend/client‐side‐templating‐throwdown‐mustache‐handlebars‐dustjs‐and‐more April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 48

Source: http://engineering.linkedin.com/frontend/client‐side‐templating‐throwdown‐mustache‐handlebars‐dustjs‐and‐more April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 49

Source: http://engineering.linkedin.com/frontend/client‐side‐templating‐throwdown‐mustache‐handlebars‐dustjs‐and‐more April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 50

{dust}
http://engineering.linkedin.com/frontend/client-side-templating-throwdown-mustache-handlebars-dustjs-and-more
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 51

April 23, 2012

twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms

52

Questions?
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 53

Sign up to vote on this title
UsefulNot useful