Been taking a look at ReactJS over the last few days, which is an interesting view library from the folks over at Facebook. What I really like about it so far is the “componentization” of objects on a page. The general idea being, any part of the page should be able to stand on its own. Think widgets. In theory this is a nice idea until components need to interact. For example, a list of items with a search box that filters the results. Component 1 is the search box, Component 2 is the list of items. In the traditional MVC pattern, the controller would be responsible for handling this interaction. In react, you would create a parent component which would handle the passing of state change to the list component. It doesn’t really matter what the parent component is, just that its children are the list and the search box.
Considering the issues I have with the traditional MVC pattern for front end web apps, I’m interested in how this approach by ReactJS performs in the real world at scale. Especially on very interactive web apps. In past large web apps, I’ve used an event bus to facilitate the communication between components and thereby reduce tight coupling. My initial concern is that there will be hooks and callbacks being passed through each component in ReactJS, making the code a challenge.
Time to dig in and see the real world results.