Slide 1

Slide 1 text

ReasonML - A Love Story Peter Piekarczyk @peterpme draftbit.com June 27, 2018

Slide 2

Slide 2 text

Draftbit Build x-plat apps in minutes instead of months

Slide 3

Slide 3 text

Life Before 2015 Backbone Angular RequireJS jQuery Bower Gulp MVC CoffeeScript

Slide 4

Slide 4 text

Life Before 2015 lmao

Slide 5

Slide 5 text

2015 & Beyond Flowtype Eslint Babel Typescript Redux Yarn Prettier React Immutable

Slide 6

Slide 6 text

ReasonML

Slide 7

Slide 7 text

What is ReasonML • New language by the creator of React • Familiar JavaScript syntax on top of OCaml AST • Battle-tested language & ecosystem • Friendly compiler errors & warnings

Slide 8

Slide 8 text

JavaScript as a statically typed, functional language with a super fast compiler & amazing error messages What is ReasonML

Slide 9

Slide 9 text

If it compiles, it works.

Slide 10

Slide 10 text

• Compiles 10x faster than Babel • Eliminates typical Javascript errors • Use it alongside your current JS apps • Compiles down to native binaries • Readable compiled JavaScript Why Consider Reason

Slide 11

Slide 11 text

ReasonML Companies

Slide 12

Slide 12 text

Messenger.com •Full rebuild (100s of files) is 2 seconds •Incremental builds are < 100ms •10 bugs for the whole year vs every week •Refactoring reduced to minutes instead of days

Slide 13

Slide 13 text

Friendly Compiler Warnings

Slide 14

Slide 14 text

Friendly Compiler Warnings

Slide 15

Slide 15 text

Fast AF Compile Times Scala Kotlin TypeScript

Slide 16

Slide 16 text

The compiled
 JavaScript is Readable

Slide 17

Slide 17 text

let fizzbuzz = (i) !=> switch (i mod 3, i mod 5) { | (0, 0) !=> "FizzBuzz" | (0, _) !=> "Fizz" | (_, 0) !=> "Buzz" | _ !=> string_of_int(i) };

Slide 18

Slide 18 text

function fizzbuzz(i) { var match = i % 3; var match$1 = i % 5; if (match !!!== 0) { if (match$1 !!!== 0) { return String(i); } else { return "Buzz"; } } else if (match$1 !!!== 0) { return "Fizz"; } else { return "FizzBuzz"; } }

Slide 19

Slide 19 text

let rec factorial = (n) !=> n !<= 0 ? 1 : n * factorial(n - 1);

Slide 20

Slide 20 text

var Caml_int32 = require("stdlib/caml_int32"); function factorial(n) { var match = n !<= 0; if (match) { return 1; } else { return Caml_int32.imul(n, factorial(n - 1 | 0)); } }

Slide 21

Slide 21 text

Faster than hand- written JavaScript

Slide 22

Slide 22 text

let test = () !=> { let m = ref(IntMap.empty); let count = 1000000; for (i in 0 to count) { m !:= IntMap.add(i, i, m^); }; for (i in 0 to count) { ignore(IntMap.find(i, m^)); }; };

Slide 23

Slide 23 text

var Map = Immutable.Map; var m = new Map(); var test = function() { var count = 1000000; for(var i = 0; i < count; !++i) { m = m.set(i, i); } for(var j = 0; j < count; !++j) { m.get(j); } } test();

Slide 24

Slide 24 text

Fast AF Execution • ReasonML Immutable Map: 1186ms • ImmutableJS Map: 3415ms

Slide 25

Slide 25 text

Optimized Tree Shaking • BuckleScript: 899 Bytes • Immutable JS: 55.3K Bytes

Slide 26

Slide 26 text

How!? Everything happens at compile time Everything is built & organized to be fast & light

Slide 27

Slide 27 text

Ocaml & Reason Same Semantics
 Different Syntax

Slide 28

Slide 28 text

Compile Targets ReasonML syntax
 (.re, .rei) OCaml syntax
 (.ml, .mli) OCaml AST JavaScript Native Code Bytecode ocamlc ocamlopt BuckleScript reasonmlhub.com

Slide 29

Slide 29 text

• Established Language (1996) • Used in high-performance apps • Facebook uses it for everything (Flow, Hack) • First version of React was in Standard ML Why OCaml

Slide 30

Slide 30 text

• Babel became a popular thing • Bloomberg released BuckleScript • Jordan rewrote React in OCaml • Believed the world was ready ReasonML History

Slide 31

Slide 31 text

• First versions of React were written in StandardML • Babel didn’t exist • Adoption would have been hard • ReactJS was born! React History

Slide 32

Slide 32 text

Is ReasonML Ready? Ya

Slide 33

Slide 33 text

