ninja prototyping with templating frameworks

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

Post on 18-Oct-2014

1.427 views

Category:

Technology


0 download

DESCRIPTION

Slides from my talk @ MetaRefresh 2012 (http://metarefresh.in/2012/) on Front End Prototyping with Templates. Covers the general philosophy of Prototyping, Advantages of using a templating framework, how to choose the right framework and a couple of simple examples on how to use logic-less templating frameworks like mustache, handlebars, dust etc.

TRANSCRIPT

Page 1: Ninja Prototyping with Templating Frameworks

with Templating Engines

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

Page 2: Ninja Prototyping with Templating Frameworks

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

udaymsabout.me/udayms

Page 3: Ninja Prototyping with Templating Frameworks

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

Prototyping

Page 4: Ninja Prototyping with Templating Frameworks

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

Making ideas and designs REAL

Page 5: Ninja Prototyping with Templating Frameworks

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

Quick

Page 6: Ninja Prototyping with Templating Frameworks

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

Iterative

Page 7: Ninja Prototyping with Templating Frameworks

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

Pixel Perfect

Page 8: Ninja Prototyping with Templating Frameworks

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

Real Data

Page 9: Ninja Prototyping with Templating Frameworks

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

Complete Flows

Page 10: Ninja Prototyping with Templating Frameworks

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

Small & Portable

Page 11: Ninja Prototyping with Templating Frameworks

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

Almost ‘Production Quality’

Page 12: Ninja Prototyping with Templating Frameworks

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

How?

Page 13: Ninja Prototyping with Templating Frameworks

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

Templating Frameworks

Page 14: Ninja Prototyping with Templating Frameworks

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

WTF is that?

Page 15: Ninja Prototyping with Templating Frameworks

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

Frameworks that allow bring in science to FE Development

Page 16: Ninja Prototyping with Templating Frameworks

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

There are server side ones and client side ones.

Page 17: Ninja Prototyping with Templating Frameworks

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

Let’s talk client side Templates

Page 18: Ninja Prototyping with Templating Frameworks

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

Focus on Logic-less Templates

Page 19: Ninja Prototyping with Templating Frameworks

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

Why?

Page 20: Ninja Prototyping with Templating Frameworks

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

Page 21: Ninja Prototyping with Templating Frameworks

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

Page 22: Ninja Prototyping with Templating Frameworks

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

Page 23: Ninja Prototyping with Templating Frameworks

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

Page 24: Ninja Prototyping with Templating Frameworks

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

Page 25: Ninja Prototyping with Templating Frameworks

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

Let’s take a simple example

Page 26: Ninja Prototyping with Templating Frameworks

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

Template<div>

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

</div>

Page 27: Ninja Prototyping with Templating Frameworks

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

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

}

Page 28: Ninja Prototyping with Templating Frameworks

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

Compiled HTML

<div>

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

</div>

Page 29: Ninja Prototyping with Templating Frameworks

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

Rendered Output

Uday ShankarBangalore

Page 30: Ninja Prototyping with Templating Frameworks

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

Looks like too much work to print three words?

Page 31: Ninja Prototyping with Templating Frameworks

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

Template<h1> {{heading}} </h1>

<ul>

{{#tweeters}}

<li>{{name}} [@{{twitter_handle}}]</li>

{{/tweeters}}

</ul>

<h2> {{hashtag}} </h2>

Page 32: Ninja Prototyping with Templating Frameworks

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”

}

Page 33: Ninja Prototyping with Templating Frameworks

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

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>

Page 34: Ninja Prototyping with Templating Frameworks

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

Page 35: Ninja Prototyping with Templating Frameworks

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

Wait! There’s more… Lot more!

Page 36: Ninja Prototyping with Templating Frameworks

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

mustache.github.com

Page 37: Ninja Prototyping with Templating Frameworks

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

handlebarsjs.com

Page 38: Ninja Prototyping with Templating Frameworks

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

akdubya.github.com/dustjs

{dust}

Page 39: Ninja Prototyping with Templating Frameworks

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….)

Page 40: Ninja Prototyping with Templating Frameworks

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

Page 41: Ninja Prototyping with Templating Frameworks

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

Page 42: Ninja Prototyping with Templating Frameworks

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

Page 43: Ninja Prototyping with Templating Frameworks

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

Page 44: Ninja Prototyping with Templating Frameworks

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

Page 45: Ninja Prototyping with Templating Frameworks

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

Page 46: Ninja Prototyping with Templating Frameworks

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

Page 47: Ninja Prototyping with Templating Frameworks

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

Page 48: Ninja Prototyping with Templating Frameworks

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

Page 49: Ninja Prototyping with Templating Frameworks

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

Page 50: Ninja Prototyping with Templating Frameworks

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

Page 51: Ninja Prototyping with Templating Frameworks

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}

Page 52: Ninja Prototyping with Templating Frameworks

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

Page 53: Ninja Prototyping with Templating Frameworks

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

Questions?