SlideShare a Scribd company logo
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 !
Introduction à CoffeeScript pour ParisRB
Yes, it’s true, Rails 3.1 is going to
ship 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()
Introduction à CoffeeScript pour ParisRB
10
Raisons
->
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 syntaxique

unless   bigTroll
  ...

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

name = “bat”

“We can´t stop here, this is
#{name} country!”


                          2
return implicite

compute = (articles, couponPercent) ->
  total = articles.map (article) ->
    article.price

 total * ( 1 - couponPercent )


                                  3
return implicite

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

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


                              4
 lastClick = now
Au revoir var
var 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     // true




Comparaisons
==   ===




Comparaisons   5
==   ===




Comparaisons   5
==           ===
     Pas de conversion de type




Comparaisons
whitespaces.
if (url) {
  $.get(url, function(data) {
    return $("#result").html(data);
  });
} else {
  $("#error").show();
}
                                6
whitespaces.
if url
  $.get url, (data) ->
    $("#result").html data
else
  $("#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;
        }));
      });
    });
  });
});
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
objects
kids =
  brother:
    name: "Max"
    age: 11
  sister:
    name: "Ida"
    age: 9
                  7
objects
kids = {
   brother: {
      name: "Max",
      age: 11
   },
   sister: {
      name: "Ida",


};
   }
      age: 9
                     7
for x in [...]

eat food for food in ['toast',
'cheese', 'wine']




                                 8
list comprehensions
var 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
    Expression
9
Expression
countdown = (num for num in [10..1])

countdown = [10,9,8,7,6,5,4,3,2,1]
Expression
yearsOld = max: 10, ida: 9, tim: 11

ages = for child, age of yearsOld
  "#{child} is #{age}"


[“max is 10”,”ida is 9”,”tim is 11”]
Expression
grade = (student) ->
  if student.excellentWork
    "A+"
  else if student.okayStuff
    if student.triedHard then "B"
                           else "B-"
  else
    "C"
Expression
var 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 marche
bizarre dans les
   functions ?
ah bah oui, this ici
   c’est window
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
         Gemfile
Introduction à CoffeeScript pour ParisRB
Introduction à CoffeeScript pour ParisRB
Introduction à CoffeeScript pour ParisRB
C’est un toy language !


 C’est pas un langage
       sérieux !
It’s just
javascript !
Pyjamas, GWT, Objective-J...




        Code infâme
It’s just
javascript !
Et mes librairies ?



      JQuery, Backbone, Zepto ...
It’s just
javascript !
Comment on l’installe ?



        Rails 3.1

    gem ‘coffee-rails’
Introduction à CoffeeScript pour ParisRB
Introduction à CoffeeScript pour ParisRB
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 ?
Questions ?
• Screencasts sur Office, Twitter, AppStore,
  AdWords...
• Beta privée
• pour vos proches pas informaticiens !
• ya de l’invite si vous voulez :)
• contact@kareea.com

More Related Content

What's hot

Mocking Demystified
Mocking DemystifiedMocking Demystified
Mocking Demystified
Marcello Duarte
 
Dependency Injection
Dependency InjectionDependency Injection
Dependency Injection
Rifat Nabi
 
Object Calisthenics Applied to PHP
Object Calisthenics Applied to PHPObject Calisthenics Applied to PHP
Object Calisthenics Applied to PHP
Guilherme Blanco
 
New in cakephp3
New in cakephp3New in cakephp3
New in cakephp3
markstory
 
Propel sfugmd
Propel sfugmdPropel sfugmd
Propel sfugmd
iKlaus
 
Mysql & Php
Mysql & PhpMysql & Php
Mysql & Php
Inbal Geffen
 
Future of HTTP in CakePHP
Future of HTTP in CakePHPFuture of HTTP in CakePHP
Future of HTTP in CakePHP
markstory
 
Presentation1
Presentation1Presentation1
Presentation1
Rahadyan Gusti
 
