Use ReasonML in your React applications (RuhrJS 2018)

@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))
};

View Slide

@coding_lawyer
compiler

View Slide

@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))
};

View Slide

@coding_lawyer
JavaScript interop

View Slide

@coding_lawyer

View Slide

@coding_lawyer
Reason is compatible with React

View Slide

@coding_lawyer
Reason is compatible with React
React was developed for Reason

View Slide

@coding_lawyer
adjusted JavaScript to React’s needs

@coding_lawyer

@coding_lawyer

@coding_lawyer

@coding_lawyer

@coding_lawyer

@coding_lawyer

@coding_lawyer

@coding_lawyer

@coding_lawyer
semantics
familiar syntax

View Slide

@coding_lawyer
safer React

View Slide

@coding_lawyer
“[Reason] is the best way to take
React to the next level”
Jordan Walke, creator of Reason, React

View Slide

@coding_lawyer
Tic Tac Toe
github.com/codinglawyer/reason-tic-tac-toe

@coding_lawyer

@coding_lawyer

@coding_lawyer

@coding_lawyer

@coding_lawyer
Game
Board
App
BoardRow
Square

View Slide

@coding_lawyer
Game
Board
App
BoardRow
Square

View Slide

@coding_lawyer
Game
Board
App
BoardRow
Square

View Slide

@coding_lawyer
Game
Board
App
BoardRow
Square

View Slide

@coding_lawyer
Game
Board
App
BoardRow
Square

View Slide

@coding_lawyer
Game
Board
App
BoardRow
Square

View Slide

@coding_lawyer
components

View Slide

@coding_lawyer
stateless component

View Slide

@coding_lawyer
Game
Board
App
BoardRow
Square

View Slide

@coding_lawyer
let component = ReasonReact.statelessComponent("App");
let make = _children => {
...component,
render: _self =>

(ReasonReact.string("Tic Tac Toe"))

,
};

View Slide

@coding_lawyer
...component,
render: _self =>


,
};

View Slide

@coding_lawyer
...component,
render: _self =>


,
};

View Slide

@coding_lawyer
...component,
render: _self =>


,
};

View Slide

@coding_lawyer
...component,
render: _self =>


,
};

View Slide

@coding_lawyer
reducer component

View Slide

@coding_lawyer
Game
Board
App
BoardRow
Square

View Slide

@coding_lawyer
let component = ReasonReact.reducerComponent("Game");
...component,
initialState: () => { board: […], gameState:… },
reducer: (action: action, state: state) =>
switch (action) {
| Restart => …
| ClickSquare((id: string)) => …
},
render: ({state, send}) =>

state
onRestart=(_evt => send(Restart))
onMark=(id => send(ClickSquare(id)))
/>
,
};

View Slide

@coding_lawyer
...component,
switch (action) {
| Restart => …
},

state
/>
,
};

View Slide

@coding_lawyer
...component,
switch (action) {
| Restart => …
},

state
/>
,
};

View Slide

@coding_lawyer
...component,
switch (action) {
| Restart => …
},

state
/>
,
};

View Slide

@coding_lawyer
...component,
switch (action) {
| Restart => …
},

state
/>
,
};

View Slide

@coding_lawyer
...component,
switch (action) {
| Restart => …
},

state
/>
,
};

View Slide

@coding_lawyer
...component,
switch (action) {
| Restart => …
},

state
/>
,
};

View Slide

@coding_lawyer
...component,
switch (action) {
| Restart => …
},

state
/>
,
};

View Slide

@coding_lawyer
...component,
switch (action) {
| Restart => …
},

state
/>
,
};

View Slide

@coding_lawyer
Game
Board
App
BoardRow
Square

View Slide

@coding_lawyer
Game
Board
App
BoardRow
Square

View Slide

@coding_lawyer
Game
Board
App
BoardRow
Square

View Slide

@coding_lawyer
Game
Board
App
BoardRow
Square

View Slide

@coding_lawyer
Game
Board
App
BoardRow
Square

View Slide

@coding_lawyer
Game
Board
App
BoardRow
Square

View Slide

@coding_lawyer
Game
Board
App
BoardRow
Square

View Slide

@coding_lawyer
...component,
switch (action) {
| Restart => …
},

