Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ReasonML @ OCaml Users in Paris
Search
Matthias Le Brun
September 26, 2017
Programming
0
550
ReasonML @ OCaml Users in Paris
Matthias Le Brun
September 26, 2017
Tweet
Share
More Decks by Matthias Le Brun
See All by Matthias Le Brun
(why the hell did I) build a GraphQL client for the browser
bloodyowl
0
93
Boxed: bringing algebraic types to TypeScript
bloodyowl
0
110
leveraging (algebraic data) types to make your UI rock @ jsheroes
bloodyowl
0
290
Leveraging (algebraic data) types to make your UI rock solid
bloodyowl
0
410
La drôle d'histoire de JavaScript
bloodyowl
0
360
Healthy Code Collaboration
bloodyowl
0
280
Simplify your UI management with (algebraic data) types
bloodyowl
0
810
Simplify your UI management with (algebraic data) types
bloodyowl
1
530
Migrating a large Reason+React codebase to hooks
bloodyowl
0
550
Other Decks in Programming
See All in Programming
パッケージ設計の黒魔術/Kyoto.go#63
lufia
1
210
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
15
8.8k
私の後悔をAWS DMSで解決した話
hiramax
4
160
ソフトウェアテスト徹底指南書の紹介
goyoki
1
110
「リーダーは意思決定する人」って本当?~ 学びを現場で活かす、リーダー4ヶ月目の試行錯誤 ~
marina1017
0
250
未来を拓くAI技術〜エージェント開発とAI駆動開発〜
leveragestech
2
180
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
コンテキストエンジニアリング Cursor編
kinopeee
1
720
Flutter로 Gemini와 MCP를 활용한 Agentic App 만들기 - 박제창 2025 I/O Extended Seoul
itsmedreamwalker
0
150
Claude Codeで挑むOSSコントリビュート
eycjur
0
180
学習を成果に繋げるための個人開発の考え方 〜 「学習のための個人開発」のすすめ / personal project for leaning
panda_program
1
110
Portapad紹介プレゼンテーション
gotoumakakeru
1
130
Featured
See All Featured
Being A Developer After 40
akosma
90
590k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
It's Worth the Effort
3n
187
28k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Facilitating Awesome Meetings
lara
55
6.5k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Typedesign – Prime Four
hannesfritz
42
2.8k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Transcript
REASON
Matthias Le Brun twitter.com/bloodyowl github.com/bloodyowl Putain de code !
OCaml
let rec qsort = function | [] !-> [] |
pivot #:: rest !-> let is_less x = x < pivot in let left, right = List.partition is_less rest in qsort left @ [pivot] @ qsort right
Syntax isn't really friendly to newcomers
FP communities aren’t really welcoming to newcomers
None
Here comes Reason
Storytime •Initially, React was written in SML by Jordan Walke
•The idea for Reason actually predates React •Front-end community wasn’t ready yet
1. Syntax 2. Tooling 3. Ecosystem 4. Community
1. Syntax 2. Tooling 3. Ecosystem 4. Community
Functions let x a b = e let x =
fun a b !-> e OCaml Reason let x a b %=> e; let x = fun a b %=> e;
Equality a = b b '== c a #<> b
a *!= b OCaml Reason a '== b b ##=== c a *!= b a --!== b
Expressions let c = let a = "a" in let
b = "b" in a ^ b OCaml Reason let c = { let a = "a"; let b = "b"; a ^ b };
Tuples type tup = int * int let tuple =
a, b OCaml Reason type tup = (int, int) let tuple = (a, b)
Record types type rec = { foo: string; bar: string
}; OCaml Reason type rec = { foo: string, bar: string };
Records { foo = "bar"; bar = "baz" } OCaml
Reason { foo: "bar", bar: "baz", }
Lists [1; 2; 3] OCaml Reason [1, 2, 3]
Type params string option list OCaml Reason list (option string)
Variants type foo = | A of string | B
of string OCaml Reason type foo = | A string | B string
Pattern matching match a with | A x %=> "A"
^ x | B x %=> "B" ^ x OCaml Reason switch a { | A x %=> "A" ^ x | B x %=> "B" ^ x }
Equality (* comment *) OCaml Reason //* comment -*/
Refmt: one language, one formatting
ReasonFatigue prevented ☕
Syntax simpler to JS folks
1. Syntax 2. Tooling 3. Ecosystem 4. Community
BuckleScript
BuckleScript •Like js_of_ocaml but takes on after an earlier step
of compilation •Makes some optimisations considering the JS target •Great interoperability
Produces code that’s faster than vanilla™
Smaller footprint var user = //* record -*/[ //* username
-*/"Bob", //* id : Some -*/["abc"], //* age -*/32 ];
[ "Bob", ["abc"], 32 ]; Smaller footprint
Don’t want to rewrite your project from scratch?
external myExistingModule : string = [@@bs.module "-../myExistingModule"]; Use JS
type user = { name: string, age: int }; let
fromJs jsObject %=> { name: jsObject###name, age: jsObject###age }; Convert from JS
let toJs object %=> { "name": object.name, "age": object.age };
Convert to JS
{ "message_type": "image" | "string", "value": string } Complex conversions
type message = | Image string | String string; let
fromJs js %=> { switch js###message_type { | "image" %=> Image js###value | "string" | _ %=> String js###value } } Complex conversions
Lots of bindings existing/on the way
let getPageKeywords () %=> switch ( DomRe.Document.querySelector "meta[name=\"keywords\"]" DomRe.document )
{ | Some meta %=> switch (DomRe.Element.getAttribute "content" meta) { | Some content %=> Js.String.split "," content *|> Array.to_list *|> List.map String.trim | None %=> [] } | None %=> [] };
None
BetterErrors
Simpler workflow •Effort is for now a lot on the
JS back-end •Coming for native compilation
1. Syntax 2. Tooling 3. Ecosystem 4. Community
ReasonReact
ReactJS import React from "react"; import { string } from
"prop-types"; const App = props %=> ( <div> {props.message} !</div> ) App.propTypes = { message: string.isRequired };
ReasonReact let component = ReasonReact.statelessComponent "App"; let make #::message _children
%=> { …component, render: fun _ %=> <div> (ReasonReact.stringToElement message) !</div> };
ReasonReact type state = int; type actions = | Increment
| Decrement;
ReasonReact let component = ReasonReact .reducerComponent "App"; let make _
%=> { …component, reducer: fun action state %=> switch action { | Increment %=> ReasonReact.Update (state + 1) | Decrement %=> ReasonReact.Update (state - 1) }, //* … -*/ }
ReasonReact render: fun {state, reduce} %=> <div> (ReasonReact.stringToElement (string_of_int state))
<Button title="-" onClick=(reduce (fun _ %=> Increment)) 6/> !</div>
<div> (switch resource { | Loading %=> <ActivityIndicator 6/> |
Idle value %=> <Component value 6/> | Error %=> ErrorMessage.serverError }) !</div> ReasonReact
module MyType = { let name = "Type"; type t
= string; }; module MyTypeCollectionView = Primitives.FixedCollectionView.Make MyType; <MyTypeCollectionView items 6/> ReasonReact
let jsComponent = ReasonReact.wrapReasonForJs #::component (fun jsProps %=> make message#::jsProps###message
[#||] ); ReasonReact
let make #::message children %=> ReasonReact.wrapJsForReason #::reactClass props#::{"message": message} children;
ReasonReact
ReasonReact: good entry point for the front-end community
1. Syntax 2. Tooling 3. Ecosystem 4. Community
Community
Lots of meetups popping up
1. Syntax 2. Tooling 3. Ecosystem 4. Community Sum up
• A new, simpler syntax for OCaml • Lots of
efforts in improving tooling (BetterErrors, BuckleScript is a friend project) • New features like JSX • A new community (super active at the moment) • A great core team who knows what to prioritise first to make it good for everyone
Thank you! Questions?