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!
The Future of ReactPeter Piekarczyk
View Slide
ReasonML The Future of ReactPeter Piekarczyk Co-founder, Draftbit
PIES • CARS • CHICKS
Peter Piekarczyk•Polish•Loves to Cycle•ReasonML Lover•Expo / React Native Lover•Loves Plants (@petersplantss)•Y Combinator Alumn•Co-Founder of Draftbit
Draftbit is a platform tohelp you build mobileapps visually
1. Scan QR Code2. Drag Component3. Export Code
Layers (Js)Frame(Yoga / Wasm / Reason)Config(JS / Reason)Live Preview / Code Gen(Reason)Navigator(Reason)
Early days at a startup are…hard
Draftbit needed to movefaster to survive
We gave Reason a shot& never looked back
Draftbit Stack• React & ReasonML• Web Assembly• Expo• GraphQL & Apollo• Postgres
We used to start withJavascript
“Hey Peter…”
“I think I brokesomething…”
15 min & 10console.log’s later…
Config.apiUrl vs. Config.apiURL
Life Before 2015BackboneAngularRequireJSjQueryBowerGulp MVCCoffeeScript
Life After 2015FlowtypeEslintBabelTypescriptRedux YarnPrettierReactImmutable
What do you getwhen you takeall that shit
& make it easy?
You get Reason
• Created by React creator• Familiar Javascript syntax• Battle-tested language• Friendly compiler
What language wasReact originallywritten in?
StandardML
What is Reason?
Javascript as astatically typed,
functional language,with a friendlycompiler
& amazing developerproductivity
If it compiles,it works
What is OCaml?
A functionalprogramming language
With twenty years oftype theory,
Powerful patternmatching, functions
& a robust ecosystemof packages (OPAM)
• Compiles >10x faster than Babel• Eliminates typical JS errors• Easy to use within your existing JS app• Compiled code is easy to debug
Fast AF Compile TimesTypeScriptScala
CRA 3.0 REASON
What does a Reactcomponent look like?
Desugars to JSX
Similar, but a littledifferent, right?
All your jsx is typed
Why is this valuable?
Because uncertainty isthe devil
We all know whatuncertainty is alreadylike …
Web Developer
Pipe First makes it easyto read composablefunctions
[1, 2, 3] is a List
Lists are immutable,homogeneous & fast AF
Belt is the standard libraryshipped with Reason
A built-in lodash justfor Reason
Convert your immutablelist into an array
Convert your arrayinto a React element
*both Lists & Arrays aresupported
Hooks are the future
Tuples are immutable,ordered &heterogeneous
Pattern matching is aswitch statement onsteroids
Why is Tickcapitalized?
Tick is not a string, its aconstructor
Variants offer a powerfulway of representingcomplex data
Variants allow you toexpress this OR that
Constructors can takearguments, too!
genType generatesbindings betweenReason & JavaScript
genType supportsTypescript & Flowtype
Can I use my existingJavascript componentsin Reason?
That’ll be automatedsoon, too ☺
How do I add Reason tomy Javascript project?
1. yarn add bs-platform —dev2. add bsconfig.json3. add script tags
ReasonML (.re, .rei)OCaml (.ml, .mli)OCaml ASTBytecode Native code JavaScript
BuckleScript
Write safer, simple,readable code thatcompiles to JavaScript
The compiledJavaScript is readable
The compiledJavaScript is faster
ImmutableJS Map3415ms
Reason Immutable Map1186ms
Tree Shaking is %
Webpack55,000 Bytes
Bucklescript899 Bytes
BuckleScript has a deepintegration with JS libs
Binding Javascriptto Reason
*Getting this rightis the hardest part
There are bindings foralmost every library
Is Reason readyfor production?
Companies Shipping Reason
(& many more)
Where can Ilearn more?
ChicagoReasonML Meetup
ReasonML DiscordGoogle it
Reason Conf US Chicago • October 2019
Keynote by Jordan WalkeCreator of React
www.reason-conf.us
Don’t bethat person
BAEsBEST. AUDIENCE. EVER.draftbit.com/reasondraftbit • peterpme