C'est qui Reason(ML) et qu'est ce qu'il fait là?

@MoOx
C'est qui Reason(ML)
et qu'est ce qu'il fait là?
1

View Slide

@MoOx
Do you need
redux?
2
Previously in React Toulouse…

View Slide

@MoOx
Redux 
is a predictable state container
for JavaScript apps.
3

View Slide

@MoOx
What redux does,
ReasonReact and Elm do
4
Actions are types, reducers are functions, 
state is immutable, but at the language level

View Slide

@MoOx
“done in collaboration with the ReactJS team”
5 https://reasonml.github.io/reason-react/blog/2017/09/01/reducers.html

View Slide

@MoOx
6
JS

View Slide

@MoOx
• Available everywhere
• Easy to start
• Multiparadigm
7

View Slide

@MoOx
• Super hard to master
• Error prone
• Hacky
8

View Slide

@MoOx
9
let add = (a, b) => a + b;

View Slide

@MoOx
10
add(1, 1); // 2
add(1, "1"); // "11"
add(1, null); // 1
add(1, undeﬁned); // NaN

View Slide

@MoOx
Dynamic typing
+ Automatic coercion
11

View Slide

@MoOx
12

View Slide

@MoOx

13

View Slide

@MoOx
• ESLint?
• Flow?
• TypeScript?
14

View Slide

@MoOx
15

View Slide

@MoOx
Developers are humans
16
And we make mistakes

View Slide

@MoOx
What about TESTS?
17

View Slide

@MoOx
We covers what we
think about.
18
And we are developers. And we make mistakes

View Slide

@MoOx
19

View Slide

@MoOx
20

View Slide

@MoOx
21
1. A language
2. A syntax
3. A compiler
4. An ecosystem

View Slide

@MoOx
OCaml
22

%

View Slide

@MoOx
• Has a great type system
• Infers most types
• Multiparadigm
23

View Slide

@MoOx
Syntax can be hard
Tooling can be hard
24

View Slide

@MoOx
let rec map f = function
[] -> []
| a::l -> let r = f a in r :: map f l
25

View Slide

@MoOx
1. A language
2. A syntax
3. A compiler
4. An ecosystem
26

View Slide

@MoOx
~ES2015+
27
JS

View Slide

@MoOx
28
let add a b = a + b
let add = (a, b) => a + b;
ML
RE

View Slide

@MoOx
29
1. A language
2. A syntax
3. A compiler
4. An ecosystem

View Slide

@MoOx
BuckleScript
30

View Slide

@MoOx
RE

31
JS

View Slide

@MoOx
• Outputs clean and
performant code
• Makes interop easy
32
BUCKLESCRIPT

View Slide

@MoOx
33
1. A language
2. A syntax
3. A compiler
4. An ecosystem

View Slide

@MoOx
34
npm

View Slide

@MoOx
A bit of practice?
35

View Slide

@MoOx
1. Basics
2. Modules
3. Functions
4. Variants
5. Interop
36

View Slide

@MoOx
37
BASICS
1; /* int */
1.0; /* ﬂoat */
"Hello"; /* string */
'H'; /* char */
true; /* bool */

View Slide

@MoOx
38
BASICS
[1, 2, 3]; /* list(int) */
[|1, 2, 3|]; /* array(int) */
Some(x); /* option('a) */
() /* unit */

View Slide

@MoOx
39
RECORDS
let me = {
name: "Matthias",
age: 24,
};
let meLater = {
...me,
age: 25,
};
type user = {
name: string,
age: int,
};
You declare the type of the record
You can create records of this type
You can create spread values to create a new
record from a previous one

View Slide

@MoOx
1. Basics
2. Modules
3. Functions
4. Variants
5. Interop
40

View Slide

@MoOx
41
App.re
MODULES
Every file is a module
and filenames are unique
Welcome.re
let sayHi = (name) => Js.log("Hi " ++ name ++ "!");
Welcome.sayHi("people");
Every top level binding is exported
by default
To open a module, just use its
capitalised name

View Slide

@MoOx
42
MODULES
module Talk {
include Presentation;
let slides = ["a", "b", "c"];
let slidesWithIndex = slides
->Belt.List.mapWithIndex((index, item) => (index, item));
};
open OtherModule;
Declare a module within a module
Include modules
like a static extends
Make all module
available in scope

View Slide

@MoOx
1. Basics
2. Modules
3. Functions
4. Variants
5. Interop
43

View Slide

