![Page 1: Dawn of - GitHub Pages · Immutable by default Pattern matching Types Functions Compiler toolchain Catch issues at compile time Also objects, classes, modules, language extensions,](https://reader031.vdocuments.us/reader031/viewer/2022031402/5c245c5a09d3f2d34c8c6224/html5/thumbnails/1.jpg)
@sander_spies
Dawn of
![Page 2: Dawn of - GitHub Pages · Immutable by default Pattern matching Types Functions Compiler toolchain Catch issues at compile time Also objects, classes, modules, language extensions,](https://reader031.vdocuments.us/reader031/viewer/2022031402/5c245c5a09d3f2d34c8c6224/html5/thumbnails/2.jpg)
The earliest prototypes of
React
were written in
Standard ML
![Page 3: Dawn of - GitHub Pages · Immutable by default Pattern matching Types Functions Compiler toolchain Catch issues at compile time Also objects, classes, modules, language extensions,](https://reader031.vdocuments.us/reader031/viewer/2022031402/5c245c5a09d3f2d34c8c6224/html5/thumbnails/3.jpg)
2013
var Foo = React.createClass({ render: function() { return <Bar />; } });
![Page 4: Dawn of - GitHub Pages · Immutable by default Pattern matching Types Functions Compiler toolchain Catch issues at compile time Also objects, classes, modules, language extensions,](https://reader031.vdocuments.us/reader031/viewer/2022031402/5c245c5a09d3f2d34c8c6224/html5/thumbnails/4.jpg)
Our quest for maintainable applications has
led us to similar concepts found in ML
![Page 5: Dawn of - GitHub Pages · Immutable by default Pattern matching Types Functions Compiler toolchain Catch issues at compile time Also objects, classes, modules, language extensions,](https://reader031.vdocuments.us/reader031/viewer/2022031402/5c245c5a09d3f2d34c8c6224/html5/thumbnails/5.jpg)
let peek = cat => { if (Math.random() > 0.5) { cat.lives--; } };
![Page 6: Dawn of - GitHub Pages · Immutable by default Pattern matching Types Functions Compiler toolchain Catch issues at compile time Also objects, classes, modules, language extensions,](https://reader031.vdocuments.us/reader031/viewer/2022031402/5c245c5a09d3f2d34c8c6224/html5/thumbnails/6.jpg)
/* @flow */ type schrodingersCat = { lives: number };
let peek = (cat:schrodingersCat) => { if (Math.random() > 0.5) { return {...cat, lives: cat.lives - 1}; } return cat; };
![Page 7: Dawn of - GitHub Pages · Immutable by default Pattern matching Types Functions Compiler toolchain Catch issues at compile time Also objects, classes, modules, language extensions,](https://reader031.vdocuments.us/reader031/viewer/2022031402/5c245c5a09d3f2d34c8c6224/html5/thumbnails/7.jpg)
/* @flow */ type animal = "cat" | "dog";
let petAnimal = (animal:animal) => { switch (animal) { case "cat": /*...*/ break; case "dog": /*...*/ break; } };
![Page 8: Dawn of - GitHub Pages · Immutable by default Pattern matching Types Functions Compiler toolchain Catch issues at compile time Also objects, classes, modules, language extensions,](https://reader031.vdocuments.us/reader031/viewer/2022031402/5c245c5a09d3f2d34c8c6224/html5/thumbnails/8.jpg)
<Match pattern="/:user" render={(matchProps) => ( <div> <Match pattern="/about" component={About}/> <Match pattern="/company" component={Company}/> </div> )}/>
![Page 9: Dawn of - GitHub Pages · Immutable by default Pattern matching Types Functions Compiler toolchain Catch issues at compile time Also objects, classes, modules, language extensions,](https://reader031.vdocuments.us/reader031/viewer/2022031402/5c245c5a09d3f2d34c8c6224/html5/thumbnails/9.jpg)
Types, immutability and pattern matching
reduce accidental complexity
![Page 10: Dawn of - GitHub Pages · Immutable by default Pattern matching Types Functions Compiler toolchain Catch issues at compile time Also objects, classes, modules, language extensions,](https://reader031.vdocuments.us/reader031/viewer/2022031402/5c245c5a09d3f2d34c8c6224/html5/thumbnails/10.jpg)
![Page 11: Dawn of - GitHub Pages · Immutable by default Pattern matching Types Functions Compiler toolchain Catch issues at compile time Also objects, classes, modules, language extensions,](https://reader031.vdocuments.us/reader031/viewer/2022031402/5c245c5a09d3f2d34c8c6224/html5/thumbnails/11.jpg)
+
2016
![Page 12: Dawn of - GitHub Pages · Immutable by default Pattern matching Types Functions Compiler toolchain Catch issues at compile time Also objects, classes, modules, language extensions,](https://reader031.vdocuments.us/reader031/viewer/2022031402/5c245c5a09d3f2d34c8c6224/html5/thumbnails/12.jpg)
Meanwhile at…
Concurrent React Prototype in OCaml@jordwalke
![Page 13: Dawn of - GitHub Pages · Immutable by default Pattern matching Types Functions Compiler toolchain Catch issues at compile time Also objects, classes, modules, language extensions,](https://reader031.vdocuments.us/reader031/viewer/2022031402/5c245c5a09d3f2d34c8c6224/html5/thumbnails/13.jpg)
Immutable by defaultPattern matching
TypesFunctions
Compiler toolchainCatch issues at compile time
Also objects, classes, modules, language extensions, and more
Compile to JS/native/kernel
![Page 14: Dawn of - GitHub Pages · Immutable by default Pattern matching Types Functions Compiler toolchain Catch issues at compile time Also objects, classes, modules, language extensions,](https://reader031.vdocuments.us/reader031/viewer/2022031402/5c245c5a09d3f2d34c8c6224/html5/thumbnails/14.jpg)
has the defaults we want
![Page 15: Dawn of - GitHub Pages · Immutable by default Pattern matching Types Functions Compiler toolchain Catch issues at compile time Also objects, classes, modules, language extensions,](https://reader031.vdocuments.us/reader031/viewer/2022031402/5c245c5a09d3f2d34c8c6224/html5/thumbnails/15.jpg)
JS developer trying to grasp OCaml syntax
![Page 16: Dawn of - GitHub Pages · Immutable by default Pattern matching Types Functions Compiler toolchain Catch issues at compile time Also objects, classes, modules, language extensions,](https://reader031.vdocuments.us/reader031/viewer/2022031402/5c245c5a09d3f2d34c8c6224/html5/thumbnails/16.jpg)
What if…
![Page 17: Dawn of - GitHub Pages · Immutable by default Pattern matching Types Functions Compiler toolchain Catch issues at compile time Also objects, classes, modules, language extensions,](https://reader031.vdocuments.us/reader031/viewer/2022031402/5c245c5a09d3f2d34c8c6224/html5/thumbnails/17.jpg)
![Page 18: Dawn of - GitHub Pages · Immutable by default Pattern matching Types Functions Compiler toolchain Catch issues at compile time Also objects, classes, modules, language extensions,](https://reader031.vdocuments.us/reader031/viewer/2022031402/5c245c5a09d3f2d34c8c6224/html5/thumbnails/18.jpg)
JavaScript OCamlFlow Reason
Adopting features of ML
Becoming familiar to JS developers
Syntax + tooling
A lot of work
![Page 19: Dawn of - GitHub Pages · Immutable by default Pattern matching Types Functions Compiler toolchain Catch issues at compile time Also objects, classes, modules, language extensions,](https://reader031.vdocuments.us/reader031/viewer/2022031402/5c245c5a09d3f2d34c8c6224/html5/thumbnails/19.jpg)
“Let’s drop everything I know”
- nobody ever
![Page 20: Dawn of - GitHub Pages · Immutable by default Pattern matching Types Functions Compiler toolchain Catch issues at compile time Also objects, classes, modules, language extensions,](https://reader031.vdocuments.us/reader031/viewer/2022031402/5c245c5a09d3f2d34c8c6224/html5/thumbnails/20.jpg)
Syntax
Build tooling
Sharing
![Page 21: Dawn of - GitHub Pages · Immutable by default Pattern matching Types Functions Compiler toolchain Catch issues at compile time Also objects, classes, modules, language extensions,](https://reader031.vdocuments.us/reader031/viewer/2022031402/5c245c5a09d3f2d34c8c6224/html5/thumbnails/21.jpg)
Syntax
Tokenizer Parser OCaml AST
“Pretty” printer
Backend
OCaml compiler toolchain
Type System
![Page 22: Dawn of - GitHub Pages · Immutable by default Pattern matching Types Functions Compiler toolchain Catch issues at compile time Also objects, classes, modules, language extensions,](https://reader031.vdocuments.us/reader031/viewer/2022031402/5c245c5a09d3f2d34c8c6224/html5/thumbnails/22.jpg)
![Page 23: Dawn of - GitHub Pages · Immutable by default Pattern matching Types Functions Compiler toolchain Catch issues at compile time Also objects, classes, modules, language extensions,](https://reader031.vdocuments.us/reader031/viewer/2022031402/5c245c5a09d3f2d34c8c6224/html5/thumbnails/23.jpg)
Rebel
git clone https://github.com/reasonml/RebelExampleProject
Use package.json to configure everything
Target web or native
![Page 24: Dawn of - GitHub Pages · Immutable by default Pattern matching Types Functions Compiler toolchain Catch issues at compile time Also objects, classes, modules, language extensions,](https://reader031.vdocuments.us/reader031/viewer/2022031402/5c245c5a09d3f2d34c8c6224/html5/thumbnails/24.jpg)
Editor support
Vim, Emacs, Atom, Sublime and soon VS Code
Building on shoulders of existing OCaml tools
![Page 25: Dawn of - GitHub Pages · Immutable by default Pattern matching Types Functions Compiler toolchain Catch issues at compile time Also objects, classes, modules, language extensions,](https://reader031.vdocuments.us/reader031/viewer/2022031402/5c245c5a09d3f2d34c8c6224/html5/thumbnails/25.jpg)
Other tooling
rtop - a repl for Reason
refmt - pretty printer
rejs - JS to Reason
![Page 26: Dawn of - GitHub Pages · Immutable by default Pattern matching Types Functions Compiler toolchain Catch issues at compile time Also objects, classes, modules, language extensions,](https://reader031.vdocuments.us/reader031/viewer/2022031402/5c245c5a09d3f2d34c8c6224/html5/thumbnails/26.jpg)
Example
![Page 27: Dawn of - GitHub Pages · Immutable by default Pattern matching Types Functions Compiler toolchain Catch issues at compile time Also objects, classes, modules, language extensions,](https://reader031.vdocuments.us/reader031/viewer/2022031402/5c245c5a09d3f2d34c8c6224/html5/thumbnails/27.jpg)
type schrodingersCat = { lives: int };
let peek cat => { if (Random.bool ()) { {...cat, lives: cat.lives - 1}; } else {
cat; }
};
![Page 28: Dawn of - GitHub Pages · Immutable by default Pattern matching Types Functions Compiler toolchain Catch issues at compile time Also objects, classes, modules, language extensions,](https://reader031.vdocuments.us/reader031/viewer/2022031402/5c245c5a09d3f2d34c8c6224/html5/thumbnails/28.jpg)
type animal = Cat | Dog | Bird;
let petAnimal animal => { switch (animal) { | Cat => {} | Dog => {} } };
![Page 29: Dawn of - GitHub Pages · Immutable by default Pattern matching Types Functions Compiler toolchain Catch issues at compile time Also objects, classes, modules, language extensions,](https://reader031.vdocuments.us/reader031/viewer/2022031402/5c245c5a09d3f2d34c8c6224/html5/thumbnails/29.jpg)
Building on familiarity
![Page 30: Dawn of - GitHub Pages · Immutable by default Pattern matching Types Functions Compiler toolchain Catch issues at compile time Also objects, classes, modules, language extensions,](https://reader031.vdocuments.us/reader031/viewer/2022031402/5c245c5a09d3f2d34c8c6224/html5/thumbnails/30.jpg)
![Page 31: Dawn of - GitHub Pages · Immutable by default Pattern matching Types Functions Compiler toolchain Catch issues at compile time Also objects, classes, modules, language extensions,](https://reader031.vdocuments.us/reader031/viewer/2022031402/5c245c5a09d3f2d34c8c6224/html5/thumbnails/31.jpg)
Reason with React BindingsPreview
![Page 32: Dawn of - GitHub Pages · Immutable by default Pattern matching Types Functions Compiler toolchain Catch issues at compile time Also objects, classes, modules, language extensions,](https://reader031.vdocuments.us/reader031/viewer/2022031402/5c245c5a09d3f2d34c8c6224/html5/thumbnails/32.jpg)
Get started:
https://github.com/reasonml/RebelExampleProject
Ask questions:
https://gitter.im/facebook/reason
@sander_spies