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

301 lines
16 KiB
HTML
Raw Normal View History

2011-01-09 22:35:02 +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" />
<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" />
<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-01-19 14:59:52 +00:00
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
2011-01-09 22:35:02 +00:00
<!-- < % if containMaths %>
<script type="text/javascript" src="/Scratch/js/MathJax/MathJax.js"></script>
< % end %>
-->
<title>Pourquoi je n'utiliserai pas CoffeeScript (malheureusement)</title>
</head>
<body lang="fr">
<script type="text/javascript">// <![CDATA[
document.write('<div id="blackpage"><img src="/Scratch/img/loading.gif" alt="Chargement en cours..."/></div>');
// ]]>
</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>
</div>
</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>
<div class="intro">
2011-03-14 11:17:51 +00:00
<p><span class="sc"><abbr title="Trop long à lire">tlàl</abbr>&nbsp;: </span> Qu&rsquo;est-ce qui n&rsquo;allait pas avec Coffeescript? La meta-programmation, il faut le &ldquo;vendre&rdquo; aux autres, une nouvelle étape de compilation intermédiaire sans fournir les avantages de Cappuccino, la sensation que c&rsquo;est un peu instable.</p>
2011-01-09 22:35:02 +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 j&rsquo;ai beaucoup programmé en javascript.
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>&amp;</em>
<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 l&rsquo;horrible syntaxe de javascript. C&rsquo;était comme revenir des années dans le passé&nbsp;:</p>
<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 à l&rsquo;instance d&rsquo;une classe&nbsp;;</li>
<li>etc&hellip; </li>
</ul>
<p>J&rsquo;étais tellement ennuyé par tous ces point qu&rsquo;il était arrivé un moment où je commençais à vouloir faire mon propre CoffeeScript.</p>
<p>J&rsquo;ai fini une première version de mon framework MVC en javascript et j&rsquo;ai appris l&rsquo;existence de CoffeeScript. Merci à git, j&rsquo;ai immédiatement créé une nouvelle branche dans le seul but d&rsquo;essayer CoffeeScript.</p>
<p>Voici mon expérience&nbsp;:</p>
<ol>
<li>J&rsquo;ai dû installer <code>node.js</code> et utiliser <code>npm</code> simplement pour utiliser CoffeeScript. Ce n&rsquo;était pas très difficile, mais pas aussi facile que ce que j&rsquo;aurai aimé.</li>
<li>Les fichier javascript existants ne sont pas compatible avec coffee.</li>
<li>Il n&rsquo;y a pas script pour aider à transformer les anciens fichiers javascripts en fichier coffee. Du coups j&rsquo;ai dû faire ça manuellement.
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.
L&rsquo;option <code>--watch</code> de coffee était très utile pour debugger cette transformation.
Cependant, il m&rsquo;a 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 n&rsquo;avais pas pensé. J&rsquo;ai 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. C&rsquo;est un peu comme écrire dans deux langages différents au même endroit. Ça ne me parraissait vraiment pas agréable.</li>
</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;: j&rsquo;ai gagné 14% de lignes, 22% de mots et 14% de caractères.</li>
</ul>
<p>Inconvénients&nbsp;:</p>
<ul>
<li>Ajout d&rsquo;une nouvelle étape de compilation avant de pouvoir vérifier le comportement de mon site</li>
<li>Facilité d&rsquo;utilisation&nbsp;: il m&rsquo;a fallu créer un script pour gérer la génératio automatique des fichiers</li>
<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>d&rsquo;installer <code>node.js</code>, <code>npm</code> et CoffeeScript&nbsp;;</li>
<li>de se souvenir de lancer un script à chaque session de codage&nbsp;;</li>
<li>d&rsquo;apprendre un autre language proche de ruby.</li>
</ul>
</li>
</ul>
2011-03-14 11:17:51 +00:00
<p>Les deux derniers points étant de mon point de vue les plus problématiques.</p>
2011-01-09 22:35:02 +00:00
2011-03-14 11:17:51 +00:00
<p>Mais même si j&rsquo;avais à travailler seul, je n&rsquo;utiliserai certainement pas CoffeeScript.
Il s&rsquo;agit d&rsquo;un tier dont la moindre mise à jour pourrait rendre mon code inutilisable.
Cette situation m&rsquo;est déjà arrivée plusieurs fois et c&rsquo;est très désagrable.
Beaucoup plus que coder avec une mauvaise syntaxe.</p>
2011-01-09 22:35:02 +00:00
<h2 id="digression">Digression</h2>
<p>Je suis attristé.
J&rsquo;espérais tant pouvoir programmer Javascript avec une touche de Ruby.
En fin de compte, cette solution n&rsquo;est pas pour moi.
Je vais devoir utiliser l&rsquo;<em>horrible</em> syntaxe javascript pour l&rsquo;instant.
À la limite j&rsquo;aurai 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 l&rsquo;accès à la classe courante. </p>
<p>Typiquement <code>@x</code> est transformé en <code>this.x</code>. Mais le code suivant ne fait pas ce que j&rsquo;attendrai de lui.</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="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 n&rsquo;est certainement ni la meilleure ni la plus productive des décisions. Mais j&rsquo;aime bien fabriquer les choses pour savoir comment tout fonctionne dans le détail.<a href="#fnref:1" rev="footnote">&#8617;</a></p>
</li>
<li id="fn:2">
<p>Je sais qu&rsquo;il 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>
</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';
2011-02-01 22:48:44 +00:00
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-01-09 22:35:02 +00:00
</script>
<span id="IDCommentsPostTitle" style="display:none"></span>
<script type='text/javascript' src='/Scratch/js/genericCommentWrapperV2.js'></script>
</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>
</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>
</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>
</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>
</div>
</div>
<div id="next_articles">
articles suivants
</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-03-14 11:26:07 +00:00
modifié le : 14/03/2011
2011-01-09 22:35:02 +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>
<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>
</div>
</div>
<div class="clear"></div>
</div>
2011-01-19 14:59:52 +00:00
<script type="text/javascript">
var clicky = { log: function(){ return; }, goal: function(){ return; }};
2011-01-19 17:13:44 +00:00
var clicky_site_id = 66374971;
2011-01-19 14:59:52 +00:00
(function() {
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = ( document.location.protocol == 'https:' ? 'https://static.getclicky.com/js' : 'http://static.getclicky.com/js' );
( document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0] ).appendChild( s );
})();
</script>
2011-01-19 17:13:44 +00:00
<noscript><p><img alt="Clicky" width="1" height="1" src="http://in.getclicky.com/66374971ns.gif" /></p></noscript>
2011-01-19 14:59:52 +00:00
2011-01-09 22:35:02 +00:00
</body>
</html>