Jade & Javascript templating
17
& JavaScript Templating @ WeAreFractal http://jade-lang.com/
-
Upload
wearefractal -
Category
Technology
-
view
11.558 -
download
0
description
Transcript of Jade & Javascript templating
& JavaScript Templating
@WeAreFractal
http://jade-lang.com/
Wat?• Web Template Engine - Pull in content and combine with layout & structure
template to produce native web output• i.e.: pull content out of a DB, process along with template to produce pure HTML
output
Grails gsp:
<ul> <g:each in="${items}" var="item">
<li>${item}</li> </g:each>
</ul>------------------------------------------------------------------------------------------------------<ul>
<li>Grails</li> <li>Groovy</li>
</ul>
Why?
• Obvious one – support dynamic content • Provides if-then-else logic, iteration• Separation of Concern - separate presentation from content • Modularized – break out header, footer, etc
JS - Client or Server?
• JS has client-side templating most notably jquery and underscore
• With the advent of node you get support for (more traditional?) server-side templating
• We chose to go with client-side, to support our efforts using Spine.js, and since we are just using websockets
• Interesting argument from hij1nx of nodejitsu http://blog.nodejitsu.com/micro-templates-are-dead
Comparison
ERB
<div id="profile"> <div class="left column">
<div id="date"><%= print_date %>
</div> <div id="address">
<%= current_user.address %></div>
</div> <div class="right column">
<div id="email"><%= current_user.email %>
</div> <div id="bio">
<%= current_user.bio %></div>
</div> </div>
{{mustache}} in Ruby
<div class="row"> {{#projects}} <a href="{{url}}" class="block"> <h2> {{name}} </h2> <p> {{description}} </p> </a> {{/projects}} </div>
JQuery Template
{{if data.length}} <ul> {{each data}} <li>
<a href="#/category/${$value._id}"> ${$value.name}
</a></li>
{{/each}}</ul>
HAML
#profile .left.column
#date= print_date #address=
current_user.address .right.column #email= current_user.email #bio= current_user.bio
!!! 5 html(lang="en")
head title= pageTitle script(type='text/javascript') if (foo) { bar() }
body h1 Jade - node template engine #container - if (youAreUsingJade)
p You are amazing - else
p Get on it!
<!DOCTYPE html> <html lang="en"> <head>
<title>Jade</title> <script type="text/javascript">
if (foo) { bar() } </script>
</head> <body>
<h1>Jade - node template engine</h1> <div id="container">
<p>You are amazing</p> </div>
</body> </html>
• Jade:HTML::Coffeescript:Javascript• Heavily influenced by HAML• Made by https://github.com/visionmedia
(core committer on express)• Written in JavaScript for node• Can be used client side
A tag is just a word:
html
Hash for id’s:
div#mydiv
Classes:
div.myclass
Chain:
div#foo.class1.class2
Div sugar:
#foo
.bar
Tag text:
p some text!
vars:
- var foo = ‘bar’
iteration:
- for (var key in obj)
p= obj[key]Chain:
Comments:
// comment >> <!-– comment -->
//- comment >> will not output
Block Comments:
//
#content
Stylusbody { font: 12px Helvetica, Arial, sans-serif; }
a.button {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
---------------------------------------------------
body
font 12px Helvetica, Arial, sans-serif
a.button
-webkit-border-radius 5px
-moz-border-radius 5px
border-radius 5px
Running
Server Side:Cli:$ jade file.jade # compile jade template to file.html
In node:var fn = jade.compile('string of jade', options);
Client Side:• Jade runtime client-side (jade.js)• Compile to pure js functions :
function anonymous(locals, attrs, escape, rethrow) { var buf = []; with (locals || {}) { var interp; buf.push('\n<p>Hello ' + escape((interp = name) == null ? '' : interp) + '\n</p>'); } return buf.join(""); }
