We decided to split up our monolithic Ruby on Rails application at my company into a front end application written in React, and a backend API written in Ruby on Rails. I had a wonderful time extracting the API out of the old monolith. In fact I was so excited to do this that I spent the majority of my vacation building a side project API just to prepare for this effort when I got home! While it has taken far longer than expected, in the end it was the right decision and has laid a solid foundation for future growth.
After the API work was done, I was looped back into the work going on in React on the front end application. The learning curve has been very steep - and it feels like I'm back at square one some days. Part of it is because everything is in JavaScript, whereas I've coded mostly in Ruby. While I have major issues with JavaScript as a language, I've made a lot of progress getting better at writing in it. What I think has been actually holding me back the most was the confusing folder structure that our team was using.
React is very new, pre-1.0 in fact. It is pretty bleeding edge, and on top of that React is only one piece (the view) that is required to build a front end application. The rest of the technical choices are left up to each developer who starts a new application. As a result there aren't too many conventions that have emerged around building applications using React.
To start out, my team wisely choose to follow the folder structure suggested by Ryan Florence, a prominent thought leader and open source contributer in the React community. This is a slightly modified version of his proposed folder structure:
app
├── config
│ └── routes.js
├── screens
│ └── App
│ ├── components
│ │ └── App.jsx
│ ├── screens
│ │ ├── Admin
│ │ │ ├── components
│ │ │ │ └── Admin.jsx
│ │ │ ├── screens
│ │ │ │ ├── Reports
│ │ │ │ │ ├── components
│ │ │ │ │ │ └── Reports.jsx
│ │ │ │ │ ├── stores
│ │ │ │ │ │ └── ReportsStore.js
│ │ │ │ │ └── index.js
│ │ │ │ └── Users
│ │ │ │ ├── components
│ │ │ │ │ └── Users.jsx
│ │ │ │ └── index.js
│ │ │ ├── shared
│ │ │ │ └── stores
│ │ │ │ ├── AccountStore.js
│ │ │ │ └── UserStore.js
│ │ │ └── index.js
│ │ └── Course
│ │ ├── components
│ │ │ │ └── Course.jsx
│ │ │ └── index.js
│ │ ├── screens
│ │ │ └── Assignments
│ │ │ ├── components
│ │ │ │ └── Assignment.jsx
│ │ │ └── index.js
│ │ └── index.js
│ ├── shared
│ │ └── components
│ │ ├── Avatar.jsx
│ │ └── Icon.jsx
│ │ └── actions
│ │ ├── AccountAction.js
│ │ ├── ReportAction.js
│ │ └── UserAction.js
│ └── index.js
├── shared
│ └── util
│ └── createStore.js
└── index.js
As you can see this is a very nested structure, and difficult to fully grasp. While this kind of folder structure may make sense to those who have been deeply immersed in React, or for companies that have very large and complicated applications it was an ill-fit for our team of React n00bs building a small app. After lobbying my collegues we spent a few hours completely rearranging our folder structure, and settled on something much flatter and easily graspable. Here is how that same folder structure looks now that we've flattened it:
app
├── actions
│ ├── AccountAction.js
│ ├── ReportAction.js
│ └── UserAction.js
├── config
│ └── routes.js
├── components
│ ├── App
│ │ ├── App.jsx
│ │ ├── index.js
│ ├── Admin
│ │ ├── Admin.jsx
│ │ ├── index.js
│ │ ├── Report.jsx
│ │ └── User.jsx
│ ├── Course
│ │ ├── Assignment.jsx
│ │ ├── Course.jsx
│ │ └── index.js
│ ├── Shared
│ │ ├── Avatar.jsx
│ │ ├── Icon.jsx
│ │ └── index.js
├── stores
│ ├── AccountStore.js
│ ├── ReportStore.js
│ └── UserStore.js
├── lib
│ └── createStore.js
└── index.js
Much better, right?
I've already begun to understand the application more, and have noticed a huge improvement in my productivity. I am spending less time fumbling around to find the right file, and spending more time writing code. I'm also really understanding the roles of the different kinds of files more, now that they are all grouped together, instead of isolated and spread out.
I think there are further improvements that can be made - such as writing a module so that we can get rid of all the index.js files in the components folder. Overall though, I'm really happy, and hope that as time goes on the React community develops conventions around a simplier folder structure like my team has now chosen to use.