Better ReasonML Integration in Flow & TypeScript Codebases

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

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