Typescript vs Coffeescript vs ES6

115
by Neil Green (@neilfeyn)

description

From Slidesharehttp://www.slideshare.net/NeilGreen1/type-script-vs-coffeescript-vs-es6

Transcript of Typescript vs Coffeescript vs ES6

Page 1: Typescript vs Coffeescript vs ES6

by Neil Green (@neilfeyn)

Page 2: Typescript vs Coffeescript vs ES6

(Please hold questions until the end)

Page 3: Typescript vs Coffeescript vs ES6

Rules of this talk:

• Please be nice.

• Please be respectful.

• Please don’t throw things.

• Please take no personal offense to anything I may say, imply, or infer regarding programming languages.

• Please forgive me if I am not 100% accurate or complete in my slides (I err on the side of conciseness.)

Page 4: Typescript vs Coffeescript vs ES6

To keep everyone calm and relaxed before and/or after stressful slides, periodically photos of cute

kittens will be shown.

Page 5: Typescript vs Coffeescript vs ES6
Page 6: Typescript vs Coffeescript vs ES6

Understanding My Perspective

Page 7: Typescript vs Coffeescript vs ES6

Why only a crazy person would attempt this talk

• There is no way to do this topic justice in an hour.

• Developers are fiercely opinionated about languages, especially JavaScript.

• This talk can also be cast as “Static vs Dynamic Typing” or “Java vs [insert language]”

• Regretably, this topic now also invites AngularJS + TypeScript vs ReactJS + Flow debates.

• It is incredibly difficult to not come across as biased on this topic - but I will try!

Page 8: Typescript vs Coffeescript vs ES6

Things I am not

• A language designer – I am a language user.

• An academic – I work to get paid.

• Flawless in my memory and understanding in TypeScript, CoffeeScript, and ES6 (but I did a lot of preparation for this talk).

• Totally familiar with your programming language such that I can answer any comparison/contrast questions.

• Able to teach you 3 programming languages in 60 minutes, much less demonstrate their full capabilities.

Page 9: Typescript vs Coffeescript vs ES6

My Perspective on

Programming Languages

• Have written JavaScript since 1997

• Have written CoffeeScript exclusively since 2011

• Have never written TypeScript professionally

• Coded Java on and off since 1999 (~5 years total)

• Have gotten to use many of the new ES6s features

• Dabbled in Ruby and Scala over the years

• Learning Haskell and ClojureScript currently

• I pick whatever Language the situation requires

Page 10: Typescript vs Coffeescript vs ES6
Page 11: Typescript vs Coffeescript vs ES6

For simplicity I am going to refer to JavaScript language versions prior to ES6 as simply

“JavaScript”

Page 12: Typescript vs Coffeescript vs ES6

JavaScriptCoffeeScript Transpiles to TypeScriptTranspiles to

ES6

Extended by

Extended by

If Jeremy decides the feature is important,

can be extended by

Babel

Transpiles to

Overview of Languages and Transpilers

Page 13: Typescript vs Coffeescript vs ES6

Crash Course in the Languages

Page 14: Typescript vs Coffeescript vs ES6

Crash Course in ES6

Page 15: Typescript vs Coffeescript vs ES6

ES6 History

• JavaScript developed by Brendan Eich in 1995

• Netscape released in 1996 supporting JavaScript

• Microsoft created JScript dialect in 1996

• Ecma International standardized ECMA-262 to settle disputes between browser vendors

• ECMA-262 standardized ECMAScript

• ECMA-262 had 5 editions, with a 6th scheduled for mid 2015 (ES6)

Page 16: Typescript vs Coffeescript vs ES6

JavaScript Keywords

• break • case • catch • continue • debugger • default • delete • else

• finally • for • function • if • in • instanceof • new • return

• switch • this • throw • try • typeof • var • while • with

Page 17: Typescript vs Coffeescript vs ES6

ES6 Keywords

• break • case • class • catch • const • continue • debugger • default • delete • do • else • export

• extends • finally • for • function • if • import • in • instanceof • let • new • return • super

• switch • this • throw • try • typeof • var • void • while • with • yield

