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

ReasonML - The Future of React 💯

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!

Peter Piekarczyk

June 29, 2019
Tweet

More Decks by Peter Piekarczyk

Other Decks in Programming

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