2018 - React Chicago - ReasonReact - A Love Story

When I first met ReactJS, it was love at first sight. We built beautiful UIs for years together with our firstborn, Redux. I felt like nothing would get between us. Not even when a younger, skinnier version came along (Preact). Life was good.

Everything changed when ReasonReact showed up on our block. I was curious, of course. Didn’t act on it, though. Why would I? We’d run into each other a lot since we shared the same circles. One day, the temptations got too strong. What was I thinking? Nothing about what I was doing felt right, at first. I was leaving a lot behind but for some weird reason, I knew I’d end up here anyway. I mean, it’s not like we’re splitting apart. React will still be there, but so will Reason...

I’m here to announce my love affair.

Transcript

1. ReasonML - A Love Story Peter Piekarczyk @peterpme draftbit.com June 27, 2018
2. Draftbit Build x-plat apps in minutes instead of months
3. Life Before 2015 Backbone Angular RequireJS jQuery Bower Gulp MVC CoffeeScript
4. Life Before 2015 lmao
5. 2015 & Beyond Flowtype Eslint Babel Typescript Redux Yarn Prettier React Immutable
6. ReasonML
7. What is ReasonML • New language by the creator of React • Familiar JavaScript syntax on top of OCaml AST • Battle-tested language & ecosystem • Friendly compiler errors & warnings
8. JavaScript as a statically typed, functional language with a super fast compiler & amazing error messages What is ReasonML
9. If it compiles, it works.
10. • Compiles 10x faster than Babel • Eliminates typical Javascript errors • Use it alongside your current JS apps • Compiles down to native binaries • Readable compiled JavaScript Why Consider Reason
11. ReasonML Companies
12. Messenger.com •Full rebuild (100s of files) is 2 seconds •Incremental builds are < 100ms •10 bugs for the whole year vs every week •Refactoring reduced to minutes instead of days
13. Friendly Compiler Warnings
14. Friendly Compiler Warnings
15. Fast AF Compile Times Scala Kotlin TypeScript
16. The compiled
 JavaScript is Readable
17. let fizzbuzz = (i) !=> switch (i mod 3, i mod 5) { | (0, 0) !=> "FizzBuzz" | (0, _) !=> "Fizz" | (_, 0) !=> "Buzz" | _ !=> string_of_int(i) };
18. function fizzbuzz(i) { var match = i % 3; var match$1 = i % 5; if (match !!!== 0) { if (match$1 !!!== 0) { return String(i); } else { return "Buzz"; } } else if (match$1 !!!== 0) { return "Fizz"; } else { return "FizzBuzz"; } }
19. let rec factorial = (n) !=> n !<= 0 ? 1 : n * factorial(n - 1);
20. var Caml_int32 = require("stdlib/caml_int32"); function factorial(n) { var match = n !<= 0; if (match) { return 1; } else { return Caml_int32.imul(n, factorial(n - 1 | 0)); } }
21. Faster than hand- written JavaScript
22. let test = () !=> { let m = ref(IntMap.empty); let count = 1000000; for (i in 0 to count) { m !:= IntMap.add(i, i, m^); }; for (i in 0 to count) { ignore(IntMap.find(i, m^)); }; };
23. var Map = Immutable.Map; var m = new Map(); var test = function() { var count = 1000000; for(var i = 0; i < count; !++i) { m = m.set(i, i); } for(var j = 0; j < count; !++j) { m.get(j); } } test();
24. Fast AF Execution • ReasonML Immutable Map: 1186ms • ImmutableJS Map: 3415ms
25. Optimized Tree Shaking • BuckleScript: 899 Bytes • Immutable JS: 55.3K Bytes
26. How!? Everything happens at compile time Everything is built & organized to be fast & light
27. Ocaml & Reason Same Semantics
 Different Syntax
28. Compile Targets ReasonML syntax
 (.re, .rei) OCaml syntax
 (.ml, .mli) OCaml AST JavaScript Native Code Bytecode ocamlc ocamlopt BuckleScript reasonmlhub.com
