Matthias Le Brun
September 14, 2017
1k

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

## Matthias Le Brun

September 14, 2017

## Transcript

1. ### REASON or How I Learned to Stop Worrying and Learnt

a New and Safer Language

is cool

is less cool

instanceof …
8. ### !!/** * @param {string} a * @param {string} b *

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

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

"1") !// "11" concat(1, 1) !// 2 concat("1", "1") !// "11" MEDAL OF SUPER SAFETY

12. ### (/* @flow #*/ const concat = (a: string, b: string)

%=> a + b; concat({}, {})
13. ### •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

19. ### 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

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

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

24. ### 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
25. ### 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)
26. ### 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
27. ### let sayHi ,::name ,::punct="!" () %=> "Hello " ^ name

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

Modules
29. ### module MyArray = { include Array; let double = map

(fun x %=> x * 2); }; Modules
30. ### module type MyModuleType = { type t; }; module MyModule

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

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

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

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

36. ### let value = { let a = 1; let b

= 2; a + b }; Blocks

43. ### type user = { username: string, id: option string, age:

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

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

46. ### Ok, sounds cool, but I don’t want to rewrite my

project from scratch

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

fromJs jsObject %=> { name: jsObject,##name, age: jsObject,##age }; Convert from JS
50. ### let toJs object %=> { "name": object.name, "age": object.age };

Convert to JS

52. ### type message = | Image string | String string; let

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

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

{ …component, render: fun _ %=> <div> (ReasonReact.stringToElement message) *</div> }; React
55. ### type state = int; type actions = | Increment |

Decrement; React
56. ### 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
57. ### render: fun {state, reduce} %=> <div> (ReasonReact.stringToElement (string_of_int state)) <Button

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

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

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

= string; }; module MyTypeCollectionView = Primitives.FixedCollectionView.Make MyType; <MyTypeCollectionView items 1/> React
61. ### let jsComponent = ReasonReact.wrapReasonForJs ,::component (fun jsProps %=> make message,::jsProps,##message

[,||] ); React

React

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

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

69. ### • 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