Cross Framework Messaging
Rather than choosing to migrate one onto a different framework, I looked at a way of allowing them to send messages to each other using the Mediator Design Pattern.
The Mediator Pattern
The Mediator pattern defines an object which encapsulates how a set of objects interact. For our purposes, it can be thought of as similar to the Pub/Sub pattern. In a conventional Pub/Sub pattern, any object can implement it — allowing other objects to subscribe to events, and publishing out events to subscribers. This allows decoupled, agent to agent, distributed communication.
Our Mediator pattern implements the same Pub/Sub pattern, but does so using a central object with which all objects communicate — i.e. that object mediates the communications.
For the purposes of this work, I will use a mediator module from github (https://github.com/ajacksified/Mediator.js).
A Demonstration Application
The following screenshot shows the application I will be building to demonstrate this pattern:
I needed to build this demonstrator quickly, so the code works rather than being perfect, but it is fine for illustrating the principles.
<!-- Mediator for cross-framework comms --> <script src="js/mediator.min.js"></script> <script> window.mediator = new Mediator(); </script> <!-- End of mediator -->
the simplest to understand. Firstly, I want to publish to the mediator
apps can see it). The input field has an ID of
an event listener for input events, check to see whether the input event is
to the mediator with a message containing the content of that input field:
Next, I want to subscribe to angular and react events from the mediator.
When I receive such an event, I will update the read-only
Here is the full code for that:
Using the Mediator in Angular
If I were writing an actual Angular application, I would create a mediator service and then inject it into the components which needed to use it. However, for the purposes of this example, I will just use a variable in the controller.
Next we create the mediator object I talked about earlier.
We then want to be able to publish changes to the mediator when the Angular input field changes. To achieve this, we $watch the input.angular variable. When there are changes, our $watch function publishes the new value to the mediator as an angular event.
Here is all the code to make this happen:
Now we have two applications, we can test that our communication is working:
Using the Mediator in React
I’ll discuss the React code in two parts, starting with the React createClass. I’m defining an InputField class and it will contain the three input fields from the previous examples, this time with the React field as the one which takes data input.
I set the value for each field from the React props for the class. I also bind the onChange for the React Input field to an onChange function, which simply publishes the field value to the mediator:
This then brings the React panel into the communications and whichever panel we type into, the output is reflected in the other panels: