CoffeeScript: The Good Parts The good and not so good parts of Co ff - - PowerPoint PPT Presentation

▶
coffeescript the good parts
SMART_READER_LITE
LIVE PREVIEW

CoffeeScript: The Good Parts The good and not so good parts of Co ff - - PowerPoint PPT Presentation

Apr 18, 2023 162 likes •614 views

webapplog.com CoffeeScript: The Good Parts The good and not so good parts of Co ff eeScript in comparison to JavaScript @azat_co 1 webapplog.com About The Presenter Azat Mardan Worked in the US government, startups and corporations

slide-1
SLIDE 1

webapplog.com @azat_co

CoffeeScript: The Good Parts

The good and not so good parts of CoffeeScript in comparison to JavaScript

1

slide-2
SLIDE 2

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)

  • Certified yoga teacher and paleo lifestyle

enthusiast Azat Mardan

2

slide-3
SLIDE 3

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

webapplog.com @azat_co

Who likes /uses CoffeeScript already?

4

slide-5
SLIDE 5

webapplog.com @azat_co

Please be open-minded

5

slide-6
SLIDE 6

webapplog.com @azat_co

Blub Paradox

6

  • Blub paradox: devs are satisfied 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

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

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

webapplog.com @azat_co

“CoffeeScript is a little language that compiles into JavaScript.” — coffeescript.org

9

slide-10
SLIDE 10

webapplog.com @azat_co

TOC for v1.7.1

Maybe CoffeeScript is not so small anymore?

10

slide-11
SLIDE 11

webapplog.com @azat_co

JavaScript

11

slide-12
SLIDE 12

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

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

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

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

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

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

webapplog.com @azat_co

Function Declaration

  • Skinny arrow (->) saves time typing “function” over and
  • ver again
  • Fat arrow (=>), i.e., no need to use “var that = this” or “var

self = this”

18

slide-19
SLIDE 19

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

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

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

webapplog.com @azat_co

Scoping

  • Manual “var” is banned
  • Variables declared in the scope in which they are

encountered first (i.e., the order in which variables used determines their scope).

22

slide-23
SLIDE 23

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

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

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

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

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

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

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

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

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

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

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

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

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

webapplog.com @azat_co

https://github.com/michaelficarra/coffee-of-my- dreams CoffeeScript of My Dreams

slide-37
SLIDE 37

webapplog.com @azat_co

How to Get Started

$ npm install -g coffee-script $ coffee >…

37

slide-38
SLIDE 38

webapplog.com @azat_co

Companies that use CoffeeScript

38

  • GitHub
  • Dropbox
  • DocuSign
  • Airbnb (mobile)
  • HotelTonight
  • Basecamp (mobile)
slide-39
SLIDE 39

webapplog.com @azat_co

Further Reading

CoffeeScript FUNdamentals: The Better JavaScript http://bit.ly/1nD4dE3

39

slide-40
SLIDE 40

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

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

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

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

webapplog.com @azat_co

Discussion and Q&A Time

Questions, thoughts and experiences?

44