Jade & Javascript templating

& JavaScript Templating http://jade-lang.com/ @WeAreFractal

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 nodejitsuhttp://blog.nodejitsu.com/micro-templates-are-dead

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: - varfoo = ‘bar’ iteration: ,[object Object],p= obj[key]Chain: Comments: // comment >> <!-– comment --> //- comment >> will not output Block Comments: // #content

Stylus body { 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: varfn =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) { varbuf = []; with (locals || {}) { varinterp; buf.push('<p>Hello ' + escape((interp = name) == null ? '' : interp) + '</p>'); } return buf.join(""); }

Jade & Javascript templating

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Jade & Javascript templating

Similaire à Jade & Javascript templating (20)

Plus de wearefractal

Plus de wearefractal (6)

Dernier

Dernier (20)

Jade & Javascript templating