Coffeescript. Javascript the good parts

Transkript

1 Coffeescript Javascript the good parts

2 Sebastian Deutsch Follow me on Twitter:

3 Wenn ich JAVA höre,

4 dann sehe ich...

5

6 Als ich angefangen habe, wollte ich aber eher so sein...

7

8 Be a Rebel Jede Kultur hat ihre Rebellen Jede Kultur hat ihr Imperium

9 ...die Seiten wechseln ist nicht schlimm

10 Am JavaScript Day bin ich der CoffeeScript Rebel

11 Was ist CoffeeScript CoffeeScript ist ein Präprozessor für JS Alternative Syntax Forciert expressiven Code

12 Was ist CoffeeScript CoffeeScript ist Compiler Nutzt Jison Als Node.js Utility verfügbar

13 Getting started npm install coffee-script brew install coffee-script coffee --version

14 Zutaten

15 Significant Whitespace Kulturschock: Blöcke = Indentation Alles sind Expressions Das letzte evaluierte Objekt wird zurückgegeben

16 Beispiel JavaScript var cube, square; square = function(x) { return x * x; }; cube = function(x) { return square(x) * x; };

17 Beispiel JavaScript square = function(x) return x * x cube = function(x) return square(x) * x Implizite Deklaration von Variablen Keine Klammern, keine Semikolons

18 Beispiel JavaScript square = (x) -> x * x cube = (x) -> square(x) * x Funktion Keyword durch -> ersetzen Der letze evaluierte Wert wird zurückgegeben

19 CoffeScript...

20 ...entfernt visuellen Lärm

21 OK Was noch?

22 Variablen CoffeeScript: number = 42 opposite = true alpha = ["a","b","c"] bitlist = [ 1, 0, 1 ] 0, 0, 1 1, 1, 0 JavaScript: var alpha, bitlist, number, opposite; number = 42; opposite = true; alpha = ["a", "b", "c"]; bitlist = [1, 0, 1, 0, 0, 1, 1, 1, 0];

23 Kontrollstrukturen number = -42 if opposite number = 1337 unless no_hacker if happy and knowsit claps_hands() do cha_cha_cha else show_it() Bedingungen können wie in Ruby eingesetzt werden

24 Switch switch day when "mon" then go "work" when "tue" then go "relax" when "thu" then go "ice fishing" when "fri", sat if "day" is "bingo_day" go "bingo" go "dancing" when "sun" then go "church" else go "work" go ist eine Funktion, Klammern müssen nicht sein

25 Try/Catch try all_hell_breaks_loose() cats_and_dogs_living_together() catch error console.log error finally clean_up() go ist eine Funktion, Klammern müssen nicht sein

26 Objekte (Hashes) singers = { Jagger: "Rock", Elvis: "Roll" } # YML style kids = brother: name: "Max" age: 11 sister: name: "Ida" age: 9

27 Schleifen CoffeeScript: goods = [ bread, 'wine'] eat food for food in goods JavaScript: var food, goods, _i, _len; goods = [ bread, 'wine']; for (_i = 0, _len = goods.length; _i < _len; _i++) { } food = goods[_i]; eat(food); Array Komprehension ist implizit, Schleifen sind Expressions

28 While/Until CoffeeScript: if this.studying_economics buy() while supply > demand sell() until supply > demand JavaScript: if (this.studying_economics) { while (supply > demand) { buy(); } while ((supply > demand)) { } } sell();

29 Spice

30 Array Comprehension for roid in asteroids for roid2 in asteroids when roid isnt roid2 roid.explode() if roid.overlaps roid2

31 Array Comprehension var roid, roid2, _i, _j, _len, _len2; for (_i = 0, _len = asteroids.length; _i < _len; _i++) { roid = asteroids[_i]; for (_j = 0, _len2 = asteroids.length; _j < _len2; _j++) { roid2 = asteroids[_j]; if (roid == roid2) { if (roid.overlaps(roid2)) { roid.explode(); } } } } 3 Zeilen vs. 12 Zeilen ;-)

