Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

TypeScript vs. CoffeeScript vs. ES6

100,796 views

Published on

*** Visit my blog at neilonsoftware.com

Google Trends says it all: TypeScript is on the rise as CoffeeScript declines, with ES6 slowly gaining popularity. I would like to explore the differences between the 2 transpiles-to-javascript languages (TypeScript and CoffeeScript) and discuss their relevancy as new JavaScript capabilities become available in ES6

Published in: Software

TypeScript vs. CoffeeScript vs. ES6

  1. 1. by Neil Green (neilonsoftware.com)
  2. 2. (Please hold questions until the end)
  3. 3. 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.)
  4. 4. To keep everyone calm and relaxed before and/or after stressful slides, periodically photos of cute kittens will be shown.
  5. 5. Understanding My Perspective
  6. 6. 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!
  7. 7. 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.
  8. 8. 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
  9. 9. For simplicity I am going to refer to JavaScript language versions prior to ES6 as simply “JavaScript”
  10. 10. 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
  11. 11. Crash Course in the Languages
  12. 12. Crash Course in ES6
  13. 13. 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)
  14. 14. 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
  15. 15. 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
  16. 16. 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
  17. 17. 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.
  18. 18. User - id:int - firstName:String - lastName:String + getId():int + getFirstName():String + setFirstName(String):void + getLastName():String + setLastName(String):void
  19. 19. user = new User(123, ‘John’, ‘Smith’)
  20. 20. 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
  21. 21. 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
  22. 22. ES6 Bottom Line • ES6 has various features supported in various browsers • If you want to use ES6 features in all browsers now use Babel
  23. 23. Crash Course in TypeScript
  24. 24. 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.
  25. 25. TypeScript Features • Type annotations • Public/Private • Compile-time type checking • Type inference • Interfaces • Enums • Mixin • Generics • Optional properties • Tuple types
  26. 26. 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
  27. 27. 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.
  28. 28. Crash Course in CoffeeScript
  29. 29. 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.”
  30. 30. 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
  31. 31. 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
  32. 32. 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)
  33. 33. Recap of Code Samples
  34. 34. 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
  35. 35. 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
  36. 36. 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
  37. 37. 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
  38. 38. Key Selection Criteria
  39. 39. Language Features
  40. 40. TypeScript has many features for you to use
  41. 41. 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 }; } } }
  42. 42. CoffeeScript has many features for you to use
  43. 43. 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"
  44. 44. ES6 has many features for you to use
  45. 45. 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 }
  46. 46. Understandability
  47. 47. I am a happy coder English
  48. 48. Ich bin ein glücklicher Coder German
  49. 49. Ik ben een gelukkig coder Dutch
  50. 50. Je suis un codeur heureux Fench
  51. 51. Soy un codificador feliz Spanish
  52. 52. 나는행복 코더 입니다 Korean
  53. 53. 我是一个快乐编码器 Chinese
  54. 54. The more familiar you are with the language, the easier it is to understand
  55. 55. I am a happy coder
  56. 56. Happy, a coder I am
  57. 57. Me happy with be coder
  58. 58. i ‘m hppy cdr
  59. 59. I I am am a a happy happy coder coder
  60. 60. John Smith writes Java code, and as a result feels the emotion of happiness.
  61. 61. 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.
  62. 62. 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.
  63. 63. The more well written the language, the easier it is to understand
  64. 64. Bug Prevention
  65. 65. TypeScript compile-time type checking is thought to lead to fewer bugs, especially in larger code bases
  66. 66. 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; } }
  67. 67. 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)); }
  68. 68. CoffeeScript, because of its brevity, is thought to reveal bugs more easily.
  69. 69. 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
  70. 70. 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
  71. 71. Making a Decision
  72. 72. Picking Something based on Features
  73. 73. 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
  74. 74. New Features in iPhone 6 • More Bigger • More Thinner • More Better Camera • More Faster Processor • More Sensors • More Better Keyboard • Apple Pay
  75. 75. 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
  76. 76. Giving Context to Understandability
  77. 77. “Dad, there’s a weird van in front of my house”
  78. 78. “Officer, my daughter has a weird van in front of her house. She lives on 7890 Chesapeake Lane.”
  79. 79. “…Van is a 1996-year Plymouth Green Minivan with gray lower trim parked in front of 7890 Chesapeake Lane.”
  80. 80. Properly Prioritizing Bug Prevention
  81. 81. $1 Billion $100 Million x 1.48 = F-35 x 13 = Carrier
  82. 82. x 1 = Your Ass
  83. 83. My Advice
  84. 84. 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.
  85. 85. 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
  86. 86. 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.
  87. 87. Questions? (remember to be nice)
  88. 88. Thank you! @neilfeyn

×