scratch/output/Scratch/fr/blog/2011-01-03-Why-I-sadly-won-t-use-coffeescript/index.html

310 lines
16 KiB
HTML
Raw Normal View History

2011-04-20 12:29:01 +00:00
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
2011-10-26 08:49:00 +00:00
<meta name="keywords" content="Coffeescript">
<link rel="shortcut icon" type="image/x-icon" href="/Scratch/img/favicon.ico" />
<link rel="stylesheet" type="text/css" href="/Scratch/assets/css/main.css" />
<link rel="stylesheet" type="text/css" href="/Scratch/css/twilight.css" />
<link rel="stylesheet" type="text/css" href="/Scratch/css/idc.css" />
2011-04-20 12:29:01 +00:00
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://feeds.feedburner.com/yannespositocomfr"/>
<link rel="alternate" lang="fr" xml:lang="fr" title="Pourquoi je n'utiliserai pas CoffeeScript (malheureusement)" type="text/html" hreflang="fr" href="/Scratch/fr/blog/2011-01-03-Why-I-sadly-won-t-use-coffeescript/" />
<link rel="alternate" lang="en" xml:lang="en" title="Why I won't use CoffeeScript (sadly)" type="text/html" hreflang="en" href="/Scratch/en/blog/2011-01-03-Why-I-sadly-won-t-use-coffeescript/" />
<script type="text/javascript" src="/Scratch/js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="/Scratch/js/jquery.cookie.js"></script>
<script type="text/javascript" src="/Scratch/js/index.js"></script>
2011-04-20 12:29:01 +00:00
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<title>Pourquoi je n'utiliserai pas CoffeeScript (malheureusement)</title>
</head>
2011-10-18 22:30:00 +00:00
<body lang="fr" class="article">
2011-04-20 12:29:01 +00:00
<script type="text/javascript">// <![CDATA[
document.write('<div id="blackpage"><img src="/Scratch/img/loading.gif" alt="Chargement en cours..."/></div>');
2011-04-20 12:29:01 +00:00
// ]]>
</script>
<div id="content">
<div id="choix">
<div class="return"><a href="#entete">&darr; Menu &darr;</a></div>
<div id="choixlang">
<a href="/Scratch/en/blog/2011-01-03-Why-I-sadly-won-t-use-coffeescript/" onclick="setLanguage('en')">in English</a>
2011-04-20 12:29:01 +00:00
</div>
2011-09-28 16:05:55 +00:00
<div class="flush"></div>
2011-04-20 12:29:01 +00:00
</div>
<div id="titre">
<h1>
Pourquoi je n'utiliserai pas CoffeeScript (malheureusement)
</h1>
</div>
<div class="flush"></div>
<div class="flush"></div>
<div id="afterheader">
<div class="corps">
<p><img alt="Title image" src="/Scratch/img/blog/2011-01-03-Why-I-sadly-won-t-use-coffeescript/main.png" /></p>
2011-04-20 12:29:01 +00:00
2011-05-31 11:41:27 +00:00
<div class="encadre">
<p><em>Mise à jour&nbsp;:</em> Je pense que je vais finallement changer davis.
2011-05-31 11:41:27 +00:00
Pourquoi&nbsp;?
Tout dabord, je viens de découvrir un convertisseur javascript vers coffeescript, ensuite Denis Knauf ma laissé un commentaire et ma appris lexistence dune fonction <code>CoffeeScript.eval</code>. De plus, il faut voir CoffeeScript comme javascript avec une syntaxe similaire à Ruby et pas comme un langage similaire à Ruby.</p>
2011-05-31 11:41:27 +00:00
</div>
2011-04-20 12:29:01 +00:00
<div class="intro">
<p><span class="sc"><abbr title="Trop long à lire">tlàl</abbr>&nbsp;: </span> Quest-ce qui nallait pas avec Coffeescript? La meta-programmation, il faut le “vendre” aux autres, une nouvelle étape de compilation intermédiaire sans fournir les avantages de Cappuccino, la sensation que cest un peu instable.</p>
2011-04-20 12:29:01 +00:00
</div>
<p>Le commentaire le mieux classé de <a href="http://news.ycombinator.com/item?id=2053956">la question suivante</a> posée sur HackerNews mentionnait <a href="http://coffeescript.org">CoffeeScript</a>.
Récemment jai beaucoup programmé en javascript.
2011-04-20 12:29:01 +00:00
Après avoir essayé
<a href="http://sproutcore.com">Sroutcore</a>,
<a href="http://cappuccino.org">Cappuccino</a>,
<a href="documentcloud.github.com/backbone/">backbone.js</a> <em class="pala">&amp;</em>
2011-04-20 12:29:01 +00:00
<a href="javascriptmvc.com">javascriptMVC</a>,
Je me suis décidé à créer mon propre framework MVC minimal pour client javascript.<sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup></p>
<p>Je me suis battu avec lhorrible syntaxe de javascript. Cétait comme revenir des années dans le passé&nbsp;:</p>
2011-04-20 12:29:01 +00:00
<ul>
<li>une syntaxe à la Java très verbeuse&nbsp;;</li>
<li>une syntaxe follement verbeuse et étrange pour la programmation orientée objet&nbsp;;</li>
<li>pas de manière naturelle de se référer à linstance dune classe&nbsp;;</li>
<li>etc… </li>
2011-04-20 12:29:01 +00:00
</ul>
<p>Jétais tellement ennuyé par tous ces point quil était arrivé un moment où je commençais à vouloir faire mon propre CoffeeScript.</p>
2011-04-20 12:29:01 +00:00
<p>Jai fini une première version de mon framework MVC en javascript et jai appris lexistence de CoffeeScript. Merci à git, jai immédiatement créé une nouvelle branche dans le seul but dessayer CoffeeScript.</p>
2011-04-20 12:29:01 +00:00
<p>Voici mon expérience&nbsp;:</p>
<ol>
<li>Jai dû installer <code>node.js</code> et utiliser <code>npm</code> simplement pour utiliser CoffeeScript. Ce nétait pas très difficile, mais pas aussi facile que ce que jaurai aimé.</li>
2011-04-20 12:29:01 +00:00
<li>Les fichier javascript existants ne sont pas compatible avec coffee.</li>
<li>Il ny a pas script pour aider à transformer les anciens fichiers javascripts en fichier coffee. Du coups jai dû faire ça manuellement.
2011-04-20 12:29:01 +00:00
Merci à <a href="http://vim.org">vim</a>, il ne fut pas très difficile de transformer 90% des fichiers avec des expressions régulières.
Loption <code>--watch</code> de coffee était très utile pour debugger cette transformation.
Cependant, il ma fallu écrire mon propre script pour que tous mes fichiers soient <em>watchés</em> dans tous les sous-répertoires.</li>
<li>Quelque chose à laquelle je navais pas pensé. Jai fait un peu de meta-programmation en javascript en utilisant <code>eval</code>. Mais pour que celà fonctionne correctement, il faut que la chaîne de caractère que je passe à <code>eval</code> soit codée en javascript et pas en coffee. Cest un peu comme écrire dans deux langages différents au même endroit. Ça ne me parraissait vraiment pas agréable.</li>
2011-04-20 12:29:01 +00:00
</ol>
<h2 id="conclusion">Conclusion</h2>
<p>Avantages&nbsp;:</p>
<ul>
<li>Code plus lisible&nbsp;: CoffeeScript résoud la majorité des problèmes de syntaxes de javascript</li>
<li>Concision&nbsp;: jai gagné 14% de lignes, 22% de mots et 14% de caractères.</li>
2011-04-20 12:29:01 +00:00
</ul>
<p>Inconvénients&nbsp;:</p>
<ul>
<li>Ajout dune nouvelle étape de compilation avant de pouvoir vérifier le comportement de mon site</li>
<li>Facilité dutilisation&nbsp;: il ma fallu créer un script pour gérer la génératio automatique des fichiers</li>
2011-04-20 12:29:01 +00:00
<li>Il faut apprendre un autre langage proche de ruby</li>
<li>La meta-programmation devient une expérience désagréable</li>
<li>Je dois convaincre les personnes travaillant avec moi&nbsp;:
<ul>
<li>dinstaller <code>node.js</code>, <code>npm</code> et CoffeeScript&nbsp;;</li>
2011-04-20 12:29:01 +00:00
<li>de se souvenir de lancer un script à chaque session de codage&nbsp;;</li>
<li>dapprendre un autre language proche de ruby.</li>
2011-04-20 12:29:01 +00:00
</ul>
</li>
</ul>
<p>Les deux derniers points étant de mon point de vue les plus problématiques.</p>
<p>Mais même si javais à travailler seul, je nutiliserai certainement pas CoffeeScript.
Il sagit dun tier dont la moindre mise à jour pourrait rendre mon code inutilisable.
Cette situation mest déjà arrivée plusieurs fois et cest très désagrable.
2011-04-20 12:29:01 +00:00
Beaucoup plus que coder avec une mauvaise syntaxe.</p>
<h2 id="digression">Digression</h2>
<p>Je suis attristé.
Jespérais tant pouvoir programmer Javascript avec une touche de Ruby.
En fin de compte, cette solution nest pas pour moi.
Je vais devoir utiliser l<em>horrible</em> syntaxe javascript pour linstant.
À la limite jaurai préféré un script Ruby2Js par exemple<sup id="fnref:2"><a href="#fn:2" rel="footnote">2</a></sup>.
Mais il me semble que ça serait un travail très difficile rien que pour simuler laccès à la classe courante. </p>
2011-04-20 12:29:01 +00:00
<p>Typiquement <code>@x</code> est transformé en <code>this.x</code>. Mais le code suivant ne fait pas ce que jattendrai de lui.</p>
2011-04-20 12:29:01 +00:00
<pre class="twilight">
<span class="Keyword">-</span><span class="Keyword">&gt;</span>
<span class="Keyword">class</span> <span class="Entity">MyClass</span>
foo: <span class="Keyword">-</span><span class="Keyword">&gt;</span>
<span class="Entity">alert</span>(<span class="String"><span class="String">'</span>ok<span class="String">'</span></span>)
bar: <span class="Keyword">-</span><span class="Keyword">&gt;</span>
$(<span class="String"><span class="String">'</span>#content<span class="String">'</span></span>).<span class="Entity">load</span>( <span class="String"><span class="String">'</span>/content.html<span class="String">'</span></span>, ( <span class="Keyword">-</span><span class="Keyword">&gt;</span> <span class="Variable"><span class="Variable">@</span>foo</span>(x) ) )
<span class="Comment"> <span class="Comment">#</span> Ça n'appellera pas MyClass.foo</span>
</pre>
<p>La seule façon de résoudre ce problème est avec le code suivant&nbsp;:</p>
<pre class="twilight">
<span class="Keyword">-</span><span class="Keyword">&gt;</span>
<span class="Keyword">class</span> <span class="Entity">MyClass</span>
foo: <span class="Keyword">-</span><span class="Keyword">&gt;</span>
<span class="Entity">alert</span>(<span class="String"><span class="String">'</span>ok<span class="String">'</span></span>)
bar: <span class="Keyword">-</span><span class="Keyword">&gt;</span>
<span class="Variable">self</span><span class="Keyword">=</span>this
$(<span class="String"><span class="String">'</span>#content<span class="String">'</span></span>).<span class="Entity">load</span>( <span class="String"><span class="String">'</span>/content.html<span class="String">'</span></span>, ( <span class="Keyword">-</span><span class="Keyword">&gt;</span> <span class="Variable">self</span>.<span class="Entity">foo</span>(x) ) )
</pre>
<p>Sachant celà, la notation <code>@</code> perd tout son intérêt pour moi.</p>
<hr/><div class="footnotes">
<ol>
<li id="fn:1">
<p>Je sais que ce nest certainement ni la meilleure ni la plus productive des décisions. Mais jaime bien fabriquer les choses pour savoir comment tout fonctionne dans le détail.<a href="#fnref:1" rev="footnote">&#8617;</a></p>
2011-04-20 12:29:01 +00:00
</li>
<li id="fn:2">
<p>Je sais quil existe un projet <code>rb2js</code>, mais il ne résoud pas le problème dont je parle.<a href="#fnref:2" rev="footnote">&#8617;</a></p>
2011-04-20 12:29:01 +00:00
</li>
</ol>
</div>
</div>
<div id="choixrss">
<a id="rss" href="http://feeds.feedburner.com/yannespositocomfr">
s'abonner
</a>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#comment').hide();
$('#clickcomment').click(showComments);
});
function showComments() {
$('#comment').show();
$('#clickcomment').fadeOut();
}
document.write('<div id="clickcomment">Commentaires</div>');
</script>
<div class="flush"></div>
<div class="corps" id="comment">
<h2 class="first">commentaires</h2>
<noscript>
Vous devez activer javascript pour commenter.
</noscript>
<script type="text/javascript">
var idcomments_acct = 'a307f0044511ff1b5cfca573fc0a52e7';
var idcomments_post_id = '/Scratch/fr/blog/2011-01-03-Why-I-sadly-won-t-use-coffeescript/';
var idcomments_post_url = 'http://yannesposito.com/Scratch/fr/blog/2011-01-03-Why-I-sadly-won-t-use-coffeescript/';
2011-04-20 12:29:01 +00:00
</script>
<span id="IDCommentsPostTitle" style="display:none"></span>
<script type='text/javascript' src='/Scratch/js/genericCommentWrapperV2.js'></script>
2011-04-20 12:29:01 +00:00
</div>
<div id="entete" class="corps_spaced">
<div id="liens">
<ul><li><a href="/Scratch/fr/">Bienvenue</a></li>
<li><a href="/Scratch/fr/blog/">Blog</a></li>
<li><a href="/Scratch/fr/softwares/">Softwares</a></li>
<li><a href="/Scratch/fr/about/">À propos</a></li></ul>
2011-04-20 12:29:01 +00:00
</div>
<div class="flush"></div>
<hr/>
<div id="next_before_articles">
<div id="previous_articles">
articles précédents
<div class="previous_article">
<a href="/Scratch/fr/blog/2011-01-03-Happy-New-Year/"><span class="nicer">«</span>&nbsp;Bonne et heureuse année</a>
2011-04-20 12:29:01 +00:00
</div>
<div class="previous_article">
<a href="/Scratch/fr/blog/2010-10-26-LaTeX-like-macro-and-markdown/"><span class="nicer">«</span>&nbsp;Des macros LaTeX pour markdown</a>
2011-04-20 12:29:01 +00:00
</div>
<div class="previous_article">
<a href="/Scratch/fr/blog/2010-10-14-Fun-with-wav/"><span class="nicer">«</span>&nbsp;S'amuser avec un .wav</a>
2011-04-20 12:29:01 +00:00
</div>
</div>
<div id="next_articles">
articles suivants
<div class="next_article">
2011-04-20 15:31:37 +00:00
<a href="/Scratch/fr/blog/2011-04-20-Now-hosted-on-github/">Hébergement github&nbsp;<span class="nicer">»</span></a>
</div>
2011-04-20 12:29:01 +00:00
2011-05-30 12:12:24 +00:00
<div class="next_article">
<a href="/Scratch/fr/blog/Password-Management/">Password Management&nbsp;<span class="nicer">»</span></a>
</div>
2011-04-20 12:29:01 +00:00
2011-07-10 11:06:37 +00:00
<div class="next_article">
<a href="/Scratch/fr/blog/Haskell-Mandelbrot/">Mandelbrot avec haskell&nbsp;<span class="nicer">»</span></a>
</div>
2011-04-20 12:29:01 +00:00
</div>
<div class="flush"></div>
</div>
</div>
<div id="bottom">
<div>
<a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/deed.fr">Droits de reproduction ©, Yann Esposito</a>
</div>
<div id="lastmod">
Écrit le : 03/01/2011
2011-05-31 11:46:50 +00:00
modifié le : 31/05/2011
2011-04-20 12:29:01 +00:00
</div>
<div>
Site entièrement réalisé avec
<a href="http://www.vim.org">Vim</a>
et
<a href="http://nanoc.stoneship.org">nanoc</a>
</div>
<div>
<a href="/Scratch/fr/validation/">Validation</a>
2011-04-20 12:29:01 +00:00
<a href="http://validator.w3.org/check?uri=referer"> [xhtml] </a>
.
<a href="http://jigsaw.w3.org/css-validator/check/referer?profile=css3"> [css] </a>
.
<a href="http://validator.w3.org/feed/check.cgi?url=http%3A//yannesposito.com/Scratch/fr/blog/feed/feed.xml">[rss]</a>
2011-04-20 12:29:01 +00:00
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>