JavaScript is an increadibly powerful and widely adopted language. It powers the web site, you are looking at, and probably the entertainment system in your next car. It allows for functional programming and offers prototype based inheritance. Unfortunately, it’s most language constructs are awkward (phony arrays, new, 0 == ”), frequently misunderstood (this, prototype, ==, for) and lead to an error prone and unmaintanable code (lexical scope, globals). Best solution is to learn the JavaScript language in more depth (I recommend “JavaScript: The Good Parts” by Douglas Crockford) and to use code style checker JSLint. In addition you can create more readable, reliable applications with CoffeeScript, a little language that keeps the original concepts, compiles into JavaScript and facilitates JavaScript best practices. Lets see, what CoffeeScript can do for you… (as presented at FrankfurtJS, October 2014)

1. Good/Bad Parts
Syntactic Sugar
Classes
CoeeScript
Vladimir Dobriakov, www.mobile-web-consulting.de
FrankfurtJS, 30th of October 2014
Vladimir Dobriakov, www.mobile-web-consulting.de CoeeScript

2. Good/Bad Parts
Syntactic Sugar
Classes
JavaScript,
the good parts
+
syntactic sugar
=
CoeeScript
Vladimir Dobriakov, www.mobile-web-consulting.de CoeeScript

3. Good/Bad Parts
Syntactic Sugar
Classes
Lexical Scoping, Globals
for own
switch
Existential Operator
Lexical Scoping, Globals
items = $(li);
$(#totals).text(items.length + items found);
Vladimir Dobriakov, www.mobile-web-consulting.de CoeeScript

4. Good/Bad Parts
Syntactic Sugar
Classes
Lexical Scoping, Globals
for own
switch
Existential Operator
Lexical Scoping, Globals
var items;
items = $(li);
$(#totals).text(items.length + items found);
Vladimir Dobriakov, www.mobile-web-consulting.de CoeeScript

5. Good/Bad Parts
Syntactic Sugar
Classes
Lexical Scoping, Globals
for own
switch
Existential Operator
Lexical Scoping, Globals
(function() {
var items;
items = $(li);
$(#totals).text(items.length + items found);
}).call(this);
Vladimir Dobriakov, www.mobile-web-consulting.de CoeeScript

6. Good/Bad Parts
Syntactic Sugar
Classes
Lexical Scoping, Globals
for own
switch
Existential Operator
Lexical Scoping, Globals
(function() {
var items;
items = $(li);
$(#totals).text(items.length + items found);
}).call(this);
CoeeScript:
items = $(li)
$(totals).text(items.length + items found)
Vladimir Dobriakov, www.mobile-web-consulting.de CoeeScript

7. Good/Bad Parts
Syntactic Sugar
Classes
Lexical Scoping, Globals
for own
switch
Existential Operator
Iterate through Properties
for (propertyName in customer) {
value = customer[propertyName];
alert(propertName, value);
}
Vladimir Dobriakov, www.mobile-web-consulting.de CoeeScript

8. Good/Bad Parts
Syntactic Sugar
Classes
Lexical Scoping, Globals
for own
switch
Existential Operator
Iterate through Properties
var propertyName, value,
__hasProp = {}.hasOwnProperty;
for (propertyName in customer) {
if (!__hasProp.call(customer, propertyName)) continue;
value = customer[propertyName];
alert(propertName, value);
}
Vladimir Dobriakov, www.mobile-web-consulting.de CoeeScript

9. Good/Bad Parts
Syntactic Sugar
Classes
Lexical Scoping, Globals
for own
switch
Existential Operator
Iterate through Properties
var propertyName, value,
__hasProp = {}.hasOwnProperty;
for (propertyName in customer) {
if (!__hasProp.call(customer, propertyName)) continue;
value = customer[propertyName];
alert(propertName, value);
}
for own propertyName, value of customer # CoffeeScript
alert(propertName, value)
Vladimir Dobriakov, www.mobile-web-consulting.de CoeeScript

10. Good/Bad Parts
Syntactic Sugar
Classes
Lexical Scoping, Globals
for own
switch
Existential Operator
switch
switch (day) { // JavaScript
case Mon:
go(work);
case Tue:
go(iceFishing);
default:
chill(24);
}
Vladimir Dobriakov, www.mobile-web-consulting.de CoeeScript

11. Good/Bad Parts
Syntactic Sugar
Classes
Lexical Scoping, Globals
for own
switch
Existential Operator
switch
switch (day) { // JavaScript
case Mon:
go(work); break;
case Tue:
go(iceFishing); break;
default:
chill(24);
}
Vladimir Dobriakov, www.mobile-web-consulting.de CoeeScript

12. Good/Bad Parts
Syntactic Sugar
Classes
Lexical Scoping, Globals
for own
switch
Existential Operator
switch
switch (day) { // JavaScript
case Mon:
go(work); break;
case Tue:
go(iceFishing); break;
default:
chill(24);
}
switch day # CoffeeScript
when Mon then go work
when Tue then go iceFishing
else chill 24
Vladimir Dobriakov, www.mobile-web-consulting.de CoeeScript

13. Good/Bad Parts
Syntactic Sugar
Classes
Lexical Scoping, Globals
for own
switch
Existential Operator
Check for Optional Parameter
if (defaultAmount)
Vladimir Dobriakov, www.mobile-web-consulting.de CoeeScript

14. Good/Bad Parts
Syntactic Sugar
Classes
Lexical Scoping, Globals
for own
switch
Existential Operator
Check for Optional Parameter
if (defaultAmount)
if (defaultAmount != null)
Vladimir Dobriakov, www.mobile-web-consulting.de CoeeScript

15. Good/Bad Parts
Syntactic Sugar
Classes
Lexical Scoping, Globals
for own
switch
Existential Operator
Check for Optional Parameter
if (defaultAmount)
if (defaultAmount != null)
if (typeof defaultAmount !== 'undefined'
defaultAmount != null)
Vladimir Dobriakov, www.mobile-web-consulting.de CoeeScript

16. Good/Bad Parts
Syntactic Sugar
Classes
Lexical Scoping, Globals
for own
switch
Existential Operator
Check for Optional Parameter
if (defaultAmount)
if (defaultAmount != null)
if (typeof defaultAmount !== 'undefined'
defaultAmount != null)
CoeeScript:
if defaultAmount?
Vladimir Dobriakov, www.mobile-web-consulting.de CoeeScript

17. Good/Bad Parts
Syntactic Sugar
Classes
Lexical Scoping, Globals
for own
switch
Existential Operator
[optional] comparision
0 ==
Vladimir Dobriakov, www.mobile-web-consulting.de CoeeScript

18. Good/Bad Parts
Syntactic Sugar
Classes
Lexical Scoping, Globals
for own
switch
Existential Operator
[optional] comparision
0 ==
Use === instead
Vladimir Dobriakov, www.mobile-web-consulting.de CoeeScript

19. Good/Bad Parts
Syntactic Sugar
Classes
List Comprehensions
Splats, Destructuring Assignment
String Interpolation
List Comprehensions
shortNames = (name for name in list when name.length 5)
cubes = (math.cube num for num in list)
Vladimir Dobriakov, www.mobile-web-consulting.de CoeeScript

20. Good/Bad Parts
Syntactic Sugar
Classes
List Comprehensions
Splats, Destructuring Assignment
String Interpolation
Splats, Destructuring Assignment
awardMedals = (first, second, others...) -
# TODO implementation
awardMedals 'CoffeeScript', 'JavaScript', 'Ruby', 'Python'
[city, temp, forecast] = weatherReport Frankfurt
Vladimir Dobriakov, www.mobile-web-consulting.de CoeeScript

21. Good/Bad Parts
Syntactic Sugar
Classes
List Comprehensions
Splats, Destructuring Assignment
String Interpolation
in/of
winner = yes if pick in
[47, 92, 13]
Vladimir Dobriakov, www.mobile-web-consulting.de CoeeScript

22. Good/Bad Parts
Syntactic Sugar
Classes
List Comprehensions
Splats, Destructuring Assignment
String Interpolation
String Interpolation
Hello, #{name}
html =
strong
Cup of CoffeeScript
/strong
Vladimir Dobriakov, www.mobile-web-consulting.de CoeeScript

23. Good/Bad Parts
Syntactic Sugar
Classes
Dene Classes
Initializer
Fat Arrow
Access Prototype
Dene Classes
class Animal
constructor: (name) -
@name = name
move: (meters) -
alert #{@name} moved #{meters}m.
class Snake extends Animal
move: -
alert Slithering...
super 5
Vladimir Dobriakov, www.mobile-web-consulting.de CoeeScript

24. Good/Bad Parts
Syntactic Sugar
Classes
Dene Classes
Initializer
Fat Arrow
Access Prototype
Initializer
class Animal
constructor: (@name) -
(function() {
var Animal;
Animal = (function() {
function Animal(name) {
this.name = name;
}
return Animal;
})();
).call(this);
Vladimir Dobriakov, www.mobile-web-consulting.de CoeeScript

25. Good/Bad Parts
Syntactic Sugar
Classes
Dene Classes
Initializer
Fat Arrow
Access Prototype
Fat Arrow replaces this+that
Account = (@customer, @cart) -
$('.shopping_cart').bind 'click',
(event) =
@customer.purchase @cart
Vladimir Dobriakov, www.mobile-web-consulting.de CoeeScript

26. Good/Bad Parts
Syntactic Sugar
Classes
Dene Classes
Initializer
Fat Arrow
Access Prototype
Access Prototype
String::dasherize = -
this.replace /_/g, -
String.prototype.dasherize = function() {
return this.replace(/_/g, -);
};
Vladimir Dobriakov, www.mobile-web-consulting.de CoeeScript

27. Good/Bad Parts
Syntactic Sugar
Classes
Dene Classes
Initializer
Fat Arrow
Access Prototype
References
Douglas Crockford JavaScript: The Good Parts
http://coeescript.org/
Vladimir Dobriakov, www.mobile-web-consulting.de CoeeScript