@MoOx
44
FUNCTIONS
let add = (a, b) => a + b;
let addDoubles = (a, b) => {
let doubleA = a * 2;
let doubleB = b * 2;
doubleA + doubleB;
};
Every function has its signature
let add: (int, int) => int = ;
Last expression is the
returned value

View Slide

@MoOx
45
FUNCTIONS
Pipe operator!
Functions are auto curried
That means that they return a function
taking the rest of the arguments as long
as you didn't pass all the required ones
[1, 2, 3]
->Belt.List.keep(item => item mod 2 === 0)
->Belt.List.map(item => item * 2);

View Slide

@MoOx
46
FUNCTIONS
let make = (
~rootPath="./",
~ﬁleExtensions=["re", "js"],
~watch=false,
~onChange=?,
()
) => {
/* ... */
};
Functions can have labelled arguments
Their order at function application doesn't mater
Optionals
Default values
Final non labelled argument
When you have optional arguments, this tells
the compiler «I have all the arguments there»

View Slide

@MoOx
1. Basics
2. Modules
3. Functions
4. Variants
5. Interop
47

View Slide

@MoOx
48
WHAT'S WRONG WITH THIS?
type state = {
isLoading: false,
hasErrored: false,
data: null,
};

View Slide

@MoOx
49
IMPOSSIBLE STATES ARE ACTUALLY POSSIBLE
isLoading hasErrored data
FALSE FALSE NULL
TRUE FALSE NULL
FALSE TRUE NULL
TRUE TRUE NULL
FALSE FALSE DATA
TRUE FALSE DATA
FALSE TRUE DATA
TRUE TRUE DATA
NotAsked
Loading
Errored
Loaded

View Slide

