devcon1 - boojs

Yet another Javascript transpiler

Iván – DrSlump – Montes@drslump -‐ www.pollinimini.net -‐ github.com/drslump

Tuesday, November 27, 12

Javascript as Virtual Machine


JS is the x86 of the web.

The point is JS is about as low as we can go. But it also has higher-level facilities.

Brendan EichJavaScript’s creator


Douglas CrockfordJavaScript evangelist

JavaScript is the VM of the web. We had always thought that Java’s JVM would be the VM of the web, but it turns out that it’s JavaScript.


JonnycatY Combinator user

The JavaScript we've got now is the assembly language of the client-side. We can't easily change it, but we have to start building better tools on top of it.


A Popular Trend


Open source project with a huge communitySyntax sugar, more a pre-‐processor than a compilerFocused on having a very concise syntax

grade = (student) -> if student.excellentWork "A+" else if student.okayStuff if student.triedHard then "B" else "B-" else "C"

eldest = if 24 > 21 then "Liz" else "Ike"


Backed by GoogleAnnotated Javascript codeMore a staOc analysis tool than a compiler

/** * A shape. * @interface */function Shape() {};Shape.prototype.draw = function() {};

/** * @constructor * @implements {Shape} */function Square() {};Square.prototype.draw = function() { ...};


Backed by MicrosoPType extensions to JavaScript syntaxFocused on being IDE friendly

interface Person { firstname: string; lastname: string;}

function greeter(person : Person) { return "Hello, " + person.firstname + " " + person.lastname;}

var user = {firstname: "Jane", lastname: "User"};

document.body.innerHTML = greeter(user);


• Javascript syntax is geRng dated (Harmony in the works to somehow remedy that)

• Browser war has focused on Javascript engines, huge performance boost in latest years.

• Programmers with many different backgrounds using Javascript to develop/deploy complex products.

• Much improved debugging tools (Firebug, SourceMaps, OpOmizers, …)

• User friendly write-‐compile-‐test workflows

Why so many?


• The standard is finally coming along but not expected to be finished unOl mid 2013. Browser vendors are not too far from having a working implementaOon though.

• The browser market is hugely fragmented, mobile devices will probably held back early adopOon this Ome, although we will conOnue to blame MicrosoP :-‐)

• Harmony is being driven to be highly performant on current engines not that much on improving developers performance.

• Harmony will be a good step forward but it won’t render fuOle the JavaScript as Virtual Machine approach.

Won’t Harmony save JavaScript?


The Boo Language


Boo is an object oriented statically typed programming language ... with a python inspired syntax and a special focus on language and compiler extensibility.

Rodrigo B. De OliveiraBoo’s creator


import System

class Person: public name as string public age as int

def constructor(name as string): .name = name age = 0

def birthday(p as Person): p.age += 1

# Create an instanceme = Person('DrSlump', age: 32)birthday(me)print "$(me.name) celebrated his $(me.age) birthday"


Readable and expressive syntaxPython inspired

DSL oriented

StaOcally typedType inference

Duck typing

ExtensibleMacros and Meta methods (AST manipulaOon)

Open compiler design (Pipelines)


Language Features.Net Type System (classes, value types, interfaces, ...)

Slicing syntax, Variadic arguments, IniOalizers

FuncOons are first class ciOzens

Closures

Events, Generators, Expression modifiers

Method and Operators Overloading


Extensibility and Meta programmingSyntacOc Macros and Afributes

Meta methods (macros aPer type resoluOon)

Pafern Matching

Custom pipelines

Compiler as a service


BooJsboo·jay·es /bʊ ˈdʒeɪ ɛs/


Why did you do it?More bang for the buck

If we are going to require a compilaOon workflow, lets have a really powerful compiler, not just syntacOc sugar.

An almost perfect type systemA staOcally typed language with the look and feel of a scripOng language is a great combinaOon, specially for medium to large code bases. It’s just one small step short from latent typing, which I hope to support in the future.

It is FUN!Programming is fun ergo programming compilers is twice as fun!


Boo JavaScriptFirst-‐class funcEons ✓ ✓

FuncEon expressions ✓ ✓Closures ✓ ✓

Scope Lexical (funcOon and types) Lexical (funcOon)

Type system StaOc and Dynamic (strong) Dynamic (weak)

Variadic funcEons ✓ ✓ (via arguments)

Inheritance Class/Type based Prototypal

Generators ✓ ✘

List comprehensions ✓ ✘

Iterators ✓ ✘

ProperEes ✓ ✘

Destructuring ✓ ✘

Method overloading ✓ ✘

Operator overloading ✓ ✘

Macros ✓ ✘

PaLern Matching ✓ ✘

Comparison with Javascript


ImplementaOonLeverages Boo’s open compiler design

Implemented using the Boo language

Runs on .Net 4.0 and Mono 2.1.x

Over 700 unit tests, automated with Travis-‐CI

Generates a Mozilla AST, prefy printed to JS 1.5

SourceMaps support

JS type system and runOme (no .NET emulaOon!)

Lightweight runOme library (≈4kb gzipped)


http://en.wikipedia.org/wiki/Equals_sign#Approximately_equal

http://en.wikipedia.org/wiki/Equals_sign#Approximately_equal

ApplicaOon structureEach file is a Module

Each Module has a single Namespace

Modules are organized in Assemblies

Only one of the modules can be the entry point

External Namespaces and Types can be imported

Each assembly generates an output Javascript file

An AMD style loader is used to resolve dependencies


Using exisOng JavaScript codeMacros and afributes to model external Javascript

Standard APIs like the DOM/jQuery are provided

Support for prototypal and Module Pafern styles

Extern type definiOons do not generate any code

`backOck quoted code` is embedded unmodified

Global macro to access exisOng symbols

Duck typing allows to use pracOcally everything!


Code example


The limits of my language are the limits of my world.

Ludwig WifgensteinPhilosopher (1889-‐1951)


Related materialBooJs project page

Boo website


https://github.com/drslump/boojs

https://github.com/drslump/boojs

http://boo.codehaus.org/

http://boo.codehaus.org/

devcon1 - boojs

Technology

javascript syntax

javascript engines

javascript weve

function shape

system class person

interface person

perfect type system

slicing syntax