1.
REASONML
About

2.
NEW SYNTAX & TOOLCHAIN FOR OCAML

3.
LOOKS AND FEELS LIKE

4.
(* ocaml *)
let x y = y + 2
type 'a mytype
type listOfString = string list
let run () =
let nothing = None in
let something = Some 10 in
Js.log3 "a" 2 something;
let count = match nothing with
| None !=> "10"
| Some _ !=> "20"
in
if x 2 = 4 then
Js.log "Good"
else
Js.log "panic!"
.
!/* old reason !*/
let x y !=> y + 2;
type mytype 'a;
type listOfString = list string;
let run () !=> {
let nothing = None;
let something = Some 10;
Js.log3 "a" 2 something;
let count = switch nothing {
| None !=> "10"
| Some _ !=> "20"
};
if (x 2 !== 4) {
Js.log "Good"
} else {
Js.log "panic!"
}
};
!/* new reason !*/
let x(y) !=> y + 2;
type mytype('a);
type listOfString = list(string);
let run () !=> {
let nothing = None();
let something = Some(10);
Js.log3("a", 2, something);
let count = switch nothing {
| None !=> "10"
| Some _ !=> "20"
};
if (x(2) !== 4) {
Js.log("Good");
} else {
Js.log("panic!");
}
};

5.
YARN/NPM BASED WORKFLOW

6.
FULL REBUILD IS 2S, INCREMENTAL BUILD IS <100MS ON AVERAGE.
USED TO RECEIVE BUGS REPORTS ON A DAILY BASIS; THERE HAVE BEEN A
TOTAL OF 10 BUGS DURING THE WHOLE YEAR!
REFACTORING SPEED WENT FROM DAYS TO DOZENS OF MINUTES.
Messenger.com

7.
OCAML
About

8.
GENERAL PURPUSE SYSTEM
LANGUAGE

9.
STABLE, MATURE, 20 YEARS
OLD

10.
STATIC TYPES AND TYPE
INFERENCE

11.
BUCKLESCRIPT BRINGS
OCAML TO THE WEB

12.
WHY
The

13.
FREAKIN‘ FAST!

14.
TYPE IS COOL

15.
TYPE INFERENCE IS EVEN MORE COOLER!

16.
FUNCTIONAL BUT PERMISSIVE

17.
VARIANT AND PATTERN MATCHING

18.
CAN TARGET JS AND NATIVE

19.
HUMAN READABLE ERROR MESSAGE

20.
COMPLETE TOOLS

21.
Package Management
Bundler
UI Library
Forma9er
Linter
Transpiler
Boilerplate
yarn/npm
webpack
React
Pre0er
ESLint
Babel
create-react-app
ReasonReact
🎉
🎉
Refmt
🎉
🎉
🎉

22.
EASE OF ADOPTION AND EASE OF
MAINTENANCE

23.
Ease of Adop+on
EaseofMaintenance
Low High
High

24.
JS Interop
FAR CLOSE

25.
“THE COMMUNITY IS SMALL BUT VERY
FOCUSED ON DELIVERING A BETTER
EXPERIENCE FOR DEVELOPERS.”
Wojciech Bilicki

26.
BUCKLESCRIPT
Now

27.
BRINGS OCAML TO THE WEB

28.
COMPILES OCAML/REASON TO JS

29.
OCaml
OCaml Semantic
Bytecode Native
Reason

30.
OCaml
OCaml Semantic
Reason
BuckleScript
JavaScript
Bytecode Native

31.
SUPER READABLE OUTPUT

32.
'use strict';
var Http = require("http");
var Http$1 = /* module */[];
Http.createServer((function (_, res) {
return res.end("Hello Bali");
})).listen(3333);
exports.Http = Http$1;

33.
'use strict';
function add(a, b) {
return a + b | 0;
}
exports.add = add;

34.
GREAT INTEROP WITH JS

35.
10X FASTER THAN

36.
REASONMLRecap

37.
MODERN SYNTAX AND TOOLCHAIN FOR OCAML
STATIC TYPE AND TYPE INFERENCE
CAN TARGET AND INTEROP WITH JS
COMPILE TO NATIVE AND BYTECODE
FAST, READABLE OUTPUT, READABLE ERROR MESSAGE

38.
“TALK IS CHEAP. SHOW ME CODE.”
Linus Torvalds

39.
Install and Setups
$ yarn global add bs-platform
$ yarn global add reason-cli
$ rtop

40.
Syntax 101
let two = 1 + 1;
print_int(42);
print_endline("Hello Bali");
let float_addition = 1.1 +. 2.2;
Js.log(2 > 3);
Js.log(2 > 3.1);
Js.log(float_of_int(2) > 3.1);
print_endline("Hello" ++ "Bali");
let age = 32;
let age: int = 32;
let colors = ["red", "green", "blue"];

41.
Records 101
type person = {
age: int,
name: string,
};
type nonPerson = {
age: int,
name: string,
species: string,
};
let kuririn: person = {age: 31, name: "Kuririn"};
let chiChi = {age: 21, name: "Chi-chi"};
let piccolo = {age: 103, name: "Piccolo", species: “Namek”};
print_endline(piccolo.species);

42.
Reason Project
$ bsb -init reason-demo -theme basic-reason
$ cd reason-demo
.
!"" README.md
!"" bsconfig.json
!"" node_modules
# %"" bs-platform
!"" package.json
%"" src
%"" Demo.re

43.
package.json
{
"name": "reason-demo-1",
"version": "0.1.0",
"scripts": {
"build": "bsb -make-world",
"start": "bsb -make-world -w",
"clean": "bsb -clean-world"
},
"keywords": [
"BuckleScript"
],
"author": "",
"license": "MIT",
"devDependencies": {
"bs-platform": "^4.0.6"
}
}

44.
bsconfig.json{
"name": "reason-demo-1",
"version": "0.1.0",
"sources": {
"dir" : "src",
"subdirs" : true
},
"package-specs": {
"module": "commonjs",
"in-source": true
},
"suffix": ".bs.js",
"bs-dependencies": [
// add your dependencies here.
],
"warnings": {
"error" : "+101"
},
"namespace": true,
"refmt": 3
}

45.
src/Demo.re
Js.log("Hello, BuckleScript and Reason!");

46.
$ node src/Demo.bs.js
Hello, BuckleScript and Reason!
Try it out!
$ yarn start
.
%"" src
!"" Demo.bs.js
%"" Demo.re

47.
Variants 101
type species =
| Saiyan
| Namekian
| Human
| Majin
| Other;
type characters = {
age: int,
name: string,
species,
};
let bejita = {age: 42, name: "Vegeta", species: Saiyan};

48.
Pattern Matching 101
let reply =
switch (message) {
| "Reason's pretty cool" => "Yep"
| "good night" => "See ya!"
| “hello" | “hi" | “heya" | "hey" => "hello to you too!"
| _ => "Nice to meet you!"
};

49.
Pattern Matching and Variant
let hear =
switch (bejita.species) {
| Saiyan => "This is too easy for me!!"
| Namekian => “…”
| Other => “Let’s try one more time"
};

50.
Binding and Interop
[%bs.raw {|
console.log("here is some js for you!")
|}];
Js.log("this is reason");
let x = [%bs.raw {| 'here is a string from javascript' |}];
Js.log(x ++ " back in reason land");
[@bs.val] external pi: float = "Math.PI";
let volume_cylinder = (diameter, height) => pi *. diameter *. height;

51.
DEMO CODERecap

52.
FAMILIAR SYNTAX
TYPE AND TYPE INFERENCE
VARIANTS
PATTERN MATCHING
BINDING AND INTEROP

53.
REACT
Wait, what about

54.
+ =

55.
NPM/Yarn
React Router
Flow
Pre;er
EsLint JS Console
PropTypes
Redux

56.
NPM/Yarn
React Router
Flow
Pre;er
EsLint JS Console
NPM/Yarn
Reason Router
StaGc
Typing
Refmt
Rtop
PropTypes PropTypes
Redux Redux

57.
NPM/Yarn
Deps
Deps
Deps
Deps
Included in
Browser
NPM/Yarn
Included
Language
feature
Included Included in
Toolchain
Deps Language
feature
Deps Included

58.
Component Lifecycle
componentDidMount()
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
componentDidUpdate()
componentWillUnmount()
didMount
willReceiveProps
shouldUpdate
willUpdate
didUpdate
willUnmount

59.
Props
{this.props.someProp}
<Example someProp=“Hello!” />
let make(~someProp, _children) {
…component,
render /* etc */
}
<Example someProp=“Hello!” />

60.
ReasonReact.statelessComponent
ReasonReact.reducerComponent
Component

61.
type state = {count: int};
/* the actions */
type action =
| Increment
| Decrement;
let component = ReasonReact.reducerComponent("Counter");
let make = (_children) => {
...component,
/* the state */
initialState: () => {count: 0},
/* the reducer */
reducer: (action, state) =>
switch action {
| Increment => ReasonReact.Update({count: state.count + 1})
| Decrement => ReasonReact.Update({count: state.count - 1})
},
render: ({ state, send }) =>
<div>
<h1> {ReasonReact.string(string_of_int(state.count))} </h1>
<button onClick=((_e) => send(Increment))> {ReasonReact.string(“+”)} </button>
<button onClick=((_e) => send(Decrement))> {ReasonReact.string(“-“)} </button>
</div>
};

62.
type state = {count: int};

63.
/* the actions */
type action =
| Increment
| Decrement;

64.
let component = ReasonReact.reducerComponent("Counter");

65.
let make = (_children) => {
...component,
/* the state */
initialState: () => {count: 0},
/* … */
};

66.
/* the reducer */
reducer: (action, state) =>
switch action {
| Increment => ReasonReact.Update({count: state.count + 1})
| Decrement => ReasonReact.Update({count: state.count - 1})
},

67.
render: ({ state, send }) =>
<div>
<h1> {ReasonReact.string(string_of_int(state.count))} </h1>
<button onClick=((_e) => send(Increment))> {ReasonReact.string(“+”)} </button>
<button onClick=((_e) => send(Decrement))> {ReasonReact.string(“-“)} </button>
</div>

68.
REASONREACTRecap

69.
“At the language level, it has features that we’v previously had to
Bolt on top of the JavaScript such as alloca+on-less named
arguments, prop types and more. In short, it is the best way to
take React to the next level — unlocking far beGer user
experience and fast-loading applica+ons.”
Jordan Walke
Creator React and Reason

70.
JavaScript and HTML — I can build things!
React — I can reuse my things!
ReasonReact — I can reuse my React things more safely!
All FuncGonal Programming

71.
Some Additional Resources
DISCORD.GG/REASONML
ZAISTE.NET/REASON_IN_NUTSHELL_GETTING_STARTED_GUIDE
JAREDFORSYTH.COM/POSTS/A-REASON-REACT-TUTORIAL
MARMELAB.COM/BLOG/2018/04/09/ENJOY-PAINLESS-TYPING-WITH-REASON.HTML
CROWDIN.COM/PROJECT/REASON

72.
github.com/rizafahmi
slideshare.net/rizafahmi
twiDer.com/rizafahmi22
facebook.com/rizafahmi
riza@hackGv8.com
ceritanyadeveloper.com