JavaScript developer friendly syntax let meaningOfLife = 41 + 1; - - PowerPoint PPT Presentation

▶
javascript developer friendly syntax let meaningoflife 41
SMART_READER_LITE
LIVE PREVIEW

JavaScript developer friendly syntax let meaningOfLife = 41 + 1; - - PowerPoint PPT Presentation

May 10, 2023 296 likes •1.22k views

JavaScript developer friendly syntax let meaningOfLife = 41 + 1; let add = (x, y) => x + y; add(2, 2); add(41, 1); let fruits = ["Apple", "Orange"]; if (true) { print_string("Hello World!"); }; OCaml

slide-1
SLIDE 1
slide-2
SLIDE 2
slide-3
SLIDE 3

JavaScript developer friendly syntax

slide-4
SLIDE 4

let meaningOfLife = 41 + 1;

slide-5
SLIDE 5

let add = (x, y) => x + y; add(2, 2); add(41, 1);

slide-6
SLIDE 6

let fruits = ["Apple", "Orange"];

slide-7
SLIDE 7

if (true) { print_string("Hello World!"); };

slide-8
SLIDE 8

OCaml semantics

slide-9
SLIDE 9

Reason Syntax OCaml Syntax OCaml AST

slide-10
SLIDE 10

Records

slide-11
SLIDE 11

let jane = {name: "Jane", age: 40};

slide-12
SLIDE 12

let jane = {name: "Jane", age: 40};

slide-13
SLIDE 13

type person = { name: string, age: int, }; let jane = {name: "Jane", age: 40};

slide-14
SLIDE 14

type person = { name: string, age: int, }; let jane = {name: "Jane", age: 40}; let tim = {...jane, name: "Tim"};

slide-15
SLIDE 15

Compiles to JavaScript

slide-16
SLIDE 16

Reason Syntax OCaml Syntax OCaml AST JavaScript

BuckleScript

slide-17
SLIDE 17

Reason Syntax OCaml Syntax OCaml AST Native Code JavaScript

BuckleScript

slide-18
SLIDE 18

Fromatter

slide-19
SLIDE 19

Reason Syntax OCaml Syntax OCaml AST Native Code JavaScript

BuckleScript

slide-20
SLIDE 20

Reason Syntax OCaml Syntax OCaml AST Native Code JavaScript

refmt BuckleScript

slide-21
SLIDE 21

Statically Typed Language

slide-22
SLIDE 22
slide-23
SLIDE 23

Why yet another one?

slide-24
SLIDE 24
slide-25
SLIDE 25

const pieces = [ { kind: "king", color: "black", position: [3, 4] }, { kind: "pawn", color: "black", position: [4, 2] }, { kind: "knight", color: "white", position: [3, 3] } ];

JavaScript

slide-26
SLIDE 26

interface Piece { kind: string; color: string; position: number[]; } const pieces = [ { kind: "king", color: "black", position: [3, 4] }, { kind: "pawn", color: "black", position: [4, 2] }, { kind: "knight", color: "white", position: [3, 3] } ]; const getKinds = (pieces: Piece[]) => pieces.map(piece => piece.kind);

TypeScript

slide-27
SLIDE 27

interface Piece { kind: string; color: string; position: number[]; } const pieces = [ { kind: "king", color: "black", position: [3, 4] }, { kind: "pawn", color: "black", position: [4, 2] }, { kind: "knight", color: "white", position: [3, 3] } ]; const getKinds = (pieces: Piece[]) => pieces.map(piece => piece.kind);

TypeScript

slide-28
SLIDE 28

type piece = { kind: string, color: string, position: (int, int), }; let pieces = [ {kind: "king", color: "black", position: (3, 4)}, {kind: "pawn", color: "black", position: (4, 2)}, {kind: "knight", color: "white", position: (3, 3)}, ]; let getKinds = pieces => List.map(item => item.kind, pieces);

Reason

slide-29
SLIDE 29

Variants

slide-30
SLIDE 30

type direction = | Up | Down | Left | Right;

slide-31
SLIDE 31

type direction = | Up | Down | Left | Right; let move = Left;

slide-32
SLIDE 32

type direction = | Up(int) | Down(int) | Left(int) | Right(int); let move = Left(2);

slide-33
SLIDE 33

type data = {names: list(string)}; type request = | Loading | Error(int) | Success(data);

slide-34
SLIDE 34

type color = Black | White; type kind = Queen | King | Rook | Bishop | Knight | Pawn; type piece = { color, kind, position: (int, int), }; let pieces = [ {kind: King, color: Black, position: (3, 4)}, {kind: Pawn, color: Black, position: (4, 2)}, {kind: Knight, color: White, position: (3, 3)}, ];

