Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Jade & Javascript templating
Similaire à Jade & Javascript templating (20)
Plus de wearefractal
Dernier
Dernier (20)
Jade & Javascript templating
- 1. & JavaScript Templating http://jade-lang.com/ @WeAreFractal
- 2. 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>
- 3. 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
- 4. 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
- 5. Comparison
- 6. 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>
- 7. {{mustache}} in Ruby <div class="row"> {{#projects}} <a href="{{url}}" class="block"> <h2> {{name}} </h2> <p> {{description}} </p> </a> {{/projects}} </div>
- 8. JQuery Template {{if data.length}} <ul> {{each data}} <li> <a href="#/category/${$value._id}"> ${$value.name} </a> </li> {{/each}} </ul>
- 9. HAML #profile .left.column #date= print_date #address= current_user.address.right.column #email= current_user.email #bio= current_user.bio
- 11. !!! 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!
- 12. <!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>
- 13. 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
- 14. 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
- 16. 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
- 17. 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(""); }