$30 off During Our Annual Pro Sale. View Details »

2019 GOTO Conf - Future of React & ReasonML

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!

Peter Piekarczyk

April 30, 2019
Tweet

More Decks by Peter Piekarczyk

Other Decks in Programming

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