The History of PHPersistence
The History of PHPersistenceThe History of PHPersistence
The History of PHPersistence
Hugo Hamon
 
PHPUnit でよりよくテストを書くために
PHPUnit でよりよくテストを書くためにPHPUnit でよりよくテストを書くために
PHPUnit でよりよくテストを書くために
Yuya Takeyama
 
Your code sucks, let's fix it - DPC UnCon
Your code sucks, let's fix it - DPC UnConYour code sucks, let's fix it - DPC UnCon
Your code sucks, let's fix it - DPC UnCon
Rafael Dohms
 
Database Design Patterns
Database Design PatternsDatabase Design Patterns
Database Design Patterns
Hugo Hamon
 
Symfony2 Building on Alpha / Beta technology
Symfony2 Building on Alpha / Beta technologySymfony2 Building on Alpha / Beta technology
Symfony2 Building on Alpha / Beta technology
Daniel Knell
 
Php 101: PDO
Php 101: PDOPhp 101: PDO
Php 101: PDO
Jeremy Kendall
 
Tips of CakePHP and MongoDB - Cakefest2011 ichikaway
Tips of CakePHP and MongoDB - Cakefest2011 ichikaway Tips of CakePHP and MongoDB - Cakefest2011 ichikaway
Tips of CakePHP and MongoDB - Cakefest2011 ichikaway
ichikaway
 
An Elephant of a Different Colour: Hack
An Elephant of a Different Colour: HackAn Elephant of a Different Colour: Hack
An Elephant of a Different Colour: Hack
Vic Metcalfe
 
“Writing code that lasts” … or writing code you won’t hate tomorrow. - PHPKonf
“Writing code that lasts” … or writing code you won’t hate tomorrow. - PHPKonf“Writing code that lasts” … or writing code you won’t hate tomorrow. - PHPKonf
“Writing code that lasts” … or writing code you won’t hate tomorrow. - PHPKonf
Rafael Dohms
 
50 Laravel Tricks in 50 Minutes
50 Laravel Tricks in 50 Minutes50 Laravel Tricks in 50 Minutes
50 Laravel Tricks in 50 Minutes
Azim Kurt
 
Be lazy, be ESI: HTTP caching and Symfony2 @ PHPDay 2011 05-13-2011
 Be lazy, be ESI: HTTP caching and Symfony2 @ PHPDay 2011 05-13-2011 Be lazy, be ESI: HTTP caching and Symfony2 @ PHPDay 2011 05-13-2011
Be lazy, be ESI: HTTP caching and Symfony2 @ PHPDay 2011 05-13-2011
Alessandro Nadalin
 
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
Luc Bors
 

What's hot (20)

Mocking Demystified
Mocking DemystifiedMocking Demystified
Mocking Demystified
 
Dependency Injection
Dependency InjectionDependency Injection
Dependency Injection
 
Object Calisthenics Applied to PHP
Object Calisthenics Applied to PHPObject Calisthenics Applied to PHP
Object Calisthenics Applied to PHP
 
New in cakephp3
New in cakephp3New in cakephp3
New in cakephp3
 
Propel sfugmd
Propel sfugmdPropel sfugmd
Propel sfugmd
 
Mysql & Php
Mysql & PhpMysql & Php
Mysql & Php
 
Future of HTTP in CakePHP
Future of HTTP in CakePHPFuture of HTTP in CakePHP
Future of HTTP in CakePHP
 
Presentation1
Presentation1Presentation1
Presentation1
 
The History of PHPersistence
The History of PHPersistenceThe History of PHPersistence
The History of PHPersistence
 
PHPUnit でよりよくテストを書くために
PHPUnit でよりよくテストを書くためにPHPUnit でよりよくテストを書くために
PHPUnit でよりよくテストを書くために
 
