ReasonML: A brief introduction

Brief introduction to Reason from a JavaScript developer perspective and why Reason matters.

Transcript

1. A BRIEF INTRODUCTION REASON
2. @rafayepes
5. • Hidden underlying data structures • Data flow • Mutations • Refactoring
6. MODELING A CHAT WITH JAVASCRIPT
7. Plain message Gift message Image message
8. sendMessage({ msgType: 'Plain', fromUser, toUser, text: chatMessageText });
9. function sendMessage(message) { // … send message to server }
10. /** * @typedef {Object} ChatMessage * @property {string} msgType - Enum('Plain', 'Image', 'Gift') * @property {string} fromUser * @property {string} toUser * @property {string} [text] * @property {string} [src] * @property {string} [giftLabel] */ /** * Send a message to the server * @param {ChatMessage} message */ // … send message to server } function sendMessage(message) {
11. function sendMessage(message) { if (typeof message.msgType !== 'string') { throw new Error('Missing "msgType" property'); } if (typeof message.fromUser !== 'string') { throw new Error('Missing "fromUser" property'); } // … more checks // … send message to server }
12. REASON SYNTAX & TOOLCHAIN FOR OCAML
13. OCaml Semantics OCaml Syntax Bytecode Native https://spyder.wordpress.com/2017/05/14/ocaml-to-javascript-buzzwords/
14. OCaml Semantics OCaml Syntax Bytecode Native Reason Syntax https://spyder.wordpress.com/2017/05/14/ocaml-to-javascript-buzzwords/
15. OCaml Semantics OCaml Syntax Bytecode Native Reason Syntax BuckleScript https://spyder.wordpress.com/2017/05/14/ocaml-to-javascript-buzzwords/
16. OCaml Semantics OCaml Syntax Bytecode Native Reason Syntax BuckleScript JavaScript https://spyder.wordpress.com/2017/05/14/ocaml-to-javascript-buzzwords/
17. • Strong static type system with type inference • Functional and immutable by default • ADT and pattern-matching • Very fast • Garbage collected
18. • Improved syntax • Umbrella project to improve docs and tooling • Comes with JSX and React support • A community ASON
19. SYNTAX & SEMANTICS BRIEF OVERVIEW
20. LET BINDINGS let message = "hello"; print_endline message; /* Prints "hello" */ let message = "bye"; print_endline message; /* Prints "bye" */
21. BLOCK SCOPE let message = { let part1 = "hello"; let part2 = "world"; part1 ^ " " ^ part2 }; /* `part1` and `part2` not accessible here! */
22. CONDITIONALS let message = if (hasName) { let name = "Bob"; "Hello " ^ name } else { "Hello!" }; /* `name` not accessible here */
23. FUNCTIONS /* int => int => int */ let add x y => x + y; add 3 2; /* 5 */ /* Functions are curried by default */ let add1 = add 1; add1 2; /* 3 */
24. LABELED ARGUMENTS let drawCircle ::radius ::color => { setColor color; startAt radius radius; /* ... */ }; drawCircle color::"red" radius::10;
25. RECORDS type person = { name: string, mutable age: int }; let me = {name: "Rafa", age: 29}; print_string me.name; me.age = me.age + 1; (* not possible to modify fields unless marked as `mutable` *) me.name = "Bob";
26. RECORDS type person = { name: string, mutable age: int }; let me = {name: "Rafa", age: 29}; print_string me.name; me.age = me.age + 1; (* not possible to modify fields unless marked as `mutable` *) me.name = "Bob"; Error: The record field name is not mutable
27. PATTERN MATCHING /* int => string */ let intToColorString colorNum => { switch colorNum { | 0 => "black" | 1 => "white" }; };
28. PATTERN MATCHING /* int => string */ let intToColorString colorNum => { switch colorNum { | 0 => "black" | 1 => "white" }; }; Warning 8: this pattern-matching is not exhaustive. Here is an example of a value that is not matched: 2
29. PATTERN MATCHING /* int => string */ let intToColorString colorNum => { switch colorNum { | 0 => "black" | 1 => "white" }; };
30. PATTERN MATCHING /* int => string */ let intToColorString colorNum => { switch colorNum { | 0 => "black" | 1 => "white" | _ => "grey" }; };
31. VARIANTS type basicColor = | Red | Green | Blue;
32. type basicColor = | Red | Green | Blue; VARIANTS & PATTERN MATCHING /* basicColor => int */ let basicColorToInt color => { switch color { | Red => 1 | Green => 2 | Blue => 3 }; };
33. MODULES module School = { type profession = Teacher | Director; let person1 = Teacher; let getProfession person => switch person { | Teacher => "A teacher" | Director => "A director" }; }; let profession = School.getProfession School.person1;
34. EVERY FILE IS A MODULE /* fileA.re */ /* This typically compiles to module FileA below */ let a = 1; let b = 2; /* fileB.re */ /* You can access module FileA from any other module on your system */ let result = FileA.a + FileA.b;
35. MODELING A CHAT WITH REASON
36. /** * @typedef {Object} ChatMessage * @property {string} msgType - Enum('Plain', 'Image', 'Gift') * @property {string} fromUser * @property {string} toUser * @property {string} [text] * @property {string} [src] * @property {string} [giftLabel] */ /** * Sends a message to the server * @param {ChatMessage} message */ // … send message to server } function sendMessage(message) {
37. type chatMessageType = | Plain | Image | Gift; type chatMessage = { msgType: chatMessageType, fromUser: string, toUser: string, text: option string, src: option string, giftLabel: option string };
38. type chatMessageType = | Plain | Image | Gift; type chatMessage = { msgType: chatMessageType, fromUser: string, toUser: string, text: option string, src: option string, giftLabel: option string }; sendMessage({ msgType: Gift, fromUser: "a", toUser: "b", text: None, src: Some “https://url.com/1.jpg", giftLabel: Some "Present for you" });
39. type chatMessageType = | Plain | Image | Gift; type chatMessage = { msgType: chatMessageType, fromUser: string, toUser: string, text: option string, src: option string, giftLabel: option string }; sendMessage({ msgType: Gift, fromUser: "a", toUser: "b", text: None, src: None, giftLabel: None });
40. type chatMessageType = | Plain | Image | Gift; type chatMessage = { msgType: chatMessageType, fromUser: string, toUser: string, text: option string, src: option string, giftLabel: option string }; sendMessage({ msgType: Gift, fromUser: "a", toUser: "b", text: None, src: None, giftLabel: None }); Gift without src should not be valid
41. type plain = { text: string }; type image = { src: string }; type gift = { src: string, giftLabel: option string }; type messageContent = | Plain plain | Image image | Gift gift; type chatMessage = { fromUser: string, toUser: string, content: messageContent };
42. /* chatMessage => option string */ let getMsgMediaUrl chatMsg => switch chatMsg.content { | Gift {src} => Some src | Image {src} => Some src | _ => None };
43. /* chatMessage => option string */ let getMsgMediaUrl chatMsg => switch chatMsg.content { | Gift {src} | Image {src} => Some src | _ => None };
44. /* chatMessage => option string */ let getMsgMediaUrl chatMsg => switch chatMsg.content { | Gift {src} | Image {src} => Some src | Plain _ => None };
45. /* chatMessage => option string */ let getMsgMediaUrl chatMsg => switch chatMsg.content { | Gift {src} | Image {src} => Some src | Plain _ => None }; /* option string => unit */ let logMsgUrl url => switch url { | Some src => print_endline src | None => () };
46. /* chatMessage => option string */ let getMsgMediaUrl chatMsg => switch chatMsg.content { | Gift {src} | Image {src} => Some src | Plain _ => None }; /* option string => unit */ let logMsgUrl url => switch url { | Some src => print_endline src | None => () }; let myGift = { fromUser: "a", toUser: "b", content: Gift { src: "https://example.com/123.jpg", giftMsg: Some "Present for you" } }; let messageUrl = getMsgMediaUrl myGift; logMsgUrl messageUrl; /* https://example.com/123.jpg */
47. /* … */ let getMsgMediaUrl chatMsg => switch chatMsg.content { | Gift {src} | Image {src} => Some src | Plain _ => None }; /* … */ type messageContent = | Plain plain | Image image | Gift gift; /* … */
48. /* … */ type video = { src: string, duration: int }; /* … */ let getMsgMediaUrl chatMsg => switch chatMsg.content { | Gift {src} | Image {src} => Some src | Plain _ => None }; /* … */ type messageContent = | Plain plain | Image image | Gift gift;
49. /* … */ type video = { src: string, duration: int }; type messageContent = | Plain plain | Image image | Gift gift | Video video; /* … */ let getMsgMediaUrl chatMsg => switch chatMsg.content { | Gift {src} | Image {src} => Some src | Plain _ => None }; /* … */
50. /* … */ let getMsgMediaUrl chatMsg => switch chatMsg.content { | Gift {src} | Image {src} => Some src | Plain _ => None }; /* … */ /* … */ type video = { src: string, duration: int }; type messageContent = | Plain plain | Image image | Gift gift | Video video; Warning 8: this pattern-matching is not exhaustive. Here is an example of a value that is not matched: Video _
51. /* … */ type video = { src: string, duration: int }; type messageContent = | Plain plain | Image image | Gift gift | Video video; /* … */ let getMsgMediaUrl chatMsg => switch chatMsg.content { | Gift {src} | Image {src} => Some src | Plain _ => None }; /* … */
52. /* … */ type video = { src: string, duration: int }; type messageContent = | Plain plain | Image image | Gift gift | Video video; /* … */ let getMsgMediaUrl chatMsg => switch chatMsg.content { | Gift {src} | Image {src} | Video {src} => Some src | Plain _ => None }; /* … */
53. HOW CAN I GET STARTED TODAY? !
54. GETTING STARTED • https://facebook.github.io/reason/gettingStarted.html • https://facebook.github.io/reason/jsWorkflow.html • https://github.com/knowbody/crra • https://discord.gg/reasonml
55. DIVING DEEPER • @ReasonCup • https://bloomberg.github.io/bucklescript/Manual.html • https://realworldocaml.org/
56. WHAT’S NEXT? • More docs • Improve on boarding experience • Iterate over Reason-React API • Improve tooling • Just build more apps with Reason!
57. IS REASON THE RIGHT SOLUTION FOR YOU? !!
58. WHY REASON? • Expressiveness • Easiness to read and understand • Correctness • Performance • Refactoring
59. THE COSTS AND RISKS • “Small” ecosystem • Tooling still under heavy development • Not much online material (mostly OCaml) • Requires learning process • No clear module namespace support yet
60. OPPORTUNITY "
61. IS REASON FOR YOU? !!!
62. IS REASON FOR YOU? • Get familiar with the language and ecosystem. • Understand the problems you are trying to solve • Understand cost you are going to pay. • Seek support among your team. • Be prepared for the issues you’ll face. • Be responsible. Don’t rewrite. JS interop is #
63. THIS IS JUST THE BEGINNING https://discord.gg/reasonml
64. $ Thank you! Special thanks to @areaweb and everyone on discord
65. @rafayepes