Back story: Current my company has a "portal" where many different internal applications are developed independently and are then iframed into the site. There is a lot of chatter between the frames (usually checking a state or setting some state for other applications to see) which are all hosted on the same domain (not cross-domain). This approach works fine but recently we are considering moving to redux as this approach seems dirty and various teams are tossing a lot of data on window.top (globally).
Would something like redux be able to handle multiple "applications" "communicating" in a way that is more uniform than just reading and setting variables on window.top or would this be an improper use of redux?
Add a comment
|
3 Answers
Frames have different contexts. You'd have to refer to a parent store, e.g., expose the store (and its dispatch) via window. It's arguably cleaner than a random assortment of variables.
That said: if they're truly independent apps then I might instead opt for going truly independent via web sockets in each of the frames communicating via live updates delivered from a back end (Elixir, Node, etc.) that's well-suited for the task.
Doing so allows greater flexibility in separating out the apps (e.g., I just want app Foo running in its own window), getting the inter-frame comms onto a common bus so anything else that wants to look in on those messages can, etc.
Comments
Yes you could indeed have a common Redux store in the top level page and dispatch actions to it. However if you want the different iFrames to listen to it updating you would then need some Redux-middleware to observe state change and allow iFrames to subscribe to these events.
I expect though whilst this might structure your code a bit better to start with, if you have lots of different teams all monkey patching a single Redux store your code will get dirty pretty quickly.
I would suggest having a pub/sub library, such as postal.js in the top level page for passing messages between your different apps and then create a simple name-spaced object store for shared data, and protect it from miss use with the seamless-immutable library.
Comments
This approach works fine but recently we are considering moving to redux as this approach seems dirty and various teams are tossing a lot of data on window.top (globally).
When things get to this point, I would consider either cleaning up the code or implementing redux. I generally avoid storing anything globally or on the window.
I would highly recommending implementing redux if
- your company will be using this portal for a while
- you want to learn redux (it's really cool)
- someone on the team is already familiar with redux
Why redux?
- if you are keeping track of states across multiples views or frames, it is great for its utilization of a single source of truth for all states
- super modular and a joy to work with in a team environment
According to your description, it seems like your redux is the perfect solution for your problem.
Redux is pretty straight forward, but depending on what the rest of your tech stack looks like, you might need to use some sort of middleware with redux.
1 Comment
Dave Newton
Implementing redux doesn't solve the fundamental issue of communicating between separate apps, though, no? It's cleaner INB that you'd only have one store on the containing window, but you'd still have "competition" for that store.