• selinov

Refactoring Trilliant Components with React

Early in 2016 I took on an assignment to redesign dashboards for the Trilliant (formerly Clariture) application suite. The backend was still in Python but we'd just hired an incredible frontend lead so the team felt like we could take steps into some more modern UX/UI patterns. Within a week we agreed on an a layout and we got to work building some single page apps in Angular 2.

Design File : Trilliant Executive Summary

This task would launch my adventure into the world of Angular and, to be honest, I hated it. The concepts for building abstracted components made perfect sense but the syntax, the exceptions, and the seemingly endless breaking changes to the library drove me away. Even after I was sent to a three day bootcamp I left the class with a single phrase ringing in my head. On day two I had asked a question regarding how/why an implementation was done and the teacher responded with…

"Yea, the new Angular will come out soon and all of this will no longer be how it's done. This is kind of broken."… blink…blink

Fast forward to 2018 to see me signing up for a MERN (Mongo, Express, React, Node) boot camp. Boom! 💥 I loved it. Made so much sense right from the start. Sure I had to get my ES6 chops up to speed but in general things fell into place. In 2019 I started using hooks and it made React even more streamlined. Functional components have become the norm and many of the pseudo-class writing in React is no longer necessary. 👍


With my current level of confidence I thought I'd challenge myself by refactoring some of the Trilliant components into React. It wasn't without issues but it was fast. I literally spent two work days getting 85% of the functionality AND the look and feel into place.


Click here to visit the Github repo.

© 2020