Page 18: Typescript vs Coffeescript vs ES6

E56 Features

• Arrow Functions

• Classes

• Enhanced object literals

• Template strings

• Destructuring

• default + rest + spread

• let + const

• iterators + for..of

• Generators

• Unicode

• Modules

• Module loaders

• map + set + weakmap + weakset

• Proxies

• Symbols

• Subclassable built-ins

• Promises

• math + number + string + array + object APIs

• Binary and Octal literals

• Reflect API

• Tail calls

https://github.com/lukehoban/es6features

Page 19: Typescript vs Coffeescript vs ES6
Page 20: Typescript vs Coffeescript vs ES6

Because lists of keywords and features are a poor way to compare languages, we are going to look at the same simple class implementation written in

each language.

Page 21: Typescript vs Coffeescript vs ES6

User

- id:int- firstName:String- lastName:String

+ getId():int+ getFirstName():String+ setFirstName(String):void+ getLastName():String+ setLastName(String):void

Page 22: Typescript vs Coffeescript vs ES6

user = new User(123, ‘John’, ‘Smith’)

Page 23: Typescript vs Coffeescript vs ES6

function User(id, firstName, lastName) { this.id = id; this.firstName = firstName; this.lastName = lastName; } User.prototype = { getId: function() { return this.id; }, getFirstName: function() { return this.firstName; }, getLastName: function() { return this.lastName; }, setFirstName: function(firstName) { this.firstName = firstName; }, setLastName: function(lastName) { this.lastName = lastName; } };

User

- id:int- firstName:String- lastName:String

+ getId():int+ getFirstName():String+ setFirstName(String):void+ getLastName():String+ setLastName(String):void

JavaScript

Page 24: Typescript vs Coffeescript vs ES6

class User { constructor(id, firstName, lastName) { this.id = id; this.firstName = firstName; this.lastName = lastName; } getId() { return this.id; } getFirstName() { return this.firstName; } setFirstName(firstName) { this.firstName = firstName; } getLastName() { return this.lastName; } setLastName(lastName) { this.lastName = lastName; } }

User

- id:int- firstName:String- lastName:String

+ getId():int+ getFirstName():String+ setFirstName(String):void+ getLastName():String+ setLastName(String):void

ES6

Page 25: Typescript vs Coffeescript vs ES6

ES6 Bottom Line

• ES6 has various features supported in various browsers

• If you want to use ES6 features in all browsers now use Babel

Page 26: Typescript vs Coffeescript vs ES6
Page 27: Typescript vs Coffeescript vs ES6

Crash Course in TypeScript

Page 28: Typescript vs Coffeescript vs ES6

TypeScript History

• Typescript was first made public in October 2012

• Anders Hejlsberg, lead architect of C# and creator of Delphi and Turbo Pascal, has worked on the development of TypeScript

• Originated from the perceived short-comings of JavaScript for the development of large-scale applications both at Microsoft and among their external customers.

• As TypeScript is a superset of JavaScript, any existing JavaScript programs are also valid TypeScript programs.

Page 29: Typescript vs Coffeescript vs ES6

TypeScript Features

• Type annotations

• Public/Private

• Compile-time type checking

• Type inference

• Interfaces

• Enums

• Mixin

• Generics

• Optional properties

• Tuple types

Page 30: Typescript vs Coffeescript vs ES6

class User { private id: number; private firstName: string; private lastName: string; constructor(id: number, firstName: string, lastName: string) { this.id = id; this.firstName = firstName; this.lastName = lastName; } getId() { return this.id; } getFirstName(): string { return this.firstName; } setFirstName(firstName: string) { this.firstName = firstName; } getLastName(): string { return this.lastName; } setLastName(lastName: string) : void { this.lastName = lastName; } }

User

- id:int- firstName:String- lastName:String

+ getId():int+ getFirstName():String+ setFirstName(String):void+ getLastName():String+ setLastName(String):void

TypeScript

Page 31: Typescript vs Coffeescript vs ES6

TypeScript Bottom Line

• If you are used to Java and C#, you should feel at home in TypeScript.

• If you hate looking at Type information, you should not use TypeScript.