state
/>
,
};

View Slide

@coding_lawyer
...component,
switch (action) {
| Restart => …
},

state
/>
,
};

View Slide

@coding_lawyer
switch (action) {
| Restart => ReasonReact.Update(initialState)
| ClickSquare((id: string)) =>
let updatedBoard = updateBoard(
state.board,
state.gameState,
id);
let updatedGs = checkGameState3x3(
updatedBoard,
state.board,
state.gameState);
ReasonReact.Update({
board: updatedBoard,
gameState: updatedGs,
});
},

View Slide

@coding_lawyer
switch (action) {
state.board,
state.gameState,
id);
updatedBoard,
state.board,
state.gameState);
});
},

View Slide

@coding_lawyer
switch (action) {
state.board,
state.gameState,
id);
updatedBoard,
state.board,
state.gameState);
ReasonReact.UpdateWithSideEffects(
{
},
(_self => Js.log(“Clicked")),
);
},

View Slide

@coding_lawyer
pure state update and side-effects
separation

View Slide

@coding_lawyer
less boilerplate

View Slide

@coding_lawyer
Redux’s principles and component’s
reusability

View Slide

@coding_lawyer
type system

View Slide

@coding_lawyer
clearer and safer code

View Slide

@coding_lawyer
superior to Flow and TypeScript

View Slide

@coding_lawyer
type inference

View Slide

@coding_lawyer
!/* type inference by the compiler !*/
let plus = (a, b) !=> a + b

View Slide

@coding_lawyer
!/* type inference by the compiler !*/
let plus = (a, b) !=> a + b
!/* (int, int) !=> int !*/

@coding_lawyer

@coding_lawyer
pattern matching

View Slide

@coding_lawyer
Game
Board
App
BoardRow
Square

View Slide

@coding_lawyer
switch (action) {
state.board,
state.gameState,
id);
updatedBoard,
state.board,
state.gameState);
});
},

View Slide

@coding_lawyer
let updateBoard = (board: board, gameState: gameState, id) =>
board
|> List.mapi((ind: int, row: row) =>
row
|> List.mapi((index: int, value: field) =>
string_of_int(ind) ++ string_of_int(index) === id ?
switch (gameState, value) {
| (Playing(_), Marked(_)) => value
| (Playing(player), Empty) => Marked(player)
| (_, _) => Empty
} :
value
)
);

View Slide

@coding_lawyer
let updateBoard = (board: board, gameState: gameState, id) =>
board
|> List.mapi((ind: int, row: row) =>
row
|> List.mapi((index: int, value: field) =>
string_of_int(ind) ++ string_of_int(index) === id ?
switch (gameState, value) {
| (_, _) => Empty
} :
value
)
);

View Slide

View Slide

@coding_lawyer
/* determines the value of the clicked square */
switch (gameState: gameState, value: field) {
| (_, _) => Empty
}

View Slide

@coding_lawyer
| (_, _) => Empty
}

View Slide

@coding_lawyer
| (_, _) => Empty
}

View Slide

@coding_lawyer
| (_, _) => Empty
}

View Slide

@coding_lawyer
| (_, _) => Empty
}

View Slide

@coding_lawyer
| (_, _) => Empty
}

View Slide

@coding_lawyer
| (_, _) => Empty
}

View Slide

@coding_lawyer
/* | (_, _) => Empty */
}

View Slide

@coding_lawyer

View Slide

@coding_lawyer
switch (
getWinner(flattenBoard, head),
gameEnded(flattenBoard),
tail,
) {
| (Cross, _, _) => Winner(Cross)
| (Circle, _, _) => Winner(Circle)
| (_, true, []) => Draw
| (_, false, []) => whosPlaying(gameState)
| _ => check(tail)
};

View Slide

@coding_lawyer
switch (match$1) {
case 0 :
return /* Winner */Block.__(1, [/* Cross */0]);
case 1 :
return /* Winner */Block.__(1, [/* Circle */1]);
case 2 :
if (match$2) {
if (tail) {
_rest = tail;
continue ;
} else {
return /* Draw */0;
}
} else if (tail) {
_rest = tail;
continue ;
} else {
return whosPlaying(gameState);
}
}