Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ReasonML @ OCaml Users in Paris

ReasonML @ OCaml Users in Paris

Matthias Le Brun

September 26, 2017
Tweet

More Decks by Matthias Le Brun

Other Decks in Programming

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