Disclaimer:
JavaScript critiques incoming

_jjant

Disclaimer 2:
This is my first talk

Our favourite language

A simple function

Our favourite language

A simple function

Our favourite language

A simple function

Our favourite language

A simple function

Our favourite language

A simple function

I love you JavaScript

But we have a problem

Well, you have a problem

Gary Bernhardt, Wat: https://www.destroyallsoftware.com/talks/wat

Denys Dovhan, Wtf: https://github.com/denysdovhan/wtfjs

Or rather, many problems

The languages for the modern Web

Beyond JavaScript

Julian Antonielli

@_jjant

A typed superset of JavaScript

What we wanted

What we had to write

type Employee = {
  getVacationDate: () => Date;
};

const selectVacationDates = (employees: Array<Employee>): Array<Date> => {
  return employees.map(employee => employee.getVacationDate());
};

// Compile time error! Argument must be non-null.
selectVacationDates(null);


// Compile time error! Array elements are not of type Employee
selectVacationDates([{ name: "Jon Snow" }]);

Some drawbacks

Carries many of the quirks and problems of JavaScript
Complicated type system (required to acomodate JS patterns)
Relatively weak type inference
Pretty ugly error messages

Coco, LiveScript, IcedCoffeeScript, Parsec CoffeeScript, Contracts.coffee, Uberscript, ToffeeScript, Caffeine, heap.coffee, EmberScript, BlackCoffee
NodeScript, Bizubee, Kaffeine, Moescript, pogoscript, LispyScript, Hot Cocoa Lisp, Sibilant, ki, jisp, Ham, GorillaScript, RedScript, Daonode, LiteScript, ColaScript, Taijilang, MoonScript, Earl Grey, Khepri, Spider, CirruScript, TLC, CokeScript, imba, Cor, Iode, FutureScript, PearScript, RamdaScript, RoyalScript, Dart, TypeScript, TeJaS, asm.js, JavaScript++, Mascara, Roy, Elm, Swym, Typecast.js, PureScript, Flow, ActionScript, BuckleScript

Coffeescript Wiki: https://github.com/jashkenas/coffeescript/wiki/list-of-languages-that-compile-to-js

Compile-to-js Languages

Encourages Functional Programming
Immutable by default
A Lisp
Great tooling and mature ecosystem

All the syntax you'll need

(println "Hello World!")         ; console.log("Hello World!")

(println "1 + 2 = " (+ 1 2))     ; console.log("1 + 2 = ", 1 + 2);

(def x 42)                       ; const x = 42 

(defn plus [num1 num2]           ; const plus = (num1, num2) =>
    (+ num1 num2))               ;   num1 + num2;


(1 1 2 3 5 8 13)                 ; [1, 1, 2, 3, 5, 8, 13]

Homoiconicity

Paul Graham, Beating the Average: A Lisp Startup : http://paulgraham.com/avg.html

"With Lisp our development cycle was so fast that we could sometimes duplicate a new feature within a day or two of a competitor announcing it in a press release."

- Paul Graham, Y Combinator

A purely functional language
Statically typed with great type inference
Immutable only
All functions are pure
Compiles to JavaScript
No exceptions or runtime errors; null and undefined simply don't exist

foo x =
    let
        answer =
            42
    in
        answer * x

const phrase =
    3 > 2 ? "Hi" : "Something's wrong"

function foo(x) {
  const answer = 42;

  return answer * x;
}

phrase =
    if 3 > 2 then
        "Hi"
    else
        "Something's wrong"

Elm

JavaScript

Virtual DOM

const FancyText = ({ title, direction }) => (
  <marquee
    className="fancy-text"
    direction={direction}
  >
    <h1>{title}</h1>
  </marquee>
);

const App = () => (
  <div className="app">
    <h1>Hi JS-Kongress!</h1>
    <FancyText
      title="You rock!"
      direction="left"
    />
  </div>
);

fancyText title dir =
    marquee
        [ class "fancy-text", direction dir ]
        [ text title ]


app =
    div [ class "app" ]
        [ h1 [] [ text "Hi JS-Kongress" ]
        , fancyText "You rock!" "left"
        ]

Special Syntax (JSX)

No Special Syntax

React

Elm