@MoOx
50
THE SOLUTION: VARIANTS
type t('a) =
| NotAsked
| Loading
| Loaded('a)
| Errored;
A variant type is a «OR» type
A type can be parametrised
aka Generics
Every constructor can hold data
like a container type

View Slide

@MoOx
51
switch (resource) {
| NotAsked => ""
| Loading => "Loading ..."
| Loaded(value) => "Loaded: " ++ value
| Errored => "An error occurred"
};
You use pattern matching to extract values

View Slide

@MoOx
52
switch (resource) {
| NotAsked => ""
| Loading => "Loading ..."
| Loaded(value) => "Loaded: " ++ value
};
Warning 8: this pattern-matching is not exhaustive. Here is an
example of a value that is not matched: Errored

View Slide

@MoOx
53
THERE'S NO NULL
type option('a) =
| Some('a)
| None;
switch (value) {
| Some(value) => value
| None => "Nothing to see"
};
Move null checks at compile time
If it's maybe a value, you need to handle it explicitly

View Slide

@MoOx
54
1
ARRAY VS LIST
1 2 3
1
1 1
2 1
3 1

View Slide

@MoOx
55
LIST IS A VARIANT TYPE
type list('a) =
| Empty
| Head('a, list('a));
let list = Head(1, Head(2, Head(3, Empty)));

View Slide

@MoOx
56
If there's nothing left
Return empty
Return a head with
transformed item
then transform the rest
with a recursive call
Recursive
let rec map = (f, list) =>
switch (list) {
| Empty => Empty
| Head(x, rest) => Head(f(x), map(f, rest))
};

View Slide

@MoOx
57
Reassigned
Reassigned
let foldLeft = (array, f, acc) => {
let index = -1;
while(++index < array.length) {
acc = f(acc, array[index])
};
return acc
};

View Slide

@MoOx
58
ACTUALLY IN JS
// http://es5.github.io/#x15.4.4.21
function foldLeft(arr, fn) {
var array = new Object(arr),
index = -1,
length = array.length >>> 0,
acc,
hasInitialValue;
if (Object.prototype.toString.call(fn) != "[object Function]") {
throw new TypeError();
}
if (arguments.length > 1) {
acc = arguments[1];
} else {
hasInitialValue = false;
while (++index < length) {
if (!(hasInitialValue = index in array)) {
continue;
}
acc = array[index];
break;
}
if (!hasInitialValue) {
}
}
if (!(index in array)) continue;
acc = fn.call(void 0, acc, array[index], index, array);
}
return acc;
};

View Slide

@MoOx
59
ACTUALLY IN JS: DYNAMIC TYPING
// http://es5.github.io/#x15.4.4.21
function foldLeft(arr, fn) {
var array = new Object(arr),
index = -1,
length = array.length >>> 0,
acc,
hasInitialValue;
if (Object.prototype.toString.call(fn) != "[object Function]") {
}
if (arguments.length > 1) {
acc = arguments[1];
} else {
hasInitialValue = false;
if (!(hasInitialValue = index in array)) {
continue;
}
acc = array[index];
break;
}
if (!hasInitialValue) {
}
}
if (!(index in array)) continue;
acc = fn.call(void 0, acc, array[index], index, array);
}
return acc;
};

View Slide

@MoOx
60
let rec fold_left = (f, acc, list) =>
switch (list) {
| [] => acc
| [x, ...rest] => fold_left(f, f(acc, x), rest)
};

View Slide

@MoOx
1. Basics
2. Modules
3. Functions
4. Variants
5. Interop
61

View Slide

@MoOx
How do we incrementally
adopt Reason on an
existing codebase?
62
INTEROP

View Slide

@MoOx
63
INTEROP: EXTERNAL MODULES
[@bs.module "../myExistingJsModule"]
external myExistingJsModule : string = "";
Declare that it's a module
located at "../myExistingModule"
The module is of string type
Js.log(myExistingJsModule);
The module is only imported
when used

View Slide

@MoOx
64
INTEROP: EXTERNAL MODULES
// Generated by BUCKLESCRIPT VERSION 2.2.4, PLEASE EDIT WITH CARE
'use strict';
var MyExistingJsModule = require("../myExistingJsModule");
console.log(MyExistingJsModule.myExistingJsModule);
/* Not a pure module */

View Slide

@MoOx
65
INTEROP: CREATE AND READ JAVASCRIPT OBJECTS
let myJsObject = {
"name": "Matthias",
"age": Js.Null.return(24)
};
Js.log(myJsObject##name);

View Slide

@MoOx
66
INTEROP: ACCESS THE JS STDLIB
array
|> Js.Array.map(item => item * 2);

View Slide

@MoOx
ReasonReact
67

View Slide

@MoOx
68

View Slide

@MoOx
69
WHERE DOES REACT COME FROM?
• Immutability
• Functional
approach
• PropTypes

View Slide

@MoOx
70
WHERE DOES REACT COME FROM?
Creator of React
Jordan Walke wrote the
ﬁrst React prototype in
SML

View Slide

@MoOx
71
REASONREACT HAS A LOT BAKED IN
• Components
• Router
• Reducers
• Subscriptions

View Slide

@MoOx
72
JSX
prop
optionalProps=?optionalValue
boolProp=false
/>

View Slide

@MoOx
73
REASONREACT: BASIC COMPONENT
let component = ReasonReact.statelessComponent("HelloWorld");
let make = (~name, _children) => {
...component,
render: (_self) =>

(ReasonReact.string("Hello " ++ name))

};

View Slide

@MoOx
74
REASONREACT: REDUCER COMPONENT
Define the type of the state
Define all possible actions
type state = int;
type action =
| Increment
| Decrement;
let component = ReasonReact.reducerComponent("Counter");

View Slide

@MoOx
75
Return an update for each action
can be
Update, UpdateWithSideEffect, SideEffect …
reducer: (action, state) =>
switch (action) {
| Increment => ReasonReact.Update(state + 1)
| Decrement => ReasonReact.Update(state - 1)
}

View Slide

@MoOx
76
Send actions in your render function
render: ({state, send}) =>

(ReasonReact.stringToElement(string_of_int(state)))
send(Increment)) title="+" />
send(Decrement)) title="-" />

View Slide

@MoOx
77
REASONREACT: INTEROP
ReasonReact.wrapReasonForJs(/* ... */)
ReasonReact.wrapJsForReason(/* ... */)

View Slide

@MoOx
Sum up
78

View Slide

@MoOx
• Safer
• Less bugs
• Easy refactoring
79
SUM UP

View Slide

@MoOx
We all come up with the
wrong assumptions on
our ﬁrst pass at something
80
SUM UP

View Slide

@MoOx
Fix your assumptions at
the type level and let the
compiler show you the way
81
SUM UP

View Slide

@MoOx
Spaghetti Reason code is
better than spaghetti JS
82
SUM UP

View Slide

@MoOx
C’est une bonne raison
pour utiliser Reason
83
SUM UP: ONE QUESTION

View Slide

@MoOx
84
Questions ?
https://moox.io/
@MoOx
Maxime Thirouin

Matthias Le Brun
@bloodyowl
Slides ripped from

View Slide

C'est qui Reason(ML) et qu'est ce qu'il fait là?

C'est qui Reason(ML) et qu'est ce qu'il fait là?

Maxime Thirouin

More Decks by Maxime Thirouin

Other Decks in Technology

Featured

Transcript