Matthias Le Brun
September 26, 2017
420

# ReasonML @ OCaml Users in Paris

## Matthias Le Brun

September 26, 2017

## Transcript

4. ### let rec qsort = function | [] !-> [] |

pivot #:: rest !-> let is_less x = x < pivot in let left, right = List.partition is_less rest in qsort left @ [pivot] @ qsort right

8. ### Storytime •Initially, React was written in SML by Jordan Walke

•The idea for Reason actually predates React •Front-end community wasn’t ready yet

11. ### Functions let x a b = e let x =

fun a b !-> e OCaml Reason let x a b %=> e; let x = fun a b %=> e;
12. ### Equality a = b b '== c a #<> b

a *!= b OCaml Reason a '== b b ##=== c a *!= b a --!== b
13. ### Expressions let c = let a = "a" in let

b = "b" in a ^ b OCaml Reason let c = { let a = "a"; let b = "b"; a ^ b };
14. ### Tuples type tup = int * int let tuple =

a, b OCaml Reason type tup = (int, int) let tuple = (a, b)
15. ### Record types type rec = { foo: string; bar: string

}; OCaml Reason type rec = { foo: string, bar: string };
16. ### Records { foo = "bar"; bar = "baz" } OCaml

Reason { foo: "bar", bar: "baz", }

19. ### Variants type foo = | A of string | B

of string OCaml Reason type foo = | A string | B string
20. ### Pattern matching match a with | A x %=> "A"

^ x | B x %=> "B" ^ x OCaml Reason switch a { | A x %=> "A" ^ x | B x %=> "B" ^ x }

27. ### BuckleScript •Like js_of_ocaml but takes on after an earlier step

of compilation •Makes some optimisations considering the JS target •Great interoperability

29. ### Smaller footprint var user = //* record -*/[ //* username

-*/"Bob", //* id : Some -*/["abc"], //* age -*/32 ];

33. ### type user = { name: string, age: int }; let

fromJs jsObject %=> { name: jsObject###name, age: jsObject###age }; Convert from JS
34. ### let toJs object %=> { "name": object.name, "age": object.age };

Convert to JS

36. ### type message = | Image string | String string; let

fromJs js %=> { switch js###message_type { | "image" %=> Image js###value | "string" | _ %=> String js###value } } Complex conversions

38. ### let getPageKeywords () %=> switch ( DomRe.Document.querySelector "meta[name=\"keywords\"]" DomRe.document )

{ | Some meta %=> switch (DomRe.Element.getAttribute "content" meta) { | Some content %=> Js.String.split "," content *|> Array.to_list *|> List.map String.trim | None %=> [] } | None %=> [] };

40. ### Simpler workflow •Effort is for now a lot on the

JS back-end •Coming for native compilation

43. ### ReactJS import React from "react"; import { string } from

"prop-types"; const App = props %=> ( <div> {props.message} !</div> ) App.propTypes = { message: string.isRequired };
44. ### ReasonReact let component = ReasonReact.statelessComponent "App"; let make #::message _children

%=> { …component, render: fun _ %=> <div> (ReasonReact.stringToElement message) !</div> };

| Decrement;
46. ### ReasonReact let component = ReasonReact .reducerComponent "App"; let make _

%=> { …component, reducer: fun action state %=> switch action { | Increment %=> ReasonReact.Update (state + 1) | Decrement %=> ReasonReact.Update (state - 1) }, //* … -*/ }
47. ### ReasonReact render: fun {state, reduce} %=> <div> (ReasonReact.stringToElement (string_of_int state))

<Button title="-" onClick=(reduce (fun _ %=> Increment)) 6/> !</div>
48. ### <div> (switch resource { | Loading %=> <ActivityIndicator 6/> |

Idle value %=> <Component value 6/> | Error %=> ErrorMessage.serverError }) !</div> ReasonReact
49. ### module MyType = { let name = "Type"; type t

= string; }; module MyTypeCollectionView = Primitives.FixedCollectionView.Make MyType; <MyTypeCollectionView items 6/> ReasonReact
50. ### let jsComponent = ReasonReact.wrapReasonForJs #::component (fun jsProps %=> make message#::jsProps###message

[#||] ); ReasonReact

ReasonReact

57. ### • A new, simpler syntax for OCaml • Lots of

efforts in improving tooling (BetterErrors, BuckleScript is a friend project) • New features like JSX • A new community (super active at the moment) • A great core team who knows what to prioritise first to make it good for everyone