@gdgtoulouse @ToulouseJS @ilaborie #JavaScript #2 - - PowerPoint PPT Presentation

▶
gdgtoulouse toulousejs ilaborie javascript 2 gdgtoulouse
SMART_READER_LITE
LIVE PREVIEW

@gdgtoulouse @ToulouseJS @ilaborie #JavaScript #2 - - PowerPoint PPT Presentation

Nov 12, 2022 214 likes •778 views

@gdgtoulouse @ToulouseJS @ilaborie #JavaScript #2 @gdgtoulouse @ToulouseJS @ilaborie #JavaScript #3 @gdgtoulouse @ToulouseJS @ilaborie #JavaScript #4 Langages fonctionnels @gdgtoulouse @ToulouseJS @ilaborie #JavaScript

slide-1
SLIDE 1
  • @gdgtoulouse @ToulouseJS @ilaborie #JavaScript
slide-2
SLIDE 2

✉

slide-3
SLIDE 3

@gdgtoulouse @ToulouseJS @ilaborie #JavaScript

#2

slide-4
SLIDE 4
  • @gdgtoulouse @ToulouseJS @ilaborie #JavaScript

#3

slide-5
SLIDE 5

Langages fonctionnels

@gdgtoulouse @ToulouseJS @ilaborie #JavaScript

#4

slide-6
SLIDE 6

Fooling around with alternating current (AC) is just a waste of time. Nobody will use it, ever. There is no reason anyone would want a computer in their home. I predict the Internet will soon go spectacularly supernova and in 1996 catastrophically collapse.

@gdgtoulouse @ToulouseJS @ilaborie #JavaScript

“ “ “

#5

slide-7
SLIDE 7

C est un langage fonctionnel JavaScript est un langage fonctionnel JQuery est une monade

@gdgtoulouse @ToulouseJS @ilaborie #JavaScript

“ “ “

#6

slide-8
SLIDE 8

On peut adopter donc un style de programmation fonctionnelle avec la plupart des langages. Les carcactéristiques des langages peuvent rendre cela plus ou moins facile (voir obligatoire)

@gdgtoulouse @ToulouseJS @ilaborie #JavaScript

“

#7

slide-9
SLIDE 9

Il n'y a q'un langage fonctionnel : le ƛ-calcul

@gdgtoulouse @ToulouseJS @ilaborie #JavaScript

“

#8

slide-10
SLIDE 10

@gdgtoulouse @ToulouseJS @ilaborie #JavaScript

#9

slide-11
SLIDE 11

Programation fonctionnelle Typage statique

@gdgtoulouse @ToulouseJS @ilaborie #JavaScript

“

#10

slide-12
SLIDE 12

Programmation fonctionnelle en JS - Part I

@gdgtoulouse @ToulouseJS @ilaborie #JavaScript

#11

slide-13
SLIDE 13

Function is Firstclass citizen function mult(a, b) { return a * b; } console.log(typeof mult); function console.log(mult(3, 14)); Variable const mult2 = function(a, b) { return a * b; }; ES2015+ const mult3 = (a, b) a * b; TypeScript const mult4 = (a: number, b: number): number a * b;

slide-14
SLIDE 14

⚠

  • void

@gdgtoulouse @ToulouseJS @ilaborie #JavaScript

let sum = 0; [1, 2, 3, 4, 5] .forEach(elt { sum += elt }); console.log({sum});

#12

slide-15
SLIDE 15

const sum = [1, 2, 3, 4, 5] .reduce((acc, elt) acc + elt); console.log({ sum });

slide-16
SLIDE 16

const isEven = (n: number): boolean (n % 2 0); [2, 3, 4, 5] .forEach(elt console.log(elt, 'even?', isEven(elt)));

slide-17
SLIDE 17

The last thing you wanted any programmer to do is mess with internal state even if presented figuratively. Instead, the objects should be presented as sites of higher level behaviors more appropriate for use as dynamic components.

@gdgtoulouse @ToulouseJS @ilaborie #JavaScript

“

#13

slide-18
SLIDE 18

let & const let oLet = {a: 1, b: 2};

  • Let.a = 3;

Transparence référentielle ? const oConst = Object.freeze({a: 10, b: 20});

  • Const.a = 30;

Deconstruction const oConst2 = {oConst, a: 30}; console.info({oLet}); console.info({oConst}); console.info({oConst2});

slide-19
SLIDE 19

@gdgtoulouse @ToulouseJS @ilaborie #JavaScript

class List<T> { private array: T[]; constructor(elements: T[] = []) { this.array = [ elements]; } add(element: T) : List<T> { return new List([this.array, element]); } }

#14

slide-20
SLIDE 20

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; type Predicate<T> = (T) boolean; const isEven = (n: number): boolean (n % 2 0); const not = <T>(fun: Predicate<T>): Predicate<T> (n: T) !fun(n); const isOdd = not(isEven); const evenDigits = digits.filter(isEven); const oddSquared = digits .filter(isOdd) .map(n n 2); console.log(evenDigits); console.log(oddSquared);

slide-21
SLIDE 21
  • @gdgtoulouse @ToulouseJS @ilaborie #JavaScript

interface Event { error: boolean; } const funErrors = (events: Event[], size = 10): Event[] events .filter(evt evt.error) .slice(0, size); const notFunErrors = (events: Event[], size = 10): Event[] { const result: Event[] = []; for (let i = 0; i < events.length; i) { const evt = events[i]; if (evt.error) { result.push(evt); } if (result.length size) { return result; } } return result; };

#15

slide-22
SLIDE 22

@gdgtoulouse @ToulouseJS @ilaborie #JavaScript

const compose = (g , f) x g(f(x)); const composeAll = (functions) x functions.reduceRight((value, fun) fun(value), x); const doubleSay = (str) str + ', ' + str; const capitalize = (str) str[0].toUpperCase() + str.substring(1); const exclaim = (str) str + '!'; const result1 = exclaim(capitalize(doubleSay('hello'))); const result2 = 'hello' |> doubleSay |> capitalize |> exclaim;

#16

slide-23
SLIDE 23

@gdgtoulouse @ToulouseJS @ilaborie #JavaScript

speakers.filter(speaker speaker.xp > 10 speaker.languages.some(lang lang 'JavaScript') speakers.filter(speaker speaker.xp > 10) is experimented is love JS .filter(speaker speaker.languages.some(lang lang 'J const isExperimented = speaker speaker.xp > 10; const isLoveJS = speaker speaker.languages.some(lang lang ' speakers.filter(isExperimented) .filter(isLoveJS); speakers.filter(and(isExperimented, isLoveJS));

#17

slide-24
SLIDE 24

function ✍ Object.freeze Object.seal Object.freeze Object.seal

  • ⚠

void do

@gdgtoulouse @ToulouseJS @ilaborie #JavaScript

#18

slide-25
SLIDE 25

✋ while dowhile for forof forin ✋ var let ❤ const ✋ o.x = 5; ❤ Object.assign {o, x: 5} ✋ push pop shift unshift sort splice ❤ filter map slice reduce ✋ clear delete set ✋ add clear delete

@gdgtoulouse @ToulouseJS @ilaborie #JavaScript

#19

slide-26
SLIDE 26

Programmation fonctionnelle en JS - Part II

@gdgtoulouse @ToulouseJS @ilaborie #JavaScript

#20

slide-27
SLIDE 27

@gdgtoulouse @ToulouseJS @ilaborie #JavaScript

#21

slide-28
SLIDE 28

@gdgtoulouse @ToulouseJS @ilaborie #JavaScript

#22

slide-29
SLIDE 29

type: number number number const mult = a b a * b; const identity = mult(1); const double = mult(2); const triple = mult(3); [identity, double, triple] .map(fun fun(42)) .forEach(x console.log(x));

slide-30
SLIDE 30

Transformation d'une fonction de plusieurs arguments en une chaîne de fonctions d'un seul argument qui donnera le même résultat lorsqu'il est appelé en séquence avec les mêmes arguments.

f(x, y, z) = g(x)(y)(z) Function.bind ⚠

@gdgtoulouse @ToulouseJS @ilaborie #JavaScript

“

#23

slide-31
SLIDE 31

type IntFun = (number) number; const stupidMemoizer = (fun: IntFun): IntFun { const cache: number[] = []; return (n: number) { const cached = cache[n]; if (typeof cached 'number') { return cached; } return (cache[n] = fun.call(null, n)); } }; const fibonacci: IntFun = stupidMemoizer(n { switch (n) { case 1 : return 1; case 2 : return 1; default: return fibonacci(n - 2) + fibonacci(n - 1); } }); console.log('fibonacci(15)', fibonacci(15));

slide-32
SLIDE 32
  • @gdgtoulouse @ToulouseJS @ilaborie #JavaScript

#24

slide-33
SLIDE 33
  • @gdgtoulouse @ToulouseJS @ilaborie #JavaScript

type schoolPerson = Teacher | Director | Student(string);

#25

slide-34
SLIDE 34
  • @gdgtoulouse @ToulouseJS @ilaborie #JavaScript

let greeting = stranger switch (stranger) { | Teacher "Hey professor!" | Director "Hello director." | Student("Richard") "Still here Ricky?" | Student(anyOtherName) "Hey, " ++ anyOtherName ++ "." }; const getLength = vector { match (vector) { when { x, y, z } ~> return Math.sqrt(x 2 + y 2 + z 2 when { x, y } ~> return Math.sqrt(x 2 + y 2) when [etc] ~> return vector.length } } getLength({x: 1, y: 2, z: 3}) 3.74165

#26

slide-35
SLIDE 35

@gdgtoulouse @ToulouseJS @ilaborie #JavaScript

const myPoint = { x: 14, y: 3 }; const {x, y} = myPoint; x 14, y 3 const tab = [1, 2, 3, 4]; const [head, tail] = tab; head 1, tail [ 2, 3, 4]

#27

slide-36
SLIDE 36

A monad is just a monoïd in the category of endofunctors, what's the problem?

  • @gdgtoulouse @ToulouseJS @ilaborie #JavaScript

“

#28

slide-37
SLIDE 37

Généralisation aux catégories de la notion de morphisme.

  • Functor

@gdgtoulouse @ToulouseJS @ilaborie #JavaScript

“

interface Functor<A> { map(mapper: (A) B): Functor<B>; } interface EndoFunctor<V> { map(mapper: (V) V): Functor<V>; }

#29

slide-38
SLIDE 38

C'est un magma associatif et unifère, c'est-à-dire un demi-groupe unifère.

  • Monoid

Semigroup

@gdgtoulouse @ToulouseJS @ilaborie #JavaScript

“

interface SemiGroup { concat: (SemiGroup) SemiGroup; this.concat(x.concat(y)) = this.concat(x).concat(y) } interface Monoid extends SemiGroup { empty: Monoid; monoid.concat(empty) = monoid, empty.concat(monoid) = monoid }

#30

slide-39
SLIDE 39

Array.prototype.{flatMap,flatten} Monad

@gdgtoulouse @ToulouseJS @ilaborie #JavaScript

interface Monad<A> extends Functor<A> { flatMap(mapper: (A) Monad<B>): Monad<B>; }

#31

slide-40
SLIDE 40

J'ai toujours pas compris !

  • map

flatMap Option<V> Either<A,B> Result<S,E> Future<V>

@gdgtoulouse @ToulouseJS @ilaborie #JavaScript

“

#32

slide-41
SLIDE 41

Promise<T>

@gdgtoulouse @ToulouseJS @ilaborie #JavaScript

#33

slide-42
SLIDE 42

flatMap

@gdgtoulouse @ToulouseJS @ilaborie #JavaScript

#34

slide-43
SLIDE 43

Remaques sur la performance

@gdgtoulouse @ToulouseJS @ilaborie #JavaScript

#35

slide-44
SLIDE 44

@gdgtoulouse @ToulouseJS @ilaborie #JavaScript

#36

slide-45
SLIDE 45

Douter de toutes les mythes et légendes

@gdgtoulouse @ToulouseJS @ilaborie #JavaScript

“

#37

slide-46
SLIDE 46

tout les leviers sont bon, y compris le langage

@gdgtoulouse @ToulouseJS @ilaborie #JavaScript

“

#38

slide-47
SLIDE 47

Conclusion

@gdgtoulouse @ToulouseJS @ilaborie #JavaScript

#39

slide-48
SLIDE 48
  • flatMap

Stream

  • @gdgtoulouse @ToulouseJS @ilaborie #JavaScript

#40

slide-49
SLIDE 49
  • @gdgtoulouse @ToulouseJS @ilaborie #JavaScript

#41

slide-50
SLIDE 50

@gdgtoulouse @ToulouseJS @ilaborie #JavaScript

#42

slide-51
SLIDE 51
  • @gdgtoulouse @ToulouseJS @ilaborie #JavaScript

#43

slide-52
SLIDE 52
  • ✅
  • ♻
  • @gdgtoulouse @ToulouseJS @ilaborie #JavaScript

#44

slide-53
SLIDE 53

La valeur principale d'un programme est dans ce qu'il réalise, pas dans son style.

@gdgtoulouse @ToulouseJS @ilaborie #JavaScript

“

#45

slide-54
SLIDE 54
  • @gdgtoulouse @ToulouseJS @ilaborie #JavaScript

#46

slide-55
SLIDE 55

@gdgtoulouse @ToulouseJS @ilaborie #JavaScript

#47