Bacon for
your
breakfast
Impératif
~
Fonctionnel
Impératif
- Descriptif / Algorithmique
- Séquentiel
- Structures de contrôle
- Side-effects
Fonctionel
- Composition
- Fonctions / Récursivité
- Stateless
Fight!
| Characteristic | Imperative approach | Functional approach |
|---|---|---|
| Programmer focus | How to perform tasks (algorithms) and how to track changes in state. | What information is desired and what transformations are required. |
| State changes | Important. | Non-existent. |
| Order of execution | Important. | Low importance. |
| Primary flow control | Loops, conditionals, and function (method) calls. | Function calls, including recursion. |
| Primary manipulation unit | Instances of structures or classes. | Functions as first-class objects and data collections. |
Réactive
Principes
- Immutabilité
- Flux de données
- Composition
Patterns
Presenter / ViewModel
FRP
Duo gagnant
- Immutabilité > Stateless
- Flux de données > Récursivité
- Composition !
JS libs
- RxJS
- Bacon
Bacon
Primitives
- Observable
Types
- Stream
- Property
- Bus
Streams
- jQuery :
asEventStream - Callback:
fromCallback - Promise:
fromPromise fromBinder
Bus
- Attacher un stream :
tchoutchou.plug stream - Envoyer un event :
tchoutchou.push 'run'
Properties
- Depuis un stream:
stream.toProperty() - Réaction:
me.onValue()
me.assign($el, 'val') - Combine
me.and you
me.or you - Créer des streams :
changes()
sampledBy(stream)
Observable
- Transformer :
obs.map (value) ->,obs.map '.target.value' - Filter :
obs.filter (value) -> - Agir :
obs.onValue
obs.doAction '.preventDefault' - Convertir :
obs.flatMap
obs.scan(seed, accumulator) - Debug :
obs.log()
Last Stream/Property value
Combine / Join
- Grouper :
Bacon.combineAsArray(stream, property) - Assembler :
Bacon.combineTemplate({id: 1, username: userprop}) - Joindre :
Bacon.when [stream, event], (_, e) ->, [stream], ->Bacon.update null, [stream, property], (_, value) ->, [otherstream], (_) ->
Dans la vraie vie d'un dev ?
State-machine
- Streams hooks
- Expose ses propriétés
- Défini ses logiques internes
Views
- Initialise ses streams (users events) > State-machine streams
- Assigne ses éléments < State-machine properties
passwordInput = $pwd.asEventStream 'keyup blur'
passwordEntered = passwordInput.map (e) -> !! e.target.value
model.submitPassword.plug( $form.asEventStream 'submit'
.doAction '.preventDefault'
.filter passwordEntered )
passwordEntered
.not()
.assign $submit, 'attr', 'aria-disabled'Questions ?
Merci !
Crédits
- Images
-
- You Killed the Beast, Killer!!!
By spike55151 //
- You Killed the Beast, Killer!!!
- Fonts
-
- Bebas Neue
By Dharma Type // Dharma Type Font License v1.00 - Roboto Bold Condensed
By Christian Robertson // Apache License v2.00 - DejaVu Sans Book
By DejaVu Fonts // DejaVu Fonts License v1.00 - Source Code Pro
Copyright 2010, 2012 Adobe Systems Incorporated // SIL Open Font License v1.10
- Bebas Neue