-

3. JavaScript developer
friendly syntax

4. let meaningOfLife = 41 + 1;

5. let add = (x, y) => x + y;
add(2, 2);
add(41, 1);

6. let fruits = ["Apple", "Orange"];

7. if (true) {
print_string("Hello World!");
};

8. OCaml semantics

9. Reason Syntax OCaml Syntax
OCaml AST

10. Records

11. let jane = {name: "Jane", age: 40};

12. let jane = {name: "Jane", age: 40};

13. type person = {
name: string,
age: int,
};
let jane = {name: "Jane", age: 40};

14. type person = {
name: string,
age: int,
};
let jane = {name: "Jane", age: 40};
let tim = {...jane, name: "Tim"};

15. Compiles to JavaScript

16. Reason Syntax OCaml Syntax
OCaml AST
JavaScript
BuckleScript

17. Reason Syntax OCaml Syntax
OCaml AST
Native Code JavaScript
BuckleScript

18. Formatter

19. Reason Syntax OCaml Syntax
OCaml AST
Native Code JavaScript
BuckleScript

20. Reason Syntax OCaml Syntax
OCaml AST
Native Code JavaScript
refmt
BuckleScript

21. Statically Typed Language

23. Why yet another one?

24. const pieces = [
{ kind: "king", color: "black", position: [3, 4] },
{ kind: "pawn", color: "black", position: [4, 2] },
{ kind: "knight", color: "white", position: [3, 3] }
];
JavaScript

25. interface Piece {
kind: string;
color: string;
position: number[];
}
const pieces = [
{ kind: "king", color: "black", position: [3, 4] },
{ kind: "pawn", color: "black", position: [4, 2] },
{ kind: "knight", color: "white", position: [3, 3] }
];
const getKinds = (pieces: Piece[]) => pieces.map(piece => piece.kind);
TypeScript

26. interface Piece {
kind: string;
color: string;
position: number[];
}
const pieces = [
{ kind: "king", color: "black", position: [3, 4] },
{ kind: "pawn", color: "black", position: [4, 2] },
{ kind: "knight", color: "white", position: [3, 3] }
];
const getKinds = (pieces: Piece[]) => pieces.map(piece => piece.kind);
TypeScript

27. type piece = {
kind: string,
color: string,
position: (int, int),
};
let pieces = [
{kind: "king", color: "black", position: (3, 4)},
{kind: "pawn", color: "black", position: (4, 2)},
{kind: "knight", color: "white", position: (3, 3)},
];
let getKinds = pieces => List.map(item => item.kind, pieces);
Reason

28. import * as React from "react";
interface Props {
text: string;
checked: boolean;
onToggle(): void;
}
export default TodoItem: React.SFC<Props> = ({ text, checked, onToggle }) => (
<li>
<b
onClick={onToggle}
style={{
textDecoration: checked ? "line-through" : "none"
}}
>
{text}
</b>
</li>
);
TypeScript

29. Reason
let component = ReasonReact.statelessComponent("Todo");
let make = (~text, ~checked, ~onToggle, _children) => {
...component,
render: _self =>
<li>
<b
onClick=onToggle
style=(
ReactDOMRe.Style.make(
~textDecoration=checked ? "line-through" : "none",
(),
)
)>
(ReasonReact.string(text))
</b>
</li>,
};

30. Variants

31. type direction =
| Up
| Down
| Left
| Right;

32. type direction =
| Up
| Down
| Left
| Right;
let move = Left;

33. type direction =
| Up(int)
| Down(int)
| Left(int)
| Right(int);
let move = Left(2);

34. type data = {names: list(string)};
type request =
| Loading
| Error(int)
| Success(data);

35. type color = Black | White;
type kind = Queen | King | Rook | Bishop | Knight | Pawn;
type piece = {
color,
kind,
position: (int, int),
};
let pieces = [
{kind: King, color: Black, position: (3, 4)},
{kind: Pawn, color: Black, position: (4, 2)},
{kind: Knight, color: White, position: (3, 3)},
];