slide-35
SLIDE 35

type color = Black | White; type kind = Queen | King | Rook | Bishop | Knight | Pawn; type piece = { color, kind, position: (int, int), }; let pieces = [ {kind: King, color: Black, position: (3, 4)}, {kind: Pawn, color: Black, position: (4, 2)}, {kind: Knight, color: White, position: (3, 3)}, ];

slide-36
SLIDE 36

type color = Black | White; type kind = Queen | King | Rook | Bishop | Knight | Pawn; type piece = { color, kind, position: (int, int), }; let pieces = [ {kind: King, color: Black, position: (3, 4)}, {kind: Pawn, color: Black, position: (4, 2)}, {kind: Knight, color: White, position: (3, 3)}, ];

slide-37
SLIDE 37

Pattern Matching

slide-38
SLIDE 38

switch (<value>) { | <pattern1> => <case1> | <pattern2> => <case2> | ... };

slide-39
SLIDE 39

switch (1) { | 0 => "off" | 1 => "on" | _ => "off" };

slide-40
SLIDE 40

let displayText = switch (1) { | 0 => "off" | 1 => "on" | _ => "off" };

slide-41
SLIDE 41

type data = {names: list(string)}; type request = | Loading | Error(int) | Success(data); let ui = switch (Loading) { | Loading => "Loading ..." | Error(code) => "Something went wrong. Error: " ++ string_of_int(code) | Success(data) => List.fold_left((a, b) => a ++ b, "Names:", data.names) };

slide-42
SLIDE 42

type data = {names: list(string)}; type request = | Loading | Error(int) | Success(data); let ui = switch (Loading) { | Loading => "Loading ..." | Error(401) => "You aren’t authenticated." | Error(code) => "Something went wrong. Error: " ++ string_of_int(code) | Success(data) => List.fold_left((a, b) => a ++ b, "Names:", data.names) };

slide-43
SLIDE 43

type data = {names: list(string)}; type request = | Loading | Error(int) | Success(data); let ui = switch (Loading) { | Loading => "Loading ..." | Error(401 | 402) => "You aren’t authenticated." | Error(code) => "Something went wrong. Error: " ++ string_of_int(code) | Success(data) => List.fold_left((a, b) => a ++ b, "Names:", data.names) };

slide-44
SLIDE 44
slide-45
SLIDE 45

– Tony Hoare

“I call it my billion-dollar mistake …”

slide-46
SLIDE 46
slide-47
SLIDE 47
slide-48
SLIDE 48

Lesson I

Don’t implement anything just because it’s easy!

slide-49
SLIDE 49

Lesson II

Null is BAD!

slide-50
SLIDE 50

null; // doesn't exist!

slide-51
SLIDE 51

Option

slide-52
SLIDE 52

let foo = None; let foo = Some(42); let foo = Some([1, 2, 3]); let foo = Some("Hello World!");

slide-53
SLIDE 53

let foo = None; let foo = Some(42); let foo = Some([1, 2, 3]); let foo = Some("Hello World!"); switch (foo) { | None => "Sadly I don't know." | Some(value) => "It's " ++ value };

slide-54
SLIDE 54

Functions

slide-55
SLIDE 55

let add = (x, y) => x + y; add(2, 2); add(41, 1);

slide-56
SLIDE 56

let name = (~firstName, ~lastName) => firstName ++ " " ++ lastName; /* Jane Doe */ name(~firstName="Jane", ~lastName="Doe"); /* Jane Doe */ name(~lastName="Doe", ~firstName="Jane");

slide-57
SLIDE 57

ReasonReact

slide-58
SLIDE 58

Stateless Component

let component = ReasonReact.statelessComponent("Greeting"); let make = (_children) => { ...component, render: _self => <h1>(ReasonReact.string("Hello"))</h1>, }; ReactDOMRe.renderToElementWithId(<Greeting />, "root"); Greeting.re App.re

slide-59
SLIDE 59

Props