Write safer & simpler code
 in OCaml or Reason
 that compiles to JavaScript BuckleScript

Slide 34

Slide 34 text

BuckleScript Goals • Readable JavaScript output • Supports the current JS ecosystem • Compiles really fast

Slide 35

Slide 35 text

Use any Javascript module Just write the bindings Bindings

Slide 36

Slide 36 text

Bindings •bs-* •bs-react-native •bs-fetch •bs-moment

Slide 37

Slide 37 text

Bindings type t; [@bs.get] external hairlineWidth : t !=> float = "hairlineWidth"; let hairlineWidth = hairlineWidth(t);

Slide 38

Slide 38 text

The hardest part Bindings

Slide 39

Slide 39 text

Types • Can be inferred • Coverage is *always* 100% • Completely sound • Consume arguments like a function

Slide 40

Slide 40 text

Types let friend = “Jeff”; let friend: string = “Jeff”;

Slide 41

Slide 41 text

Types type intCoordinates = (int, int); type coordinates(‘a) = (‘a, ‘a); let intCoordinates = coordinates(int); let house: coordinates(float) = (0.12, -0.12); let house = (0.12, -0.12);

Slide 42

Slide 42 text

Variants type myResponseVariant = | Yes | No | PrettyMuch; let areYouCrushingIt = Yes; this OR that OR that

Slide 43

Slide 43 text

Pattern Matching let message = switch (areYouCrushingIt) { | No !=> "No worries. Keep going!" | Yes !=> "Great!" | PrettyMuch !=> "Nice!" }; “Great!”

Slide 44

Slide 44 text

Pattern Matching let message = “sup"; let reply = switch (message) { | "Reason's pretty cool" !=> "Yep" | "good night" !=> "See ya!" | “hello" | "hey" !=> "hello to you too!" | _ !=> "Nice to meet you!" }; “Nice to meet you!”

Slide 45

Slide 45 text

Modules • Treated as mini files • Can include types & nested modules • Can be “opened” and “extended”

Slide 46

Slide 46 text

Modules module School = { type profession = Teacher | Director; let person1 = Teacher; let getProfession = (person) !=> switch (person) { | Teacher !=> "A teacher" | Director !=> "A director" }; }; let anotherPerson: School.profession = School.Teacher;

Slide 47

Slide 47 text

Module Opens open BsReactNative; StyleSheet.create(…) Global Open: Local Open: let styles =
 StyleSheet.create( Style.(…)

Slide 48

Slide 48 text

• Write React components using Reason • Not a re-write, just the bindings • Safe & statically typed: it just works! ReasonReact

Slide 49

Slide 49 text

Your First Component let component = ReasonReact.statelessComponent("Greeting"); let make = (~name, _children) !=> { !!...component, render: (_self) !=> {ReasonReact.string("Hello " !++ name !++ “!")} ! };

Slide 50

Slide 50 text

Stateless Components let component = ReasonReact.statelessComponent("Greeting");

Slide 51

Slide 51 text

Arguments let make = (~name, _children) !=> { !!...component, render: (_self) !=> {ReasonReact.string("Hello " !++ name !++ “!")} ! };

Slide 52

Slide 52 text

Arguments let make = (~name, _children) !=> { …ReasonReact.statelessComponent(“Greeting"), render: (_self) !=> {ReasonReact.string("Hello " !++ name !++ “!")} ! }; DO NOT DO THIS!!!

Slide 53

Slide 53 text

Render render: (_self) !=> {ReasonReact.string("Hello " !++ name !++ “!")} !

Slide 54

Slide 54 text

String to React Element {ReasonReact.string("Hello " !++ name !++ “!")}

Slide 55

Slide 55 text

• npm install -g bs-platform • add bsconfig.json • bsb -make-world -clean-world Existing Project

Slide 56

Slide 56 text

bsconfig.json { "name": “my-project”, "reason": {"react-jsx" : 2}, "bsc-flags": ["-bs-super-errors"], "package-specs": [{"module": “commonjs", "in-source": true}], "suffix": ".bs.js", "namespace": true, "bs-dependencies": ["bs-react-native","reason-react"], "sources": [{"dir": "re"}], "refmt": 3 }

Slide 57

Slide 57 text

New Project npm install -g bs-platform; create-react-app App !--scripts-version reason-scripts;

Slide 58

Slide 58 text

Demo

Slide 59

Slide 59 text

Resources • https://reasonml.github.io • https://bucklescript.github.io • https://reasonml.github.io/reason-react/en/

Slide 60

Slide 60 text

Chicago ReasonML Meetup Google it. Come hang out & code.

Slide 61

Slide 61 text

ChicagoJS.org Apply to talk at JSCamp by July 4th!

Slide 62

Slide 62 text

Thanks Peter Piekarczyk @peterpme draftbit.com June 27, 2018