SlideShare a Scribd company logo
1 of 74
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

Dependency Injection
Dependency InjectionDependency Injection
Dependency InjectionRifat Nabi
 
Object Calisthenics Applied to PHP
Object Calisthenics Applied to PHPObject Calisthenics Applied to PHP
Object Calisthenics Applied to PHPGuilherme Blanco
 
New in cakephp3
New in cakephp3New in cakephp3
New in cakephp3markstory
 
Propel sfugmd
Propel sfugmdPropel sfugmd
Propel sfugmdiKlaus
 
Future of HTTP in CakePHP
Future of HTTP in CakePHPFuture of HTTP in CakePHP
Future of HTTP in CakePHPmarkstory
 
The History of PHPersistence
The History of PHPersistenceThe History of PHPersistence
The History of PHPersistenceHugo 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 UnConRafael Dohms
 
Database Design Patterns
Database Design PatternsDatabase Design Patterns
Database Design PatternsHugo Hamon
 
Symfony2 Building on Alpha / Beta technology
Symfony2 Building on Alpha / Beta technologySymfony2 Building on Alpha / Beta technology
Symfony2 Building on Alpha / Beta technologyDaniel Knell
 
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: HackVic 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. - PHPKonfRafael Dohms
 
50 Laravel Tricks in 50 Minutes
50 Laravel Tricks in 50 Minutes50 Laravel Tricks in 50 Minutes
50 Laravel Tricks in 50 MinutesAzim 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-2011Alessandro 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 CoffeeScriptniklal
 
Cheap frontend tricks
Cheap frontend tricksCheap frontend tricks
Cheap frontend tricksambiescent
 
Unit testing with zend framework tek11
Unit testing with zend framework tek11Unit testing with zend framework tek11
Unit testing with zend framework tek11Michelangelo van Dam
 
"Coffee Script" in Brief
"Coffee Script" in Brief"Coffee Script" in Brief
"Coffee Script" in BriefNat Weerawan
 
Unit testing with zend framework PHPBenelux
Unit testing with zend framework PHPBeneluxUnit testing with zend framework PHPBenelux
Unit testing with zend framework PHPBeneluxMichelangelo 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 tomorrowPete McFarlane
 
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 JasmineRaimonds Simanovskis
 
Introdução ao Perl 6
Introdução ao Perl 6Introdução ao Perl 6
Introdução ao Perl 6garux
 
Real life-coffeescript
Real life-coffeescriptReal life-coffeescript
Real life-coffeescriptDavid 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 itRafael Dohms
 
SULTHAN's - PHP MySQL programs
SULTHAN's - PHP MySQL programsSULTHAN's - PHP MySQL programs
SULTHAN's - PHP MySQL programsSULTHAN BASHA
 
JavaScript for PHP developers
JavaScript for PHP developersJavaScript for PHP developers
JavaScript for PHP developersStoyan Stefanov
 
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

Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.francesco barbera
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdfJamie (Taka) Wang
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum ComputingGDSC PJATK
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 

Recently uploaded (20)

Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum Computing
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 

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