WTF.md

This document is a opinion about Coffeescript diapositives

Before we begin

• No more semicolons: Yeah, cool! we all know how optional semicolons is a pain in the ass. I like how coffeescript solves this.
• Whitespace sensitive: Wait, what? this is a good point? The only reason I leave python was because of this.

Vars are long gone

var count, increment;

count = 0;

increment = function() {
  var total;
  count++;
  return total = "The total is: " + count;
}

Wait, what? Do you really write javascript that way? In that case you MUST use coffeescript. Why is this total variable here? does it do something else but confuse and make the code less readable?

This is a way more readable to write this snippet:

var count = 0;

function increment() {
  count++;
  return "The total is: " + count;
}

Function context

var person;

person = { ... };

Really?

Array + String slicing

[].splice.apply(nums
  [2,2].concat([-3, -4])
);

Really?

nums.splice(2, 2, -3, -4);

Also:

• Coffee: nums[0..5]
  • In JS: nums.slice(0, 5)
  • Result 5 items: [1,2,3,4,5]
• Coffee: "Toby Ho"[0..3]
  • In JS: "Toby Ho".slice(0, 4)
  • Result 4 chars: "Toby"

0..5 outputs 5 array items and 0..3 outputs 4 chars? is it a typo or a big Coffeescript inconsistency?

Flow control

if (this.tired) {
  return;
}

vs

return if @tired

recomendation:

if (this.tired) return;

Do you really exist?

When you write javascript do you do it this way? If so I understand why you need coffeescript...

var _ref;

if ((_ref = person.address) != null) {
  _ref.city;
}

More readable:

First

var address = person.address;
if (address.city != null)
  address.city;

Second

person.address && person.address.city;

I think the existential operator is wonderful, but we can't use bad examples in his favor.

For loops

Again, really? Why are you creating the variable num and why so much variables with underscore making them more difficult to read???

var like, num, _i, _len, _ref;

_ref = person.likes;
for (num = _i = 0, _len = _ref.length; _i < _len; num = ++_i) {
  like = _ref[num];
  console.log("" + (num + 1) + ". " + like);
}

First proposal

var likes = person.likes;
for (var i = 0, len = likes.length; i < len; i++)
  console.log(i + 1, '. ', likes[i]);

Second proposal

person.likes.forEach(function(like, num) {
  console.log(num + 1, '. ', like);
});

Array in checking

Please... I can't say anything about this...

var __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };

if (__indexOf.call(this.dislikes, "cofeescript") >= 0) {
  "hater";
} else {
  "friend :-)";
}

Readable proposal

if (this.dislikes.indexOf('coffeescript') >= 0) {
  "hater";
} else {
  "friend :-)";
}

Actually as the coffeescript sentence is in one line I think it's more fear to use a ternary operator

this.dislikes.indexOf('coffeescript') >= 0 ? "hater" : "friend :-)";

By the way, I know it's a joke but I have to say it, but not everyone who dislikes coffeescript is a hater the same way coffeescript people does not hate javascript.

Comprehensions

I'm dying... this is epic...

var i, nums;

nums = (function() {
  var _i, _results;
  _results = [];
  for (i = _i = 1; _i <= 100; i = ++_i) {
    _results.push({
      num: i
    });
  }
  return _results;
})();

Proposal

var nums = [];
for (var i = 1; i <= 100; i++)
  nums.push({ num: i });

Critisism

I only have one. Build process. I don't see it there. After seeing this I understand I have to add one: fanatism.

Conclusion

The only thing I can think about is you used coffeescript generated javascript for the examples but it's plain unfear, to make it even you should use generated coffeescript vs generated javascript or written coffeescript vs written javascript.

The bigger lesson I take from this slides is than coffeescript's generated Javascript is not as readable as I thought.

And yes, I know some of this examples are unreadable because coffeescripts generates code compatible with old browsers (like indexOf example) but if you don't care using coffeescript compiler you should also have no problem using a transpiler to generate ECMAScript3 code and in that point you can also use a ES6 transpiler and if we use ECMAScript 6 half the examples are a lot simplier (like functions and destructuring assignment)

I don't like Coffeescript because I like to develop on any machine without installing of configuring anything, this is a personal asset so I understand why so many people like coffeescript.

What I don't agree is to use bad JS examples vs good Coffeescript examples, I call this manipulation.

wat

Dude... are you serious? You do realize that the output is the Coffeescript generated output - not the suggested way to write Javascript.

Second, you weren't there at the meetup, and you missed the additional points of context on every single slide. These slides were complimentary for the people who were there - not as something that was stand alone - nor does it make sense by itself.

Third, there was an exclusive use of the range for nums[0...5] - not the inclusive double period as you suggested. There is no inconsistency in coffeescript.

Fourth - the first example was an example of how coffeescript treats variable shadowing - along with an example of hoisting. It wasn't meant to be complete on its own, obviously.

@brian-mann You didn't read the document to the end. I know it's generated javascript.

Second, I found this slides at EchoJS an this what I opining about, not the speech.

Third, so if I write two dots it does one thing and if I write three it works another way!? Cool! Good way to make easier to read code [/sarcasm]

Fourth, as we both said, my opinion is about the slides and in the slides, in the first example, the Javascript code appears before Coffeescript code without any indication than the javascript code is generated.