Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Perkenalan ReasonML

227 visualizaciones

Publicado el

Memperkenalkan ReasonML, sintaks dan alat bantu baru diatas bahasa OCaml. Juga membahas sekilas tentang ReasonReact.

Publicado en: Tecnología
  • Inicia sesión para ver los comentarios

Perkenalan ReasonML

  1. 1. REASONML About
  2. 2. NEW SYNTAX & TOOLCHAIN FOR OCAML
  3. 3. LOOKS AND FEELS LIKE
  4. 4. (* 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!"); } };
  5. 5. YARN/NPM BASED WORKFLOW
  6. 6. 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. Messenger.com
  7. 7. OCAML About
  8. 8. GENERAL PURPUSE SYSTEM LANGUAGE
  9. 9. STABLE, MATURE, 20 YEARS OLD
  10. 10. STATIC TYPES AND TYPE INFERENCE
  11. 11. BUCKLESCRIPT BRINGS OCAML TO THE WEB
  12. 12. WHY The
  13. 13. FREAKIN‘ FAST!
  14. 14. TYPE IS COOL
  15. 15. TYPE INFERENCE IS EVEN MORE COOLER!
  16. 16. FUNCTIONAL BUT PERMISSIVE
  17. 17. VARIANT AND PATTERN MATCHING
  18. 18. CAN TARGET JS AND NATIVE
  19. 19. HUMAN READABLE ERROR MESSAGE
  20. 20. COMPLETE TOOLS
  21. 21. Package Management Bundler UI Library Forma9er Linter Transpiler Boilerplate yarn/npm webpack React Pre0er ESLint Babel create-react-app ReasonReact 🎉 🎉 Refmt 🎉 🎉 🎉
  22. 22. EASE OF ADOPTION AND EASE OF MAINTENANCE
  23. 23. Ease of Adop+on EaseofMaintenance Low High High
  24. 24. JS Interop FAR CLOSE
  25. 25. “THE COMMUNITY IS SMALL BUT VERY FOCUSED ON DELIVERING A BETTER EXPERIENCE FOR DEVELOPERS.” Wojciech Bilicki
  26. 26. BUCKLESCRIPT Now
  27. 27. BRINGS OCAML TO THE WEB
  28. 28. COMPILES OCAML/REASON TO JS
  29. 29. OCaml OCaml Semantic Bytecode Native Reason
  30. 30. OCaml OCaml Semantic Reason BuckleScript JavaScript Bytecode Native
  31. 31. SUPER READABLE OUTPUT
  32. 32. '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;
  33. 33. 'use strict'; function add(a, b) { return a + b | 0; } exports.add = add;
  34. 34. GREAT INTEROP WITH JS
  35. 35. 10X FASTER THAN
  36. 36. REASONMLRecap
  37. 37. 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
  38. 38. “TALK IS CHEAP. SHOW ME CODE.” Linus Torvalds
  39. 39. Install and Setups $ yarn global add bs-platform $ yarn global add reason-cli $ rtop
  40. 40. 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"];
  41. 41. 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);
  42. 42. 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
  43. 43. 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" } }
  44. 44. 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 }
  45. 45. src/Demo.re Js.log("Hello, BuckleScript and Reason!");
  46. 46. $ node src/Demo.bs.js Hello, BuckleScript and Reason! Try it out! $ yarn start . %"" src !"" Demo.bs.js %"" Demo.re
  47. 47. Variants 101 type species = | Saiyan | Namekian | Human | Majin | Other; type characters = { age: int, name: string, species, }; let bejita = {age: 42, name: "Vegeta", species: Saiyan};
  48. 48. 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!" };
  49. 49. Pattern Matching and Variant let hear = switch (bejita.species) { | Saiyan => "This is too easy for me!!" | Namekian => “…” | Other => “Let’s try one more time" };
  50. 50. 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;
  51. 51. DEMO CODERecap
  52. 52. FAMILIAR SYNTAX TYPE AND TYPE INFERENCE VARIANTS PATTERN MATCHING BINDING AND INTEROP
  53. 53. REACT Wait, what about
  54. 54. + =
  55. 55. NPM/Yarn React Router Flow Pre;er EsLint JS Console PropTypes Redux
  56. 56. NPM/Yarn React Router Flow Pre;er EsLint JS Console NPM/Yarn Reason Router StaGc
 Typing Refmt Rtop PropTypes PropTypes Redux Redux
  57. 57. NPM/Yarn Deps Deps Deps Deps Included in
 Browser NPM/Yarn Included Language feature Included Included in Toolchain Deps Language
 feature Deps Included
  58. 58. Component Lifecycle componentDidMount() componentWillReceiveProps() shouldComponentUpdate() componentWillUpdate() componentDidUpdate() componentWillUnmount() didMount willReceiveProps shouldUpdate willUpdate didUpdate willUnmount
  59. 59. Props {this.props.someProp} <Example someProp=“Hello!” /> let make(~someProp, _children) { …component, render /* etc */ } <Example someProp=“Hello!” />
  60. 60. ReasonReact.statelessComponent ReasonReact.reducerComponent Component
  61. 61. 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> };
  62. 62. type state = {count: int};
  63. 63. /* the actions */ type action = | Increment | Decrement;
  64. 64. let component = ReasonReact.reducerComponent("Counter");
  65. 65. let make = (_children) => { ...component, /* the state */ initialState: () => {count: 0}, /* … */ };
  66. 66. /* the reducer */ reducer: (action, state) => switch action { | Increment => ReasonReact.Update({count: state.count + 1}) | Decrement => ReasonReact.Update({count: state.count - 1}) },
  67. 67. 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>
  68. 68. REASONREACTRecap
  69. 69. “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
  70. 70. JavaScript and HTML — I can build things! React — I can reuse my things! ReasonReact — I can reuse my React things more safely! All FuncGonal Programming
  71. 71. Some Additional Resources DISCORD.GG/REASONML ZAISTE.NET/REASON_IN_NUTSHELL_GETTING_STARTED_GUIDE JAREDFORSYTH.COM/POSTS/A-REASON-REACT-TUTORIAL MARMELAB.COM/BLOG/2018/04/09/ENJOY-PAINLESS-TYPING-WITH-REASON.HTML CROWDIN.COM/PROJECT/REASON
  72. 72. github.com/rizafahmi slideshare.net/rizafahmi twiDer.com/rizafahmi22 facebook.com/rizafahmi riza@hackGv8.com ceritanyadeveloper.com

×