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!

Transcript

1. ReasonML The Future of React Peter Piekarczyk
 Co-founder, Draftbit
2. PIES • CARS • CHICKS
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
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
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
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
25. Life After 2015 Flowtype Eslint Babel Typescript Redux Yarn Prettier React Immutable
27. What do you get when you take all that shit
28. & make it easy?
29. You get Reason
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
49. What does a React component look like?
51. Similar, but a little different, right?
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
59. Pipe First makes it easy to read composable functions
63. [1, 2, 3] is a List
64. Lists are immutable, homogeneous & fast AF
66. Belt is the standard library shipped with Reason
67. A built-in lodash just for Reason
69. Convert your immutable list into an array
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?
76. Tuples are immutable, ordered & heterogeneous
80. Pattern matching is a switch statement on steroids
83. Why is Tick capitalized?
84. Tick is not a string, its a constructor
86. Variants offer a powerful way of representing complex data
87. Variants allow you to express this OR that
89. Constructors can take arguments, too!
92. genType generates bindings between Reason & JavaScript
94. genType supports Typescript & Flowtype
96. Can I use my existing Javascript components in Reason?
99. **This part kinda sucks, but will be automated soon ☺
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
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
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
119. BuckleScript has a deep integration with JS libs
120. Binding Javascript to Reason
122. *Getting this right is the hardest part
123. There are bindings for almost every library
125. Is Reason ready for production?
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
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
139. Don’t be that person
141. BAEs BEST. AUDIENCE. EVER. draftbit.com/reason draftbit • peterpme