• If believe in compile-time type checking, use TypeScript.

• If you have problems with Type-related bugs in JavaScript, use TypeScript.

• If you are not going to make use of Type annotations, just use ES6.

Page 32: Typescript vs Coffeescript vs ES6
Page 33: Typescript vs Coffeescript vs ES6

Crash Course in CoffeeScript

Page 34: Typescript vs Coffeescript vs ES6

CoffeeScript History

• Created by Jeremy Ashkenas, who also created Backbone.js and Underscore.js.

• First version released December 24th, 2010

• Goal was to create, “A language that takes out the frustrating and overly verbose bits of JS, and provides a safer, briefer way to stick to the good parts.”

Page 35: Typescript vs Coffeescript vs ES6

CoffeeScript Features

• Everything is an Expression (mostly)

• Whitespace to delimit blocks of code

• Optional parens

• Optional postfix

• Classes, Inheritance, and Super

• Operators and Aliases

• Iterations

• Splatting

• Comprehensions

• Arrow Functions

• Destructuring Assignments

• Chained Comparisons

• Block Strings

• Prototype Shorthand

• Parameters to Properties Binding

• Class/Static Functions

• Existential Operator

• Bound and Generator Functions

• Block Regular Expressions

• Default parameters

Page 36: Typescript vs Coffeescript vs ES6

class User constructor (@id, @firstName, @lastName) -> getId: -> @id getFirstName: -> @firstName setFirstName: (@firstName) -> getLastName: -> @lastName setLastName: (@lastName) ->

User

- id:int- firstName:String- lastName:String

+ getId():int+ getFirstName():String+ setFirstName(String):void+ getLastName():String+ setLastName(String):void

CoffeeScript

Page 37: Typescript vs Coffeescript vs ES6

CoffeeScript Bottom Line

• If you want as little “noise” as possible when reading you programs, use CoffeeScript.

• If you like Haskell and Ruby, you should like CoffeeScript.

• You are at Jeremy’s whim when it comes to ES6 language features (though you can use ES6 APIs)

Page 38: Typescript vs Coffeescript vs ES6
Page 39: Typescript vs Coffeescript vs ES6

Recap of Code Samples

Page 40: Typescript vs Coffeescript vs ES6

function User(id, firstName, lastName) { this.id = id; this.firstName = firstName; this.lastName = lastName; } User.prototype = { getId: function() { return this.id; }, getFirstName: function() { return this.firstName; }, getLastName: function() { return this.lastName; }, setFirstName: function(firstName) { this.firstName = firstName; }, setLastName: function(lastName) { this.lastName = lastName; } };

User

- id:int- firstName:String- lastName:String

+ getId():int+ getFirstName():String+ setFirstName(String):void+ getLastName():String+ setLastName(String):void

JavaScript

Page 41: Typescript vs Coffeescript vs ES6

class User { constructor(id, firstName, lastName) { this.id = id this.firstName = firstName this.lastName = lastName } getId() { return this.id } getFirstName() { return this.firstName } setFirstName(firstName) { this.firstName = firstName } getLastName() { return this.lastName } setLastName(lastName) { this.lastName = lastName } }

User

- id:int- firstName:String- lastName:String

+ getId():int+ getFirstName():String+ setFirstName(String):void+ getLastName():String+ setLastName(String):void

ES6

Page 42: Typescript vs Coffeescript vs ES6

class User { private id: number; private firstName: string; private lastName: string; constructor(id: number, firstName: string, lastName: string) { this.id = id; this.firstName = firstName; this.lastName = lastName; } getId() { return this.id; } getFirstName() : string { return this.firstName; } setFirstName(firstName: string) { this.firstName = firstName; } getLastName() : string { return this.lastName; } setLastName(lastName: string) : void { this.lastName = lastName; } }

User

- id:int- firstName:String- lastName:String

+ getId():int+ getFirstName():String+ setFirstName(String):void+ getLastName():String+ setLastName(String):void

TypeScript

Page 43: Typescript vs Coffeescript vs ES6