36. type color = Black | White;
type kind = Queen | King | Rook | Bishop | Knight | Pawn;
type piece = {
color,
kind,
position: (int, int),
};
let pieces = [
{kind: King, color: Black, position: (3, 4)},
{kind: Pawn, color: Black, position: (4, 2)},
{kind: Knight, color: White, position: (3, 3)},
];

37. type color = Black | White;
type kind = Queen | King | Rook | Bishop | Knight | Pawn;
type piece = {
color,
kind,
position: (int, int),
};
let pieces = [
{kind: King, color: Black, position: (3, 4)},
{kind: Pawn, color: Black, position: (4, 2)},
{kind: Knight, color: White, position: (3, 3)},
];

38. Pattern Matching

39. switch (<value>) {
| <pattern1> => <case1>
| <pattern2> => <case2>
| ...
};

40. switch (1) {
| 0 => "off"
| 1 => "on"
| _ => "off"
};

41. let displayText =
switch (1) {
| 0 => "off"
| 1 => "on"
| _ => "off"
};

42. type data = {names: list(string)};
type request =
| Loading
| Error(int)
| Success(data);
let ui =
switch (Loading) {
| Loading => "Loading ..."
| Error(code) => "Something went wrong. Error: " ++ string_of_int(code)
| Success(data) => List.fold_left((a, b) => a ++ b, "Names:", data.names)
};

43. type data = {names: list(string)};
type request =
| Loading
| Error(int)
| Success(data);
let ui =
switch (Loading) {
| Loading => "Loading ..."
| Error(401) => "You aren’t authenticated."
| Error(code) => "Something went wrong. Error: " ++ string_of_int(code)
| Success(data) => List.fold_left((a, b) => a ++ b, "Names:", data.names)
};

44. type data = {names: list(string)};
type request =
| Loading
| Error(int)
| Success(data);
let ui =
switch (Loading) {
| Loading => "Loading ..."
| Error(401 | 402) => "You aren’t authenticated."
| Error(code) => "Something went wrong. Error: " ++ string_of_int(code)
| Success(data) => List.fold_left((a, b) => a ++ b, "Names:", data.names)
};

46. – Tony Hoare
“I call it my billion-dollar mistake …”

49. Lesson I
Don’t implement anything just
because it’s easy!

50. Lesson II
Null is BAD!

51. null; // doesn't exist!

52. Option

53. let foo = None;
let foo = Some(42);
let foo = Some([1, 2, 3]);
let foo = Some("Hello World!");

54. let foo = None;
let foo = Some(42);
let foo = Some([1, 2, 3]);
let foo = Some("Hello World!");
switch (foo) {
| None => "Sadly I don't know."
| Some(value) => "It's " ++ value
};

55. Functions

56. let add = (x, y) => x + y;
add(2, 2);
add(41, 1);

57. let name = (~firstName, ~lastName) => firstName ++ " " ++ lastName;
/* Jane Doe */
name(~firstName="Jane", ~lastName="Doe");
/* Jane Doe */
name(~lastName="Doe", ~firstName="Jane");

58. ReasonReact

59. Stateless Component
let component = ReasonReact.statelessComponent("Greeting");
let make = (_children) => {
...component,
render: _self => <h1>(ReasonReact.string("Hello"))</h1>,
};
ReactDOMRe.renderToElementWithId(<Greeting />, "root");
Greeting.re
App.re

