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
   

   View Slide

2. PIES • CARS • CHICKS
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. Peter Piekarczyk
   •Y Combinator Alumn
   •Huge Expo / React Native Fan
   •Loves Plants (@petersplantss)
   •Loves Cycling
   •Loves ReasonML
   •Co-Founder of Draftbit
   

   View Slide

7. Draftbit helps your
   team build mobile apps
   visually
   

   View Slide

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

   View Slide

9. View Slide

10. View Slide

11. Layers (Js)
    Frame
    (Yoga / Wasm / Reason)
    Config
    (JS / Reason)
    Live Preview / Code Gen
    (Reason)
    Navigator
    (Reason)
    

    View Slide

12. Early days at a startup are…
    hard
    

    View Slide

13. Draftbit needed to move
    faster to survive
    

    View Slide

14. View Slide

15. We gave Reason a shot
    & never looked back
    

    View Slide

16. Draftbit Stack
    • React & ReasonML
    • Web Assembly
    • Expo
    • GraphQL & Apollo
    • Postgres
    

    View Slide

17. We used to start with
    Javascript
    

    View Slide

18. View Slide

19. “Hey Peter…”
    

    View Slide

20. “I think I broke
    something…”
    

    View Slide

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

    View Slide

22. Config.apiUrl

    vs.

    Config.apiURL
    

    View Slide

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

    View Slide

24. View Slide

25. Life After 2015
    Flowtype
    Eslint
    Babel
    Typescript
    Redux Yarn
    Prettier
    React
    Immutable
    

    View Slide

26. View Slide

27. What do you get
    when you take
    all that shit
    

    View Slide

28. & make it easy?
    

    View Slide

29. You get Reason
    

    View Slide

30. View Slide

31. • Created by React creator
    • Familiar Javascript syntax
    • Battle-tested language
    • Friendly compiler
    • Multiple compile targets
    

    View Slide

32. What language was
    React originally
    written in?
    

    View Slide

33. StandardML
    

    View Slide

34. What is Reason?
    

    View Slide

35. Javascript as a
    statically typed,
    

    View Slide

36. functional language,
    with a friendly
    compiler
    

    View Slide

37. & amazing developer
    productivity
    

    View Slide

38. If it compiles,
    it works
    

    View Slide

39. What is OCaml?
    

    View Slide

40. A functional
    programming language
    

    View Slide

41. With twenty years of
    type theory,
    

    View Slide

42. Powerful pattern
    matching, functions
    

    View Slide

43. & a robust ecosystem
    of packages (OPAM)
    

    View Slide

44. • Compiles >10x faster than Babel
    • Eliminates typical JS errors
    • Easy to use within your existing JS app
    • Compiled code is easy to debug
    

    View Slide

45. Fast AF Compile Times
    TypeScript
    Scala
    

    View Slide

46. CRA 3.0 REASON
    

    View Slide

47. View Slide

48. View Slide

49. What does a React
    component look like?
    

    View Slide

50. View Slide

51. Similar, but a little
    different, right?
    

    View Slide

52. View Slide

53. All your jsx is typed
    

    View Slide

54. Why is this valuable?
    

    View Slide

55. Because uncertainty is
    the devil
    

    View Slide

56. We all know what
    uncertainty is already
    like …
    

    View Slide

57. Web Developer
    

    View Slide

58. View Slide

59. Pipe First makes it easy
    to read composable
    functions
    

    View Slide

60. View Slide

61. View Slide

62. View Slide

63. [1, 2, 3] is a List
    

    View Slide

64. Lists are immutable,
    homogeneous & fast AF
    

    View Slide

65. View Slide

66. Belt is the standard library
    shipped with Reason
    

    View Slide

67. A built-in lodash just
    for Reason
    

    View Slide

68. View Slide

69. Convert your immutable
    list into an array
    

    View Slide

70. View Slide

71. Convert your array
    into a React element
    

    View Slide

72. *both Lists & Arrays are
    supported
    

    View Slide

73. Hooks are the future
    

    View Slide

74. Have you heard
    about Hooks?
    

    View Slide

75. View Slide

76. Tuples are immutable,
    ordered &
    heterogeneous
    

    View Slide

77. View Slide

78. View Slide

79. View Slide

80. Pattern matching is a
    switch statement on
    steroids
    

    View Slide

81. View Slide

82. View Slide

83. Why is Tick
    capitalized?
    

    View Slide

84. Tick is not a string, its a
    constructor
    

    View Slide

85. View Slide

86. Variants offer a powerful
    way of representing
    complex data
    

    View Slide

87. Variants allow you to
    express this OR that
    

    View Slide

88. View Slide

89. Constructors can take
    arguments, too!
    

    View Slide

90. View Slide

91. View Slide

92. genType generates
    bindings between
    Reason & JavaScript
    

    View Slide

93. View Slide

94. genType supports
    Typescript & Flowtype
    

    View Slide

95. View Slide

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

    View Slide

97. View Slide

98. View Slide

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

    View Slide

100. View Slide

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

     View Slide

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

     View Slide

103. View Slide

104. ReasonML

     (.re, .rei)
     OCaml

     (.ml, .mli)
     OCaml AST
     Bytecode Native code JavaScript
     

     View Slide

105. BuckleScript
     

     View Slide

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

     View Slide

107. The compiled
     JavaScript is readable
     

     View Slide

108. View Slide

109. View Slide

110. View Slide

111. View Slide

112. The compiled
     JavaScript is faster
     

     View Slide

113. ImmutableJS Map
     3415ms
     

     View Slide

114. Reason Immutable Map
     1186ms
     

     View Slide

115. Tree Shaking is %
     

     View Slide

116. Webpack
     55,000 Bytes
     

     View Slide

117. Bucklescript
     899 Bytes
     

     View Slide

118. View Slide

119. BuckleScript has a deep
     integration with JS libs
     

     View Slide

120. Binding Javascript
     to Reason
     

     View Slide

121. View Slide

122. *Getting this right
     is the hardest part
     

     View Slide

123. There are bindings for
     almost every library
     

     View Slide

124. View Slide

125. Is Reason ready
     for production?
     

     View Slide

126. View Slide

127. Companies Shipping Reason
     

     View Slide

128. (& many more)
     

     View Slide

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

     View Slide

130. messenger.com is
     completely written in
     Reason
     

     View Slide

131. View Slide

132. Where can I
     learn more?
     

     View Slide

133. Your local
     ReasonML Meetup
     

     View Slide

134. ReasonML Discord
     Google it
     

     View Slide

135. Reason Conf US
     Chicago • October 8th 2019
     

     View Slide

136. Keynote by Jordan Walke
     Creator of React
     

     View Slide

137. https:/
     /reason-conf.us
     

     View Slide

138. View Slide

139. Don’t be
     that person
     

     View Slide

140. View Slide

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

     View Slide