310 lines
No EOL
16 KiB
HTML
310 lines
No EOL
16 KiB
HTML
<?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" />
|
||
|
||
|
||
<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" />
|
||
<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>
|
||
<!--[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>
|
||
<body lang="fr" class="article">
|
||
<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">↓ Menu ↓</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 class="flush"></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="encadre">
|
||
|
||
|
||
<p><em>Mise à jour :</em> Je pense que je vais finallement changer d’avis.
|
||
Pourquoi ?
|
||
Tout d’abord, je viens de découvrir un convertisseur javascript vers coffeescript, ensuite Denis Knauf m’a laissé un commentaire et m’a appris l’existence d’une 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>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<div class="intro">
|
||
|
||
|
||
<p><span class="sc"><abbr title="Trop long à lire">tlàl</abbr> : </span> Qu’est-ce qui n’allait 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 c’est un peu instable.</p>
|
||
|
||
|
||
</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’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 class="pala">&</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’horrible syntaxe de javascript. C’était comme revenir des années dans le passé :</p>
|
||
|
||
<ul>
|
||
<li>une syntaxe à la Java très verbeuse ;</li>
|
||
<li>une syntaxe follement verbeuse et étrange pour la programmation orientée objet ;</li>
|
||
<li>pas de manière naturelle de se référer à l’instance d’une classe ;</li>
|
||
<li>etc… </li>
|
||
</ul>
|
||
|
||
<p>J’étais tellement ennuyé par tous ces point qu’il était arrivé un moment où je commençais à vouloir faire mon propre CoffeeScript.</p>
|
||
|
||
<p>J’ai fini une première version de mon framework MVC en javascript et j’ai appris l’existence de CoffeeScript. Merci à git, j’ai immédiatement créé une nouvelle branche dans le seul but d’essayer CoffeeScript.</p>
|
||
|
||
<p>Voici mon expérience :</p>
|
||
|
||
<ol>
|
||
<li>J’ai 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 j’aurai aimé.</li>
|
||
<li>Les fichier javascript existants ne sont pas compatible avec coffee.</li>
|
||
<li>Il n’y a pas script pour aider à transformer les anciens fichiers javascripts en fichier coffee. Du coups j’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’option <code>--watch</code> de coffee était très utile pour debugger cette transformation.
|
||
Cependant, il m’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’avais pas pensé. J’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’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 :</p>
|
||
|
||
<ul>
|
||
<li>Code plus lisible : CoffeeScript résoud la majorité des problèmes de syntaxes de javascript</li>
|
||
<li>Concision : j’ai gagné 14% de lignes, 22% de mots et 14% de caractères.</li>
|
||
</ul>
|
||
|
||
<p>Inconvénients :</p>
|
||
|
||
<ul>
|
||
<li>Ajout d’une nouvelle étape de compilation avant de pouvoir vérifier le comportement de mon site</li>
|
||
<li>Facilité d’utilisation : il m’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 :
|
||
<ul>
|
||
<li>d’installer <code>node.js</code>, <code>npm</code> et CoffeeScript ;</li>
|
||
<li>de se souvenir de lancer un script à chaque session de codage ;</li>
|
||
<li>d’apprendre un autre language proche de ruby.</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
|
||
<p>Les deux derniers points étant de mon point de vue les plus problématiques.</p>
|
||
|
||
<p>Mais même si j’avais à travailler seul, je n’utiliserai certainement pas CoffeeScript.
|
||
Il s’agit d’un tier dont la moindre mise à jour pourrait rendre mon code inutilisable.
|
||
Cette situation m’est déjà arrivée plusieurs fois et c’est très désagrable.
|
||
Beaucoup plus que coder avec une mauvaise syntaxe.</p>
|
||
|
||
<h2 id="digression">Digression</h2>
|
||
|
||
<p>Je suis attristé.
|
||
J’espérais tant pouvoir programmer Javascript avec une touche de Ruby.
|
||
En fin de compte, cette solution n’est pas pour moi.
|
||
Je vais devoir utiliser l’<em>horrible</em> syntaxe javascript pour l’instant.
|
||
À la limite j’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’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’attendrai de lui.</p>
|
||
|
||
<pre class="twilight">
|
||
<span class="Keyword">-</span><span class="Keyword">></span>
|
||
<span class="Keyword">class</span> <span class="Entity">MyClass</span>
|
||
foo: <span class="Keyword">-</span><span class="Keyword">></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">></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">></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 :</p>
|
||
|
||
<pre class="twilight">
|
||
<span class="Keyword">-</span><span class="Keyword">></span>
|
||
<span class="Keyword">class</span> <span class="Entity">MyClass</span>
|
||
foo: <span class="Keyword">-</span><span class="Keyword">></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">></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">></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’est certainement ni la meilleure ni la plus productive des décisions. Mais j’aime bien fabriquer les choses pour savoir comment tout fonctionne dans le détail.<a href="#fnref:1" rev="footnote">↩</a></p>
|
||
</li>
|
||
<li id="fn:2">
|
||
<p>Je sais qu’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">↩</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';
|
||
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/';
|
||
</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> 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> 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> S'amuser avec un .wav</a>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
<div id="next_articles">
|
||
articles suivants
|
||
|
||
<div class="next_article">
|
||
<a href="/Scratch/fr/blog/2011-04-20-Now-hosted-on-github/">Hébergement github <span class="nicer">»</span></a>
|
||
</div>
|
||
|
||
|
||
<div class="next_article">
|
||
<a href="/Scratch/fr/blog/Password-Management/">Password Management <span class="nicer">»</span></a>
|
||
</div>
|
||
|
||
|
||
<div class="next_article">
|
||
<a href="/Scratch/fr/blog/Haskell-Mandelbrot/">Mandelbrot avec haskell <span class="nicer">»</span></a>
|
||
</div>
|
||
|
||
|
||
</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
|
||
modifié le : 26/10/2011
|
||
</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>
|
||
</body>
|
||
</html> |