$30 off During Our Annual Pro Sale. View Details »

Better ReasonML Integration in Flow & TypeScript Codebases

Better ReasonML Integration in Flow & TypeScript Codebases

Presented on:
- 15th of September 2018 (ReactAlicante 2018)
- 25th of September 2018 (ReasonVienna Meetup)

Patrick Stapfer

September 15, 2018
Tweet

More Decks by Patrick Stapfer

Other Decks in Technology

Transcript

  1. September 2018
    Better ReasonML Integration

    In Flow & TypeScript Codebases
    Patrick Stapfer

    View Slide

  2. Thanks to our sponsors!

    View Slide

  3. Why?
    +

    View Slide

  4. https://twitter.com/CaseSandberg/status/1038626258362327041
    8th Sept @ Reactathon 2018 / SF - Laurie Voss (npm)

    View Slide

  5. The Problem
    MyComponent.re App.ts
    type color =
    | Red
    | Yellow
    | Green;
    type person = {
    firstname: string,
    };

    const person = {firstname: "Patrick"};
    color="yellow"
    person={person} />
    ReasonReact.Component !== React.Component
    Immutable Record Type
    JS Object Type (Js.t in Reason)
    Variant type (not JS compatible)
    React.Component Type
    ReasonReact Component type

    View Slide

  6. Wrap props for ReasonReact Component
    MyComponent.re
    let default = ReasonReact.wrapReasonForJs(~component, jsProps => {
    let person = {
    firstname: jsProps##person##firstname,
    };
    let color = switch(jsProps##color) {
    | "yellow" => Yellow
    /* ... */
    };
    make(~person, ~color, jsProps##children);
    });
    Boilerplate & Error prone

    View Slide

  7. Ideal Workflow
    MyComponent.re
    App.tsx


    import MyComponent, {Yellow} from "./MyComponent";
    MyComponent.tsx (Black Box for the user)
    Generate TS compatible Wrapper
    Consume Wrapper

    View Slide

  8. Solution: genTypes
    • Tool developed by

    • Jordan Walke (Facebook / ReactJS / Reason)

    • Cristiano Calgagno (Facebook / Reason Association / Reason-React)
    https://github.com/cristianoc/genFlow

    View Slide

  9. Demo

    View Slide

  10. Future
    • Still experimental (Feedback welcome), but will be improved (supported by the Reason
    Association)

    • The project name "genFlow" is a working title and will be renamed at some point

    • Many possibilities:

    • Write one library in Reason, automatically generate TypeScript / Flow code (not
    bindings!)

    • OCaml is fully typed and it's easier to translate pure Reason code to less safe
    TypeScript code

    • Ability to mix OCaml / Reason / TypeScript & JavaScript without writing type mappings
    by hand!

    View Slide

  11. THANKS
    Patrick Stapfer / @ryyppy

    View Slide