CoffeeScript: The Good Parts

Slide 1

Slide 1 text

webapplog.com @azat_co CoffeeScript: The Good Parts The good and not so good parts of CoﬀeeScript in comparison to JavaScript 1

Slide 2

Slide 2 text

webapplog.com @azat_co About The Presenter • Worked in the US government, startups and corporations • Wrote six books on JavaScript and Node.js (the latest is Practical Node.js by Apress) • Certiﬁed yoga teacher and paleo lifestyle enthusiast Azat Mardan 2

Slide 3

Slide 3 text

webapplog.com @azat_co Fun story: “CoffeeScript is a solution without a problem” I used to make fun of CoffeeScript, before falling in love with it. 3

Slide 4

Slide 4 text

webapplog.com @azat_co Who likes /uses CoffeeScript already? 4

Slide 5

Slide 5 text

webapplog.com @azat_co Please be open-minded 5

Slide 6

Slide 6 text

webapplog.com @azat_co Blub Paradox 6 ! Blub paradox: devs are satisﬁed with whatever language they happen to use, because it dictates the way they think about programs. http://en.wikipedia.org/wiki/ Paul_Graham_(computer_programmer)#Blub

Slide 7

Slide 7 text

webapplog.com @azat_co CoffeeScript’s Bad Rep Most of the people who say bad things about CoffeeScript have never built with it anything relatively large-scale and production-ready. 7

Slide 8

Slide 8 text

webapplog.com @azat_co CoffeeScript at DocuSign DocuSign stack: CoffeeScript+Node.js+Backbone.js+Grunt Observation: front-end developers, after only a few weeks of CoffeeScript, didn’t want to go back to regular JavaScript! 8

Slide 9

Slide 9 text

webapplog.com @azat_co “CoffeeScript is a little language that compiles into JavaScript.” — coffeescript.org 9

Slide 10

Slide 10 text

webapplog.com @azat_co TOC for v1.7.1 Maybe CoﬀeeScript is not so small anymore? 10

Slide 11

Slide 11 text

webapplog.com @azat_co JavaScript 11

Slide 12

Slide 12 text

webapplog.com @azat_co Native JavaScript Issues • == vs === • Functional inheritance vs pseudo-classical • Global variable leakage (missing var) • Many others 12

Slide 13

Slide 13 text

webapplog.com @azat_co CoffeeScript: The Good Parts (some of them) • Syntax: curly braces, parentheses and semicolons • Function declaration: -> and => • Scoping: automatic var • Iterators / comprehensions: replacement of for loops • Class declaration: class operand 13

Slide 14

Slide 14 text

webapplog.com @azat_co Syntax • No semicolons, i.e., they are banned • Logical blocks can omit curly braces • Function calls can omit parentheses 14

Slide 15

Slide 15 text

webapplog.com @azat_co Why Semicolons are Bad? (*IMHO) • Extra time&work to put them • If missed, inconsistent but working code • Redundant/not-needed (expect in two cases) • Semicolon Insertion (ASI) 15

Slide 16

Slide 16 text

webapplog.com @azat_co Logical Blocks (optional curly braces) kids = brother: name: "Max" age: 11 sister: name: "Ida" age: 9 16

Slide 17

Slide 17 text

webapplog.com @azat_co Function calls console.log object.class ! $('.account').attr class: ‘active’ ! $(‘button’).css color: red “font-size”: “16px” 17

Slide 18

Slide 18 text

webapplog.com @azat_co Function Declaration • Skinny arrow (->) saves time typing “function” over and over again • Fat arrow (=>), i.e., no need to use “var that = this” or “var self = this” 18

Slide 19

Slide 19 text

webapplog.com @azat_co Function Declaration Elegance a = (x,y) -> console.log x+y var a; ! a = function(x, y) { return console.log(x + y); }; ! a(10, -5); CoffeeScript: JavaScript: 19

Slide 20

Slide 20 text

webapplog.com @azat_co Function Declaration: Skinny Arrow console.log @ $('div').click ()-> console.log @ console.log(this); $('div').click(function() { return console.log(this); }); CoffeeScript: JavaScript: Prints “window” and DOM elements i.e., “this” changes and @ changes too 20

Slide 21

Slide 21 text

webapplog.com @azat_co Function Declaration: Fat Arrow console.log @ $('div').click ()=> console.log @ var _this = this; ! console.log(this); ! $('div').click(function() { return console.log(_this); }); CoffeeScript: JavaScript: Prints “window” both times (i.e., the outer scope) 21

Slide 22

Slide 22 text

webapplog.com @azat_co Scoping • Manual “var” is banned • Variables declared in the scope in which they are encountered ﬁrst (i.e., the order in which variables used determines their scope). 22

Slide 23

Slide 23 text

webapplog.com @azat_co Why auto vars are good? Missed “var” Example. var a = function (c) { b = 10; return b + c; } console.log(a(0)); ! b is window.b — bad! var a = function(c) { var b = 10; return b + c; }; console.log(a(0)); ! b is a private attribute — what we wanted! CoffeeScript: JavaScript: 23

Slide 24

Slide 24 text

webapplog.com @azat_co Scoping: Example I b = 1 a = -> b = -1 ! a() console.log b var a, b; b = 1; a = function() { return b = -1; }; a(); console.log(b); CoffeeScript: JavaScript: 24

