reactive at rnday - Oodrive · • Current javascript implementation: RxJS 5 ......
43
Transcript of reactive at rnday - Oodrive · • Current javascript implementation: RxJS 5 ......
React(ive)
Alexandre Duros - software developer @ @alexduros @alxndredrs
3
What is an UI ?
4
5
the FHM way
6
var hiddenBox = $( "#banner-message" ); // Find$("#button-container button" ).on( "click", function( event ) { // Handle hiddenBox.show(); // Mutate});
the FHM way
What is an UI ?
8
f(State) → <UI/>
pure projection function which takes a state and returns an UI
9
(State) → <UI/>React =
pure projection function which takes a state and returns an UI
10
About Reactbut not so much
11
12
What is React ?
• Not an MVC Framework, an UI Library
• All is about <Components />
• Immutable props
• Mutable state
13
var Channel = React.createClass({ render: function() { return <div>You are happy when you watch {this.props.program}</div>; }});
ReactDOM.render(<Channel program="Le petit journal" />, mountNode);
f(State) → <UI/>
pure projection function which takes a state and returns an UI
14
f(StateA) → <UIA/>
f(StateB) → <UIB/>
f(StateC) → <UIC/>
15
StateA StateB StateC
<UIA/> <UIB/> <UIC/>
render render render
16
Let’s focus onState
17
current position
current live program
live gap
channels list
current channel
live programs list
CSA rating user profile
18
current position
current live program
live gap
channels list
current channel
live programs list
CSA rating user profile
19
current position
current live program
live gap
channels list
current channel
live programs list
CSA rating user profile
20
13h30 14h30 15h30 10h15
BBT JT Scandal
M6 Boutique Scène de ménage Zone Interdite
Canal+ M6
current position
current channel
programs
+
+
=
BBT M6 BoutiqueTHE programme JT Scandal
21
What is the difference between an array and a stream of events ?
22
map, filter, reduce, concat, uniq, drop, (and so on…)
on events ?
Events = Collection + Time
23
Observables• TC39 proposal for ES2016 (ES7)
• « native » support in React, Angular2 and Ember
• Any language: Java, Rust, …pick your language
• Current javascript implementation: RxJS 5
• Full RxJS projects : https://github.com/canalplus/rx-player
24
When to use them ? (frontend)
In a asynchronous context (all the time ?):
• Animations
• XHR / HTTP / WebSocket
• User inputs
• Back pressure
25
When to use them ? (frontend)
// Return an observable of special key down commandsfunction commandKeys(element) { let keyCommands = { "16": "TF1", "56": "CANAL+" };
return listen(element, "keydown") .filter(event => event.keyCode in keyCommands) .map(event => keyCommands[event.keyCode])}
let subscription = commandKeys(inputElement).subscribe({ next(val) { console.log("Received wanted channel: " + val) }, error(err) { console.log("Received an error: " + err) }, complete() { console.log("Stream complete") },});
26
When to use them ? (frontend)
// Returns an Observable which emit the result of an XMLHTTPRequestlet ajax = function() { ... }
let req1 = ajax("/resource1");let req2 = ajax("/resource2");
let combinedResult = combineLatest(req1, req2, (result1, result2) => { result1: result1, result2: result2});
combinedResult.subscribe({ next(combinedResult) { console.log("Received combinedResult: " + combinedResult) }, error(err) { console.log("Received an error: " + err) }, complete() { console.log("Stream complete") }, });
27
• Encapsulate states of your applications which are values that change over time
• Provide a functional way to compose those values
When to use them ? (frontend)
28
• Map • Reduce • Filter • Zip • Merge • Concat • FlatMap • Take • Skip • …
• Delay • Buffer • Debounce • Throttle • …
29
f(State) → <UI/>
pure projection function which takes a state and returns an UI
30
function commandKeys(element) { let keyCommands = { "16": "TF1", "52": "CANAL+" };
return listen(element, "keydown") .filter(event => event.keyCode in keyCommands) .map(event => keyCommands[event.keyCode])}
var Channel = React.createClass({ componentWillMount() { let subscription = commandKeys(document).subscribe({ next(channel) { this.setState({ channel }) }, error(err) { this.setState({ err }) }, complete() { console.log("Stream complete") }, }); }, render: function() { return <div>You are happy when you watch {this.props.name} on {this.state.channel}</div>; }});
ReactDOM.render(<Channel program="Le Petit Journal" />, mountNode);
Let’s put it together
31
(State) → <UI/>React =
pure projection function which takes a state and returns an UI
32
( ) → <UI/>React =
pure projection function which takes a state and returns an UI
33
Flux = Architecture to manage state
Action Dispatcher Store View
Action
A bit of Flux
34
Action Dispatcher Store View
Action
A bit of Flux
Store = State mutating over time which updates the view
35
Well, well, well…Doesn't it is sound familiar ?
36
Action Dispatcher Observable View
Action
A bit of Flux
Store = State mutating over time which updates the view
37
// Store observablevar ChannelStore = function() { let keyCommands = { "16": "TF1", "52": "CANAL+" };
return listen(document, "keydown") .filter(event => event.keyCode in keyCommands) .map(event => { name: "Le petit Journal", channel: keyCommands[event.keyCode] })}
// Pure componentvar Channel = React.createClass({ render: function() { return <div>You are happy when you watch {this.props.name} on {this.props.channel}</div>; }});
// Higher Order Componentvar ChannelContainer = Store.connectTo(Channel, ChannelStore);
ReactDOM.render(<ChannelContainer />, mountNode);
Higher Order Components
38
// Store observablevar ChannelStore = function() { let keyCommands = { "16": "TF1", "52": "CANAL+" };
return listen(document, "keydown") .filter(event => event.keyCode in keyCommands) .map(event => { name: "Le petit Journal", channel: keyCommands[event.keyCode] })}
// Pure componentvar Channel = React.createClass({ render: function() { return <div>You are happy when you watch {this.props.name} on {this.props.channel}</div>; }});
// Higher Order Componentvar ChannelContainer = Store.connectTo(Channel, ChannelStore);
ReactDOM.render(<ChannelContainer />, mountNode);
Higher Order Components
39
// Store observablevar ChannelStore = function() { let keyCommands = { "16": "TF1", "52": "CANAL+" };
return listen(document, "keydown") .filter(event => event.keyCode in keyCommands) .map(event => { name: "Le petit Journal", channel: keyCommands[event.keyCode] })}
// Pure componentvar Channel = React.createClass({ render: function() { return <div>You are happy when you watch {this.props.name} on {this.props.channel}</div>; }});
// Higher Order Componentvar ChannelContainer = Store.connectTo(Channel, ChannelStore);
ReactDOM.render(<ChannelContainer />, mountNode);
Higher Order Components
40
// Store observablevar ChannelStore = function() { let keyCommands = { "16": "TF1", "52": "CANAL+" };
return listen(document, "keydown") .filter(event => event.keyCode in keyCommands) .map(event => { name: "Le petit Journal", channel: keyCommands[event.keyCode] })}
// Pure componentvar Channel = React.createClass({ render: function() { return <div>You are happy when you watch {this.props.name} on {this.props.channel}</div>; }});
// Higher Order Componentvar ChannelContainer = Store.connectTo(Channel, ChannelStore);
ReactDOM.render(<ChannelContainer />, mountNode);
Higher Order Components
41
// Store observablevar ChannelStore = function() { let keyCommands = { "16": "TF1", "52": "CANAL+" };
return listen(document, "keydown") .filter(event => event.keyCode in keyCommands) .map(event => { name: "Le petit Journal", channel: keyCommands[event.keyCode] })}
// Pure componentvar Channel = React.createClass({ render: function() { return <div>You are happy when you watch {this.props.name} on {this.props.channel}</div>; }});
// Higher Order Componentvar ChannelContainer = Store.connectTo(Channel, ChannelStore);
ReactDOM.render(<ChannelContainer />, mountNode);
Higher Order Components
42
Observable.just(Thanks)
43
@alexduros @alxndredrs
Alexandre Duros - software developer @
