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
400
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
Boxed: bringing algebraic types to TypeScript
bloodyowl
0
12
leveraging (algebraic data) types to make your UI rock @ jsheroes
bloodyowl
0
230
Leveraging (algebraic data) types to make your UI rock solid
bloodyowl
0
310
La drôle d'histoire de JavaScript
bloodyowl
0
270
Healthy Code Collaboration
bloodyowl
0
170
Simplify your UI management with (algebraic data) types
bloodyowl
0
730
Simplify your UI management with (algebraic data) types
bloodyowl
1
450
Migrating a large Reason+React codebase to hooks
bloodyowl
0
460
Third Party Hell (BestOfWeb)
bloodyowl
0
440
Other Decks in Programming
See All in Programming
実用的かつリーズナブルな 「Azure × Gemini × LINE」~キャラクターBot 実装ライブデモ~
tomodo_ysys
1
170
Composing an API the *right* way (Droidcon Berlin 2024)
zsmb
1
450
コード生成を伴うLLMエージェント - 2024.07.18 Tokyo AI
smiyawaki0820
11
4.1k
The rollercoaster of releasing an Android, iOS, and macOS app with Kotlin Multiplatform | droidcon Berlin
prof18
0
110
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
81k
社内 LT 会を発足し、アウトプット文化を醸成させるために考えたこと・やったこと / Starting internal LT meetings and fostering an output culture
mackey0225
3
120
企業向け生成AIアプリの 開発から得られた知見
takaakikakei
0
310
CSC307 Lecture 05
javiergs
PRO
0
210
Harnessing Large Language Models for Training-free Video Anomaly Detection
tereka114
1
1.3k
英語
s_shimotori
1
220
feature環境をGitHub ActionsとCloudFormationでいい感じに管理する
nealle
2
310
DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話【デブサミ2024夏】
texmeijin
1
620
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
353
29k
[RailsConf 2023] Rails as a piece of cake
palkan
35
4.4k
Thoughts on Productivity
jonyablonski
64
4.1k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
Writing Fast Ruby
sferik
623
60k
Building Better People: How to give real-time feedback that sticks.
wjessup
357
18k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Optimizing for Happiness
mojombo
373
69k
BBQ
matthewcrist
82
9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
16
1.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
2.9k
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?