A moderately deep look at new language with OCaml roots. Is there a reason to be hyped about it? Is it mature enough to be considered production ready? What does it offer over JS, Flow or other compiled to JS languages?

1. LANGUAGE & ECOSYSTEM INTRODUCTION
* from the perspective of JavaScript developer

2. WHAT IS REASON
New syntax, more familiar to JavaScript developers
JavaScript and Native compilation targets
Set of more accessible documentations, curated libraries and utilities
Umbrella project that provides a curated layer
for OCaml language.

3. BASICS
Bindings
let first = "GRAND";
let second = "PARADE";
let name = first ^ " " ^ second;

4. BASICS
Scope
let name = {
let first = "GRAND";
let second = "PARADE";
first ^ " " ^ second
};

5. BASICS
Bindings are immutable
let message = "Welcome to lunch & learn";
let message = "PIZZA";

6. BASICS
Bindings are immutable
let message = "Welcome to lunch & learn";
message = "PIZZA";

7. BASICS
Conditionals
if (isMorning) {
print_endline "Good morning!";
}

8. BASICS
Conditionals are expressions
let message = if (isMorning) {
"Good morning!"
} else {
"Hello!"
};

9. BASICS
Ternaries
let message = isMorning ? "Good morning!" : "Hello!";

10. BASICS
Functions
let greetSomeone = name => {
let part1 = "Hello ";
part1 ^ name ^ "!"
};

11. BASICS
Functions
let greeting = greetSomeone "Grand Parade";

12. BASICS
Functions with labeled arguments
let drawCircle radius ::r color ::c => {
/* do something with r and c */
};

13. BASICS
Functions with labeled arguments
drawCircle radius ::10 color ::"red";

14. BASICS
Functions are curried by default
let add x y => x + y;
let add10 = add 10;
let result = add10 15; /* 25 */

15. DATA TYPES
Tuples
let myThreeFloats = (20.0, 30.0, 100.0);
let myIntAndString = (20, "totallyNotAnInteger");
immutable 💥 ordered 💥 fixed-sized 💥 heterogeneous

16. DATA TYPES
Tuples
let (firstFloat, _, thirdFloat) = (20.0, 30.0, 100.0);
let (_, secondString) = (20, "totallyNotAnInteger");

17. DATA TYPES
Records
type company = {name: string, size: int};
let gp = {name: "Grand Parade", size: 600};
light 💥 immutable by default 💥 fast 💥 less flexible than objects

18. DATA TYPES
Records
print_string gp.name;
print_int gp.size;

19. DATA TYPES
Records
let {name, size} = gp;
print_string name;
print_int size

20. DATA TYPES
(Linked) Lists
let myList = [1, 2, 3];
immutable 💥 O(1) append 💥 homogeneous

21. DATA TYPES
(Linked) Lists
let anotherList = [0, ...myList];

22. DATA TYPES
Variant
type status =
| Pending
| Success
| Error;
allows to express "this or that"

23. DATA TYPES
Variant and Pattern Matching
switch state {
| Pending => print_endline "Loading ..."
| Success => print_endline "Loaded!"
| Error => print_endline "Loading error!"
};

24. DATA TYPES
Variant and Constructor Arguments
type status =
| Pending
| Success string
| Error string string;

25. DATA TYPES
Variant and Pattern Matching
switch state {
| Pending => print_endline "Loading ..."
| Success data => print_endline data
| Error status messsage =>
print_endline (status ^ " " ^ messsage)
};

26. PATTERN MATCHING
fun sum (xs: list int) =>
switch xs {
| [] => 0
| [hd, ...tl] => hd + sum tl
};

27. MAIN CONTRIBUTORS

28. REASON REACT & JSX
<Company
name="Grand Parade"
size=600
skills=["Scala", "Java", "JavaScript"]
/>

29. OCaml Syntax
OCaml Semantics
Bytecode Native
COMPILATION TARGETS

30. OCaml Syntax
OCaml Semantics
Bytecode Native
JSOO
(js_of_ocaml)
COMPILATION TARGETS

31. OCaml Syntax
OCaml Semantics
Bucklescript
COMPILATION TARGETS

32. Reason Syntax
OCaml Semantics
Bucklescript
COMPILATION TARGETS

33. BUCKLESCRIPT
💥 crazy fast 💥

34. BUCKLESCRIPT
💥 human readable output 💥
type company = {
name: string,
size: int
};
let gp = {
name: "Grand Parade",
size: 250
};
let gpNext = {
...gp,
size: 600
};
'use strict';
var gpNext = /* record */[
/* name */"Grand Parade",
/* size */600
];
var gp = /* record */[
/* name */"Grand Parade",
/* size */250
];
exports.gp = gp;
exports.gpNext = gpNext;

35. BUCKLESCRIPT
💥 optimizations 💥
type person = {
name: string,
score: int
};
let joe = {
name: "Joe",
score: 95
};
let joeGreeting =
if (joe.score + 10 > 20) {
"Hello!"
} else {
"Hey!"
};
'use strict';
var joe = /* record */[
/* name */"Joe",
/* score */95
];
var joeGreeting = "Hello!";
exports.joe = joe;
exports.joeGreeting = joeGreeting;

36. BUCKLESCRIPT
💥 easy JavaScript interop 💥
[ %%bs.raw {|
console.log("Let's execute some JS from Reason");
|}];

37. BUCKLESCRIPT
💥 easy JavaScript interop 💥
let x: string = [%bs.raw {| `${1 + 1} items` |}];

