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
   

   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