class User constructor (@id, @firstName, @lastName) -> getId: -> @id getFirstName: -> @firstName setFirstName: (@firstName) -> getLastName: -> @lastName setLastName: (@lastName) ->

User

- id:int- firstName:String- lastName:String

+ getId():int+ getFirstName():String+ setFirstName(String):void+ getLastName():String+ setLastName(String):void

CoffeeScript

Page 44: Typescript vs Coffeescript vs ES6

Key Selection Criteria

Page 45: Typescript vs Coffeescript vs ES6

Language Features

Page 46: Typescript vs Coffeescript vs ES6

TypeScript has many features for you to use

Page 47: Typescript vs Coffeescript vs ES6

class Sphere implements Thing { public radius2: number; constructor(public center: Vector, radius: number, public surface: Surface) { this.radius2 = radius * radius; } normal(pos: Vector): Vector { return Vector.norm(Vector.minus(pos, this.center)); } intersect(ray: Ray) { var eo = Vector.minus(this.center, ray.start); var v = Vector.dot(eo, ray.dir); var dist = 0; if (v >= 0) { var disc = this.radius2 - (Vector.dot(eo, eo) - v * v); if (disc >= 0) { dist = v - Math.sqrt(disc); } } if (dist === 0) { return null; } else { return { thing: this, ray: ray, dist: dist }; } } }

Page 48: Typescript vs Coffeescript vs ES6

CoffeeScript has many features for you to use

Page 49: Typescript vs Coffeescript vs ES6

launch() if ignition is on volume = 10 if band isnt SpinalTap letTheWildRumpusBegin() unless answer is no if car.speed < limit then accelerate() winner = yes if pick in [47, 92, 13] print inspect "My name is #{@name}“ solipsism = true if mind? and not world? speed = 0 speed ?= 15 footprints = yeti ? "bear“ grade = (student) -> if student.excellentWork "A+" else if student.okayStuff if student.triedHard then "B" else "B-" else "C" eldest = if 24 > 21 then "Liz" else "Ike"

Page 50: Typescript vs Coffeescript vs ES6

ES6 has many features for you to use

Page 51: Typescript vs Coffeescript vs ES6

function* anotherGenerator(i) { yield i + 1; yield i + 2; yield i + 3; } function* generator(i){ yield i; yield* anotherGenerator(i); yield i + 10; } var gen = generator(10); console.log(gen.next().value); // 10 console.log(gen.next().value); // 11 console.log(gen.next().value); // 12 console.log(gen.next().value); // 13 console.log(gen.next().value); // 20 function letTest() { let x = 31; if (true) { let x = 71; // different variable console.log(x); // 71 } console.log(x); // 31 }

Page 52: Typescript vs Coffeescript vs ES6

Understandability

Page 53: Typescript vs Coffeescript vs ES6

I am a happy coder

English

Page 54: Typescript vs Coffeescript vs ES6

Ich bin ein glücklicher Coder

German

Page 55: Typescript vs Coffeescript vs ES6

Ik ben een gelukkig coder

Dutch

Page 56: Typescript vs Coffeescript vs ES6

Je suis un codeur heureux

Fench

Page 57: Typescript vs Coffeescript vs ES6

Soy un codificador feliz

Spanish

Page 58: Typescript vs Coffeescript vs ES6

나는행복 코더 입니다

Korean

Page 59: Typescript vs Coffeescript vs ES6

我是一个快乐编码器

Chinese

Page 60: Typescript vs Coffeescript vs ES6

The more familiar you are with the language, the easier it is to understand

Page 61: Typescript vs Coffeescript vs ES6

I am a happy coder

Page 62: Typescript vs Coffeescript vs ES6

Happy, a coder I am

Page 63: Typescript vs Coffeescript vs ES6

Me happy with be coder

Page 64: Typescript vs Coffeescript vs ES6

i ‘m hppy cdr

Page 65: Typescript vs Coffeescript vs ES6

I I am am a a happy happy coder coder

Page 66: Typescript vs Coffeescript vs ES6

John Smith writes Java code, and as a result feels the emotion of happiness.

Page 67: Typescript vs Coffeescript vs ES6