let component = ReasonReact.statelessComponent("Greeting"); let make = (~name, _children) => { ...component, render: _self => <h1>(ReasonReact.string(“Hello " ++ name))</h1>, }; ReactDOMRe.renderToElementWithId(<Greeting name="Helsinki" />, "root"); Greeting.re App.re

slide-60
SLIDE 60

Props

let component = ReasonReact.statelessComponent("Greeting"); let make = (~name, _children) => { ...component, render: _self => <h1>(ReasonReact.string("Hello " ++ name))</h1>, }; ReactDOMRe.renderToElementWithId(<Greeting name="Helsinki" />, "root"); Greeting.re App.re

slide-61
SLIDE 61

Props

let component = ReasonReact.statelessComponent("Greeting"); let make = (~name, _children) => { ...component, render: _self => <h1>(ReasonReact.string("Hello " ++ name))</h1>, }; ReactDOMRe.renderToElementWithId(<Greeting name="Helsinki" />, "root"); Greeting.re App.re

slide-62
SLIDE 62
slide-63
SLIDE 63

type state = {count: int};

slide-64
SLIDE 64

type state = {count: int}; type action = | Add(int) | Reset;

slide-65
SLIDE 65

type state = {count: int}; type action = | Add(int) | Reset; let s = ReasonReact.string;

slide-66
SLIDE 66

type state = {count: int}; type action = | Add(int) | Reset; let s = ReasonReact.string; let component = ReasonReact.reducerComponent("Counter");

slide-67
SLIDE 67

type state = {count: int}; type action = | Add(int) | Reset; let s = ReasonReact.string; let component = ReasonReact.reducerComponent("Counter"); let make = _children => { ...component, initialState: () => {count: 0},

slide-68
SLIDE 68

type state = {count: int}; type action = | Add(int) | Reset; let s = ReasonReact.string; let component = ReasonReact.reducerComponent("Counter"); let make = _children => { ...component, initialState: () => {count: 0}, reducer: (action, state) => switch (action) { | Add(value) => ReasonReact.Update({count: state.count + value}) | Reset => ReasonReact.Update({count: 0}) },

slide-69
SLIDE 69

type state = {count: int}; type action = | Add(int) | Reset; let s = ReasonReact.string; let component = ReasonReact.reducerComponent("Counter"); let make = _children => { ...component, initialState: () => {count: 0}, reducer: (action, state) => switch (action) { | Add(value) => ReasonReact.Update({count: state.count + value}) | Reset => ReasonReact.Update({count: 0}) }, render: self => <div> (s(string_of_int(self.state.count))) <button onClick=(_event => self.send(Add(1)))> (s(“Add")) </button>

slide-70
SLIDE 70

| Reset; let s = ReasonReact.string; let component = ReasonReact.reducerComponent("Counter"); let make = _children => { ...component, initialState: () => {count: 0}, reducer: (action, state) => switch (action) { | Add(value) => ReasonReact.Update({count: state.count + value}) | Reset => ReasonReact.Update({count: 0}) }, render: self => <div> (s(string_of_int(self.state.count))) <button onClick=(_event => self.send(Add(1)))> (s(“Add")) </button> <button onClick=(_event => self.send(Add(2)))> (s("Add 2")) </button> <button onClick=(_event => self.send(Reset))> (s("Reset")) </button> </div>, };

slide-71
SLIDE 71
slide-72
SLIDE 72

Manage your State with GraphQL

slide-73
SLIDE 73

Interop with JavaScript

slide-74
SLIDE 74

BuckleScript allows us to write bindings ReasonReact

  • wrapJsForReason
  • wrapReasonForJs
slide-75
SLIDE 75

[@bs.module "rebass"] external jsArrow : ReasonReact.reactClass = "Arrow"; let make = (~direction: string, children) => ReasonReact.wrapJsForReason( ~reactClass=jsArrow, ~props={"direction": direction}, children, );

slide-76
SLIDE 76

<Arrow direction="down" />

slide-77
SLIDE 77

<Arrow direction="left" />

slide-78
SLIDE 78

<Arrow direction="notRight"/>

slide-79
SLIDE 79
slide-80
SLIDE 80

Variants to the rescue!

slide-81
SLIDE 81

[@bs.module "rebass"] external jsArrow : ReasonReact.reactClass = "Arrow"; type direction = | Up | Down; let make = (~direction, children) => { let directionString = switch (direction) { | Up => "up" | Down => "down" }; ReasonReact.wrapJsForReason( ~reactClass=jsArrow, ~props={"direction": directionString}, children, ); };

slide-82
SLIDE 82

<Arrow direction=Arrow.Down />;

slide-83
SLIDE 83

<Arrow direction=Arrow.Left />;

slide-84
SLIDE 84

<Arrow direction=Arrow.Left />;

slide-85
SLIDE 85

So what now?

slide-86
SLIDE 86

Don’t be that person

slide-87
SLIDE 87

Time Innovation

React Ecosystem

slide-88
SLIDE 88

Time Innovation

React Ecosystem Reason Ecosystem

slide-89
SLIDE 89

Day 1: Workshop Day 2: Talks Day 3: Hackathon

slide-90
SLIDE 90

The End