Skip to main content
Yet	
  another	
  Javascript	
  transpiler

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




Tuesday, November 27, 12
Javascript	
  as	
  Virtual	
  Machine




Tuesday, November 27, 12
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	
  Eich
                                        JavaScript’s	
  creator



Tuesday, November 27, 12
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.


                                       Douglas	
  Crockford
                                          JavaScript	
  evangelist



Tuesday, November 27, 12
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.

                                                 Jonnycat
                                          Y	
  Combinator	
  user



Tuesday, November 27, 12
A	
  Popular	
  Trend




Tuesday, November 27, 12
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"




     Open	
  source	
  project	
  with	
  a	
  huge	
  community
     Syntax	
  sugar,	
  more	
  a	
  pre-­‐processor	
  than	
  a	
  
     compiler
     Focused	
  on	
  having	
  a	
  very	
  concise	
  syntax

Tuesday, November 27, 12
/**
      * A shape.
      * @interface
      */
     function Shape() {};
     Shape.prototype.draw = function() {};

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



     Backed	
  by	
  Google
     Annotated	
  Javascript	
  code
     More	
  a	
  staOc	
  analysis	
  tool	
  than	
  a	
  compiler


Tuesday, November 27, 12
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);




     Backed	
  by	
  MicrosoP
     Type	
  extensions	
  to	
  JavaScript	
  syntax
     Focused	
  on	
  being	
  IDE	
  friendly


Tuesday, November 27, 12
Why	
  so	
  many?
     • 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	
  	
  




Tuesday, November 27, 12
Won’t	
  Harmony	
  save	
  JavaScript?
     • 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.



Tuesday, November 27, 12
The	
  Boo	
  Language




Tuesday, November 27, 12
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	
  Oliveira
                                                   Boo’s	
  creator



Tuesday, November 27, 12
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 instance
           me = Person('DrSlump', age: 32)
           birthday(me)
           print "$(me.name) celebrated his $(me.age) birthday"

Tuesday, November 27, 12
Readable	
  and	
  expressive	
  syntax
       Python	
  inspired
       DSL	
  oriented
    StaOcally	
  typed
       Type	
  inference
       Duck	
  typing
    Extensible
       Macros	
  and	
  Meta	
  methods	
  (AST	
  manipulaOon)
       Open	
  compiler	
  design	
  (Pipelines)


Tuesday, November 27, 12
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




Tuesday, November 27, 12
Extensibility	
  and	
  Meta	
  programming
        SyntacOc	
  Macros	
  and	
  Afributes
        Meta	
  methods	
  (macros	
  aPer	
  type	
  resoluOon)
        Pafern	
  Matching
        Custom	
  pipelines
        Compiler	
  as	
  a	
  service




Tuesday, November 27, 12
BooJs
                           boo·jay·es   /bʊ ˈdʒeɪ ɛs/




Tuesday, November 27, 12
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	
  system
                 A	
  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!


Tuesday, November 27, 12
Comparison	
  with	
  Javascript
                                                                Boo                         JavaScript
                      First-­‐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                     	
  ✓                              ✘



Tuesday, November 27, 12
ImplementaOon
        Leverages	
  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)


Tuesday, November 27, 12
ApplicaOon	
  structure
        Each	
  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




Tuesday, November 27, 12
Using	
  exisOng	
  JavaScript	
  code
        Macros	
  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!




Tuesday, November 27, 12
Code	
  example




Tuesday, November 27, 12
Tuesday, November 27, 12
The limits of my language are
          the limits of my world.


                              Ludwig	
  Wifgenstein
                                Philosopher	
  (1889-­‐1951)



Tuesday, November 27, 12
Related	
  material
        BooJs	
  project	
  page
        Boo	
  website




Tuesday, November 27, 12