I am, you see, someone who is in fact, indubitably, and unerringly, beyond a shadow of a doubt someone who, in

truth, does truly greatly enjoy – nay, is - indeed happy being a coder.

Page 68: Typescript vs Coffeescript vs ES6

Once, when I was a boy, I dreamed of a life where I could be happy. Happy, that is, in not just anything. No, it would have to be

something that I enjoyed – something perhaps I could not live without. “What

could this thing be?” I asked myself. Coding. It was coding that filled my head

with overwhelming joy. Joy before which I had never known. To code is to know

happiness. To be happy is to code. I am a coder, and therefore, I am happy.

Page 69: Typescript vs Coffeescript vs ES6

The more well written the language, the easier it is to understand

Page 70: Typescript vs Coffeescript vs ES6

Bug Prevention

Page 71: Typescript vs Coffeescript vs ES6

TypeScript compile-time type checking is thought to lead to fewer bugs, especially in larger code bases

Page 72: Typescript vs Coffeescript vs ES6

class FizzBuzz { static fizz = 'Fizz'; static buzz = 'Buzz'; generate(input: number): string { var output = ''; if (input % 3 === 0) { output += FizzBuzz.fizz; } if (input % 5 === 0) { output += FizzBuzz.buzz; } return output === '' ? input.toString() : output; } }

Page 73: Typescript vs Coffeescript vs ES6

normalNumbersReturnOriginalNumber() { this.areIdentical('1', target.generate(1)); this.areIdentical('2', target.generate(2)); this.areIdentical('4', target.generate(4)); } numberDivisibleByThreeShouldReturnFizz() { this.areIdentical(FizzBuzz.fizz, target.generate(3)); this.areIdentical(FizzBuzz.fizz, target.generate(6)); this.areIdentical(FizzBuzz.fizz, target.generate(9)); } numbersDivisibleByFiveShouldReturnBuzz() { this.areIdentical(FizzBuzz.buzz, target.generate(5)); this.areIdentical(FizzBuzz.buzz, target.generate(10)); this.areIdentical(FizzBuzz.buzz, target.generate(20)); } numbersDivisibleByThreeAndFiveShouldReturnFizzBuzz() { this.areIdentical(FizzBuzz.fizz + FizzBuzz.buzz, target.generate(15)); this.areIdentical(FizzBuzz.fizz + FizzBuzz.buzz, target.generate(30)); this.areIdentical(FizzBuzz.fizz + FizzBuzz.buzz, target.generate(45)); }

Page 74: Typescript vs Coffeescript vs ES6

CoffeeScript, because of its brevity, is thought to reveal bugs more easily.

Page 75: Typescript vs Coffeescript vs ES6

class FizzBuzz @fizz = 'Fizz' @buzz = 'Buzz' generate: (input) -> output = '' output += @fizz if input % 3 is 0 output += @buzz if input % 5 is 0 if output is '' then input.toString() else output

Page 76: Typescript vs Coffeescript vs ES6

normalNumbersReturnOriginalNumber = -> @areIdentical '1', target.generate 1 @areIdentical '2', target.generate 2 @areIdentical '4', target.generate 4 numberDivisibleByThreeShouldReturnFizz = -> @areIdentical FizzBuzz.fizz, target.generate 3 @areIdentical FizzBuzz.fizz, target.generate 6 @areIdentical FizzBuzz.fizz, target.generate 9 numbersDivisibleByFiveShouldReturnBuzz = -> @areIdentical FizzBuzz.buzz, target.generate 5 @areIdentical FizzBuzz.buzz, target.generate 10 @areIdentical FizzBuzz.buzz, target.generate 20 numbersDivisibleByThreeAndFiveShouldReturnFizzBuzz = -> @areIdentical FizzBuzz.fizz + FizzBuzz.buzz, target.generate 15 @areIdentical FizzBuzz.fizz + FizzBuzz.buzz, target.generate 30 @areIdentical FizzBuzz.fizz + FizzBuzz.buzz, target.generate 45

Page 77: Typescript vs Coffeescript vs ES6

Making a Decision

Page 78: Typescript vs Coffeescript vs ES6

Picking Something based on Features

