altJS

Brian McKenna

Graduate Java Developer

Brian McKenna

Graduate Java Developer

Boilerplate

var x = function(a, b, c){
  return a + b + c;
};

Tolerance

x = 100;
// No "var", ruined launch

Complexity

var p1 = Person();
var p2 = new Person();
// Wait... Which should I use?

Dangerous

var two = 1 + true;
console.log(two == "2"); // true

Crockford

Make it simpler
Make it safer

Crockford

Make new languages
JavaScript
without the
JavaScript

Josh Peek

JS compilers/transpilers are the future.
Coding in regular JS is going to be like
not using a framework.

altJS List

CoffeeScript Coco Contracts.coffee Jack JS11 Sibilant Kaffeine Move
Zedscript ADsafe Caja Dojo FBJS Jacaranda Gatekeeper SafeJS Script#
MileScript Mascara Roy Prefix Streamline.js fork TameJS mobl StratifiedJS
NarrativeJS jwacs Jscex ContextJS Cycript Objective-J JS2 Jangaroo
Flapjax Restrict JavaScript++ Narcissus Traceur HotRuby rb2js Red Quby
PYXC-PJ Pyjamas Skulpt PyCow PyvaScript GWT Java2Script j2js Parenscript
Moby Scheme scheme2js ClojureScript clojurejs Scriptjure edgelisp Ralph
Spock Fargo Ocamljs O'Browser Js_of_ocaml SMLtoJs UHC YHC JSHC Clamato
Smalltalk JTalk Lively Kernel Emscripten mala Clue qb.js Haxe Fantom
Monkey Clue jsc JSIL Opa Fun Ur WebSharper mobl E Sugar Dart Oia
newspeak Quixe Gnusto Logo TIScript tcl.js

altJS List

CoffeeScript Coco Contracts.coffee Jack JS11 Sibilant Kaffeine Move
Zedscript ADsafe Caja Dojo FBJS Jacaranda Gatekeeper SafeJS Script#
MileScript Mascara Roy Prefix Streamline.js fork TameJS mobl StratifiedJS
NarrativeJS jwacs Jscex ContextJS Cycript Objective-J JS2 Jangaroo
Flapjax Restrict JavaScript++ Narcissus Traceur HotRuby rb2js Red Quby
PYXC-PJ Pyjamas Skulpt PyCow PyvaScript GWT Java2Script j2js Parenscript
Moby Scheme scheme2js ClojureScript clojurejs Scriptjure edgelisp Ralph
Spock Fargo Ocamljs O'Browser Js_of_ocaml SMLtoJs UHC YHC JSHC Clamato
Smalltalk JTalk Lively Kernel Emscripten mala Clue qb.js Haxe Fantom
Monkey Clue jsc JSIL Opa Fun Ur WebSharper mobl E Sugar Dart Oia
newspeak Quixe Gnusto Logo TIScript tcl.js
CoffeeScript
It's just JavaScript
Mostly syntax
brian =
  name: "Brian McKenna" 
  age: 21
var brian;
brian = {
  name: "Brian McKenna",
  age: 21
};
f = (verb, noun = "cat") ->
  "the #{noun} #{verb}"

f "ran"
var f;

f = function(verb, noun) {
  if (noun == null) noun = "cat";
  return "the " + noun + " " + verb;
};

f("ran");
outer = false
f = ->
  inner = true
  outer = true             
inner = false
var f, inner, outer;

outer = false;

f = function() {
  var inner;
  inner = true;
  return outer = true;         
};

inner = false;
ns = [
  1
  2
  3
]

third = (x...) -> x[2]
third 1, 2, 3
third ns...
var ns, third;
var __slice = Array.prototype.slice;

ns = [1, 2, 3];

third = function() {
  var x;
  x = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
  return x[2];
};

third(1, 2, 3);

third.apply(null, ns);
ns = [1..7]
var ns;

ns = [1, 2, 3, 4, 5, 6, 7];
ns = [1..7][2..4]
var ns;

ns = [1, 2, 3, 4, 5, 6, 7].slice(2, 5);
square = (x) -> Math.pow x, 2
squares = (square i, 2 for i in [1..10])
# 1,4,9,16,25,36,49,64,81,100
var i, square, squares;

square = function(x) {
  return Math.pow(x, 2);
};

squares = (function() {
  var _results;
  _results = [];
  for (i = 1; i <= 10; i++) {
    _results.push(square(i, 2));      
  }
  return _results;
})();

Pretty cool

