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
   

   View Slide

2. ReasonML
   The Future of React
   Peter Piekarczyk

   Co-founder, Draftbit
   

   View Slide

3. PIES • CARS • CHICKS
   

   View Slide

4. Peter Piekarczyk
   •Polish
   •Loves to Cycle
   •ReasonML Lover
   •Expo / React Native Lover
   •Loves Plants (@petersplantss)
   •Y Combinator Alumn
   •Co-Founder of Draftbit
   

   View Slide

5. Draftbit is a platform to
   help you build mobile
   apps visually
   

   View Slide

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

   View Slide

7. View Slide

8. View Slide

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

   View Slide

10. Early days at a startup are…
    hard
    

    View Slide

11. Draftbit needed to move
    faster to survive
    

    View Slide

12. View Slide

13. We gave Reason a shot
    & never looked back
    

    View Slide

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

    View Slide

15. We used to start with
    Javascript
    

    View Slide

16. View Slide

17. “Hey Peter…”
    

    View Slide

18. “I think I broke
    something…”
    

    View Slide

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

    View Slide

20. Config.apiUrl

    vs.

    Config.apiURL
    

    View Slide

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

    View Slide

22. View Slide

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

    View Slide

24. View Slide

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

    View Slide

26. & make it easy?
    

    View Slide

27. You get Reason
    

    View Slide

28. • Created by React creator
    • Familiar Javascript syntax
    • Battle-tested language
    • Friendly compiler
    

    View Slide

29. What language was
    React originally
    written in?
    

    View Slide

30. StandardML
    

    View Slide

31. What is Reason?
    

    View Slide

32. Javascript as a
    statically typed,
    

    View Slide

33. functional language,
    with a friendly
    compiler
    

    View Slide

34. & amazing developer
    productivity
    

    View Slide

35. If it compiles,
    it works
    

    View Slide

36. What is OCaml?
    

    View Slide

37. A functional
    programming language
    

    View Slide

38. With twenty years of
    type theory,
    

    View Slide

39. Powerful pattern
    matching, functions
    

    View Slide

40. & a robust ecosystem
    of packages (OPAM)
    

    View Slide

41. • 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

42. Fast AF Compile Times
    TypeScript
    Scala
    

    View Slide

43. CRA 3.0 REASON
    

    View Slide

44. View Slide

45. View Slide

46. What does a React
    component look like?
    

    View Slide

47. Desugars to JSX
    

    View Slide

48. Similar, but a little
    different, right?
    

    View Slide

49. View Slide

50. All your jsx is typed
    

    View Slide

51. Why is this valuable?
    

    View Slide

52. Because uncertainty is
    the devil
    

    View Slide

53. We all know what
    uncertainty is already
    like …
    

    View Slide

54. Web Developer
    

    View Slide

55. View Slide

56. Pipe First makes it easy
    to read composable
    functions
    

    View Slide

57. View Slide

58. View Slide

59. View Slide

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

    View Slide

61. Lists are immutable,
    homogeneous & fast AF
    

    View Slide

62. View Slide

63. Belt is the standard library
    shipped with Reason
    

    View Slide

64. A built-in lodash just
    for Reason
    

    View Slide

65. View Slide

66. Convert your immutable
    list into an array
    

    View Slide

67. View Slide

68. Convert your array
    into a React element
    

    View Slide

69. *both Lists & Arrays are
    supported
    

    View Slide

70. Hooks are the future
    

    View Slide

71. View Slide

72. Tuples are immutable,
    ordered &
    heterogeneous
    

    View Slide

73. View Slide

74. View Slide

75. View Slide

76. Pattern matching is a
    switch statement on
    steroids
    

    View Slide

77. View Slide

78. View Slide

79. Why is Tick
    capitalized?
    

    View Slide

80. Tick is not a string, its a
    constructor
    

    View Slide

81. View Slide

82. Variants offer a powerful
    way of representing
    complex data
    

    View Slide

83. Variants allow you to
    express this OR that
    

    View Slide

84. View Slide

85. Constructors can take
    arguments, too!
    

    View Slide

86. View Slide

87. View Slide

88. genType generates
    bindings between
    Reason & JavaScript
    

    View Slide

89. View Slide

90. genType supports
    Typescript & Flowtype
    

    View Slide

91. View Slide

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

    View Slide

93. View Slide

94. View Slide

95. That’ll be automated
    soon, too ☺
    

    View Slide

96. View Slide

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

    View Slide

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

    View Slide

99. View Slide

100. ReasonML

     (.re, .rei)
     OCaml

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

     View Slide

101. BuckleScript
     

     View Slide

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

     View Slide

103. The compiled
     JavaScript is readable
     

     View Slide

104. View Slide

105. View Slide

106. View Slide

107. View Slide

108. The compiled
     JavaScript is faster
     

     View Slide

109. ImmutableJS Map
     3415ms
     

     View Slide

110. Reason Immutable Map
     1186ms
     

     View Slide

111. Tree Shaking is %
     

     View Slide

112. Webpack
     55,000 Bytes
     

     View Slide

113. Bucklescript
     899 Bytes
     

     View Slide

114. View Slide

115. BuckleScript has a deep
     integration with JS libs
     

     View Slide

116. Binding Javascript
     to Reason
     

     View Slide

117. View Slide

118. *Getting this right
     is the hardest part
     

     View Slide

119. There are bindings for
     almost every library
     

     View Slide

120. View Slide

121. Is Reason ready
     for production?
     

     View Slide

122. View Slide

123. Companies Shipping Reason
     

     View Slide

124. (& many more)
     

     View Slide

125. View Slide

126. Where can I
     learn more?
     

     View Slide

127. Chicago
     ReasonML Meetup
     

     View Slide

128. ReasonML Discord
     Google it
     

     View Slide

129. Reason Conf US
     Chicago • October 2019
     

     View Slide

130. Keynote by Jordan Walke
     Creator of React
     

     View Slide

131. www.reason-conf.us
     

     View Slide

132. View Slide

133. Don’t be
     that person
     

     View Slide

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

     View Slide

135. View Slide