Download - Typescript vs Coffeescript vs ES6
![Page 1: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/1.jpg)
by Neil Green (@neilfeyn)
![Page 2: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/2.jpg)
(Please hold questions until the end)
![Page 3: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/3.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/4.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/5.jpg)
![Page 6: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/6.jpg)
Understanding My Perspective
![Page 7: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/7.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/8.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/9.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/10.jpg)
![Page 11: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/11.jpg)
For simplicity I am going to refer to JavaScript language versions prior to ES6 as simply
“JavaScript”
![Page 12: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/12.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/13.jpg)
Crash Course in the Languages
![Page 14: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/14.jpg)
Crash Course in ES6
![Page 15: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/15.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/16.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/17.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/18.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/19.jpg)
![Page 20: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/20.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/21.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/22.jpg)
user = new User(123, ‘John’, ‘Smith’)
![Page 23: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/23.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/24.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/25.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/26.jpg)
![Page 27: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/27.jpg)
Crash Course in TypeScript
![Page 28: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/28.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/29.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/30.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/31.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/32.jpg)
![Page 33: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/33.jpg)
Crash Course in CoffeeScript
![Page 34: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/34.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/35.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/36.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/37.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/38.jpg)
![Page 39: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/39.jpg)
Recap of Code Samples
![Page 40: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/40.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/41.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/42.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/43.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/44.jpg)
Key Selection Criteria
![Page 45: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/45.jpg)
Language Features
![Page 46: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/46.jpg)
TypeScript has many features for you to use
![Page 47: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/47.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/48.jpg)
CoffeeScript has many features for you to use
![Page 49: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/49.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/50.jpg)
ES6 has many features for you to use
![Page 51: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/51.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/52.jpg)
Understandability
![Page 53: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/53.jpg)
I am a happy coder
English
![Page 54: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/54.jpg)
Ich bin ein glücklicher Coder
German
![Page 55: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/55.jpg)
Ik ben een gelukkig coder
Dutch
![Page 56: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/56.jpg)
Je suis un codeur heureux
Fench
![Page 57: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/57.jpg)
Soy un codificador feliz
Spanish
![Page 58: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/58.jpg)
나는행복 코더 입니다
Korean
![Page 59: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/59.jpg)
我是一个快乐编码器
Chinese
![Page 60: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/60.jpg)
The more familiar you are with the language, the easier it is to understand
![Page 61: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/61.jpg)
I am a happy coder
![Page 62: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/62.jpg)
Happy, a coder I am
![Page 63: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/63.jpg)
Me happy with be coder
![Page 64: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/64.jpg)
i ‘m hppy cdr
![Page 65: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/65.jpg)
I I am am a a happy happy coder coder
![Page 66: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/66.jpg)
John Smith writes Java code, and as a result feels the emotion of happiness.
![Page 67: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/67.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/68.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/69.jpg)
The more well written the language, the easier it is to understand
![Page 70: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/70.jpg)
Bug Prevention
![Page 71: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/71.jpg)
TypeScript compile-time type checking is thought to lead to fewer bugs, especially in larger code bases
![Page 72: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/72.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/73.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/74.jpg)
CoffeeScript, because of its brevity, is thought to reveal bugs more easily.
![Page 75: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/75.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/76.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/77.jpg)
Making a Decision
![Page 78: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/78.jpg)
Picking Something based on Features
![Page 79: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/79.jpg)
![Page 80: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/80.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/81.jpg)
![Page 82: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/82.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/83.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/84.jpg)
![Page 85: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/85.jpg)
Giving Context to Understandability
![Page 86: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/86.jpg)
![Page 87: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/87.jpg)
![Page 88: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/88.jpg)
![Page 89: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/89.jpg)
“Dad, there’s a weird van in front of my house”
![Page 90: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/90.jpg)
![Page 91: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/91.jpg)
![Page 92: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/92.jpg)
“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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/93.jpg)
![Page 94: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/94.jpg)
![Page 95: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/95.jpg)
“…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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/96.jpg)
![Page 97: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/97.jpg)
![Page 98: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/98.jpg)
Properly Prioritizing Bug Prevention
![Page 99: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/99.jpg)
![Page 100: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/100.jpg)
![Page 101: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/101.jpg)
![Page 102: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/102.jpg)
$1 Billion
$100 Million
x 1.48 = F-35
x 13 = Carrier
![Page 103: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/103.jpg)
![Page 104: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/104.jpg)
![Page 105: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/105.jpg)
![Page 106: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/106.jpg)
x 1 = Your Ass
![Page 107: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/107.jpg)
My Advice
![Page 108: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/108.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/109.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/110.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/111.jpg)
![Page 112: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/112.jpg)
![Page 113: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/113.jpg)
![Page 114: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/114.jpg)
Questions? (remember to be nice)
![Page 115: Typescript vs Coffeescript vs ES6](https://reader034.vdocument.in/reader034/viewer/2022050802/55cf8626550346484b94c3e3/html5/thumbnails/115.jpg)
Thank you! @neilfeyn