ReasonML for JavaScript Developers

This slide set shows how to leverage various Reason features like tuples, variants, and pattern matching to write expressive, concise, and type-safe code.

Transcript

1. ReasonML /* for JavaScript Developers */
2. Hi, I’m Marius! @mariusschulz
4. Variables
5. const meetupName = "Munich ReasonML”;
6. let meetupName = "Munich ReasonML";
7. let counter = 0; counter++;
8. let counter = 0; counter = counter + 1;
9. let counter = ref(0); counter := counter^ + 1;
10. String Concatenation
11. const audience = "Munich ReasonML"; const greeting = `Hello ${audience}!`;
12. const audience = "Munich ReasonML"; const greeting = "Hello " + audience + "!";
13. let audience = "Munich ReasonML"; let greeting = "Hello " ++ audience ++ "!";
14. Arrays
15. const weekdays = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]; weekdays[4] = "Reasonday";
16. let weekdays = [| "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" |]; weekdays[4] = "Reasonday";
17. Lists
18. let todos = [ "Buy milk", "Mow the lawn", "Pay the bills" ]; let todos' = [ "Learn ReasonML", ...todos ];
19. Functions
20. const square = x => x * x;
21. let square = x => x * x;
22. let square = (x) => x * x;
23. let square = (x) => { x * x; };
24. let greet = name => { let greeting = "Hello " ++ name ++ "!"; Js.log(greeting); };
25. Conditionals
26. const number = 42; const sign = number < 0 ? "negative" : "non-negative";
27. let number = 42; let sign = number < 0 ? "negative" : "non-negative";
28. let number = 42; let sign = if (number < 0) { "negative" } else { "non-negative" };
29. let number = 42; let sign = if (number < 0) { "negative"; } else { "non-negative"; };
30. Pattern Matching
31. let number = 42; let sign = switch number { | x when x < 0 => "negative" | x => "non-negative" };
32. let number = 42; let sign = switch number { | x when x < 0 => "negative" | _ => "non-negative" };
33. let number = 42; let sign = switch number { | x when x < 0 => "negative" | x when x > 0 => "positive" | _ => "zero" };
34. let number = 42; let sign = switch number { | x when x < 0 => "negative" | 0 => "zero" | _ => "positive" };
35. const number = 42; const sign = number < 0 ? "negative" : number === 0 ? "zero" : "positive";
36. Static Types
39. /* Demo */
40. Variants
41. type dayOfWeek = | Monday | Tuesday | Wednesday | Thursday | Friday | Saturday | Sunday;
42. type dayOfWeek = | Monday | Tuesday | Wednesday | Thursday | Friday | Saturday | Sunday; let today = Thursday;
43. let abbreviateDay = day => switch day { | Monday => "Mo" | Tuesday => "Tu" | Wednesday => "We" | Thursday => "Th" | Friday => "Fr" | Saturday => "Sa" | Sunday => "Su" };
44. let isWeekendDay = day => switch day { | Monday | Tuesday | Wednesday | Thursday | Friday => false | Saturday | Sunday => true };
48. let isWeekendDay = day => switch day { | Monday | Tuesday | Wednesday | Thursday | Friday => false | Saturday | Sunday => true };
49. type timeOfDay = | Morning | Afternoon | Evening | Night;
50. Tuples
51. let meetupDate = (Thursday, Evening); let partyTime = (Saturday, Night);
52. const meetupDate = ["Thursday", "Evening"]; const partyTime = ["Saturday", "Night"];
53. const meetupDate = ["Thursday", "Late"]; const partyTime = ["Night", "Saturday"];
54. let meetupDate = (Thursday, Evening); let partyTime = (Saturday, Night);
55. Records
56. type dayAndTime = { day: dayOfWeek, time: timeOfDay };
57. let partyTime = { day: Saturday, time: Night };
58. let partyTime = { day: "Saturday", time: "Night" };
59. let partyTime = { day: Saturday, time: Night }; let day = partyTime.day; let time = partyTime.time;
60. let partyTime = { day: Saturday, time: Night }; /* Destructuring */ let {day, time} = partyTime;
61. Nullability
62. const parseDay = index => { switch (index) { case 0: return "Sunday"; case 1: return "Monday"; case 2: return "Tuesday"; case 3: return "Wednesday"; case 4: return "Thursday"; case 5: return "Friday"; case 6: return "Saturday"; default: throw RangeError("..."); } };
63. const parseDay = index => { switch (index) { case 0: return "Sunday"; case 1: return "Monday"; case 2: return "Tuesday"; case 3: return "Wednesday"; case 4: return "Thursday"; case 5: return "Friday"; case 6: return "Saturday"; default: return null; } };
64. let parseDay = index => switch index { | 0 => Some(Sunday) | 1 => Some(Monday) | 2 => Some(Tuesday) | 3 => Some(Wednesday) | 4 => Some(Thursday) | 5 => Some(Friday) | 6 => Some(Saturday) | _ => None };
65. type option('a) = | None | Some('a);
66. let parseDay = index => switch index { | 0 => Some(Sunday) | 1 => Some(Monday) | 2 => Some(Tuesday) | 3 => Some(Wednesday) | 4 => Some(Thursday) | 5 => Some(Friday) | 6 => Some(Saturday) | _ => None };
67. let isValidDayIndex = index => switch (parseDay(index)) { | Some(_) => true | None => false };
68. let showDayName = index => { let dayName = switch (parseDay(index)) { | Some(day) => abbreviateDay(day) | None => "(invalid day)" }; Js.log(dayName); };
69. /* Thursday */ showDayName(4); /* Saturday */ showDayName(6); /* (invalid day) */ showDayName(7);
70. https://reasonml.github.io
71. @mariusschulz