ReasonML - The Future of React 💯

ReasonML - The Future of React 💯

ReasonML is a new language and way to build not just websites powered by ReactJS, but powers a whole new ecosystem of utilization. Electron apps, CLIs, VM-based servers and any application JavaScript currently has can be improved using ReasonML. Build native CLI tools that are fast. Build native MacOS apps that don’t have to require all of Chrome and a 100mb min bundle size. Run your ReasonML apps on bare metal!

Adf8d46e927a78b42773fa52e27e3bee?s=128

Peter Piekarczyk

June 29, 2019
Tweet

Transcript

  1. ReasonML The Future of React Peter Piekarczyk
 Co-founder, Draftbit

  2. PIES • CARS • CHICKS

  3. None
  4. None
  5. None
  6. Peter Piekarczyk •Y Combinator Alumn •Huge Expo / React Native

    Fan •Loves Plants (@petersplantss) •Loves Cycling •Loves ReasonML •Co-Founder of Draftbit
  7. Draftbit helps your team build mobile apps visually

  8. 1. Scan QR Code 2. Drag Component 3. Export Code

  9. None
  10. None
  11. Layers (Js) Frame (Yoga / Wasm / Reason) Config (JS

    / Reason) Live Preview / Code Gen (Reason) Navigator (Reason)
  12. Early days at a startup are… hard

  13. Draftbit needed to move faster to survive

  14. None
  15. We gave Reason a shot & never looked back

  16. Draftbit Stack • React & ReasonML • Web Assembly •

    Expo • GraphQL & Apollo • Postgres
  17. We used to start with Javascript

  18. None
  19. “Hey Peter…”

  20. “I think I broke something…”

  21. 15 min & 10 console.log’s later…

  22. Config.apiUrl
 vs.
 Config.apiURL

  23. Life Before 2015 Backbone Angular RequireJS jQuery Bower Gulp MVC

    CoffeeScript
  24. None
  25. Life After 2015 Flowtype Eslint Babel Typescript Redux Yarn Prettier

    React Immutable
  26. None
  27. What do you get when you take all that shit

  28. & make it easy?

  29. You get Reason

  30. None
  31. • Created by React creator • Familiar Javascript syntax •

    Battle-tested language • Friendly compiler • Multiple compile targets
  32. What language was React originally written in?

  33. StandardML

  34. What is Reason?

  35. Javascript as a statically typed,

  36. functional language, with a friendly compiler

  37. & amazing developer productivity

  38. If it compiles, it works

  39. What is OCaml?

  40. A functional programming language

  41. With twenty years of type theory,

  42. Powerful pattern matching, functions

  43. & a robust ecosystem of packages (OPAM)

  44. • Compiles >10x faster than Babel • Eliminates typical JS

    errors • Easy to use within your existing JS app • Compiled code is easy to debug
  45. Fast AF Compile Times TypeScript Scala

  46. CRA 3.0 REASON

  47. None
  48. None
  49. What does a React component look like?

  50. None
  51. Similar, but a little different, right?

  52. None
  53. All your jsx is typed

  54. Why is this valuable?

  55. Because uncertainty is the devil

  56. We all know what uncertainty is already like …

  57. Web Developer

  58. None
  59. Pipe First makes it easy to read composable functions

  60. None
  61. None
  62. None
  63. [1, 2, 3] is a List

  64. Lists are immutable, homogeneous & fast AF

  65. None
  66. Belt is the standard library shipped with Reason

  67. A built-in lodash just for Reason

  68. None
  69. Convert your immutable list into an array

  70. None
  71. Convert your array into a React element

  72. *both Lists & Arrays are supported

  73. Hooks are the future

  74. Have you heard about Hooks?

  75. None
  76. Tuples are immutable, ordered & heterogeneous

  77. None
  78. None
  79. None
  80. Pattern matching is a switch statement on steroids

  81. None
  82. None
  83. Why is Tick capitalized?

  84. Tick is not a string, its a constructor

  85. None
  86. Variants offer a powerful way of representing complex data

  87. Variants allow you to express this OR that

  88. None
  89. Constructors can take arguments, too!

  90. None
  91. None
  92. genType generates bindings between Reason & JavaScript

  93. None
  94. genType supports Typescript & Flowtype

  95. None
  96. Can I use my existing Javascript components in Reason?

  97. None
  98. None
  99. **This part kinda sucks, but will be automated soon ☺

  100. None
  101. How do I add Reason to my Javascript project?

  102. 1. yarn add bs-platform —dev 2. add bsconfig.json 3. add

    script tags
  103. None
  104. ReasonML
 (.re, .rei) OCaml
 (.ml, .mli) OCaml AST Bytecode Native

    code JavaScript
  105. BuckleScript

  106. Write safer, simple, readable code that compiles to JavaScript

  107. The compiled JavaScript is readable

  108. None
  109. None
  110. None
  111. None
  112. The compiled JavaScript is faster

  113. ImmutableJS Map 3415ms

  114. Reason Immutable Map 1186ms

  115. Tree Shaking is %

  116. Webpack 55,000 Bytes

  117. Bucklescript 899 Bytes

  118. None
  119. BuckleScript has a deep integration with JS libs

  120. Binding Javascript to Reason

  121. None
  122. *Getting this right is the hardest part

  123. There are bindings for almost every library

  124. None
  125. Is Reason ready for production?

  126. None
  127. Companies Shipping Reason

  128. (& many more)

  129. *These companies aren’t startups, they’re BIG businesses

  130. messenger.com is completely written in Reason

  131. None
  132. Where can I learn more?

  133. Your local ReasonML Meetup

  134. ReasonML Discord Google it

  135. Reason Conf US Chicago • October 8th 2019

  136. Keynote by Jordan Walke Creator of React

  137. https:/ /reason-conf.us

  138. None
  139. Don’t be that person

  140. None
  141. BAEs BEST. AUDIENCE. EVER. draftbit.com/reason draftbit • peterpme