Jade & Javascript templating

11,889 views
11,578 views

Published on

Published in: Technology, Business
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
11,889
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
54
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Jade & Javascript templating

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

×