60. Props
let component = ReasonReact.statelessComponent("Greeting");
let make = (~name, _children) => {
...component,
render: _self => <h1>(ReasonReact.string(“Hello " ++ name))</h1>,
};
ReactDOMRe.renderToElementWithId(<Greeting name="Helsinki" />, "root");
Greeting.re
App.re

61. Props
let component = ReasonReact.statelessComponent("Greeting");
let make = (~name, _children) => {
...component,
render: _self => <h1>(ReasonReact.string("Hello " ++ name))</h1>,
};
ReactDOMRe.renderToElementWithId(<Greeting name="Helsinki" />, "root");
Greeting.re
App.re

62. Props
let component = ReasonReact.statelessComponent("Greeting");
let make = (~name, _children) => {
...component,
render: _self => <h1>(ReasonReact.string("Hello " ++ name))</h1>,
};
ReactDOMRe.renderToElementWithId(<Greeting name="Helsinki" />, "root");
Greeting.re
App.re

64. type state = {count: int};

65. type state = {count: int};
type action =
| Add(int)
| Reset;

66. type state = {count: int};
type action =
| Add(int)
| Reset;
let s = ReasonReact.string;

67. type state = {count: int};
type action =
| Add(int)
| Reset;
let s = ReasonReact.string;
let component = ReasonReact.reducerComponent("Counter");

68. type state = {count: int};
type action =
| Add(int)
| Reset;
let s = ReasonReact.string;
let component = ReasonReact.reducerComponent("Counter");
let make = _children => {
...component,
initialState: () => {count: 0},

69. type state = {count: int};
type action =
| Add(int)
| Reset;
let s = ReasonReact.string;
let component = ReasonReact.reducerComponent("Counter");
let make = _children => {
...component,
initialState: () => {count: 0},
reducer: (action, state) =>
switch (action) {
| Add(value) => ReasonReact.Update({count: state.count + value})
| Reset => ReasonReact.Update({count: 0})
},

70. type state = {count: int};
type action =
| Add(int)
| Reset;
let s = ReasonReact.string;
let component = ReasonReact.reducerComponent("Counter");
let make = _children => {
...component,
initialState: () => {count: 0},
reducer: (action, state) =>
switch (action) {
| Add(value) => ReasonReact.Update({count: state.count + value})
| Reset => ReasonReact.Update({count: 0})
},
render: self =>
<div>
(s(string_of_int(self.state.count)))

71. let s = ReasonReact.string;
let component = ReasonReact.reducerComponent("Counter");
let make = _children => {
...component,
initialState: () => {count: 0},
reducer: (action, state) =>
switch (action) {
| Add(value) => ReasonReact.Update({count: state.count + value})
| Reset => ReasonReact.Update({count: 0})
},
render: self =>
<div>
(s(string_of_int(self.state.count)))
<button onClick=(_event => self.send(Add(1)))> (s(“Add")) </button>
<button onClick=(_event => self.send(Add(2)))> (s("Add 2")) </button>
<button onClick=(_event => self.send(Reset))> (s("Reset")) </button>
</div>,
};

73. Manage your State with GraphQL

74. Interop with JavaScript

75. BuckleScript allows us to write bindings
ReasonReact
- wrapJsForReason
- wrapReasonForJs

76. [@bs.module "rebass"] external jsArrow : ReasonReact.reactClass = "Arrow";
let make = (~direction: string, children) =>
ReasonReact.wrapJsForReason(
~reactClass=jsArrow,
~props={"direction": direction},
children,
);

77. <Arrow direction="down" />

78. <Arrow direction="left" />

79. <Arrow direction="notRight"/>

81. Variants to the rescue!

82. [@bs.module "rebass"] external jsArrow : ReasonReact.reactClass = "Arrow";
type direction =
| Up
| Down;
let make = (~direction, children) => {
let directionString =
switch (direction) {
| Up => "up"
| Down => "down"
};
ReasonReact.wrapJsForReason(
~reactClass=jsArrow,
~props={"direction": directionString},
children,
);
};

83. <Arrow direction=Arrow.Down />;

84. <Arrow direction=Arrow.Left />;

85. <Arrow direction=Arrow.Left />;

86. So what now?

87. Don’t be that person

88. Time
Innovation
React Ecosystem

89. Time
Innovation
React Ecosystem
Reason Ecosystem

90. The End