You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

179 lines
12 KiB

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>YBlog - Why I won't use CoffeeScript (sadly)</title>
<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="/css/y.css" />
<link rel="stylesheet" type="text/css" href="/css/legacy.css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="apple-touch-icon" href="../../../../Scratch/img/about/FlatAvatar@2x.png" />
<!--[if lt IE 9]>
<script src=""></script>
<!-- IndieAuth -->
<link href="" rel="me">
<link href="" rel="me">
<link href="" rel="me">
<link rel="pgpkey" href="../../../../pubkey.txt">
<body lang="en" class="article">
<div id="content">
<div id="header">
<div id="choix">
<span id="choixlang">
<a href="../../../../Scratch/fr/blog/2011-01-03-Why-I-sadly-won-t-use-coffeescript/">French</a>
<span class="tomenu"><a href="#navigation">↓ Menu ↓</a></span>
<span class="flush"></span>
<div id="titre">
<h1>Why I won't use CoffeeScript (sadly)</h1>
<div class="flush"></div>
<div id="afterheader" class="article">
<div class="corps">
<img src="../../../../Scratch/img/blog/2011-01-03-Why-I-sadly-won-t-use-coffeescript/main.png" alt="Title image" />
<div class="encadre">
<p><em>Update</em>: I might change my mind now. Why? I just discovered a <a href="">js2coffee converter</a>. Furthermore Denis Knauf told me about a <code>CoffeeScript.eval</code> function. And as Denis said: “it is time to use Coffeescript as a javascript with Ruby-like syntax not a Ruby-like programming language”.</p>
<div class="intro">
<p><span class="sc"><abbr title="Too long; didn't read">tl;dr</abbr>: </span> I would have loved to program client side using a Ruby-like syntax. But in the end, CoffeScript raised more disavantages than advantages.</p>
<p>Recently I read <a href="">this entry</a> on HackerNews. The most upvoted comment praised (within other) <a href="">CoffeeScript</a>. Recently I used <em>a lot</em> of javascript. After trying <a href="">Sproutcore</a>, <a href="">Cappuccino</a>, looking at <a href="">backbone.js</a> <em>&amp;</em> <a href="">javascriptMVC</a>, I’ve finally decided to make my own minimal javascript MVC framework.<a href="#fn1" class="footnote-ref" id="fnref1"><sup>1</sup></a></p>
<p>I had to fight the horrible syntax of javascript. It was like experiencing a back-in-time travel:</p>
<li>Verbose Java-like syntax,</li>
<li>Strange and insanely Verbose Object Oriented Programming,</li>
<li>No easy way to refer to current instance of a class (<code>this</code> doesn’t work really well),</li>
<p>It was so annoying at a point, I had thinked about creating my <em>own</em> CoffeeScript.</p>
<p>I’d finished a first draft of my MVC javascript framework. Just after I learned about the existence of CoffeeScript, I immediately created a new git branch to try it.</p>
<p>Here is my experience:</p>
<ol type="1">
<li>I had to install <code>node.js</code> and use <code>npm</code> just to use CoffeeScript. It wasn’t a big deal but it wasn’t as straightfoward as I expected either.</li>
<li>Existing javascript file are not coffee compatible. I <em>had</em> to translate them by hand. There were no script to help me in this process. Thanks to <a href="">vim</a>, it wasn’t too hard to translate 90% of the javascript using some regexp. The <code>--watch</code> option of coffee was also really helpful to help in the translation. But I had to write my own shell script in order to follow an entire directory tree.</li>
<li>An unexpected event. I made some meta-programming in javascript using <code>eval</code>. But in order to work, the string in the eval must be written in pure javascript not in coffee. It was like writing in two different languages. Really not so good.</li>
<h2 id="conclusion">Conclusion</h2>
<li>Readability: clearly it resolved most of javascript syntax problems</li>
<li>Verbosity: I gained 14% line, 22% words, 14% characters</li>
<li>Added another compilation step to see how my code behave on the website.</li>
<li>I had to launch some script to generate on change every of my javascript file</li>
<li>I have to learn another Ruby-like language,</li>
<li>meta-programming become a poor experience,</li>
<li>I must convince people working with me to:
<li>install <code>node.js</code>, <code>npm</code> and CoffeeScript,</li>
<li>remember to launch a script at each code session,</li>
<li>learn and use another ruby-like language</li>
<p>The last two point were definitively really problematic for me.</p>
<p>But even if I’ll have to work alone, I certainly won’t use CoffeeScript either. CoffeeScript is a third party and any of their update can break my code. I experienced this kind of situation many times, and it is very annoying. Far more than coding with a bad syntax.</p>
<h2 id="digression">Digression</h2>
<p>I am sad. I wanted so much to program on Web Client with a Ruby-like syntax. But in the end I think it is not for me. I have to use the <em>horrible</em> javascript syntax for now. At least I would have preferred a complete <code>ruby2js</code> script for example<a href="#fn2" class="footnote-ref" id="fnref2"><sup>2</sup></a>. But I believe it would be a really hard task just to simulate the access of current class for example.</p>
<p>Typically <code>@x</code> translate into <code>this.x</code>. But the following code will not do what I should expect. Call the foo function of the current class.</p>
<div class="sourceCode" id="cb1"><pre class="sourceCode ruby"><code class="sourceCode ruby"><a class="sourceLine" id="cb1-1" title="1">-&gt; </a>
<a class="sourceLine" id="cb1-2" title="2"><span class="kw">class</span> <span class="dt">MyClass</span></a>
<a class="sourceLine" id="cb1-3" title="3"> <span class="st">foo: </span>-&gt;</a>
<a class="sourceLine" id="cb1-4" title="4"> alert(<span class="st">'ok'</span>)</a>
<a class="sourceLine" id="cb1-5" title="5"></a>
<a class="sourceLine" id="cb1-6" title="6"> <span class="st">bar: </span>-&gt;</a>
<a class="sourceLine" id="cb1-7" title="7"> $(<span class="st">'#content'</span>).load( <span class="st">'/content.html'</span>, ( -&gt; <span class="ot">@foo</span>(x) ) )</a>
<a class="sourceLine" id="cb1-8" title="8"> <span class="co"># That won't call</span></a></code></pre></div>
<p>The only way to handle this is to make the following code:</p>
<div class="sourceCode" id="cb2"><pre class="sourceCode ruby"><code class="sourceCode ruby"><a class="sourceLine" id="cb2-1" title="1">-&gt; </a>
<a class="sourceLine" id="cb2-2" title="2"><span class="kw">class</span> <span class="dt">MyClass</span></a>
<a class="sourceLine" id="cb2-3" title="3"> <span class="st">foo: </span>-&gt;</a>
<a class="sourceLine" id="cb2-4" title="4"> alert(<span class="st">'ok'</span>)</a>
<a class="sourceLine" id="cb2-5" title="5"></a>
<a class="sourceLine" id="cb2-6" title="6"> <span class="st">bar: </span>-&gt;</a>
<a class="sourceLine" id="cb2-7" title="7"> <span class="dv">self</span>=this</a>
<a class="sourceLine" id="cb2-8" title="8"> $(<span class="st">'#content'</span>).load( <span class="st">'/content.html'</span>, ( -&gt; <span class="dv">self</span>.foo(x) ) )</a></code></pre></div>
<p>Knowing this, <code>@</code> notation lose most of its interrest for me.</p>
<section class="footnotes">
<hr />
<li id="fn1"><p>I know it may not be the best nor productive decision, but I’d like to start from scratch and understand how things works under the hood.<a href="#fnref1" class="footnote-back"></a></p></li>
<li id="fn2"><p>I know there is <code>rb2js</code>, but it doesn’t handle the problem I talk about.<a href="#fnref2" class="footnote-back"></a></p></li>
<div id="afterarticle">
<div id="social">
<a href="/rss.xml" target="_blank" rel="noopener noreferrer nofollow" class="social">RSS</a>
<a href="" target="_blank" rel="noopener noreferrer nofollow" class="social">Tweet</a>
<a href="" target="_blank" rel="noopener noreferrer nofollow" class="social">FB</a>
<br />
<a class="message" href="../../../../Scratch/en/blog/Social-link-the-right-way/">These social sharing links preserve your privacy</a>
<div id="navigation">
<a href="../../../../">Home</a>
<span class="sep">¦</span>
<a href="../../../../Scratch/en/blog">Blog</a>
<span class="sep">¦</span>
<a href="../../../../Scratch/en/softwares">Softwares</a>
<span class="sep">¦</span>
<a href="../../../../Scratch/en/about">About</a>
<div id="totop"><a href="#header">↑ Top ↑</a></div>
<div id="bottom">
Published on 2011-01-03
<a href="">Follow @yogsototh</a>
<a rel="license" href="">Yann Esposito©</a>
Done with
<a href="" target="_blank" rel="noopener noreferrer nofollow"><strike>Vim</strike></a>
<a href="" target="_blank" rel="noopener noreferrer nofollow">spacemacs</a>
<span class="pala">&amp;</span>
<a href="" target="_blank" rel="noopener noreferrer nofollow"><strike>nanoc</strike></a>
<a href="" target="_blank" rel="noopener noreferrer nofollow">Hakyll</a>
<hr />
<div style="max-width: 100%">
<a href="">
<img src="../../../../Scratch/img/ada-logo.png" class="simple" style="height: 16px;
border-radius: 50%;
display:inline-block;" />
<code style="display:inline-block;
text-align: left;
vertical-align: top;
max-width: 85%;">