A Journey into Component Manipulation with React
For the past four weeks, my team (Chris Amori, Jeff Yamamoto, and Hai Zhu) and I have been working on FermionJS, an open-source prototyping tool for React applications. The project revolved around creating a fluid and responsive simulator where users of our application can visualize and manipulate multiple React components in real-time.
In order to achieve this core functionality, we spent hours researching and implementing the numerous open-source libraries out there that dealt with visual component manipulation in React, as well as experimenting with the core technologies underlying these libraries. During our exploration, we discovered that the world of React visual component manipulation was far richer and more developed than we originally thought. Below, you’ll find a summary of our experiences, lessons that we learned, along with some key takeaways that we think you might find useful.
Dragging, Dropping, Resizing
We wanted to find a way to seamlessly drag, drop, and resize components. Furthermore, since we were storing all of our application data in a Redux store, we needed events to be fired when the user makes any changes in styles or component hierarchy. We initially hoped there would be an all-in-one library that would handle this for us, but unfortunately, that turned out to be unfeasible. After some experimenting, we realized that combining two different libraries, React DnD and React RnD, would best suit our needs. Coming to this conclusion was not an easy task, however, and I will briefly describe some of the issues we faced on our journey to our solution.
HTML5 Drag and Drop
Our first crack at implementing drag and drop functionality was attempted with pure HTML5 drag and drop APIs. This was a brave move, and proved to be a bit too cumbersome, as we would have needed write a lot of code to achieve even the basics. Besides, someone had already done that before…
React DnD
React DnD is an amazing drag and drop library. It provides easy to use APIs for getting information about the source component of the drag event, the target of the drop event, and a whole load of other goodies which I will not attempt to explain here. We were successfully able to fire events in order update the Redux store about how a component has shifted in the hierarchy within our workspace. Furthermore, it allowed us to use every component as a drag source and a drop target simultaneously, which is exactly what we needed for deeply nesting components. Next we needed to start implementing features for visually dragging components around in the workspace, and to update our store accordingly. React DnD does provide all the tools necessary to do these tasks, but implementing this functionality would have taken tons of time, and around this time we just so happened to stumble across another library that does this beautifully right out of the package (more on this later).
CSS for Component Resizing
CSS has a native style property called ‘resize’. While it is an awesome property which makes it easy to add resizing for non-complex applications, it unfortunately (on most browsers) has no event firing system when a resize occurs, which prevented us from updating our redux store.
React RnD: Killing Two Birds with One Stone
React RnD is a library specifically made for moving components around using dragging, and as a bonus, has an implementation for our missing resize event. This was very exciting for us as a team, and we now had our functionality for moving components around, resizing them on the fly, and updating our store accordingly.
Final Solution: DnD and RnD
You may be wondering, if RnD allowed us to move components around freely and resize them, why did we end up using both of these libraries in conjunction? What use does DnD have? Well, the answer is pretty simple, RnD did not have any functionality for nesting components, and firing events if one component is dragged into another. While we surely could have been able to implement this ourselves, we decided to render all of our components wrapped with the RnD wrapper, and the DnD drop wrapper, which gave us all of the functionality we were looking for, without all the trouble of reinventing what had already been accomplished.
So, What’s Redux?
When building out any large React application, it almost goes without saying that Redux will play a role. But that begs the question — What is Redux, and what does it provide that React doesn’t?
Well, if your application is small, it’s a simple process to stick changes in the parent component’s state and pass it down from there. However, as the application grows and the development team gets larger, it becomes tricky to manage all of those connections. Fortunately, Redux (more specifically, the React-Redux library) exists and is a wonderful solution to the growth problem. Redux allows a development team to lift the state up above their application and provides a method to hook components directly into the store (the Redux term for state). This allows developers to avoid worrying about passing increasingly complex props chains down through all the layers of their application but instead allows them to reference state values only where they’re needed.
Furthermore, when components are divvied up amongst developers Vanilla React can create situations requiring lots of refactoring and debugging as the application grows larger. Hence the introduction of Facebook’s Flux, and eventually, Redux. With Redux, it’s a trivial issue to add, modify, and combine reducers to produce a singular store object powering all the pieces of the application without requiring major refactoring. A developer simply needs to add an action for his state change, add a reference to that action (via the action’s type) to the reducer, connect his actions and the store to his component, and git will merge the reducer into one function as branches are merged. No refactoring, minimal debugging, and minimal propagation of props through the application.
With Fermion, this proved to be invaluable as the application could be rendering anywhere from 20–100 components at any time, many of which can be created or destroyed at a whim and without any notice. We made it approximately two days into development before we realized that there was simply no way to reasonably control the scale of a project this large without managing state outside the app itself. By introducing Redux, we noticed immediate gains in productivity, despite the fact that none of us had ever worked with Redux before.
Integrating Different Libraries in Projects
Alright, how do we integrate these libraries? Just like integration with any libraries or framework, one has to consider the pros and cons of the libraries themselves and assess the feasibility of integrating them.
There are few things to take into consideration for any project:
-Do features overlap and conflict?
This is a big one. For us, React DnD and React RnD caused major conflicts because both libraries utilized the same underlying HTML5 methods, and competed for those resources. Both libraries had the ability to disable its dragging functionality, But because we applied the libraries to all the components, we had to implement workarounds to prevent one library from overriding the other.
Additionally, in our workflow, one library is used to wrap a component, which will be wrapped once more by the other. This causes more confusion and it becomes important to keep track and separate the component by its purpose so styling with css and maintaining the code will be easier.
-How transparent are the implementation and documentation?
We’ve all been there. Demo looks promising but there’s no documentation and the source code is incredibly convoluted. We ended up going through the source code for multiple libraries before settling on solutions that worked (mostly) for us. At the end of the day, if you’re bringing in an external library there’s a solid chance it’s not going to be a perfect fit, but as long as the code is well documented, or at least well understood by your dev team, you’ll save tons of time by not reinventing the wheel.
In conclusion:
We hope you enjoyed reading about our journey through the world of visual component manipulation in the React ecosystem. If you’re interested in doing a little exploration of your own, here are some resources that we recommend you check out:
React DnD: http://react-dnd.github.io/react-dnd/
Redux: http://redux.js.org/
HTML 5 Drag and Drop: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API