ClojureScript
Clojure to JS compiler
Different language

Rationale

JavaScript is not Robust
... writing robust JavaScript programs,
while possible, requires a combination
of extensive discipline and convention,
and conventions differ between
development shops, communities
and libraries.

Rich Hickey

Clojure
rocks
JavaScript
reaches
Clojure
Closure
Escaping
Callback Hell
with ClojureScript
app.get('/index', function(req, res, next) {
    User.get(req.params.userId, function(err, user) {
        if(err) next(err);
        db.find({user: user.name}, function(err, cursor) {
            if(err) next(err);
            cursor.toArray(function(err, items) {
                if(err) next(err);
                res.send(items);
            });
        });
    });
});
(defmacro timeout-macro [& body]
  (reduce
   (fn [x y]
     `(timer/callOnce (fn [] ~x ~y) 1000))
   `()
   (reverse body)))
(timeout/timeout-macro
   (pn "Hello")
   (pn "World")
   (p "Hello")
   (p " ")
   (pn "world"))
callOnce(function () {
  callOnce(function () {
    callOnce(function () {
      callOnce(function () {
        callOnce(function () {
          pn("world");                    
        }, 1000);
        p(" ");
      }, 1000);
      p("Hello");
    }, 1000);
    pn("World");
  }, 1000);
  pn("Hello");
}, 1000);
callOnce.call(null, (function () {
  callOnce.call(null, (function () {
    callOnce.call(null, (function () {
      callOnce.call(null, (function () {
        callOnce.call(null, (function () {
          return pn.call(null, "world");
        }), 1000);
        return p.call(null, " ");
      }), 1000);
      return p.call(null, "Hello");
    }), 1000);
    return pn.call(null, "World");
  }), 1000);
  return pn.call(null, "Hello");
}), 1000);
Dart
Structured web programming
Do not want
Roy
Functional language
In between
val hundred = 100 
var hundred = 100;
// Won't compile
// console.log "40" + 2
// Explicit
val f x : Number = x


console.log (f 100)
// Won't compile:
// console.log (f "100")
// Won't compile
// console.log "40" + 2
// Explicit
var f = function(x) {
    return x;
}
console.log(f(100))
// Won't compile:
// console.log (f "100")
val plusXY a = a.x + a.y
console.log (plusXY obj)
console.log (plusXY {x: 2, y: 1})
// Won't compile
// plusXY {x: 1, z: 2}
var plusXY = function(a) {
    return a.x + a.y;
}
console.log(plusXY(obj))
console.log(plusXY({
    "x": 2,
    "y": 1
}))
// Won't compile
// plusXY {x: 1, z: 2}
data Option a =
  Some a | None

val noneZero o = match o      
  case (Some s) = s
  case None = 0

noneZero None
// 0
noneZero (Some 1)
// 1
var Some = function(a){this._0 = a};
var None = function(){};
var noneZero = function(o) {
    return (function() {
        if(o instanceof Some) {
            var s = o._0;
            return s;
        } else if(o instanceof None) {    
            return 0;
        }
    })();
}
noneZero(new None())
// 0
noneZero(new Some(1))
// 1
Make your own
var grammar = {
  "lex": {
    "rules": [
      ["\\s+", ""],
      ["[0-9]+", "return 'NUMBER';"],
      ["true", "return 'BOOLEAN';"],
      ["false", "return 'BOOLEAN';"]
    ]
  },
  "bnf": {
    "literal": [
      ["NUMBER", "$$ = new yy.Number($1);"],
      ["STRING", "$$ = new yy.String($1);"],
      ["BOOLEAN", "$$ = new yy.Boolean($1);"],
      ...
    ],
    ...
  }
};

Number: function(value) {
  this.value = value;

  this.accept = function(a) {
    if(a.visitNumber) {
      return a.visitNumber(this);
    }
  };
}
var parser = new Parser(grammar);
var ast = parser.parse("100");
// new yy.Number(100)
ast.accept({
  visitNumber: function(n) {
    console.log(n.value);
  },
  ...
});
Is it hard to debug?
Yes

SourceMap

Will be in Firefox 9
Being implemented in WebKit
Already output by Dart and GWT
Why not just make JS better?
  1. IE6 2001
  2. IE7 2006
  3. IE8 2009
  4. Firefox 3.5 2009
Don't be limited by JavaScript's limitations
http://altjs.org/
#altjs on irc.freenode.net
altjs on Google Groups
@puffnfresh
Thanks!