Off The Record

Off the record matches users with lawyers. Their flagship app let's user's fight traffic tickets.

Tools used

• Java (Spring)
• Typescript
• Webpack
• MySql
• NX
• AWS Code Deploy / Pipeline
• AWS Elastic Beanstalk

Role

I worked on both back-end and front-end projects.

Dealing with tech debt

Off The Record began when AngularJS was the big front-end framework. The code that drove the front-end for their suite of applications existed in four different git repositories. There were major issues with developer experience:

• Duplicated code across multiple repositories.
• Different version of dependencies for each application.
• Deprecated library versions.
• Code bloat from a misconfigured webpack.
• Use of deprecated AngularJS

To remedy this issue I pushed to move all applications to one repository. The biggest hurdle in doing so was to create a deployment pipeline that would only trigger depending on a change from each project. Nx made this fairly easy. Using the affected command I was able to spin up "child" pipelines depending on the project that was affected by the commit being deployed. I also found multiple ways to speed up the build pipeline.

Once all applications were in the same repository and CI / CD was in place, we could then begin the work of de-duplicating code and updating libraries off of deprecated versions. Work on migrating off of AngularJS was made easier by the ability to use a shared component library that exists in the same repository. We decided to migrate to the new Angular via Angular Elements. The ability to utilize Angular components as Web Components made it easy to integrate new components into our legacy applications.

Transforming the way developers work

In tandem with dealing with technical debt that was bogging down the company, I also put a lot of effort into increasing developer speed by addressing issues with the development workflow. From the previous section, the single repository workflow was a huge improvement to the day-to-day workflow. Not only did I migrate the front-end codebase, I also migrated the back-end codebase as well (the back-end codebase was using multiple git submodules). Submodules are great if the dependencies don't need to be constantly updated. OTR developers often pushed updates to shared dependencies that broke consuming applications. Plus the overhead to work on two separate repositories made working on the back-end a pain.

Another issue was the inability to work on a component not in situ. The front-end developers lacked a sandbox. To work on some features involved setting up a bunch of different user states -- obviously not ideal. There was a lot of institutional knowledge that wasn't documented. I introduced the team to a tool called Storybook and set up a few features to run independent of the back-end using the MSW addon. Using Storybook some difficult to develop on features, such as phone verification, were made easy to improve upon.