Your code sucks, let's fix it - DPC UnCon
Your code sucks, let's fix it - DPC UnConYour code sucks, let's fix it - DPC UnCon
Your code sucks, let's fix it - DPC UnCon
 
Database Design Patterns
Database Design PatternsDatabase Design Patterns
Database Design Patterns
 
Symfony2 Building on Alpha / Beta technology
Symfony2 Building on Alpha / Beta technologySymfony2 Building on Alpha / Beta technology
Symfony2 Building on Alpha / Beta technology
 
Php 101: PDO
Php 101: PDOPhp 101: PDO
Php 101: PDO
 
Tips of CakePHP and MongoDB - Cakefest2011 ichikaway
Tips of CakePHP and MongoDB - Cakefest2011 ichikaway Tips of CakePHP and MongoDB - Cakefest2011 ichikaway
Tips of CakePHP and MongoDB - Cakefest2011 ichikaway
 
An Elephant of a Different Colour: Hack
An Elephant of a Different Colour: HackAn Elephant of a Different Colour: Hack
An Elephant of a Different Colour: Hack
 
“Writing code that lasts” … or writing code you won’t hate tomorrow. - PHPKonf
“Writing code that lasts” … or writing code you won’t hate tomorrow. - PHPKonf“Writing code that lasts” … or writing code you won’t hate tomorrow. - PHPKonf
“Writing code that lasts” … or writing code you won’t hate tomorrow. - PHPKonf
 
50 Laravel Tricks in 50 Minutes
50 Laravel Tricks in 50 Minutes50 Laravel Tricks in 50 Minutes
50 Laravel Tricks in 50 Minutes
 
Be lazy, be ESI: HTTP caching and Symfony2 @ PHPDay 2011 05-13-2011
 Be lazy, be ESI: HTTP caching and Symfony2 @ PHPDay 2011 05-13-2011 Be lazy, be ESI: HTTP caching and Symfony2 @ PHPDay 2011 05-13-2011
Be lazy, be ESI: HTTP caching and Symfony2 @ PHPDay 2011 05-13-2011
 
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
 

Similar to Introduction à CoffeeScript pour ParisRB

Damn Fine CoffeeScript
Damn Fine CoffeeScriptDamn Fine CoffeeScript
Damn Fine CoffeeScript
niklal
 
Cheap frontend tricks
Cheap frontend tricksCheap frontend tricks
Cheap frontend tricks
ambiescent
 
Unit testing with zend framework tek11
Unit testing with zend framework tek11Unit testing with zend framework tek11
Unit testing with zend framework tek11
Michelangelo van Dam
 
CoffeeScript
CoffeeScriptCoffeeScript
CoffeeScript
Ryan McGeary
 
"Coffee Script" in Brief
"Coffee Script" in Brief"Coffee Script" in Brief
"Coffee Script" in Brief
Nat Weerawan
 
Bacbkone js
Bacbkone jsBacbkone js
Unit testing with zend framework PHPBenelux
Unit testing with zend framework PHPBeneluxUnit testing with zend framework PHPBenelux
Unit testing with zend framework PHPBenelux
Michelangelo van Dam
 
How to write code you won't hate tomorrow
How to write code you won't hate tomorrowHow to write code you won't hate tomorrow
How to write code you won't hate tomorrow
Pete McFarlane
 
Php functions
Php functionsPhp functions
Php functions
JIGAR MAKHIJA
 
Rails-like JavaScript Using CoffeeScript, Backbone.js and Jasmine
Rails-like JavaScript Using CoffeeScript, Backbone.js and JasmineRails-like JavaScript Using CoffeeScript, Backbone.js and Jasmine
Rails-like JavaScript Using CoffeeScript, Backbone.js and Jasmine
Raimonds Simanovskis
 
Zero to SOLID
Zero to SOLIDZero to SOLID
Zero to SOLID
Vic Metcalfe
 
Introdução ao Perl 6
Introdução ao Perl 6Introdução ao Perl 6
Introdução ao Perl 6
garux
 
