Introduction to ReasonML
•
2 gostaram•458 visualizações
Brief intro to ReasonML, a new syntax and toolchain for OCaML
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a Introduction to ReasonML
Semelhante a Introduction to ReasonML (20)
Mais de Riza Fahmi
Mais de Riza Fahmi (20)
Último
Último (20)
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