29. • Established Language (1996) • Used in high-performance apps • Facebook uses it for everything (Flow, Hack) • First version of React was in Standard ML Why OCaml
30. • Babel became a popular thing • Bloomberg released BuckleScript • Jordan rewrote React in OCaml • Believed the world was ready ReasonML History
31. • First versions of React were written in StandardML • Babel didn’t exist • Adoption would have been hard • ReactJS was born! React History
32. Is ReasonML Ready? Ya
33. Write safer & simpler code
 in OCaml or Reason
 that compiles to JavaScript BuckleScript
34. BuckleScript Goals • Readable JavaScript output • Supports the current JS ecosystem • Compiles really fast
35. Use any Javascript module Just write the bindings Bindings
36. Bindings •bs-* •bs-react-native •bs-fetch •bs-moment
37. Bindings type t; [@bs.get] external hairlineWidth : t !=> float = "hairlineWidth"; let hairlineWidth = hairlineWidth(t);
38. The hardest part Bindings
39. Types • Can be inferred • Coverage is *always* 100% • Completely sound • Consume arguments like a function
40. Types let friend = “Jeff”; let friend: string = “Jeff”;
41. Types type intCoordinates = (int, int); type coordinates(‘a) = (‘a, ‘a); let intCoordinates = coordinates(int); let house: coordinates(float) = (0.12, -0.12); let house = (0.12, -0.12);
42. Variants type myResponseVariant = | Yes | No | PrettyMuch; let areYouCrushingIt = Yes; this OR that OR that
43. Pattern Matching let message = switch (areYouCrushingIt) { | No !=> "No worries. Keep going!" | Yes !=> "Great!" | PrettyMuch !=> "Nice!" }; “Great!”
44. Pattern Matching let message = “sup"; let reply = switch (message) { | "Reason's pretty cool" !=> "Yep" | "good night" !=> "See ya!" | “hello" | "hey" !=> "hello to you too!" | _ !=> "Nice to meet you!" }; “Nice to meet you!”
45. Modules • Treated as mini files • Can include types & nested modules • Can be “opened” and “extended”
46. Modules module School = { type profession = Teacher | Director; let person1 = Teacher; let getProfession = (person) !=> switch (person) { | Teacher !=> "A teacher" | Director !=> "A director" }; }; let anotherPerson: School.profession = School.Teacher;
47. Module Opens open BsReactNative; StyleSheet.create(…) Global Open: Local Open: let styles =
 StyleSheet.create( Style.(…)
48. • Write React components using Reason • Not a re-write, just the bindings • Safe & statically typed: it just works! ReasonReact
49. Your First Component let component = ReasonReact.statelessComponent("Greeting"); let make = (~name, _children) !=> { !!...component, render: (_self) !=> <button> {ReasonReact.string("Hello " !++ name !++ “!")} !</button> };
50. Stateless Components let component = ReasonReact.statelessComponent("Greeting");
51. Arguments let make = (~name, _children) !=> { !!...component, render: (_self) !=> <button> {ReasonReact.string("Hello " !++ name !++ “!")} !</button> };
52. Arguments let make = (~name, _children) !=> { …ReasonReact.statelessComponent(“Greeting"), render: (_self) !=> <button> {ReasonReact.string("Hello " !++ name !++ “!")} !</button> }; DO NOT DO THIS!!!
53. Render render: (_self) !=> <button> {ReasonReact.string("Hello " !++ name !++ “!")} !</button>
54. String to React Element {ReasonReact.string("Hello " !++ name !++ “!")}
55. • npm install -g bs-platform • add bsconfig.json • bsb -make-world -clean-world Existing Project
56. bsconfig.json { "name": “my-project”, "reason": {"react-jsx" : 2}, "bsc-flags": ["-bs-super-errors"], "package-specs": [{"module": “commonjs", "in-source": true}], "suffix": ".bs.js", "namespace": true, "bs-dependencies": ["bs-react-native","reason-react"], "sources": [{"dir": "re"}], "refmt": 3 }
57. New Project npm install -g bs-platform; create-react-app App !--scripts-version reason-scripts;
58. Demo
59. Resources • https://reasonml.github.io • https://bucklescript.github.io • https://reasonml.github.io/reason-react/en/
60. Chicago ReasonML Meetup Google it. Come hang out & code.
61. ChicagoJS.org Apply to talk at JSCamp by July 4th!
62. Thanks Peter Piekarczyk @peterpme draftbit.com June 27, 2018