What is difference between observer pattern and reactive programming?

Question

Recently I heard the term reactive programming a lot, but when I searched for it, what I discovered was only some similarities with observer pattern. Actually,

Answer 1

I am an expert in reactive programming, and I am actively developing new tools for reactive programming. Such as causality (https://github.com/erobwen/causality)

A simple way to put it is that reactive programming is what goes beyond using the observer pattern with its "callbacks" and "listeners". With reactive programming, it is assumed that there is a higher level of automation where the platform administers all the data and UI dependencies. So, as a general rule of thumb, is that if the observer pattern is used, then it is not a reactive system.

Another way to tell if a programming paradigm is reactive or not, is if you write code that updates data structures and UI components, or if you write code that look as if it only creates the UI components in the first place. Hence:

Non-reactive programming: Code that creates the UI + Code that updates the UI.

Reactive programming: One block of code that creates the UI (that will be used for updates as well)

For example, a non-reactive way to update your UI is to have an event listener to listen to a click of a button, and if the user clicks that button, then you find the appropriate place in the DOM, where you set a property, add a child, or add a class for in order to make something happen.

To do the same thing reactivley is to bind the button-state to a view mode variable, and then in turn bind the property you want to modify, to that view mode variable. Then, when the user press the button, the system will automatically know how to update the DOM.

Modern and popular examples of reactive programming are React and Angular. The thing that makes React reactive for example, is that every component declares its "render" function to build the UI of a component. The key thing is that this render function will be used BOTH for when the component is initially rendered, but also when changes in data/UI state will cause modifications in the UI.