As I’ve written here previously, I’ve been working on using React within Brackets to make parts of the UI easier to manage, specifically starting with the file tree that appears in the sidebar. I’m now actively working on getting that work into shape for landing. There’s an initial pull request up, but that one will be changing to retarget master once split view lands, which may be as soon as today.
I wrote about my experience trying React for a part of Brackets. Today, the Brackets UI surrounding the editor is built with jQuery, Mustache and a wee bit of Bootstrap. As we’ve increased the surface area of our UI through adding features to the file tree or new dialogs like the Extension Manager, we haven’t brought in new tools that can help manage the complexity. The Extension Manager is factored out into a reasonable MVC architecture and features a solid collection of unit tests, but I think that React can simplify our code there.
The Brackets File Tree The file tree in Brackets is a bit complex and I did an experiment to see if I could use React to make it less complex. React’s claim to fame is that its programming model is extraordinarily simple: you tell React how the page should look and behave and React makes it so. Note: I’m assuming some basic familiarity with React here, but I’m going to spend most of my words here on how I applied React in this experiment.
Apparently, the automated systems at eBay can’t take a joke. Earlier today, I listed my used iPhone 5 on eBay with a nice little bullet list of features. I had added “Saves time! Doesn’t come with Flappy Bird!”. eBay doesn’t like the current trend of selling phones with Flappy Bird pre-installed, because that means the phone has not been reset. I had, of course, reset my phone. Some time later, I got email saying my listing was rejected and the email specifically mentioned Flappy Bird.