Tweet
Tweet

Slide 1

Slide 1 text

with Templating Engines April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 1

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 5 Quick

Slide 6

Slide 6 text

April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 6 Iterative

Slide 7

Slide 7 text

April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 7 Pixel Perfect

Slide 8

Slide 8 text

April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 8 Real Data

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 12 How?

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 14 WTF is that?

Slide 15

Slide 15 text

April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 15 Frameworks that allow bring in science to FE Development

Slide 16

Slide 16 text

April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 16 There are server side ones and client side ones.

Slide 17

Slide 17 text

April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 17 Let’s talk client side Templates

Slide 18

Slide 18 text

April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 18 Focus on Logic-less Templates

Slide 19

Slide 19 text

April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 19 Why?

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 26 Template
{{first_name}} {{second_name}}
{{city}}

Slide 27

Slide 27 text

April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 27 JSON { “first_name” : “Uday”, “second_name” : “Shankar”, “city” : “Bangalore” }

Slide 28

Slide 28 text

April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 28 Compiled HTML
Uday Shankar
Bangalore

Slide 29

Slide 29 text

April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 29 Rendered Output Uday Shankar Bangalore

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 31 Template

{{heading}}

    {{#tweeters}}
  • {{name}} [@{{twitter_handle}}]
    • {{/tweeters}}

{{hashtag}}

Slide 32

Slide 32 text

April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 32 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” }

Slide 33

Slide 33 text

April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 33 Compiled HTML

I follow them…

  • Harish [@hsivaram]
  • Amit [@amit_pande}}]
  • Snook [@snookca]
  • Mrinal [@mrinal]
  • Sudar [@sudarmuthu]

#metarefresh

Slide 34

Slide 34 text

April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 34 Rendered Output I follow them… • Harish [@hsivaram] • Amit [@amit_pande}}] • Snook [@snookca] • Mrinal [@mrinal] • Sudar [@sudarmuthu] #metarefresh

Slide 35

Slide 35 text

April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 35 Wait! There’s more… Lot more!

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 39 Many out there! underscore.js, Jade, haml-js, jQote2, doT, Stencil, Parrot, Eco, EJS, jQuery templates, node- asyncEJS, 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….)

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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