![Syntaxe (
let greeting: string = "hello"; /* let binding */
let score: int = 10;
let score_mut: ref(int) = ref(10); /* immutable by default */
score_mut := 5;
type scoreType = int; /* type alias */
let score: scoreType = 10;
/* function as values */
let concat_str: (string, string) => string = (a, b) => a ++ b;
/* OCaml type inference */
let twelve = 12; /* val twelve : int */
let add_int = (a, b) => a + b; /* val add_int : (int, int) -> int */
let add_float = (a, b) => a +. b; /* val add_float : (float, float) -> float */
/* Lists are immutable, fast at prepending items */
let beers: list(string) = ["La Maline", "La Rouge Flamande", "Lepers 8", "Psychedelia"];
/* Arrays are mutable, fast at random access & updates */
let breweries: array(string) = [|"Triez", "Lepers"|];
breweries[0] = "Thiriez"; /* Triez is a district of Mouvaux not a brewery */
breweries[3] = "Craig Allan";](https://image.slidesharecdn.com/reactbeer3-190628073457/85/Reasonable-React-with-beers-7-320.jpg)
![Fonctions 🤘
let prices = [10., 42., 11.5, 5.9]; /* val prices : list(float) */
/* spead operator : like in JS */
let prepend = (elem, tab) => [elem, ...tab]; /* val prepend : ('a, list('a)) => list('a) */
let add_tax = (tax, tab) => List.map(elem => elem *. (1. +. tax), tab);
/* partial application */
let add_FR_tax = add_tax(0.2); /* val add_FR_tax : list(float) => list(float) */
/* pipe operator */
prepend(0.8, prices) |> add_FR_tax |> List.sort(Pervasives.compare);
/* same as */
List.sort(Pervasives.compare, add_FR_tax(prepend(0.8, prices)));
/* pipe first operator */
0.8 ->prepend(prices) |> add_FR_tax |> List.sort(Pervasives.compare);
/*
* let f = ('a, 'b) => …
* x |> f === f(x)
* y |> f(x) === f(x)(y) === f(x,y)
* x -> f(y) === f(x)(y) === f(x,y)
*/
/* named parameters */
let concat = (~left, ~right) => left @ right; /* val concat : (list('a), list('a)) => list('a) */
concat(~left=[1., 3.2], ~right=prices);](https://image.slidesharecdn.com/reactbeer3-190628073457/85/Reasonable-React-with-beers-10-320.jpg)
![Buckelscript interop🧪
/* js string with supports Unicode characters */
let icn_cheers = {js|'🍻'|js};
let icn_tube = [%raw {|'🧪'|}];
/* binding to global value */
type timerId;
[@bs.val] external setTimeout: (unit => unit, int) => timerId = "setTimeout";
[@bs.val] external clearTimeout: float => timerId = "clearTimeout";
[@bs.scope "Math"] [@bs.val] external random: unit => float = "random";
let someNumber = random();
/* Handle null or undefined values */
let jsNull = Js.Nullable.null;
let jsUndefined = Js.Nullable.undefined;
/* Object method */
[@bs.send] external map: (array('a), 'a => 'b) => array('b) = "map";
[|1, 2, 3|] ->map(a => a + 1) |> Js.log;
/* module */
[@bs.module "path"] external dirname : string => string = "dirname";
/* variadic function */
[@bs.module "path"] [@bs.variadic]
external join : array(string) => string = "join";
let v = join([|"a", "b"|]);](https://image.slidesharecdn.com/reactbeer3-190628073457/85/Reasonable-React-with-beers-13-320.jpg)
⚛️ Reasonable React (with beers)
- 2. What I do Thomas Haessle CTO @ Cutii Teacher @ MIAGE Lille @Oteku https://oteku.github.io/ cutii.io Cutii au coeur de la ville Création d’un réseau d’animateurs locaux Implication des agents publics Villes numériques Valoriser le patrimoine MUSEUM www.cutii.io Cutii est une plateforme de mise en relation à distance pour les personnes isolées ou dépendantes avec leur famille et une communauté regroupant particuliers, aidants, associations et médecins. Communauté solidaire CUTII RÉSEAU Activités premium Recréer du lien social Rencontres citoyennes
- 3. est 🤩 Tooling Fast (web point of view) + + Servo SSR
- 4. est 🥶 Style Packaging Test « improve » Js libs NPM Nightmare
- 5. as a bytecode 🤨 🤦 🧝 ' dans une perspective reactjs
- 6. Reason lets you write simple, fast and quality type safe code while leveraging both the JavaScript & OCaml ecosystems.
- 7. Syntaxe ( let greeting: string = "hello"; /* let binding */ let score: int = 10; let score_mut: ref(int) = ref(10); /* immutable by default */ score_mut := 5; type scoreType = int; /* type alias */ let score: scoreType = 10; /* function as values */ let concat_str: (string, string) => string = (a, b) => a ++ b; /* OCaml type inference */ let twelve = 12; /* val twelve : int */ let add_int = (a, b) => a + b; /* val add_int : (int, int) -> int */ let add_float = (a, b) => a +. b; /* val add_float : (float, float) -> float */ /* Lists are immutable, fast at prepending items */ let beers: list(string) = ["La Maline", "La Rouge Flamande", "Lepers 8", "Psychedelia"]; /* Arrays are mutable, fast at random access & updates */ let breweries: array(string) = [|"Triez", "Lepers"|]; breweries[0] = "Thiriez"; /* Triez is a district of Mouvaux not a brewery */ breweries[3] = "Craig Allan";
- 8. Types algébriques ) /* Product types */ type point2d = (int, int); type couple('a, 'b) = ('a, 'b); type beer = { label: string, abv: float, }; /* Sum types */ type boolean = | True | False; type numeric = | Int(int) | Float(float); type option('a) = | Some('a) | None;
- 9. Correspondance par motifs 🖖 /* product type */ let fst = ((x, _)) => x; /* val fst : (('a,'b)) => 'a */ let snd = ((_, y)) => y; /* val snd : (('b,'a)) => 'a */ /* sum type */ let apply = (f, optional) => switch (optional) { | Some(x) => Some(f(x)) | None => None }; /* val apply : ('b => 'a, option('b)) => 'a */
- 10. Fonctions 🤘 let prices = [10., 42., 11.5, 5.9]; /* val prices : list(float) */ /* spead operator : like in JS */ let prepend = (elem, tab) => [elem, ...tab]; /* val prepend : ('a, list('a)) => list('a) */ let add_tax = (tax, tab) => List.map(elem => elem *. (1. +. tax), tab); /* partial application */ let add_FR_tax = add_tax(0.2); /* val add_FR_tax : list(float) => list(float) */ /* pipe operator */ prepend(0.8, prices) |> add_FR_tax |> List.sort(Pervasives.compare); /* same as */ List.sort(Pervasives.compare, add_FR_tax(prepend(0.8, prices))); /* pipe first operator */ 0.8 ->prepend(prices) |> add_FR_tax |> List.sort(Pervasives.compare); /* * let f = ('a, 'b) => … * x |> f === f(x) * y |> f(x) === f(x)(y) === f(x,y) * x -> f(y) === f(x)(y) === f(x,y) */ /* named parameters */ let concat = (~left, ~right) => left @ right; /* val concat : (list('a), list('a)) => list('a) */ concat(~left=[1., 3.2], ~right=prices);
- 11. ason est 🐫 • Langage statiquement typé • Une syntaxe OCaml • OCaml + JSX • Un langage multiparadigmes mais qui incite fortement à la programmation fonctionnelle • Statiquement typé (langage de type ML) • Compilé vers natif, bytecode ou js (via js_of_ocaml ou buckelscript)
- 12. 🥴 • Rapide … très rapide • En constante amélioration • Licence LGPL • Compile le bytecode bas niveau en js • Orienté opam • Fait des optimisation bluffantes sur le js produit • Compile le raw lambda en js • Orienté npm • produit un code js proche du code original
- 13. Buckelscript interop🧪 /* js string with supports Unicode characters */ let icn_cheers = {js|'🍻'|js}; let icn_tube = [%raw {|'🧪'|}]; /* binding to global value */ type timerId; [@bs.val] external setTimeout: (unit => unit, int) => timerId = "setTimeout"; [@bs.val] external clearTimeout: float => timerId = "clearTimeout"; [@bs.scope "Math"] [@bs.val] external random: unit => float = "random"; let someNumber = random(); /* Handle null or undefined values */ let jsNull = Js.Nullable.null; let jsUndefined = Js.Nullable.undefined; /* Object method */ [@bs.send] external map: (array('a), 'a => 'b) => array('b) = "map"; [|1, 2, 3|] ->map(a => a + 1) |> Js.log; /* module */ [@bs.module "path"] external dirname : string => string = "dirname"; /* variadic function */ [@bs.module "path"] [@bs.variadic] external join : array(string) => string = "join"; let v = join([|"a", "b"|]);
- 14. ReasonReact 😎 Mieux que des mots : une démo Buckelscript bindings pour reactjs OU https://github.com/oteku/reason-react-beer
- 15. ReasonReactNative 📱 https://github.com/oteku/reason-react-native-welcome • ReactNative bindings 🔧 : https://github.com/reasonml-community/ reason-react-native
- 16. Au delà du web 3 • Applications Native : brisk-reconciler ➡ Electron app avec Revery 💎 : https://www.outrunlabs.com/revery/ ➡ Native UI avec Brisk ⚗: https://github.com/briskml/brisk Encore expérimental mais méritent d’être suivi !
- 17. Merci ! Des questions ? 🤔