Jade & Javascript templating
Upcoming SlideShare
Loading in...5
×
 

Jade & Javascript templating

on

  • 11,281 views

 

Statistics

Views

Total Views
11,281
Views on SlideShare
11,281
Embed Views
0

Actions

Likes
6
Downloads
41
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Jade & Javascript templating Jade & Javascript templating Presentation Transcript

  • & 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
    View slide
  • 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
    View slide
  • 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:
    - varfoo = ‘bar’
    iteration:
    • for (var key in obj)
    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('n<p>Hello ' + escape((interp = name) == null ? '' : interp) + 'n</p>'); } return buf.join(""); }