Javascript "Transpiler"


09.11.2012

A little language that compiles into JavaScript
Jeremy Ashkenas (CoffeeScript + Backbone.js)

Syntax

Hybrid aus Ruby und Python
  • keine ;
  • keine {...}
  • wenig Klammern
  • Whitespace signifikant

Literale / Strukturen

a = 2 #if a? and a == 2 # console.log "a is 2" #else # console.log "it's not"

Rückgabewerte

calculate = -> # do something 12 + 14 calculate()

Objekte / Funktionen

math = PI: 3.1415926 #square: (x) -> # return x * x #circleUmfang: (radius) -> # return this.PI * this.square(radius) #math.square 4 #math.circleUmfang(2)

Klassen

class User constructor: (name) -> this.name = name #greet: -> # return "Hello " + this.name #user = new User("stefan") #user.greet() #class Admin extends User # greet: -> # super + " and you are Admin!" #admin = new Admin("stefan") #admin.greet()

jQuery & co

#links = [] jQuery -> # $('a').each -> # if a = $(@).attr("href") # links.push a # links #links #$.ajax # url: 'http://api.twitter.com/1/statuses/user_timeline.json' # type: 'GET' # dataType: 'jsonp' # data: # screen_name: "wdcmdresden" # count: 2 # success: (data, textStatus, xhr)-> # for tweet in data # alert(tweet.text)

More...

if a?.has(":something")? console.log "..."

Ranges/Comparisons

if 2 < a < 5 console.log "#{a} is in range" #if a in [2..5] # console.log "#{a} is in range"

Expressions everywhere

value = if a? 42 else 23 # sum=0 # result = sum+=x for x in [0..100] # arr = for x in [1..25] # x * x

Tool-Support

Als Javascript (zum Spielen)

<script type="text/coffeescript">
jQuery ->
  if coffeescript.isAwesome?
    console.log "Yeah"
</script>
<script src="http://coffeescript.org/extras/coffee-script.js">

binary

Installation z.B. mit npm:
npm install -g coffee-script
Nutzen des 'coffee' Programms
coffee input.coffee output.js
coffee watch

Automatisch

  • Yeoman
  • Middleman
  • Guard-coffee
  • LiveReload, CodeKit

Webframeworks

  • Rails 3.1+ Asset pipeline
  • Sinatra, Django, Drupal, Symfony2,...

Editor

  • vim, eclipse, sublime, netbeans,...

Warum?

The compiled output is readable and pretty-printed, passes through JavaScript Lint without warnings, will work in every JavaScript runtime, and tends to run as fast or faster than the equivalent handwritten JavaScript.
Coffeescript-Dokumentation
Write new JS in CoffeeScript.
Github Javascript-Styleguide
Dropbox
Dropbox now writes all new browser-side code in CoffeeScript, and we’ve been loving it. [...]
In the process of converting, we shaved off more than 5000 lines of code, a 21% reduction.
https://tech.dropbox.com/?p=361
  • Lesbarer
  • spaßiger
  • basiert auf Best Practices

Warum nicht?

Geschmackssache: Einrückung als Syntax

Komplexerer Build-Prozess

Abhilfe schafft
coffee watch
oder guard-coffeescript

Debugging: Zeilennummern matchen nicht mit Fehlermeldung

→ Source Maps in Chrome
Auch zum Debugging von minified JS

Alternativen

Typescript Microsoft

class Admin {
 ...
}
interface Person {
    firstname: string;
    lastname: string;
}
function greet(variable: Person) {...}

Dart2Js Google

class HelloDartTest {
  static testMain() {
    print("Hello, Darter!");
  }
}
main() {
  HelloDartTest.testMain();
}

LispyScript

(var square (function (x) (* x x))) 
(console.log (square 10))

Ressourcen

me

Stefan Wienert
@stefanwienert
stefanwienert.net

Credits