The document discusses the use of JavaScript transpilers, particularly CoffeeScript, and evaluates its advantages and disadvantages. It covers various programming features, such as functions, flow control, and prototyping, while addressing how CoffeeScript simplifies JavaScript syntax and fixes some quirks. However, it also notes the limitations of transpilers, including missing strong types and certain new language features.

1. SHOULD I USE ?
The Pros and Cons of Working With JavaScript’s OriginalTranspiler
By Morris Singer

3. WHO AM I
• Lead Front End Developer
Antallagon, Inc.
• Angular.js and Node.js (TwoYears)
• Sencha Touch (TwoYears)
• Ruby on Rails (FourYears)

4. AGENDA
• Whirlwind tour of CoffeeScript
• A rubric for evaluating a JavaScript transpiler
• How does CoffeeScript stack up?

5. A WHIRLWINDTOUR

6. SCOPE
function () {
var a = 'b';
}
->
a = "b"
var c = 'd'; c = "d"

7. FUNCTIONS
function () {
var a = 'b';
}
->
a = "b"
function (c) {
c = 'd';
}
(c) ->
c = "d"

8. RETURNINGVALUES
function (a) {
return a * a;
}
(a) ->
a * a

9. ARGUMENTS
function () {
_.each(arguments, function (arg) {
console.log(arg);
}
}
(args...) ->
_.each args,(arg) ->
console.log arg
function (a, b, c) {
a = a || 1;
b = b || 2;
c = c || 3;
}
(a = 1, b = 2, c = 3) ->

10. INVOCATION
foo('bar'); foo "bar"
foo(); foo()
foo(bar('baz')); foo bar "baz"

11. PUNCTUATION
var obj1 = {
foo: 'foo',
bar: 'bar'
};
obj1 =
foo: 'foo'
bar: 'bar'
var arr1 = [
1,
2,
3
];
arr1 = [
1
2
3
]

12. FLOW CONTROL (IF-ELSE)
if (foo === 'bar')
console.log('hi');
console.log 'hi' if foo == 'bar'
if (foo === ‘bar') {
console.log('hello');
console.log('world');
}
if foo == 'bar'
console.log 'hello'
console.log 'world'
var greeting = (foo === ‘bar') ? 'hello' : 'goodbye';
greeting = if foo == ‘bar' then 'hello' else 'goodbye'

13. FLOW CONTROL (IF NOT)
if (foo !== 'bar')
console.log('hi');
console.log 'hi' unless foo == 'bar'
if (foo !== 'bar') {
console.log('hello');
console.log('world');
}
unless foo == 'bar'
console.log 'hello'
console.log 'world'
var greeting = (foo !== 'bar') ? 'hello' : 'goodbye';
greeting = unless foo == ‘bar' then 'hello' else 'goodbye'

14. STRING INTERPOLATION
"the value of 'a' is: " + a; "the value of 'a' is: #{a}"

15. RANGING
var range = values.slice(1, 4); range = values[1..3]
var substr = "foobar".slice(1, 4); substr = "foobar"[1..3]

16. PROTOTYPING
var User = function() {};
User.prototype.approved = true;
class User
User::approved = true
User.prototype.lock = function () {
this.approved = false;
}
User::lock = ->
@approved = false
john = new User()
john.picture?.thumbnail =
"http://www.placehold.it/100x100"
john = new User();
if (typeof john.picture) !== undefined) {
john.picture.thumbnail =
'http://www.placehold.it/100x100';
}

17. LEXICAL BINDING
function(fn, me) {
return function(){
return fn.apply(me, arguments);
};
};
=>

18. INHERITANCE
• extends keyword
• super keyword

19. UTILITIES
• each
• map
• select
• includes

22. EVALUATING A JAVASCRIPTTRANSPILER

23. StrongTypes

24. “I have made this longer than usual because I have
not had time to make it shorter.”
Brevity

25. New Language Features

26. Classical Inheritance

27. Performance

28. Enhanced Support
for Modules

29. Fixing JavaScript

30. Conventional Languages

31. Navigation from Source
toTarget?

32. WHATYOU GET
• Quirks of JavaScript are fixed
• Some nice (maybe) syntactic abstraction
• Less punctuation
• Performance (sometimes)

33. WHAT’S MISSING
• Strong types
• Some very important new language features
• Enhanced support for modules
• Convention

34. MANYTRANSPILING OPTIONS
Here are just a few…

35. QUESTIONS

36. GET INTOUCH
! @morrissinger
" linkedin.com/in/morrissinger
# morrissinger.com
$ github.com/morrissinger