Frontend audit

An exploration of frontend architecture

Background

Early RiptideIO apps were writtten in AngularJS. As in, Angular 1.x. Due to a laundry list of concerns (chief among them end-of-life support and glaring security issues), my coworker and I were tasked with auditing modern frameworks to determine which would be the best fit for a refactor for the migration to the Turntide suite of applications. We evaluated Angular, React, and Vue, as well as a number of UI libraries like Chakra and Material UI.

Process

Since Maya and the other RiptideIO applications had a large number of custom components (e.g., thermostats, scheduling modules), we didn't take lightly our responsibility to choose a UI library that was the right blend of rigid and flexible. While we wanted the code style to be enforceable, we also needed the opportunity to deviate in order to satisfy both techincal requirements and maintaining familiarity for our customers. Additionally, we wanted to be able to completely overhaul our approach to styles, which was long overdue for some pruning.

Takeaway

Through this audit, I learned how important it is to put personal preference aside and focus on the objective needs of the project at hand. At the time of this audit, I was a huge fan of Vue. But researching how each framework addressed app-specific concerns gave me a more nuanced appreciation for the strengths and weaknesses of each. In the end, we chose React for its peerless ecosystem and large developer community, and for those same reasons integrated Material UI for our UI library. We were also able to successfully reduce our bundled style assets by over 90% while simultaneously migrating to a monorepo, which allowed us to work from a single stylesheet for all of the RiptideIO/Turntide applications.