32 Classes class Animal constructor: -> move: (meters) -> + " moved " + meters + "m." class Snake extends Animal move: -> alert "Slithering..." super 5 class Horse extends Animal move: -> alert "Galloping..." super 45 sam = new Snake "Sammy the Python" tom = new Horse "Tommy the Palomino" sam.move() tom.move()

33 Classes: Behind the Scenes extend function Prototypische Vererbung Jedes Objekt hat ein super Attribut

34 Classes: Behind the shortcut für this Innerhalb von Funktionen = Instanzvariablen Innerhalb von Hashes = statische Variablen

35 Open Classes Coffeescript: String::dasherize = /_/g, - Javascript: String.prototype.dasherize = function() { return this.replace(/_/g, - ); };

36 Fat Arrow Coffeescript: Account = (customer, cart) = = cart $('.shopping_cart').bind 'click',

37 Fat Arrow Javascript: var Account; var bind = function(fn, me) { return function(){ return fn.apply(me, arguments); }; }; Account = function(customer, cart) { this.customer = customer(this.cart = cart); return $('.shopping_cart').bind('click', bind(function(event) { return this.customer.purchase(this.cart); }, this)); };

38

39 String Interpolation author = "Wittgenstein quote = "A picture is a fact. -- #{author}" String Interpolation wie bei Ruby, kann auch eine Expression sein.

40 Splats Coffeescript: race = (winner, runners...) -> console.log winner, runners Javascript: race = function() { var runners, winner; winner = arguments[0], runners = 2 <= arguments.length? slice.call(arguments, 1) : []; return console.log(winner, runners); };

41 Existence Coffeescript: alert "I knew it" if elvis? speed?= 140 lottery.draw_winner()?.address?.zipcode Ähnlich wie der AndAnd Gem bei Ruby oder try in Rails.

42 Existence Javascript: var _ref, _ref2; if (typeof elvis = "undefined" && elvis == null) { alert("i knew it"); } typeof speed = "undefined" && speed == null? speed : speed = 140; if ((_ref = lottery.drawwinner()) = null) { if ((_ref2 = _ref.address) = null) { _ref2.zipcode; } }

43 Destructuring Assignemnt weatherreport = (location) -> [location, 26, Sonnig"] [city, temp, forecast] = weatherreport Frankfurt"

44 Aliase is compiles to === isnt compiles to == not compiles to and compiles to && or compiles to on, yes, true compile to true off, no, false compile to this compile to this of compile to in

45 Chained Comparisons cholesterol = 127 healthy = 200 > cholesterol > 60 Bei Python ausgeliehen

46 /Stand back I know regular Expressions/

47 Extended RegExp # Interpolation sep = "[.\\/\\- ] dates = /\d+#{sep}\d+#{sep}\d+/g # Extended RegExp OPERATOR = /// ^ (?: [-=]> # function [-+*/%<>& ^?=]= # compound assign / compare >>>=? # zero-fill right shift ([-+:])\1 # doubles ([& <>])\2=? # logic / shift \?\. # soak access \.{2,3} # range or splat ) ///

48 Toolchain

49 Editor TextMate Bundle jashkenas/coffeescript-tmbundle VIM kchmck/vim-coffeescript Emacs defunkt/coffee-mode IntelliJ IDEA yeungda.github.com /coffeescript-idea/

50 Cakefile sys = require 'sys' fs = require 'fs' exec = require('child_process').exec spawn = require('child_process').spawn task 'watch', 'watches and compiles coffee', -> sys.print "Spawning coffee watcher" coffee = spawn 'coffee', ['-cw', '-o', 'lib', 'src'] coffee.stdout.on 'data', (data) -> sys.print data exec "growlnotify -m \"#{data}\" -t \"Cakefile\"" coffee.stderr.on 'data', (data) -> sys.print data exec "growlnotify -m \"#{data}\" -t \"Cakefile\""

51 Rails 3.1 macht Coffeescript zum Default

52

53 Rails ca7...23aa7da Love It... I wish I could be constructive, but CofffeScript makes me nerdrage.

54

55

56

57 Thank You

58 one more thing

59

60

61 We re hiring