What is difference between observer pattern and reactive programming?

Reactive programming is the general paradigm behind easily propagating changes in a data stream through the execution of a program. It's not a specific pattern or entity per-se, it's an idea, or style of programming (such as object oriented progamming, functional programming, etc.) Loosely speaking, it's the concept that when x changes or updates in one location, the things that depend on the value of x are recalculated and updated in various other locations in a non-blocking fashion, without having to tie up threads sitting around just waiting for events to happen.

Traditionally, you've near always seen the above pattern where x is a GUI event. Most GUI libraries are single threaded, so you can't tie up this one thread waiting for a response. That's where the observer pattern comes in - it provides a common method for providing a "trigger" to allow information to be updated whenever such a change is made (or, in more common OO terms, when an "event" is fired.) In that sense, it provides a simple mechanism for allowing the very basic concept of reactive programming to happen in OO (and sometimes other) style languages.

The fuller concept of reactive programming goes way, way beyond the traditional observer pattern - instead of just firing a particular action on a single event (such as a user click), you can create and subscribe to publishers of such events, set actions to run based on the events that occur on that publisher, apply backpressure to control the speed of that publisher, control the threading of that stream, etc.

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.