meteor.js with coffeescript, jade and stylus [EN]

Meteor meetup Brasov, Romania

Transcript

1. GET RID OF {}! meteor.js with coffeescript, jade and stylus leo.nistor at gmail.com Meteor Meetup Brașov, România Noiembrie 2014
2. WHICH IS MORE READABLE? <div class="navbar"> <a class="navbar-brand" href="#">Title</a> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Inbox</a></li> <li><a href="#">Export</a></li> <p class="navbar-text pull-right">Signed in as <a href="#" class=“navbar-link">User </a></p> </ul> </div> .navbar a.navbar-brand(href='#') Title ul.nav.navbar-nav li.active a(href='#') Home li a(href='#') Inbox li a(href='#') Export p.navbar-text.pull-right | Signed in as a.navbar-link(href='#') User HTML
 JADE
3. WHICH IS MORE READABLE? Template.comment_list.created = function(){ postObject = this.data; }; Template.comment_list.helpers({ comment_item: function () { return getTemplate('comment_item'); }, child_comments: function(){ var post = this; var comments = Comments.find({postId: post._id, parentCommentId: null}, {sort: {score: -1, postedAt: -1}}); return comments; } }); Template.comment_list.created = -> postObject = @data return Template.comment_list.helpers comment_item: -> getTemplate "comment_item" child_comments: -> post = @ comments = Comments.find( postId: post._id parentCommentId: null , sort: score: -1 postedAt: -1 ) comments JAVASCRIPT
 COFFEESCRIPT
4. WHICH IS MORE READABLE? body { font: 12px Helvetica, Arial,
 sans-serif; } a.button { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } border-radius() -webkit-border-radius arguments -moz-border-radius arguments border-radius arguments body font 12px Helvetica, Arial,
 sans-serif a.button border-radius 5px CSS
 STYLUS
5. meteor add coffeescript coffeescript.org coffeescriptcookbook.com TLDR: leveluptuts.com/tutorials/
 coffee-script-tutorials
 namespacing: define with 
 @myVar or share.myVar chaining syntax since 1.7 editor: show javascript js2coffee.org will not teach you javascript, underscore and node!
6. meteor add mquandalle:jade jade-lang.com github.com/mquandalle/meteor-jade TLDR: gentlenode.com/journal/meteor-16-how-to-use-jade- in-your-application/35
7. meteor add stylus learnboost.github.io/stylus/ TLDR: blog.teamtreehouse.com/getting-started-stylus bootstrap 3: github.com/Acquisio/bootstrap-stylus foundation 5: npmjs.org/package/foundation-stylus TODO: gumby, semantic-ui
8. DEMO meteor tutorial: meteor.com/try github.com/leonistor/meteor-tutorial
9. coffeescript+jade+stylus if you’ll get addicted don’t call your doctor, use roots.cx