Today I began work on my third mockup, which is when we decided to dive into a heavier front end JavaScript framework. We studied the idea of doing our thorough dynamic UI for querying our back end API and decided that even though it would be difficult to implement, it was feasible. However, we definitely need something more advanced than vanilla JavaScript or even jQuery. We're going to end up with many HTML elements, many of which will have events associated with them so that they manipulate other elements or talk to servers, etc. And the biggest problem with this is that if you have a client side app that's removing things from the DOM and adding them in, you need to re-setup all your events for the DOM elements when they're added back in. This would be a nightmare for an app of this scope.

When it comes to modern front end JavaScript frameworks, ReactJS (aka React) is probably the best bet for us. It has an ingenious system for bubbling events up to one root element which then interprets the events and decides what to do. Therefore, transient DOM elements won't be a concern to us. This pattern is called "event delegation" and the idea has been around for a while, even before React implemented it under the hood. React also lets you create your own "components" which contain a combination of state and presentation, where the presentation is whatever HTML representation of your metaphorical component you can dream of.

This way of programming brings me back to my days of learning GUIs with Windows Forms. I let that thinking rot in my mind when I got immersed into web development, having been convinced of the merits of RESTful applications that aren't necessarily event-driven. It's funny how things tend to converge over time. I'm open minded, and I can already tell that React is a powerful tool, so I'm looking forward to learning it and I know we can produce a great visual MongoDB query builder for this project.

Note: This was originally posted on the blog I used for my co-op term while at Seneca College ( before being imported here.