Slide 25

Slide 25 text

webapplog.com @azat_co Scoping: Example II a = -> b = -1 b = 1 a() console.log b var a, b; a = function() { var b; return b = -1; }; b = 1; a(); console.log(b); CoffeeScript: JavaScript: 25

Slide 26

Slide 26 text

webapplog.com @azat_co Iterators / Comprehensions (for loops) Awesome time savers! Good for arrays and objects: ! for item, index in arrayObject iterator(item) ! for key, value of object iterator(item) ! ! ! ! ! 26

Slide 27

Slide 27 text

webapplog.com @azat_co Iterating over an Array for item, index in arrayObject iterator(item) var index, item, _i, _len; ! for (index = _i = 0, _len = arrayObject.length; _i < _len; index = ++_i) { item = arrayObject[index]; iterator(item); } CoffeeScript: JavaScript: 27

Slide 28

Slide 28 text

webapplog.com @azat_co Iterating over an Object for key, value of object iterator(value) var key, value; ! for (key in object) { value = object[key]; iterator(value); } CoffeeScript: JavaScript: 28

Slide 29

Slide 29 text

webapplog.com @azat_co Iterators / Comprehensions (for loops) II Many options: ! iterator (item) for item in arrayObject ! iterator item for item in arrayObject ! iterator item for item in arrayObject when item > 0 ! ! ! ! ! ! 29

Slide 30

Slide 30 text

webapplog.com @azat_co Class Declaration • In JavaScript classes are absent at all! • CoffeeScript eloquently implements Pseudo-classical inheritance pattern: “new” and capitalized name (“new Animal”, “new Vehicle”, etc.) • Pseudo-classical is hard and cumbersome without CS • CoffeeScript “constructor” method and “super” call 30

Slide 31

Slide 31 text

webapplog.com @azat_co Class Example class Vehicle constructor: (@name) -> move: (meters) -> console.log @name + " moved #{meters} miles.” ! camry = new Vehicle "Camry" camry.move(50) CoffeeScript: Output: Camry moved 50 miles. 31

Slide 32

Slide 32 text

webapplog.com @azat_co Class Example var Vehicle, camry; ! Vehicle = (function() { function Vehicle(name) { this.name = name; } ! Vehicle.prototype.move = function(meters) { return console.log(this.name + (" moved " + meters + " miles.")); }; ! return Vehicle; ! })(); ! camry = new Vehicle("Camry"); ! camry.move(50); JavaScript: 2x: 6 vs 12 lines of code! 32

Slide 33

Slide 33 text

webapplog.com @azat_co Other CoffeeScript Goodies • Splats (e.g., “options…”) • Conditions (if, isnt, not, and, or, unless) • Arrays and their slicing (arr = [1..10], slicedArr = arr[2..4]) 33

Slide 34

Slide 34 text

webapplog.com @azat_co CoffeeScript: The Good Parts Summary • Syntax: curly braces, parentheses and semicolons • Function Declaration: -> and => • Scoping: automatic var • Iterators / Comprehensions: replacement of for loops • Class Declaration: class operand 34

Slide 35

Slide 35 text

webapplog.com @azat_co CoffeeScript: Not So Good Parts • Learning: 1-2 day, free online ebooks • Compilation: extra build step (use Grunt or similar) • Parentheses: optional and cause misinterpretation • Debugging: use source-maps 35

Slide 36

Slide 36 text

webapplog.com @azat_co https://github.com/michaelﬁcarra/coffee-of-my- dreams CoffeeScript of My Dreams

Slide 37

Slide 37 text

webapplog.com @azat_co How to Get Started $ npm install -g coffee-script $ coffee >… 37

Slide 38

Slide 38 text

webapplog.com @azat_co Companies that use CoffeeScript 38 • GitHub • Dropbox • DocuSign • Airbnb (mobile) • HotelTonight • Basecamp (mobile)

Slide 39

Slide 39 text

webapplog.com @azat_co Further Reading CoffeeScript FUNdamentals: The Better JavaScript http://bit.ly/1nD4dE3 39

Slide 40

Slide 40 text

webapplog.com @azat_co CoffeeScript Ebooks • The Little Book on CoffeeScript (free onine) • CoffeeScript Cookbook (free online) • Smooth CoffeeScript (free online) • CoffeeScript Ristretto (free online) 40

Slide 41

Slide 41 text

webapplog.com @azat_co Future / Alternatives 41 • Dart (early stage) • TypeScript: MicroSoft project • ECMAScript 6: be careful with old browsers, use shims, fully available after June 2015 • Sweet.js: macros!

Slide 42

Slide 42 text

webapplog.com @azat_co Conclusions 42 • Good for enterprise and large team, because it’s easer to have common style, e.g., https://github.com/styleguide/ javascript • Good for developers new to JavaScript and those coming from OOP languages (Java, Ruby) • Cross-browser / old browser support • More productive and happier developers (after learning) • Tested, robust, and available now • Awesome with Backbone.js and Underscore.js

Slide 43

Slide 43 text

webapplog.com @azat_co Session Summary • Native JavaScript Issues • CoffeeScript: The Good Parts • How to Get Started • Future / Alternatives • Conclusions 43

Slide 44

Slide 44 text

webapplog.com @azat_co Discussion and Q&A Time Questions, thoughts and experiences? 44