Real life-coffeescript
Real life-coffeescriptReal life-coffeescript
Real life-coffeescript
David Furber
 
You code sucks, let's fix it
You code sucks, let's fix itYou code sucks, let's fix it
You code sucks, let's fix it
Rafael Dohms
 
SULTHAN's - PHP MySQL programs
SULTHAN's - PHP MySQL programsSULTHAN's - PHP MySQL programs
SULTHAN's - PHP MySQL programs
SULTHAN BASHA
 
JavaScript for PHP developers
JavaScript for PHP developersJavaScript for PHP developers
JavaScript for PHP developers
Stoyan Stefanov
 
Php
PhpPhp
Wakanday JS201 Best Practices
Wakanday JS201 Best PracticesWakanday JS201 Best Practices
Wakanday JS201 Best Practices
Juergen Fesslmeier
 
Elm: give it a try
Elm: give it a tryElm: give it a try
Elm: give it a try
Eugene Zharkov
 
Drupal Development (Part 2)
Drupal Development (Part 2)Drupal Development (Part 2)
Drupal Development (Part 2)
Jeff Eaton
 

Similar to Introduction à CoffeeScript pour ParisRB (20)

Damn Fine CoffeeScript
Damn Fine CoffeeScriptDamn Fine CoffeeScript
Damn Fine CoffeeScript
 
Cheap frontend tricks
Cheap frontend tricksCheap frontend tricks
Cheap frontend tricks
 
Unit testing with zend framework tek11
Unit testing with zend framework tek11Unit testing with zend framework tek11
Unit testing with zend framework tek11
 
CoffeeScript
CoffeeScriptCoffeeScript
CoffeeScript
 
"Coffee Script" in Brief
"Coffee Script" in Brief"Coffee Script" in Brief
"Coffee Script" in Brief
 
Bacbkone js
Bacbkone jsBacbkone js
Bacbkone js
 
Unit testing with zend framework PHPBenelux
Unit testing with zend framework PHPBeneluxUnit testing with zend framework PHPBenelux
Unit testing with zend framework PHPBenelux
 
How to write code you won't hate tomorrow
How to write code you won't hate tomorrowHow to write code you won't hate tomorrow
How to write code you won't hate tomorrow
 
Php functions
Php functionsPhp functions
Php functions
 
Rails-like JavaScript Using CoffeeScript, Backbone.js and Jasmine
Rails-like JavaScript Using CoffeeScript, Backbone.js and JasmineRails-like JavaScript Using CoffeeScript, Backbone.js and Jasmine
Rails-like JavaScript Using CoffeeScript, Backbone.js and Jasmine
 
Zero to SOLID
Zero to SOLIDZero to SOLID
Zero to SOLID
 
Introdução ao Perl 6
Introdução ao Perl 6Introdução ao Perl 6
Introdução ao Perl 6
 
Real life-coffeescript
Real life-coffeescriptReal life-coffeescript
Real life-coffeescript
 
You code sucks, let's fix it
You code sucks, let's fix itYou code sucks, let's fix it
You code sucks, let's fix it
 
SULTHAN's - PHP MySQL programs
SULTHAN's - PHP MySQL programsSULTHAN's - PHP MySQL programs
SULTHAN's - PHP MySQL programs
 
JavaScript for PHP developers
JavaScript for PHP developersJavaScript for PHP developers
JavaScript for PHP developers
 
Php
PhpPhp
Php
 
Wakanday JS201 Best Practices
Wakanday JS201 Best PracticesWakanday JS201 Best Practices
Wakanday JS201 Best Practices
 
Elm: give it a try
Elm: give it a tryElm: give it a try
Elm: give it a try
 
Drupal Development (Part 2)
Drupal Development (Part 2)Drupal Development (Part 2)
Drupal Development (Part 2)
 

Recently uploaded

