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

Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
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
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
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 Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
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
 
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
 
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
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 

Recently uploaded (20)

Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
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 Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
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
 
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
 
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
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 

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