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

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

Matthias Le Brun

September 14, 2017
Tweet

More Decks by Matthias Le Brun

Other Decks in Programming

Transcript

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

    @returns {string} #*/ const concat = (a, b) %=> a + b;
  2. concat({}, {}) !// NaN concat({}, []) !// "[object Object]" concat(1,

    "1") !// "11" concat(1, 1) !// 2 concat("1", "1") !// "11"
  3. concat({}, {}) !// NaN concat({}, []) !// "[object Object]" concat(1,

    "1") !// "11" concat(1, 1) !// 2 concat("1", "1") !// "11" MEDAL OF SUPER SAFETY
  4. •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
  5. 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
  6. 1 (/* int #*/ 1.0 (/* float #*/ "foo" (/*

    string #*/ 'a' (/* char #*/ [1, 2, 3] (/* list #*/ [| 1, 2, 3 |] (/* array #*/ Some 1 (/* option int #*/ Primitives
  7. 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
  8. 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)
  9. 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
  10. let sayHi ,::name ,::punct="!" () %=> "Hello " ^ name

    ^ punct; !// name,::string %=> string sayHi name,::"you" (); !// "Hello you!" sayHi name,::"you" punct,::"?" (); !// "Hello you?" Functions
  11. module type MyModuleType = { type t; }; module MyModule

    (T: MyModuleType) %=> { let toList (value: T.t) %=> [value]; }; module MyStringModule = MyModule String; Functors
  12. type user = { name: string, age: int }; let

    user = { name: "Bob", age: 20 }; let olderUser = {…user, age: user.age + 1 }; Records
  13. type media = { url: string }; type message =

    | String string | Media media | Emoji char; Variants
  14. switch message { | String s %=> (/* … #*/

    | Media {url} %=> (/* … #*/ | Emoji c %=> (/* … #*/ } Pattern matching
  15. let value = { let a = 1; let b

    = 2; a + b }; Blocks
  16. type user = { username: string, id: option string, age:

    int }; let user = {username: "Bob", id: Some "abc", age: 32}; Lightweight footprint
  17. var user = (/* record #*/[ (/* username #*/"Bob", (/*

    id : Some #*/["abc"], (/* age #*/32 ]; Lightweight footprint
  18. type user = { name: string, age: int }; let

    fromJs jsObject %=> { name: jsObject,##name, age: jsObject,##age }; Convert from JS
  19. type message = | Image string | String string; let

    fromJs js %=> { switch js,##message_type { | "image" %=> Image js,##value | "string" | _ %=> String js,##value } } Complex conversions
  20. let component = ReasonReact.statelessComponent "App"; let make ,::message _children %=>

    { …component, render: fun _ %=> <div> (ReasonReact.stringToElement message) *</div> }; React
  21. 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
  22. render: fun {state, reduce} %=> <div> (ReasonReact.stringToElement (string_of_int state)) <Button

    title="-" onClick=(reduce (fun _ %=> Increment)) 1/> *</div> React
  23. let message = "ok"; <MyComponent message onClick=(fun () %=> Js.log

    1) optionalProp=?optionalProp value=false 1/> JSX
  24. <div> (switch resource { | Loading %=> <ActivityIndicator 1/> |

    Idle value %=> <Component value 1/> | Error %=> ErrorMessage.serverError }) *</div> JSX
  25. module MyType = { let name = "Type"; type t

    = string; }; module MyTypeCollectionView = Primitives.FixedCollectionView.Make MyType; <MyTypeCollectionView items 1/> React
  26. let command = switch Sys.argv { | [|_, "watch"|] %=>

    Watch | [|_, "build"|] %=> Build | [|_, "help"|] | _ %=> Help }; Native
  27. • 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