CODEWITHSUNDEEP
javascriptreactive-programming
bigmadwolf
bigmadwolf

Reputation: 3519

Reactivityy vs events in Javascript?

I'm trying to create a clear picture of reactivity and what it means, vs events in javascript.

From Wikipedia : 

// In computing, reactive programming is a programming paradigm orientated     
// around data flows and the propagation of change.

I struggling to distinguish how the actual implementation in javascript of an event driven UI might differ from a "reactive implementation" and would appreciate anyone able to contrast these patterns.

I've been using meteor for quite a while so understand it that context, but not its fundamental mechanics.

I assume that essentially it comes down to some sort of event or notification being published from a "reactive data source" or subject to another function, that is observing it, each being designed to "react" to these events.

Very specifically, how might the implementations differ from Publishingg and subscribing to events on a object that defines that object or the system it exists in as reactive?

Any help would be great.

Upvotes: 3

Views: 158

Answers (2)

LetterEh
LetterEh

Reputation: 26696

The key is that it's all about sequences over time, and being able to pass that representative object around, and work with it, while it provides methods for not only pass-through subscription, but also manipulation, transformation and collation.

If you were to think about an array [1, 2, 3], and what you could do with it, without resorting to lower-level management of internals...

arr.map(add1).map(triple).filter(evens).reduce(add, 0);
// with a starting value of 0, add all numbers in arr,
// after they've had 1 added, been tripled,
// and had odd products stripped out

What if you could say:

div.mouseMoves
   .map(event => ({ x: event.x, y: event.y }))
   .filter(bottomHalfOfBox)
   .forEach(updateView);

Or do the same for recentPosts or newsfeedUpdates or friendMessages?

That's sort of the idea of it all, using streams, which are really rather arrays whose values are separated by time.

Every library has something different, different wrappers, different names for the same methods, different behaviours... but the goals are all similar.

And what you're seeing is that the callback aspect of the events is insufficient for this level of chained composition.

Some other languages have native (or syntax override) support for this type of feature, natively. Javascript, not so much, of course. Rather than relying on syntax, we need to rely on wrappers for this behaviour.

Upvotes: 2

bcherny
bcherny

Reputation: 3172

Reactive systems usually mean reactive streams.

With pub/sub, A sends a message to B, and B may or may not do something with the message.

With reactive streams, A streams a message to B, and B provides backpressure to A, so A knows when its message has been received, and the stream has been emptied. There's also well defined semantics around combining streams, duplexing streams, etc. For comparison, with pub/sub, there are no such semantics, and the implementations for these operations are usually ill-defined and ad hoc. With well defined operations, composing and interoperating streams becomes easy.

Beyond the theoretical definition, different libraries do things in very different ways.

For a high level overview, I highly recommend https://github.com/kriskowal/gtor.

Upvotes: 1

Related Questions