Why CSP channels are awesome https://github.com/ubolonton/js-csp

2. Communicating with Channels
JAMES LONG

3. Who am I

4. Channels
Communicating Sequential Processes
and
(not Content Security Policy)

6. Outline
• Explain channels in more detail
• Show some examples of integration with React components
• Show how Flux can be re-envisioned with channels

7. Making Ravioli

8. PUT
puts a
value
TAKE
takes a
value
GO
starts a
process
CHAN
creates a
channel

9. let { chan, go, take, put } = require('js-csp');
let ch = chan();
!
go(function*() {
while(true) {
console.log(yield take(ch));
}
});
!
go(function*() {
yield put(ch, 1);
yield put(ch, 2);
yield put(ch, 3);
});
!
// Output: 1 2 3
https://github.com/ubolonton/js-csp

10. let { chan, go, take, put } = require('js-csp');
let ch = chan();
!
go(function*() {
while(true) {
console.log(yield ch);
}
});
!
go(function*() {
yield put(ch, 1);
yield put(ch, 2);
yield put(ch, 3);
});
!
// Output: 1 2 3
https://github.com/ubolonton/js-csp

11. (livecode)

12. Additional Features
Promise Channels (coming soon)
let ch = promiseChan();
yield put(ch, 5);
!
// Somewhere else...
yield take(ch); // <- 5
yield take(ch); // <- 5

13. Additional Features
Closing a Channel
ch.close();
!
yield take(ch); // <- csp.CLOSED
yield put(ch, 5); // <- false

14. Advanced Usage
Higher-order Operations
mult
mix
merge
pipeline

15. Advanced Usage
Custom Buffering
let ch1 = chan(5);
let ch2 = chan(csp.buffers.dropping(10));
let ch3 = chan(csp.buffers.sliding(1));

16. Advanced Usage
Transducers
let { compose, map, filter, take }
= require(‘transducers.js’);
!
let ch = chan(1, map(x => x * 2));
let ch = chan(1, compose(
map(x => x.amount),
filter(x => x > 0),
take(10)
));

17. Why isn’t this used?
•Generators not available until recently
•An idea from Go/Clojure that simply hasn’t
been tried yet
•Susceptible to deadlocks

18. Component EVENT HANDLING
with channels

19. Example #1: Simple List

20. App
MessageCreator
Input
onChange/onKeyDown
onCreate

21. (code walkthrough)

22. ChannelsMixin
Adds send method
!
•Creates an event handler
•Takes a name and arguments
•If method exists with same name, simply forwards
events with supplied arguments
•Otherwise sends events onto a named channel

23. ChannelsMixin
Adds getEventChannel method
!
•Takes a name and returns the named channel

24. Benefits & Disadvantages
•Good: Transducer-compatible API
•Bad: More verbose
•Neutral: Not really much different

25. Example #2: Recording the Mouse

26. (code walkthrough)

27. Events
•onMouseMove handles mouse events
•extracts data
•dispatches
•velocityRecord sticks temporal state on
component instance

28. Channels
•mouseCoord channel instead of onMouseMove
event
•data extraction with transducer
•no dispatching required
•velocityRecord uses lexical scoping to keep
state

29. Benefits & Disadvantages
•Good: separation of concerns, modular
•Good: data flow as a first-class value
•Good: no leaking state
•Bad: Still more verbose

30. Example #3: Tooltip

31. (code walkthrough)

32. Channels
•cancellation and timeout signals
•more complex UIs would compose with data
flow (think modal that sends back data)

33. Benefits & Disadvantages
•Good: very clear workflow
•Good: tiny amount of code
•Good: avoids tracking tons of UI state

34. More Possibilities
•Cross-component channels
•Allow arbitrary types of channels: mix, mult,
pub/sub

35. Takeaways
Using event handlers for simple events is fine
Channels allow more complex composition of
signals and async workflows
They also help separate related logic into a
single place

36. FLUX
with channels

37. (code walkthrough)

38. Transactions
Uncategorized
Other Component
Dispatcher
TransactionStore
TotalStore
BudgetStore
UncategorizedStore

39. Notes about Flux
• Extracts out data into “one source of truth”
• Explicit forward flow
• Separates data into logical units
• Serves two purposes:
• Allows data dependencies
• Optimizes rendering

40. Transactions
Uncategorized
Other Component
Data Blob
App

41. Re-using Abstractions
• pub/sub channels for firing actions from
components
• cursors for watching for data changes

42. (code walkthrough)

43. Transactions
Uncategorized
Other Component
pub/sub
Transaction Add
Process
Transaction Update
Process
Other Process
Transactions Cursor
Budget Cursor

44. Potential Advantages
• Composability of event flows
• Cursor abstraction removes need for emitting
change events
• Potential global app state structure
• Component subscribing to events

45. Disadvantages
• Cursors can be invalidated easily, needs work
• Doesn’t enforce as much structure
• May not need any event composability

46. Thanks!
@jlongster
https://github.com/ubolonton/js-csp