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

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)

7dce9b480f93b02761519348359c4b71?s=128

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
  2. Thanks to our sponsors!

  3. Why? +

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

    Voss (npm)
  5. The Problem MyComponent.re App.ts type color = | Red |

    Yellow | Green; type person = { firstname: string, }; <MyComponent color person /> const person = {firstname: "Patrick"}; <MyComponent 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
  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
  7. Ideal Workflow MyComponent.re App.tsx <MyComponent color person /> <MyComponent color={Yellow}

    person={ {firstname: "Patrick"}} /> import MyComponent, {Yellow} from "./MyComponent"; MyComponent.tsx (Black Box for the user) Generate TS compatible Wrapper Consume Wrapper
  8. Solution: genTypes • Tool developed by • Jordan Walke (Facebook

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

  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!
  11. THANKS Patrick Stapfer / @ryyppy