“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
Edge AI and Vision Alliance
 
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Muhammad Ali
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
alexjohnson7307
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
Safe Software
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Networks
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
HackersList
 
The Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF GuideThe Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF Guide
Shiv Technolabs
 
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes..."Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
Anant Gupta
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
Kief Morris
 
Google I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged SlidesGoogle I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged Slides
Google Developer Group - Harare
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
Steven Carlson
 
CiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.pptCiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.ppt
moinahousna
 
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSECHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
kumarjarun2010
 
Pigging Unit Lubricant Oil Blending Plant
Pigging Unit Lubricant Oil Blending PlantPigging Unit Lubricant Oil Blending Plant
Pigging Unit Lubricant Oil Blending Plant
LINUS PROJECTS (INDIA)
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
Jimmy Lai
 
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Kunal Gupta
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
sunilverma7884
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
BrainSell Technologies
 
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
Priyanka Aash
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 

Recently uploaded (20)

“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
 
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
 
The Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF GuideThe Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF Guide
 
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes..."Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
 
Google I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged SlidesGoogle I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged Slides
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
 
CiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.pptCiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.ppt
 
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSECHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
 
Pigging Unit Lubricant Oil Blending Plant
Pigging Unit Lubricant Oil Blending PlantPigging Unit Lubricant Oil Blending Plant
Pigging Unit Lubricant Oil Blending Plant
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
 
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
 
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 

