Introduction à CoffeeScript pour ParisRB

COFFEESCRIPT Bye, Javascript.

Jean-Hadrien Chabran @jhchabran CTO / Kareea Tutorys.com

HTML ...<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>

HAML !#profile .left.column #date= print_date #address=current_user.address .right.column #email=current_user.email #bio= current_user.bio

CSS ....content-navigation { border-color: #3bbfce; color: #2b9eab;}.border { padding: 8px; margin: 8px; border-color: #3bbfce;}

SCSS !$blue: #3bbfce;$margin: 16px;.content-navigation { border-color: $blue; color: darken($blue, 9%);}.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}

Légère surcouche Adoption !Facile à apprendre

Javascript ?

CoffeeScript

Mais c’est un apéro Ruby !

Yes, it’s true, Rails 3.1 is going toship with CoffeeScript and SCSS in the box for use with the new asset pipeline. It’s bad ass.

C’est juste du Javascript ! $(function() { $("body").html("Une merguez ?"); });

C’est juste du Javascript ! $ -> $("body").html "Une merguez ?"

C’est juste du Javascript ! $(.articles).each(function(article) var items; items = $(article).children(); return $(items).show(); });

C’est juste du Javascript ! $(.articles).each (article)-> items = $(article).children() $(items).show()

10Raisons

->items.each (item)-> item.click (event)-> item.hide() 1

->items.each(function(item) { return item.click(function(event) { return item.hide(); });}); 1

sucre syntaxique @life = 42 this.life = 42; 2

sucre syntaxiqueunless bigTroll ...if(!bigTroll) {...} 2

sucre syntaxiquename = “bat”“We can´t stop here, this is#{name} country!” 2

return implicitecompute = (articles, couponPercent) -> total = articles.map (article) -> article.price total * ( 1 - couponPercent ) 3

return implicitevar compute;compute = function(articles, couponPercent) var total; total = articles.map(function(article) { return article.price; }); return total * (1 - couponPercent);}; 3

Au revoir varlastClick = 0$(‘a’).click -> now = new Date().getTime() if now - lastClick > 100 $(‘#message’).show() 4 lastClick = now

Au revoir varvar lastClick = 0$(‘a’).click -> var now = new Date().getTime() if now - lastClick > 100 $(‘#message’).show() 4 lastClick = now

== 0 // false 0 == // true 0 == 0 // true false == false // false false == 0 // true false == undefined // false false == null // false null == undefined // true trn == 0 // trueComparaisons

== ===Comparaisons 5

== === Pas de conversion de typeComparaisons

whitespaces.if (url) { $.get(url, function(data) { return $("#result").html(data); });} else { $("#error").show();} 6

whitespaces.if url $.get url, (data) -> $("#result").html dataelse $("#error").show() 6

server.listen(function(request, response) { database.open(function(connection) { connection.query("SELECT * FROM posts",function(cursor) { cursor.fetchAll(function(posts) {response.write(posts.forEach(function(post) { return post.title; })); }); }); 6 });});

server.listen(function(request, response) { database.open(function(connection) { connection.query("SELECT * FROM posts",function(cursor) { cursor.fetchAll(function(posts) {response.write(posts.forEach(function(post) { return post.title; })); }); }); });});

luxe, calme et voluptéserver.listen (request, response) -> database.open (connection) -> connection.query "SELECT * FROM posts", (cu cursor.fetchAll (posts) -> response.write posts.forEach (post) -> post.title

objectskids = brother: name: "Max" age: 11 sister: name: "Ida" age: 9 7

objectskids = { brother: { name: "Max", age: 11 }, sister: { name: "Ida",}; } age: 9 7

for x in [...]eat food for food in [toast,cheese, wine] 8

list comprehensionsvar food, _i, _len, _ref;_ref = [toast, cheese, wine];for (_i = 0, _len = _ref.length; _i < _len; _i food = _ref[_i]; eat(food);} 8

Tout est une Expression9

Expressioncountdown = (num for num in [10..1])countdown = [10,9,8,7,6,5,4,3,2,1]

ExpressionyearsOld = max: 10, ida: 9, tim: 11ages = for child, age of yearsOld "#{child} is #{age}"[“max is 10”,”ida is 9”,”tim is 11”]

Expressiongrade = (student) -> if student.excellentWork "A+" else if student.okayStuff if student.triedHard then "B" else "B-" else "C"

Expressionvar grade;grade = function(student) { if (student.excellentWork) { return "A+"; } else if (student.okayStuff) { if (student.triedHard) { return "B"; } else { return "B-"; } } else { return "C"; }

10 WTF ?@css = color:red$.get this.url, (data)-> @el.css @css

10 WTF ?this.css = { color: red};$.get(this.url, function(data) { return this.el.css(this.css);});

Mais pourquoi this ça marchebizarre dans les functions ?

ah bah oui, this ici c’est window

ah bah oui, this ici c’est window Logique hein ?

this </3 ... bind !this.css = { color: red};$.get(this.url, (function(data){ return this.el.css(this.css);}).bind(this));

=>@css = color:red$.get this.url, (data)=> @el.css @css

Github Drama.

Inclus par défaut dans le Gemﬁle

C’est un toy language ! C’est pas un langage sérieux !

It’s justjavascript !

Pyjamas, GWT, Objective-J... Code infâme

Et mes librairies ? JQuery, Backbone, Zepto ...

Comment on l’installe ? Rails 3.1 gem ‘coffee-rails’

et bien d’autres joyeusetés• Class•alert(lesPompiers) if yaLeFeu()• destructuring assignments• people[1..4]• les autres opérateurs • ?, in, of

par contre ...• () optionnelles sur les appels de fonctions • @compute 1,2 -> this.compute(1,2) • @compute -> this.compute

Questions ?

• Screencasts sur Ofﬁce, Twitter, AppStore, AdWords...• Beta privée• pour vos proches pas informaticiens !• ya de l’invite si vous voulez :)• contact@kareea.com

http://rubylive.fr	301
http://paper.li	22
http://a0.twimg.com	3
http://www.hanrss.com	1

Introduction à CoffeeScript pour ParisRB

by jhchabran on Nov 09, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 327

Statistics

Introduction à CoffeeScript pour ParisRB — Presentation Transcript