Page 79: Typescript vs Coffeescript vs ES6
Page 80: Typescript vs Coffeescript vs ES6

My Most Used Features on iPhone First Gen

1. Apps

2. Taking Pictures

3. Checking Email

4. Browsing Internet

5. Text Messaging

6. Making phone calls

Page 81: Typescript vs Coffeescript vs ES6
Page 82: Typescript vs Coffeescript vs ES6

New Features in iPhone 6

• More Bigger

• More Thinner

• More Better Camera

• More Faster Processor

• More Sensors

• More Better Keyboard

• Apple Pay

Page 83: Typescript vs Coffeescript vs ES6

My Most Used Features on iPhone 6

1. Apps

2. Taking Pictures

3. Checking Email

4. Browsing Internet

5. Text Messaging

6. Making phone calls

Page 84: Typescript vs Coffeescript vs ES6
Page 85: Typescript vs Coffeescript vs ES6

Giving Context to Understandability

Page 86: Typescript vs Coffeescript vs ES6
Page 87: Typescript vs Coffeescript vs ES6
Page 88: Typescript vs Coffeescript vs ES6
Page 89: Typescript vs Coffeescript vs ES6

“Dad, there’s a weird van in front of my house”

Page 90: Typescript vs Coffeescript vs ES6
Page 91: Typescript vs Coffeescript vs ES6
Page 92: Typescript vs Coffeescript vs ES6

“Officer, my daughter has a weird van in front of her house. She lives on 7890 Chesapeake Lane.”

Page 93: Typescript vs Coffeescript vs ES6
Page 94: Typescript vs Coffeescript vs ES6
Page 95: Typescript vs Coffeescript vs ES6

“…Van is a 1996-year Plymouth Green Minivan with gray lower trim parked in front of 7890 Chesapeake

Lane.”

Page 96: Typescript vs Coffeescript vs ES6
Page 97: Typescript vs Coffeescript vs ES6
Page 98: Typescript vs Coffeescript vs ES6

Properly Prioritizing Bug Prevention

Page 99: Typescript vs Coffeescript vs ES6
Page 100: Typescript vs Coffeescript vs ES6
Page 101: Typescript vs Coffeescript vs ES6
Page 102: Typescript vs Coffeescript vs ES6

$1 Billion

$100 Million

x 1.48 = F-35

x 13 = Carrier

Page 103: Typescript vs Coffeescript vs ES6
Page 104: Typescript vs Coffeescript vs ES6
Page 105: Typescript vs Coffeescript vs ES6
Page 106: Typescript vs Coffeescript vs ES6

x 1 = Your Ass

Page 107: Typescript vs Coffeescript vs ES6

My Advice

Page 108: Typescript vs Coffeescript vs ES6

Use TypeScript if…

• You love Java/C# and hate JavaScript

• You use Microsoft Visual Studio, or generally like IDE refactoring support.

• You find yourself doing a lot of instanceof/type of guards in your JavaScript to prevent bugs

• You know that a lot of your bugs could be caught by Type checking

• You have a large, divergently skilled team who don’t have the opportunity to mesh/gel together on code conventions.

Page 109: Typescript vs Coffeescript vs ES6

Use CoffeeScript if…

• You love Haskell/Ruby and hate JavaScript

• You believe that brevity leads to fewer bugs than verbosity.

• You hate looking at “noise” in your code

• You are going to take advantage of CoffeeScript language features.

• You trust that Jeremy will keep his language up-to-date with ES6 features

Page 110: Typescript vs Coffeescript vs ES6

Use ES6 if…

• You love JavaScript

• You don’t want to use the Type checking in TypeScript.

• You don’t want to ever miss out on features because they are not added to CoffeeScript.

• You want to be a part of the largest development community, rather than a subset.

Page 111: Typescript vs Coffeescript vs ES6
Page 112: Typescript vs Coffeescript vs ES6
Page 113: Typescript vs Coffeescript vs ES6
Page 114: Typescript vs Coffeescript vs ES6

Questions? (remember to be nice)

Page 115: Typescript vs Coffeescript vs ES6

Thank you! @neilfeyn