Introduction à CoffeeScript pour ParisRB

  • 1. COFFEESCRIPT Bye, Javascript.
  • 2. Jean-Hadrien Chabran @jhchabran CTO / Kareea Tutorys.com
  • 3. 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>
  • 4. HAML ! #profile .left.column #date= print_date #address= current_user.address .right.column #email= current_user.email #bio= current_user.bio
  • 5. CSS ... .content-navigation { border-color: #3bbfce; color: #2b9eab; } .border { padding: 8px; margin: 8px; border-color: #3bbfce; }
  • 6. SCSS ! $blue: #3bbfce; $margin: 16px; .content-navigation { border-color: $blue; color: darken($blue, 9%); } .border { padding: $margin / 2; margin: $margin / 2; border-color: $blue; }
  • 7. Légère surcouche Adoption ! Facile à apprendre
  • 10. Mais c’est un apéro Ruby !
  • 12. Yes, it’s true, Rails 3.1 is going to ship with CoffeeScript and SCSS in the box for use with the new asset pipeline. It’s bad ass.
  • 13. C’est juste du Javascript ! $(function() { $("body").html("Une merguez ?"); });
  • 14. C’est juste du Javascript ! $ ->   $("body").html "Une merguez ?"
  • 15. C’est juste du Javascript ! $('.articles').each(function(article) var items; items = $(article).children(); return $(items).show(); });
  • 16. C’est juste du Javascript ! $('.articles').each (article)-> items = $(article).children() $(items).show()
  • 19. -> items.each (item)-> item.click (event)-> item.hide() 1
  • 20. -> items.each(function(item) { return item.click(function(event) { return item.hide(); }); }); 1
  • 21. sucre syntaxique @life = 42 this.life = 42; 2
  • 22. sucre syntaxique unless bigTroll ... if(!bigTroll) { ... } 2
  • 23. sucre syntaxique name = “bat” “We can´t stop here, this is #{name} country!” 2
  • 24. return implicite compute = (articles, couponPercent) -> total = articles.map (article) -> article.price total * ( 1 - couponPercent ) 3
  • 25. return implicite var compute; compute = function(articles, couponPercent) var total; total = articles.map(function(article) { return article.price; }); return total * (1 - couponPercent); }; 3
  • 26. Au revoir var lastClick = 0 $(‘a’).click -> now = new Date().getTime() if now - lastClick > 100 $(‘#message’).show() 4 lastClick = now
  • 27. Au revoir var var lastClick = 0 $(‘a’).click -> var now = new Date().getTime() if now - lastClick > 100 $(‘#message’).show() 4 lastClick = now
  • 28. '' == '0'           // false 0 == ''             // true 0 == '0'            // true false == 'false'    // false false == '0'        // true false == undefined  // false false == null       // false null == undefined   // true ' trn ' == 0     // true Comparaisons
  • 29. == === Comparaisons 5
  • 30. == === Comparaisons 5
  • 31. == === Pas de conversion de type Comparaisons
  • 32. whitespaces. if (url) { $.get(url, function(data) { return $("#result").html(data); }); } else { $("#error").show(); } 6
  • 33. whitespaces. if url   $.get url, (data) ->     $("#result").html data else   $("#error").show() 6
  • 34. 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 }); });
  • 35. 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; })); }); }); }); });
  • 36. 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; })); }); }); }); });
  • 37. 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
  • 38. objects kids = brother: name: "Max" age: 11 sister: name: "Ida" age: 9 7
  • 39. objects kids = { brother: { name: "Max", age: 11 }, sister: { name: "Ida", }; } age: 9 7
  • 40. for x in [...] eat food for food in ['toast', 'cheese', 'wine'] 8
  • 41. list comprehensions var food, _i, _len, _ref; _ref = ['toast', 'cheese', 'wine']; for (_i = 0, _len = _ref.length; _i < _len; _i food = _ref[_i]; eat(food); } 8
  • 42. Tout est une Expression 9
  • 43. Expression countdown = (num for num in [10..1]) countdown = [10,9,8,7,6,5,4,3,2,1]
  • 44. Expression yearsOld = max: 10, ida: 9, tim: 11 ages = for child, age of yearsOld "#{child} is #{age}" [“max is 10”,”ida is 9”,”tim is 11”]
  • 45. Expression grade = (student) -> if student.excellentWork "A+" else if student.okayStuff if student.triedHard then "B" else "B-" else "C"
  • 46. Expression var grade; grade = function(student) { if (student.excellentWork) { return "A+"; } else if (student.okayStuff) { if (student.triedHard) { return "B"; } else { return "B-"; } } else { return "C"; }
  • 47. 10 WTF ? @css = color:red $.get this.url, (data)-> @el.css @css
  • 48. 10 WTF ? this.css = { color: red }; $.get(this.url, function(data) { return this.el.css(this.css); });
  • 49. Mais pourquoi this ça marche bizarre dans les functions ?
  • 50. ah bah oui, this ici c’est window
  • 51. ah bah oui, this ici c’est window
  • 52. ah bah oui, this ici c’est window Logique hein ?
  • 53. -
  • 54. this </3 ... bind ! this.css = { color: red }; $.get(this.url, (function(data) { return this.el.css(this.css); }).bind(this));
  • 55. => @css = color:red $.get this.url, (data)=> @el.css @css
  • 57. Inclus par défaut dans le Gemfile
  • 61. C’est un toy language ! C’est pas un langage sérieux !
  • 65. Et mes librairies ? JQuery, Backbone, Zepto ...
  • 67. Comment on l’installe ? Rails 3.1 gem ‘coffee-rails’
  • 70. et bien d’autres joyeusetés • Class •alert(lesPompiers) if yaLeFeu() • destructuring assignments • people[1..4] • les autres opérateurs • ?, in, of
  • 71. par contre ... • () optionnelles sur les appels de fonctions • @compute 1,2 -> this.compute(1,2) • @compute -> this.compute
  • 74. • Screencasts sur Office, Twitter, AppStore, AdWords... • Beta privée • pour vos proches pas informaticiens ! • ya de l’invite si vous voulez :) • contact@kareea.com

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. \n
  53. \n
  54. \n
  55. \n
  56. \n
  57. \n
  58. \n
  59. \n
  60. \n
  61. \n
  62. \n
  63. \n
  64. \n
  65. \n
  66. \n
  67. \n
  68. \n