ReasonML @ OCaml Users in Paris

Transcript

1. REASON
   

   View Slide

2. Matthias Le Brun
   twitter.com/bloodyowl
   github.com/bloodyowl
   Putain de code !
   

   View Slide

3. OCaml
   

   View Slide

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
   

   View Slide

5. Syntax isn't really friendly
   to newcomers
   
   

   View Slide

6. FP communities aren’t
   really welcoming to
   newcomers
   

   View Slide

7. View Slide

8. Here comes Reason
   

   View Slide

9. Storytime
   •Initially, React was written in SML
   by Jordan Walke
   •The idea for Reason actually
   predates React
   •Front-end community wasn’t ready
   yet
   

   View Slide

10. 1. Syntax
    2. Tooling
    3. Ecosystem
    4. Community
    

    View Slide

11. 1. Syntax
    2. Tooling
    3. Ecosystem
    4. Community
    

    View Slide

12. 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;
    

    View Slide

13. Equality
    a = b
    b '== c
    a #<> b
    a *!= b
    OCaml Reason
    a '== b
    b ##=== c
    a *!= b
    a --!== b
    

    View Slide

14. 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
    };
    

    View Slide

15. Tuples
    type tup = int * int
    let tuple = a, b
    OCaml Reason
    type tup = (int, int)
    let tuple = (a, b)
    

    View Slide

16. Record types
    type rec = {
    foo: string;
    bar: string
    };
    OCaml Reason
    type rec = {
    foo: string,
    bar: string
    };
    

    View Slide

17. Records
    {
    foo = "bar";
    bar = "baz"
    }
    OCaml Reason
    {
    foo: "bar",
    bar: "baz",
    }
    

    View Slide

18. Lists
    [1; 2; 3]
    OCaml Reason
    [1, 2, 3]
    

    View Slide

19. Type params
    string option list
    OCaml Reason
    list (option string)
    

    View Slide

20. Variants
    type foo =
    | A of string
    | B of string
    OCaml Reason
    type foo =
    | A string
    | B string
    

    View Slide

21. 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
    }
    

    View Slide

22. Equality
    (* comment *)
    OCaml Reason
    //* comment -*/
    

    View Slide

23. Refmt:
    one language,
    one formatting
    

    View Slide

24. ReasonFatigue
    prevented
    ☕
    

    View Slide

25. Syntax
    simpler to JS folks
    

    View Slide

26. 1. Syntax
    2. Tooling
    3. Ecosystem
    4. Community
    

    View Slide

27. BuckleScript
    

    View Slide

28. BuckleScript
    •Like js_of_ocaml but takes on after
    an earlier step of compilation
    •Makes some optimisations
    considering the JS target
    •Great interoperability
    

    View Slide

29. Produces code that’s
    faster than vanilla™
    

    View Slide

30. Smaller footprint
    var user = //* record -*/[
    //* username -*/"Bob",
    //* id : Some -*/["abc"],
    //* age -*/32
    ];
    

    View Slide

31. [
    "Bob",
    ["abc"],
    32
    ];
    Smaller footprint
    

    View Slide

32. Don’t want to rewrite your
    project from scratch?
    

    View Slide

33. external myExistingModule : string
    = [@@bs.module "-../myExistingModule"];
    Use JS
    

    View Slide

34. type user = {
    name: string,
    age: int
    };
    let fromJs jsObject %=> {
    name: jsObject###name,
    age: jsObject###age
    };
    Convert from JS
    

    View Slide

35. let toJs object %=> {
    "name": object.name,
    "age": object.age
    };
    Convert to JS
    

    View Slide

36. {
    "message_type": "image" | "string",
    "value": string
    }
    Complex conversions
    

    View Slide

37. type message =
    | Image string
    | String string;
    let fromJs js %=> {
    switch js###message_type {
    | "image" %=> Image js###value
    | "string"
    | _ %=> String js###value
    }
    }
    Complex conversions
    

    View Slide

38. Lots of bindings
    existing/on the way
    

    View Slide

39. 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 %=> []
    };
    

    View Slide

40. View Slide

41. BetterErrors
    

    View Slide

42. Simpler workflow
    •Effort is for now a lot on the JS
    back-end
    •Coming for native compilation
    

    View Slide

43. 1. Syntax
    2. Tooling
    3. Ecosystem
    4. Community
    

    View Slide

44. ReasonReact
    

    View Slide

45. ReactJS
    import React from "react";
    import { string } from "prop-types";
    const App = props %=> (
    
    {props.message}
    !
    )
    App.propTypes = {
    message: string.isRequired
    };
    

    View Slide

46. ReasonReact
    let component =
    ReasonReact.statelessComponent "App";
    let make #::message _children %=> {
    …component,
    render: fun _ %=>
    
    (ReasonReact.stringToElement message)
    !
    };
    

    View Slide

47. ReasonReact
    type state = int;
    type actions =
    | Increment
    | Decrement;
    

    View Slide

48. 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)
    },
    //* … -*/
    }
    

    View Slide

49. ReasonReact
    render: fun {state, reduce} %=>
    
    (ReasonReact.stringToElement
    (string_of_int state))
    title="-"
    onClick=(reduce (fun _ %=> Increment))
    6/>
    !
    

    View Slide

50. 
    (switch resource {
    | Loading %=>
    | Idle value %=>
    | Error %=> ErrorMessage.serverError
    })
    !
    ReasonReact
    

    View Slide

51. module MyType = {
    let name = "Type";
    type t = string;
    };
    module MyTypeCollectionView =
    Primitives.FixedCollectionView.Make MyType;
    
    ReasonReact
    

    View Slide

52. let jsComponent =
    ReasonReact.wrapReasonForJs
    #::component
    (fun jsProps %=>
    make message#::jsProps###message [#||]
    );
    ReasonReact
    

    View Slide

53. let make #::message children %=>
    ReasonReact.wrapJsForReason
    #::reactClass
    props#::{"message": message}
    children;
    ReasonReact
    

    View Slide

54. ReasonReact:
    good entry point for
    the front-end
    community
    

    View Slide

55. 1. Syntax
    2. Tooling
    3. Ecosystem
    4. Community
    

    View Slide

56. Community
    

    View Slide

57. Lots of meetups popping up
    

    View Slide

58. 1. Syntax
    2. Tooling
    3. Ecosystem
    4. Community
    Sum up
    

    View Slide

59. • 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
    

    View Slide

60. 
    Thank you!
    Questions?
    

    View Slide