ReasonML @ OCaml Users in Paris

Transcript

1. REASON
2. Matthias Le Brun twitter.com/bloodyowl github.com/bloodyowl Putain de code !
3. OCaml
4. 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
5. Syntax isn't really friendly to newcomers
6. FP communities aren’t really welcoming to newcomers
8. Here comes Reason
9. Storytime •Initially, React was written in SML by Jordan Walke •The idea for Reason actually predates React •Front-end community wasn’t ready yet
10. 1. Syntax 2. Tooling 3. Ecosystem 4. Community
11. 1. Syntax 2. Tooling 3. Ecosystem 4. Community
12. Functions let x a b = e let x = fun a b !-> e OCaml Reason let x a b %=> e; let x = fun a b %=> e;
13. Equality a = b b '== c a #<> b a *!= b OCaml Reason a '== b b ##=== c a *!= b a --!== b
14. Expressions let c = let a = "a" in let b = "b" in a ^ b OCaml Reason let c = { let a = "a"; let b = "b"; a ^ b };
15. Tuples type tup = int * int let tuple = a, b OCaml Reason type tup = (int, int) let tuple = (a, b)
16. Record types type rec = { foo: string; bar: string }; OCaml Reason type rec = { foo: string, bar: string };
17. Records { foo = "bar"; bar = "baz" } OCaml Reason { foo: "bar", bar: "baz", }
18. Lists [1; 2; 3] OCaml Reason [1, 2, 3]
19. Type params string option list OCaml Reason list (option string)
20. Variants type foo = | A of string | B of string OCaml Reason type foo = | A string | B string
21. Pattern matching match a with | A x %=> "A" ^ x | B x %=> "B" ^ x OCaml Reason switch a { | A x %=> "A" ^ x | B x %=> "B" ^ x }
22. Equality (* comment *) OCaml Reason //* comment -*/
23. Refmt: one language, one formatting
24. ReasonFatigue prevented ☕
25. Syntax simpler to JS folks
26. 1. Syntax 2. Tooling 3. Ecosystem 4. Community
27. BuckleScript
28. BuckleScript •Like js_of_ocaml but takes on after an earlier step of compilation •Makes some optimisations considering the JS target •Great interoperability
29. Produces code that’s faster than vanilla™
30. Smaller footprint var user = //* record -*/[ //* username -*/"Bob", //* id : Some -*/["abc"], //* age -*/32 ];
31. [ "Bob", ["abc"], 32 ]; Smaller footprint
32. Don’t want to rewrite your project from scratch?
33. external myExistingModule : string = [@@bs.module "-../myExistingModule"]; Use JS
34. type user = { name: string, age: int }; let fromJs jsObject %=> { name: jsObject###name, age: jsObject###age }; Convert from JS
35. let toJs object %=> { "name": object.name, "age": object.age }; Convert to JS
36. { "message_type": "image" | "string", "value": string } Complex conversions
37. type message = | Image string | String string; let fromJs js %=> { switch js###message_type { | "image" %=> Image js###value | "string" | _ %=> String js###value } } Complex conversions
38. Lots of bindings existing/on the way
39. let getPageKeywords () %=> switch ( DomRe.Document.querySelector "meta[name=\"keywords\"]" DomRe.document ) { | Some meta %=> switch (DomRe.Element.getAttribute "content" meta) { | Some content %=> Js.String.split "," content *|> Array.to_list *|> List.map String.trim | None %=> [] } | None %=> [] };
41. BetterErrors
42. Simpler workflow •Effort is for now a lot on the JS back-end •Coming for native compilation
43. 1. Syntax 2. Tooling 3. Ecosystem 4. Community
44. ReasonReact
45. ReactJS import React from "react"; import { string } from "prop-types"; const App = props %=> ( <div> {props.message} !</div> ) App.propTypes = { message: string.isRequired };
46. ReasonReact let component = ReasonReact.statelessComponent "App"; let make #::message _children %=> { …component, render: fun _ %=> <div> (ReasonReact.stringToElement message) !</div> };
47. ReasonReact type state = int; type actions = | Increment | Decrement;
48. ReasonReact let component = ReasonReact .reducerComponent "App"; let make _ %=> { …component, reducer: fun action state %=> switch action { | Increment %=> ReasonReact.Update (state + 1) | Decrement %=> ReasonReact.Update (state - 1) }, //* … -*/ }
49. ReasonReact render: fun {state, reduce} %=> <div> (ReasonReact.stringToElement (string_of_int state)) <Button title="-" onClick=(reduce (fun _ %=> Increment)) 6/> !</div>
50. <div> (switch resource { | Loading %=> <ActivityIndicator 6/> | Idle value %=> <Component value 6/> | Error %=> ErrorMessage.serverError }) !</div> ReasonReact
51. module MyType = { let name = "Type"; type t = string; }; module MyTypeCollectionView = Primitives.FixedCollectionView.Make MyType; <MyTypeCollectionView items 6/> ReasonReact
52. let jsComponent = ReasonReact.wrapReasonForJs #::component (fun jsProps %=> make message#::jsProps###message [#||] ); ReasonReact
53. let make #::message children %=> ReasonReact.wrapJsForReason #::reactClass props#::{"message": message} children; ReasonReact
54. ReasonReact: good entry point for the front-end community
55. 1. Syntax 2. Tooling 3. Ecosystem 4. Community
56. Community
57. Lots of meetups popping up
58. 1. Syntax 2. Tooling 3. Ecosystem 4. Community Sum up
59. • 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
60. Thank you! Questions?