ReasonML & Bucklescript, or how to do a functional NodeJS app

1. ReasonML & Bucklescript, or how to do a functional NodeJS app
NodeJS The edge of Reason

2. What I do
Thomas Haessle
@Oteku
cutii.io

3. is amazing
Tooling
Fast (web point of view)

4. is a mess

5. fit functional
Object literals
Spread operators
Arrays map / reduce / filter
Functions as first class citizen
Currying
Closures
Arrow functions
…
JSX (composition)
React stateless components (composants fonctionnels)
React PropTypes (Typage sur propriétés des composants)
…
Redux pattern
…
RxJS

6. is unfunctional
Code Easy to Reason About :
- does not affect or mutate external state
- does not rely on external state
- always return the same corresponding output for a given input
- have up to date documentation

7. Give me a Reason(ML)
Reason lets you write simple, fast and quality type safe
code while leveraging both the JavaScript & OCaml ecosystems.

8. How a 21 years old language may Reasonably
help me ?

9. How a 21 years old language may Reasonably
help me ?

10. How a 21 years old language may Reasonably
help me ?
… and some love Reasons
(be patient)

11. « Déjà vu »

12. is designed for JS dev
const greeting = "Bonjour";
const greetList = [];
greetList.push(greeting); /*references are
immutables, not values !*/
const gList = ['Hello', 'Hallo'];
const greetings = [greeting, ...gList];
let who = "FP Lille#7";
who = "LilleFP#6";
function internationalGreet(gWords, name) {
return gWords.map(current => current + " " + name);
}
console.log(...internationalGreet(greetings, who));
dummy.js
let greeting = "Bonjour"; /* inference */
/* List type is immutable */
let greetList = [];
let prepended = [greeting, ...greetList];
let appended = greetList @ [greeting];
let greetArray = [||]; /* Array type is mutable */
greetArray.(0) = greeting;
let gList: list string = ["Hello", "Hallo"]; /* type may be
explicit */
let greetings = [greeting, ...gList]; /* (ﾉ＾ヮ＾)ﾉ*:・ﾟ✧ spread
operator */
let who = ref "FP Lille#7"; /* explicit mutability */
who := "LilleFP#6";
let internationalGreet gWords name => gWords |> List.map (fun
current => current ^ " " ^ name);
internationalGreet greetings !who |> List.iter (fun current =>
Js.log current);
dummy.re

13. is designed for JS dev
let greeting = "Bonjour"; /* inference */
/* List type is immutable */
let greetList = [];
let prepended = [greeting, ...greetList];
let appended = greetList @ [greeting];
let greetArray = [||]; /* Array type is mutable */
greetArray.(0) = greeting;
let gList: list string = ["Hello", "Hallo"]; /* type may be
explicit */
let greetings = [greeting, ...gList]; /* (ﾉ＾ヮ＾)ﾉ*:・ﾟ✧ spread
operator */
let who = ref "FP Lille#7"; /* explicit mutability */
who := "LilleFP#6";
let internationalGreet gWords name => gWords |> List.map (fun
current => current ^ " " ^ name);
internationalGreet greetings !who |> List.iter (fun current =>
Js.log current);
dummy.re
let greeting = "Bonjour"
let greetList = []
let prepended = greeting :: greetList
let appended = greetList @ [greeting]
let greetArray = [||]
let _ = greetArray.(0) <- greeting
let gList: string list = ["Hello"; "Hallo"]
let greetings = greeting :: gList
let who = ref "FP Lille#7"
let _ = who := "LilleFP#6"
let internationalGreet gWords name =
gWords |> (List.map (fun current -> current ^ (" " ^ name)))
let _ =
(internationalGreet greetings (!who)) |>
(List.iter (fun current -> Js.log current))
dummy.ml

15. https://youtu.be/_0T5OSSzxms
Cheng Lou - Taming the Meta

16. add1.re
add1.rei
demo.re
human readable output
dead code elimination
(similaire prepack.io)
code optimizations
amazingly fast
safer JS runtime execution
( param = 2 + undefined
… mais param = 2 + « 3 » )
demo.js
add1.js
bsb --make-world

17. ||
• Compile high-level rawlambda to js
• Focuses more on npm
• Readable js output
• Compile low-level bytecode to js
• Focuses more on opam
• Uglify js output
• Amazingly fast
• Improving quickly
• Stimulate each other
• License LGPL

18. Types System

19. Types System Inference

20. Types System Inference

21. https://github.com/reasonml/reason-tools

22. page.re
root.re
root.js
page.js

23. type action =
| Click
| Toggle;
type state = {count: int, show: bool};
let component = ReasonReact.reducerComponent "MyDialog";
let make _children => {
...component,
initialState: fun () => {count: 0, show: false},
reducer: fun action state =>
switch action {
| Click => ReasonReact.Update {...state, count: state.count + 1}
| Toggle => ReasonReact.Update {...state, show: not state.show}
},
render: fun self => {
let message = "Clicked " ^ string_of_int self.state.count ^ " times(s)";
<div>
<MyDialog
onClick=(self.reduce (fun _event => Click))
onSubmit=(self.reduce (fun _event => Toggle)) />
(ReasonReact.stringToElement message)
</div>
}
};
Reducer component

24. will (would) be amazing
Tooling

25. ality
CONS :
Still young
Little community (but growing)
A functional language learning curve for JS devs
No native packages management (hot topic)
Poor documentation
Bucklescript targets ES5 while node.js is ES8 VS babel-preset-env
Breaking change version is coming next month
PROS :
Battle tested type system with inference : OCaml under the hood
Kind community
Really good samples
Production ready (used for messenger.com)
Reason-react with reducer components
First Reason React Native app published in stores last month (https://github.com/FormidableLabs/seattlejsconf-app)
Facebook baked
May be adopt baby-step (one node module, one react component, …)

26. ason to be confident
Why ? Reason’s design fit our problems
Do we have a great community ? Almost … we have a discord
Yes and great toolingDo we have a great language ?

28. ad More
ReTwit
@reasonml
@jordwalke (react & reason creator)
@_chenglou (react team / reason evangelist)
@sgrove (reason evangelist)
@bobzhang1988 (bucklescript creator)
@ken_wheeler (Director of Open Source @FormidableLabs)
ReSpond
https://discordapp.com/invite/reasonml
https://www.reddit.com/r/reasonml/
ReSources
https://reasonml.github.io/
https://github.com/vramana/awesome-reasonml
https://github.com/bucklescript

29. gards on Youtube
Sean Grove - Everything appends with a Reason : https://youtu.be/tB705w4w6H0
Jake Trent - TDD a ReasonML Function : https://youtu.be/nivVNJPj2z8
Cheng Lou - Imperfection : https://youtu.be/tCVXp6gFD8o