Reason meets OCaml - Reason is a syntax extension to OCaml that compiles to efficient JavaScript. It has a rock solid type system and access to the OCaml ecosystem. - ReasonReact provides React bindings for Reason. Components are defined in a similar way to TypeScript but use Reason's type system and compiler. - Examples show how stateless and stateful components are defined in ReasonReact compared to TypeScript. ReasonReact uses OCaml's type system and reducer pattern while TypeScript uses interfaces and state. - Interoperability with JavaScript is supported through modules, raw JavaScript blocks, and using the platform. Reason aims to leverage the strengths of both OCaml and React.

1. React meets OCaml
@MichalZalecki

2. Agenda
• What’s the Reason?
• How it becomes a JavaScript?
• Type system and other cool features
• ReasonReact vs TypeScript + React
• Interop with JavaScript

3. ASON

5. Why Reason is worth giving a try?
• Rock solid type system
• Access to OCaml ecosystem and standard library
• Possibility to compile to barebone assembly

8. ReasonReact

10. TypeScript – Stateless component
export const Expense = (props: ExpenseProps) => {
const { expense } = props;
return (
<li>
{expense.subject} | {expense.amount.toFixed(2)}
</li>
);
};

11. Setup
TypeScript
npm install -g create-react-app
create-react-app expenses-typescript --scripts-version=react-scripts-ts
cd expenses-typescript && npm start
ReasonReact
npm install -g bs-platform
bsb -init expenses-reason -theme react
cd expenses-reason && npm install && npm start
npm run webpack

12. Reason – Stateless component
let component = ReasonReact.statelessComponent("Expense");
let make = (~expense, _children) => {
...component,
render: (_self) =>
<li>
{ReasonReact.stringToElement(
Printf.sprintf("%s | %.2f", expense.subject, expense.amount)
)}
</li>
};

13. TypeScript – Types
export interface ExpenseType {
id: string
subject: string
amount: number
}
interface ExpenseProps {
expense: ExpenseType
}

14. Reason – Types
type expense = {
id: string,
subject: string,
amount: float
};

15. TypeScript – Stateful component
export class ExpensesList extends React.Component<{}, ExpensesListState> {
state: ExpensesListState = {
amount: "0",
expenses: []
};
submit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
this.setState(state => {
const amount = parseFloat(state.amount);
if (!Number.isNaN(amount)) {
return { /* ... */ };
}
return null;
});
}
}

16. Reason – Reducer component
type action =
| ChangeAmount(string)
| Submit;
let component = ReasonReact.reducerComponent("ExpensesList");
let make = (_children) => {
...component,
initialState: () => {expenses: [], amount: "0"},
reducer: (action, state) =>
switch action {
| ChangeAmount(amount) => ReasonReact.Update({...state, amount})
| Submit =>
switch (float_of_string(state.amount)) {
| amount =>
ReasonReact.UpdateWithSideEffects(/* ... */, (_self) => { /* ... */ })
| exception (Failure(_msg)) => ReasonReact.NoUpdate
}

18. Interop - libraries
[@bs.module] external uuidv4 : unit => string = "uuid/v4";
[@bs.module "uuid"] external uuidv4 : unit => string = "";

19. Interop – #usetheplatform/raw JavaScript
Js.log("this is reason");
[%%bs.raw {|
console.log('here is some javascript for you');
|}];

20. Thank you!
Questions time