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
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
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 * xconst 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
The Elm Architecture
Elm Runtime
The Elm Architecture
A simple counter app
A little live coding
Things I missed
- Lightning Fast
- Super lightweight
Things I missed
- Out of the box support for building, time travel debugging, etc
- Automatically enforced semver
@_jjant
Julian Antonielli
Consulting and workshops on
BeyondJavaScript
By jjant
