@coding_lawyer
‣ no standards
‣ difficult to scale
‣ “this” keyword
Slide 13
Slide 13 text
@coding_lawyer
!+[]+[]+![] //"truefalse"
Slide 14
Slide 14 text
@coding_lawyer
1. JavaScript has a lot of issues
a. libraries and tools
Slide 15
Slide 15 text
@coding_lawyer
Slide 16
Slide 16 text
@coding_lawyer
Slide 17
Slide 17 text
@coding_lawyer
1. JavaScript has a lot of issues
a. libraries and tools
b. compile to JavaScript
Slide 18
Slide 18 text
@coding_lawyer
Slide 19
Slide 19 text
@coding_lawyer
Slide 20
Slide 20 text
@coding_lawyer
JavaScript development is hard
Slide 21
Slide 21 text
@coding_lawyer
1. JavaScript has a lot of issues
a. libraries and tools
b. compile to JavaScript
2. React isn’t a native JavaScript library
Slide 22
Slide 22 text
@coding_lawyer
React is based on different principles
Slide 23
Slide 23 text
@coding_lawyer
Immutability
Type system
Functional
programming
Slide 24
Slide 24 text
@coding_lawyer
Immutability
Type system
Functional
programming
Slide 25
Slide 25 text
@coding_lawyer
Slide 26
Slide 26 text
@coding_lawyer
Slide 27
Slide 27 text
@coding_lawyer
familiar syntax
Slide 28
Slide 28 text
@coding_lawyer
semantics
familiar syntax
Slide 29
Slide 29 text
@coding_lawyer
let fizzbuzz = (i) =>
switch (i mod 3, i mod 5) {
| (0, 0) => "FizzBuzz"
| (0, _) => "Fizz"
| (_, 0) => "Buzz"
| _ => string_of_int(i)
};
for (i in 1 to 100) {
Js.log(fizzbuzz(i))
};
Slide 30
Slide 30 text
@coding_lawyer
compiler
Slide 31
Slide 31 text
@coding_lawyer
function fizzbuzz(i) {
var match = i % 3
var match$1 = i % 5
if (match !== 0) {
if (match$1 !== 0) {
return String(i)
} else {
return 'Buzz'
}
} else if (match$1 !== 0) {
return 'Fizz'
} else {
return 'FizzBuzz'
}
}
for (var i = 1; i <= 100; ++i) {
console.log(fizzbuzz(i))
}
let fizzbuzz = (i) =>
switch (i mod 3, i mod 5) {
| (0, 0) => "FizzBuzz"
| (0, _) => "Fizz"
| (_, 0) => "Buzz"
| _ => string_of_int(i)
};
for (i in 1 to 100) {
Js.log(fizzbuzz(i))
};
Slide 32
Slide 32 text
@coding_lawyer
JavaScript interop
Slide 33
Slide 33 text
@coding_lawyer
c
Native code
(ocamlopt)
Bytecode
(ocamlc)
JavaScript
(bsc)
c
Slide 34
Slide 34 text
@coding_lawyer
github.com/jaredly/gravitron
Slide 35
Slide 35 text
@coding_lawyer
Reason is compatible with React
React was developed for Reason
Slide 36
Slide 36 text
@coding_lawyer
adjusted JavaScript to React’s needs
Slide 37
Slide 37 text
@coding_lawyer
Slide 38
Slide 38 text
@coding_lawyer
Slide 39
Slide 39 text
@coding_lawyer
Slide 40
Slide 40 text
@coding_lawyer
semantics
familiar syntax
Slide 41
Slide 41 text
@coding_lawyer
statically typed cousin of JavaScript
@coding_lawyer
“[Reason] is the best way to take
React to the next level”
Jordan Walke, creator of Reason, React
Slide 45
Slide 45 text
@coding_lawyer
Tic Tac Toe
github.com/codinglawyer/reason-tic-tac-toe
Slide 46
Slide 46 text
@coding_lawyer
Slide 47
Slide 47 text
@coding_lawyer
Slide 48
Slide 48 text
@coding_lawyer
Slide 49
Slide 49 text
@coding_lawyer
Slide 50
Slide 50 text
@coding_lawyer
Game
Board
App
BoardRow
Square
SharedTypes CSS
Slide 51
Slide 51 text
@coding_lawyer
Game
Board
App
BoardRow
Square
SharedTypes CSS
Slide 52
Slide 52 text
@coding_lawyer
Game
Board
App
BoardRow
Square
SharedTypes CSS
Slide 53
Slide 53 text
@coding_lawyer
Game
Board
App
BoardRow
Square
SharedTypes CSS
Slide 54
Slide 54 text
@coding_lawyer
Game
Board
App
BoardRow
Square
SharedTypes CSS
Slide 55
Slide 55 text
@coding_lawyer
Game
Board
App
BoardRow
Square
SharedTypes CSS
Slide 56
Slide 56 text
@coding_lawyer
Game
Board
App
BoardRow
Square
SharedTypes CSS
Slide 57
Slide 57 text
@coding_lawyer
type system
Slide 58
Slide 58 text
@coding_lawyer
clearer and safer code
Slide 59
Slide 59 text
@coding_lawyer
superior to Flow and TypeScript
Slide 60
Slide 60 text
@coding_lawyer
type inference
Slide 61
Slide 61 text
@coding_lawyer
type player =
| Cross
| Circle;
type field =
| Empty
| Marked(player);
type row = list(field)
type board = list(row);
type gameState =
| Playing(player)
| Winner(player)
| Draw;
type state = {
board,
gameState,
};