2019 GOTO Conf - Future of React & ReasonML

Learn about what Reason and ReasonReact, why there's been so much hype around it and how you can get ahead of this cutting edge language, framework and philosophy and lead the pact!

Transcript

1. The Future of React Peter Piekarczyk
2. ReasonML The Future of React Peter Piekarczyk
 Co-founder, Draftbit
3. PIES • CARS • CHICKS
4. Peter Piekarczyk •Polish •Loves to Cycle •ReasonML Lover •Expo / React Native Lover •Loves Plants (@petersplantss) •Y Combinator Alumn •Co-Founder of Draftbit
5. Draftbit is a platform to help you build mobile apps visually
6. 1. Scan QR Code 2. Drag Component 3. Export Code
9. Layers (Js) Frame (Yoga / Wasm / Reason) Config (JS / Reason) Live Preview / Code Gen (Reason) Navigator (Reason)
10. Early days at a startup are… hard
11. Draftbit needed to move faster to survive
13. We gave Reason a shot & never looked back
14. Draftbit Stack • React & ReasonML • Web Assembly • Expo • GraphQL & Apollo • Postgres
15. We used to start with Javascript
17. “Hey Peter…”
18. “I think I broke something…”
19. 15 min & 10 console.log’s later…
20. Config.apiUrl
 vs.
 Config.apiURL
21. Life Before 2015 Backbone Angular RequireJS jQuery Bower Gulp MVC CoffeeScript
23. Life After 2015 Flowtype Eslint Babel Typescript Redux Yarn Prettier React Immutable
25. What do you get when you take all that shit
26. & make it easy?
27. You get Reason
28. • Created by React creator • Familiar Javascript syntax • Battle-tested language • Friendly compiler
29. What language was React originally written in?
30. StandardML
31. What is Reason?
32. Javascript as a statically typed,
33. functional language, with a friendly compiler
34. & amazing developer productivity
35. If it compiles, it works
36. What is OCaml?
37. A functional programming language
38. With twenty years of type theory,
39. Powerful pattern matching, functions
40. & a robust ecosystem of packages (OPAM)
41. • Compiles >10x faster than Babel • Eliminates typical JS errors • Easy to use within your existing JS app • Compiled code is easy to debug
42. Fast AF Compile Times TypeScript Scala
43. CRA 3.0 REASON
46. What does a React component look like?
47. Desugars to JSX
48. Similar, but a little different, right?
50. All your jsx is typed
51. Why is this valuable?
52. Because uncertainty is the devil
53. We all know what uncertainty is already like …
54. Web Developer
56. Pipe First makes it easy to read composable functions
60. [1, 2, 3] is a List
61. Lists are immutable, homogeneous & fast AF
63. Belt is the standard library shipped with Reason
64. A built-in lodash just for Reason
66. Convert your immutable list into an array
68. Convert your array into a React element
69. *both Lists & Arrays are supported
70. Hooks are the future
72. Tuples are immutable, ordered & heterogeneous
76. Pattern matching is a switch statement on steroids
79. Why is Tick capitalized?
80. Tick is not a string, its a constructor
82. Variants offer a powerful way of representing complex data
83. Variants allow you to express this OR that
85. Constructors can take arguments, too!
88. genType generates bindings between Reason & JavaScript
90. genType supports Typescript & Flowtype
92. Can I use my existing Javascript components in Reason?
95. That’ll be automated soon, too ☺
97. How do I add Reason to my Javascript project?
98. 1. yarn add bs-platform —dev 2. add bsconfig.json 3. add script tags
100. ReasonML
 (.re, .rei) OCaml
 (.ml, .mli) OCaml AST Bytecode Native code JavaScript
101. BuckleScript
102. Write safer, simple, readable code that compiles to JavaScript
103. The compiled JavaScript is readable
108. The compiled JavaScript is faster
109. ImmutableJS Map 3415ms
110. Reason Immutable Map 1186ms
111. Tree Shaking is %
112. Webpack 55,000 Bytes
113. Bucklescript 899 Bytes
115. BuckleScript has a deep integration with JS libs
116. Binding Javascript to Reason
118. *Getting this right is the hardest part
119. There are bindings for almost every library
121. Is Reason ready for production?
123. Companies Shipping Reason
124. (& many more)
126. Where can I learn more?
127. Chicago ReasonML Meetup
128. ReasonML Discord Google it
129. Reason Conf US Chicago • October 2019
130. Keynote by Jordan Walke Creator of React
131. www.reason-conf.us
133. Don’t be that person
134. BAEs BEST. AUDIENCE. EVER. draftbit.com/reason draftbit • peterpme