Introduction to ReasonML
2 likes461 views
ReasonML is a syntax and toolchain that brings OCaml to the web by compiling to JavaScript. It uses BuckleScript to compile Reason code to readable, optimized JS. Reason code looks similar to OCaml but with a modernized syntax that is friendlier for web development. It provides type safety through static typing and type inference while allowing for easy interoperability with JavaScript. The tooling includes package management, bundling, formatting, linting and more. ReasonReact provides a React-like experience for building user interfaces with ReasonML.
!['use strict';
var Http = require("http");
var Http$1 = /* module */[];
Http.createServer((function (_, res) {
return res.end("Hello Bali");
})).listen(3333);
exports.Http = Http$1;](https://image.slidesharecdn.com/reasonmlv2copy-181030023244/85/Introduction-to-ReasonML-40-320.jpg)
![Syntax 101
let two = 1 + 1;
print_int(42);
print_endline("Hello Bali");
let float_addition = 1.1 +. 2.2;
Js.log(2 > 3);
Js.log(2 > 3.1);
Js.log(float_of_int(2) > 3.1);
print_endline("Hello" ++ "Bali");
let age = 32;
let age: int = 32;
let colors = ["red", "green", "blue"];](https://image.slidesharecdn.com/reasonmlv2copy-181030023244/85/Introduction-to-ReasonML-49-320.jpg)
![package.json
{
"name": "reason-demo-1",
"version": "0.1.0",
"scripts": {
"build": "bsb -make-world",
"start": "bsb -make-world -w",
"clean": "bsb -clean-world"
},
"keywords": [
"BuckleScript"
],
"author": "",
"license": "MIT",
"devDependencies": {
"bs-platform": "^4.0.6"
}
}](https://image.slidesharecdn.com/reasonmlv2copy-181030023244/85/Introduction-to-ReasonML-52-320.jpg)
![bsconfig.json{
"name": "reason-demo-1",
"version": "0.1.0",
"sources": {
"dir" : "src",
"subdirs" : true
},
"package-specs": {
"module": "commonjs",
"in-source": true
},
"suffix": ".bs.js",
"bs-dependencies": [
// add your dependencies here.
],
"warnings": {
"error" : "+101"
},
"namespace": true,
"refmt": 3
}](https://image.slidesharecdn.com/reasonmlv2copy-181030023244/85/Introduction-to-ReasonML-53-320.jpg)
![Binding and Interop
[%bs.raw {|
console.log("here is some js for you!")
|}];
Js.log("this is reason");
let x = [%bs.raw {| 'here is a string from javascript' |}];
Js.log(x ++ " back in reason land");
[@bs.val] external pi: float = "Math.PI";
let volume_cylinder = (diameter, height) => pi *. diameter *. height;](https://image.slidesharecdn.com/reasonmlv2copy-181030023244/85/Introduction-to-ReasonML-59-320.jpg)
Introduction to ReasonML
- 1. @rizafahmi
- 2. @rizafahmi22
- 4. NEW SYNTAX & TOOLCHAIN FOR OCAML
- 5. LOOKS AND FEELS LIKE
- 6. (* ocaml *) let x y = y + 2 type 'a mytype type listOfString = string list let run () = let nothing = None in let something = Some 10 in Js.log3 "a" 2 something; let count = match nothing with | None !=> "10" | Some _ !=> "20" in if x 2 = 4 then Js.log "Good" else Js.log "panic!" . !/* old reason !*/ let x y !=> y + 2; type mytype 'a; type listOfString = list string; let run () !=> { let nothing = None; let something = Some 10; Js.log3 "a" 2 something; let count = switch nothing { | None !=> "10" | Some _ !=> "20" }; if (x 2 !== 4) { Js.log "Good" } else { Js.log "panic!" } }; !/* new reason !*/ let x(y) !=> y + 2; type mytype('a); type listOfString = list(string); let run () !=> { let nothing = None(); let something = Some(10); Js.log3("a", 2, something); let count = switch nothing { | None !=> "10" | Some _ !=> "20" }; if (x(2) !== 4) { Js.log("Good"); } else { Js.log("panic!"); } };
- 9. FULL REBUILD IS 2S, INCREMENTAL BUILD IS <100MS ON AVERAGE. USED TO RECEIVE BUGS REPORTS ON A DAILY BASIS; THERE HAVE BEEN A TOTAL OF 10 BUGS DURING THE WHOLE YEAR! REFACTORING SPEED WENT FROM DAYS TO DOZENS OF MINUTES.
- 10. OCAML About
- 12. STABLE, MATURE, 20 YEARS OLD
- 13. STATIC TYPES AND TYPE INFERENCE
- 14. BUCKLESCRIPT BRINGS OCAML TO THE WEB
- 18. WHY The
- 19. FREAKIN‘ FAST!
- 20. TYPE IS COOL
- 21. TYPE INFERENCE IS EVEN MORE COOLER!
- 23. VARIANT AND PATTERN MATCHING
- 24. CAN TARGET JS AND NATIVE
- 25. HUMAN READABLE ERROR MESSAGE
- 28. COMPLETE TOOLS
- 30. EASE OF ADOPTION AND EASE OF MAINTENANCE
- 31. Ease of Adop+on EaseofMaintenance Low High High
- 33. “THE COMMUNITY IS SMALL BUT VERY FOCUSED ON DELIVERING A BETTER EXPERIENCE FOR DEVELOPERS.” Wojciech Bilicki
- 34. BUCKLESCRIPT Now
- 35. BRINGS OCAML TO THE WEB
- 36. COMPILES OCAML/REASON TO JS
- 40. 'use strict'; var Http = require("http"); var Http$1 = /* module */[]; Http.createServer((function (_, res) { return res.end("Hello Bali"); })).listen(3333); exports.Http = Http$1;
- 41. 'use strict'; function add(a, b) { return a + b | 0; } exports.add = add;
- 42. GREAT INTEROP WITH JS
- 43. 10X FASTER THAN
- 45. REASONMLRecap
- 46. MODERN SYNTAX AND TOOLCHAIN FOR OCAML STATIC TYPE AND TYPE INFERENCE CAN TARGET AND INTEROP WITH JS COMPILE TO NATIVE AND BYTECODE FAST, READABLE OUTPUT, READABLE ERROR MESSAGE
- 47. “TALK IS CHEAP. SHOW ME CODE.” Linus Torvalds
- 48. Install and Setups $ yarn global add bs-platform $ yarn global add reason-cli $ rtop
- 49. Syntax 101 let two = 1 + 1; print_int(42); print_endline("Hello Bali"); let float_addition = 1.1 +. 2.2; Js.log(2 > 3); Js.log(2 > 3.1); Js.log(float_of_int(2) > 3.1); print_endline("Hello" ++ "Bali"); let age = 32; let age: int = 32; let colors = ["red", "green", "blue"];
- 50. Records 101 type person = { age: int, name: string, }; type nonPerson = { age: int, name: string, species: string, }; let kuririn: person = {age: 31, name: "Kuririn"}; let chiChi = {age: 21, name: "Chi-chi"}; let piccolo = {age: 103, name: "Piccolo", species: “Namek”}; print_endline(piccolo.species);
- 51. Reason Project $ bsb -init reason-demo -theme basic-reason $ cd reason-demo . !"" README.md !"" bsconfig.json !"" node_modules # %"" bs-platform !"" package.json %"" src %"" Demo.re
- 52. package.json { "name": "reason-demo-1", "version": "0.1.0", "scripts": { "build": "bsb -make-world", "start": "bsb -make-world -w", "clean": "bsb -clean-world" }, "keywords": [ "BuckleScript" ], "author": "", "license": "MIT", "devDependencies": { "bs-platform": "^4.0.6" } }
- 53. bsconfig.json{ "name": "reason-demo-1", "version": "0.1.0", "sources": { "dir" : "src", "subdirs" : true }, "package-specs": { "module": "commonjs", "in-source": true }, "suffix": ".bs.js", "bs-dependencies": [ // add your dependencies here. ], "warnings": { "error" : "+101" }, "namespace": true, "refmt": 3 }
- 54. src/Demo.re Js.log("Hello, BuckleScript and Reason!");
- 55. $ node src/Demo.bs.js Hello, BuckleScript and Reason! Try it out! $ yarn start . %"" src !"" Demo.bs.js %"" Demo.re
- 56. Variants 101 type species = | Saiyan | Namekian | Human | Majin | Other; type characters = { age: int, name: string, species, }; let bejita = {age: 42, name: "Vegeta", species: Saiyan};
- 57. Pattern Matching 101 let reply = switch (message) { | "Reason's pretty cool" => "Yep" | "good night" => "See ya!" | “hello" | “hi" | “heya" | "hey" => "hello to you too!" | _ => "Nice to meet you!" };
- 58. Pattern Matching and Variant let hear = switch (bejita.species) { | Saiyan => "This is too easy for me!!" | Namekian => “…” | Other => “Let’s try one more time" };
- 59. Binding and Interop [%bs.raw {| console.log("here is some js for you!") |}]; Js.log("this is reason"); let x = [%bs.raw {| 'here is a string from javascript' |}]; Js.log(x ++ " back in reason land"); [@bs.val] external pi: float = "Math.PI"; let volume_cylinder = (diameter, height) => pi *. diameter *. height;
- 60. DEMO CODERecap
- 61. FAMILIAR SYNTAX TYPE AND TYPE INFERENCE VARIANTS PATTERN MATCHING BINDING AND INTEROP
- 63. + =
- 64. NPM/Yarn React Router Flow Pre@er EsLint JS Console PropTypes Redux
- 65. NPM/Yarn React Router Flow Pre@er EsLint JS Console NPM/Yarn Reason Router StaLc Typing Refmt Rtop PropTypes PropTypes Redux Redux
- 66. NPM/Yarn Deps Deps Deps Deps Included in Browser NPM/Yarn Included Language feature Included Included in Toolchain Deps Language feature Deps Included
- 68. Props {this.props.someProp} <Example someProp=“Hello!” /> let make(~someProp, _children) { …component, render /* etc */ } <Example someProp=“Hello!” />
- 70. type state = {count: int}; /* the actions */ type action = | Increment | Decrement; let component = ReasonReact.reducerComponent("Counter"); let make = (_children) => { ...component, /* the state */ initialState: () => {count: 0}, /* the reducer */ reducer: (action, state) => switch action { | Increment => ReasonReact.Update({count: state.count + 1}) | Decrement => ReasonReact.Update({count: state.count - 1}) }, render: ({ state, send }) => <div> <h1> {ReasonReact.string(string_of_int(state.count))} </h1> <button onClick=((_e) => send(Increment))> {ReasonReact.string(“+”)} </button> <button onClick=((_e) => send(Decrement))> {ReasonReact.string(“-“)} </button> </div> };
- 71. type state = {count: int};
- 72. /* the actions */ type action = | Increment | Decrement;
- 73. let component = ReasonReact.reducerComponent("Counter");
- 74. let make = (_children) => { ...component, /* the state */ initialState: () => {count: 0}, /* … */ };
- 75. /* the reducer */ reducer: (action, state) => switch action { | Increment => ReasonReact.Update({count: state.count + 1}) | Decrement => ReasonReact.Update({count: state.count - 1}) },
- 76. render: ({ state, send }) => <div> <h1> {ReasonReact.string(string_of_int(state.count))} </h1> <button onClick=((_e) => send(Increment))> {ReasonReact.string(“+”)} </button> <button onClick=((_e) => send(Decrement))> {ReasonReact.string(“-“)} </button> </div>
- 77. REASONREACTRecap
- 78. “At the language level, it has features that we’v previously had to Bolt on top of the JavaScript such as alloca+on-less named arguments, prop types and more. In short, it is the best way to take React to the next level — unlocking far beGer user experience and fast-loading applica+ons.” Jordan Walke Creator React and Reason
- 79. JavaScript and HTML — I can build things! React — I can reuse my things! ReasonReact — I can reuse my React things more safely! All FuncLonal Programming