Reason or How I Learned to Stop Worrying and Learnt a New and Safer Language

Reason or How I Learned to Stop Worrying and Learnt a New and Safer Language

37500337ba5d2aebc962959ed83928e5?s=128

Matthias Le Brun

September 14, 2017
Tweet

Transcript

  1. 8.

    !!/** * @param {string} a * @param {string} b *

    @returns {string} #*/ const concat = (a, b) %=> a + b;
  2. 9.

    concat({}, {}) !// NaN concat({}, []) !// "[object Object]" concat(1,

    "1") !// "11" concat(1, 1) !// 2 concat("1", "1") !// "11"
  3. 10.

    concat({}, {}) !// NaN concat({}, []) !// "[object Object]" concat(1,

    "1") !// "11" concat(1, 1) !// 2 concat("1", "1") !// "11" MEDAL OF SUPER SAFETY
  4. 13.
  5. 14.

    •Flow & TypeScript tools are good, but they aren’t as

    safe as we’d wish •Given JavaScript’s nature, it’ll always be hard to get that safety
  6. 15.
  7. 16.
  8. 18.
  9. 19.
  10. 22.

    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
  11. 25.

    1 (/* int #*/ 1.0 (/* float #*/ "foo" (/*

    string #*/ 'a' (/* char #*/ [1, 2, 3] (/* list #*/ [| 1, 2, 3 |] (/* array #*/ Some 1 (/* option int #*/ Primitives
  12. 27.

    let concat a b %=> a ^ b; !// string

    %=> string %=> string concat 1 "1"; !// This expression has type int but an expression was expected of type string Functions
  13. 28.

    let concat a b %=> a ^ b; !// string

    %=> string %=> string concat 1 "1"; !// This expression has type int but an expression was expected of type string Functions (piece of cake)
  14. 29.

    let add a b %=> a + b; !// int

    %=> int %=> int add 1 2; !// 3 add 1 2.0; !// This expression has type float but an expression was expected of type int let addOne = add 1; !// int %=> int Functions
  15. 30.

    let sayHi ,::name ,::punct="!" () %=> "Hello " ^ name

    ^ punct; !// name,::string %=> string sayHi name,::"you" (); !// "Hello you!" sayHi name,::"you" punct,::"?" (); !// "Hello you?" Functions
  16. 32.
  17. 33.

    module type MyModuleType = { type t; }; module MyModule

    (T: MyModuleType) %=> { let toList (value: T.t) %=> [value]; }; module MyStringModule = MyModule String; Functors
  18. 34.

    type user = { name: string, age: int }; let

    user = { name: "Bob", age: 20 }; let olderUser = {…user, age: user.age + 1 }; Records
  19. 35.
  20. 36.
  21. 37.

    type media = { url: string }; type message =

    | String string | Media media | Emoji char; Variants
  22. 38.

    switch message { | String s %=> (/* … #*/

    | Media {url} %=> (/* … #*/ | Emoji c %=> (/* … #*/ } Pattern matching
  23. 41.

    let value = { let a = 1; let b

    = 2; a + b }; Blocks
  24. 46.
  25. 48.

    type user = { username: string, id: option string, age:

    int }; let user = {username: "Bob", id: Some "abc", age: 32}; Lightweight footprint
  26. 49.

    var user = (/* record #*/[ (/* username #*/"Bob", (/*

    id : Some #*/["abc"], (/* age #*/32 ]; Lightweight footprint
  27. 54.

    type user = { name: string, age: int }; let

    fromJs jsObject %=> { name: jsObject,##name, age: jsObject,##age }; Convert from JS
  28. 57.

    type message = | Image string | String string; let

    fromJs js %=> { switch js,##message_type { | "image" %=> Image js,##value | "string" | _ %=> String js,##value } } Complex conversions
  29. 59.

    let component = ReasonReact.statelessComponent "App"; let make ,::message _children %=>

    { …component, render: fun _ %=> <div> (ReasonReact.stringToElement message) *</div> }; React
  30. 61.

    let component = ReasonReact .reducerComponent "App"; let make _ %=>

    { …component, reducer: fun action state %=> switch action { | Increment %=> ReasonReact.Update (state + 1) | Decrement %=> ReasonReact.Update (state - 1) }, (/* … #*/ } React
  31. 62.

    render: fun {state, reduce} %=> <div> (ReasonReact.stringToElement (string_of_int state)) <Button

    title="-" onClick=(reduce (fun _ %=> Increment)) 1/> *</div> React
  32. 63.

    let message = "ok"; <MyComponent message onClick=(fun () %=> Js.log

    1) optionalProp=?optionalProp value=false 1/> JSX
  33. 64.

    <div> (switch resource { | Loading %=> <ActivityIndicator 1/> |

    Idle value %=> <Component value 1/> | Error %=> ErrorMessage.serverError }) *</div> JSX
  34. 65.

    module MyType = { let name = "Type"; type t

    = string; }; module MyTypeCollectionView = Primitives.FixedCollectionView.Make MyType; <MyTypeCollectionView items 1/> React
  35. 68.
  36. 69.
  37. 72.

    let command = switch Sys.argv { | [|_, "watch"|] %=>

    Watch | [|_, "build"|] %=> Build | [|_, "help"|] | _ %=> Help }; Native
  38. 74.

    • 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
  39. 75.