38. BUCKLESCRIPT
💥 easy JavaScript interop 💥
external setTimeout : (unit => unit) => int => int = "" [@@bs.val];
external clearTimeout : int => unit = "" [@@bs.val];

40. BUCKLESCRIPT
💥 small output 💥
Js.log "Hello world";
'use strict';
console.log("Hello world");

43. BUCKLESCRIPT
💥 small output 💥
module IntMap =
Map.Make {
type t = int;
let compare (x: int) y => compare x y;
};
let test () => {
let m = ref IntMap.empty;
let count = 1000000;
for i in 0 to count {
m := IntMap.add i i !m
};
for i in 0 to count {
ignore (IntMap.find i !m)
}
};
test ();
var Immutable = require('immutable');
var Map = Immutable.Map;
var m = new Map();
function test() {
var count = 1000000;
for(var i = 0; i < count; ++i) {
m = m.set(i, i);
}
for(var j = 0; j < count; ++j) {
m.get(j);
}
}
test();

44. BUCKLESCRIPT
💥 small output 💥
module IntMap =
Map.Make {
type t = int;
let compare (x: int) y => compare x y;
};
let test () => {
let m = ref IntMap.empty;
let count = 1000000;
for i in 0 to count {
m := IntMap.add i i !m
};
for i in 0 to count {
ignore (IntMap.find i !m)
}
};
test ();
execution time: 3415 ms
size: 55.3 kB (minified)

45. BUCKLESCRIPT
💥 small output 💥
execution time: 3415 ms
size: 55.3 kB (minified)
execution time: 1186 ms
size: 899 B (minified)

46. REFMT

47. NATIVE EXAMPLES
ReLayout - Reason CSS Flexbox implementation (Yoga)

48. NATIVE EXAMPLES
source: https://twitter.com/jaredforsyth/status/876973308494962688

49. SAFETY
type company = {
name: string,
size: int
};
let printCompanyDetails c =>
c.name ^ ", has " ^ string_of_int c.size ^ " employees";
*in the context of JS

50. SAFETY
printCompanyDetails {name: "Google", size: 57100};

51. SAFETY
printCompanyDetails {name: "Microsoft"};
File "test.re", line 10, characters 20-39:
Error: Some record fields are undefined: size

52. SAFETY
printCompanyDetails {
name: "Grand Parade",
size: 250,
location: "Cracow"
};
File "test.re", line 11, characters 54-62:
Error: This record expression is expected to have type company
The field location does not belong to type company

53. SAFETY
File "test.re", line 7, characters 2-42:
Warning: this pattern-matching is not exhaustive.
Here is an example of a value that is not matched:
(Black|Green)
type colorName = Blue | Black | Green;
let toHex color =>
switch color {
| Blue => "#0000ff"
};

54. SAFETY
let toHex color =>
switch color {
| Blue => "#0000ff"
| Black => "#000000"
| Green => "#00ff00"
};

55. SAFETY
type state = {data: option string};
option type

56. SAFETY
let displayState state => {
print_string state.data;
}
option type
File "test.re", line 3, characters 39-49:
Error: This expression has type string option
but an expression was expected of type string

57. SAFETY
let displayState state => {
let str =
switch state.data {
| None => "No data!"
| Some data => data
};
print_string str
};
option type

58. IMPERATIVE CODE
Mutations
let value = ref 10;
if condition {
value := 20
};
print_int !value;

59. IMPERATIVE CODE
Mutations
let value = {contents: 10};
if condition {
value.contents = 20
};
print_int value.contents;

60. IMPERATIVE CODE
Arrays
let array = [|"hello", "world"|];

61. IMPERATIVE CODE
Arrays
let world = array.(1);
array.(0) = "hey";

62. IMPERATIVE CODE
Loops
for i in 0 to 10 {
print_int i
};

63. IMPERATIVE CODE
Loops
while true {
print_endline "hello forever"
};

64. WHAT WE DIDN'T TALK ABOUT
Modules
Objects and OOP
React Reason
Async
Exceptions

65. IS IT READY?
Small number of libraries / products written in Reason
24 repositories for library bindings
16 questions on StackOverflow
Big changes to the language to come
Hard to get into documentation (on OCaml side)
Native workflow WIP

66. LEARNING RESOURCES
Courses
Programming Languages, part A [coursera]
Books
Any OCaml book thanks to Reason Tools
Real World OCaml - the most popular one
Docs
Reason 👍 Bucklescript 👍 Reason React
Tutorials / blogs
Jared Forsyth jaredforsyth.com 👍 James Friend jamesfriend.com.au

67. COMMUNITY
https://discordapp.com/invite/reasonml

68. • Reason - https://facebook.github.io/reason/
• Bucklescript - http://bucklescript.github.io/bucklescript/Manual.html
SOURCES
Docs
• An invitation to ReasonML - https://protoship.io/blog/2017/05/10/an-invitation-to-reasonml.html
• JavaScript interior with Reason and Bucklescript - https://jaredforsyth.com/2017/06/03/
javascript-interop-with-reason-and-bucklescript/
• When will ReasonML be ready? - https://jaredforsyth.com/2017/06/23/when-will-reasonml-be-
ready
• Mareo: Reason + Bucklescript + Mario - https://medium.com/@chenglou/mareo-reason-
bucklescript-mario-205ce4c1cbe5
Articles and tutorials
Projects
• ReLayout - https://github.com/jordwalke/ReLayout
• ReasonablyTyped - https://github.com/rrdelaney/ReasonablyTyped