VueJS Pomodoro Timer Retrospective


The Vue Pomodoro was my first application written with VueJS. My wife actually asked me if I could build her a timer for exercising where she could set the total time, and two different intervals. That way she can know when she needs to ride the bike at a faster pace during one interval and when she could slow down for the second interval.

I was considering picking up VueJS just for curiosity's sake, so I figured rebuilding a project I'd already built before would be a good choice for my first Vue app. My reasoning was that, I'd already worked out the logic of timers in JavaScript in my original JS/jQuery based pomodoro, so I'd only have to focus on the Vue parts of the project.

One thing that tripped me up was that I've been in Angular so long that I tried to treat Vue in similar ways. For example, in Angular any variable you declare in a component can be referred to with this.variableName. In Vue, you have a data property that's must be a function that returns a data object. Later, when creating methods to do stuff in the Vue component, I assumed I could refer to the variables in that data object the same as in Angular: this.variableName. I kept getting weird undefined issues until I realized scope works a little differently in Vue and Angular. In those methods, this refers to that method, not the component as a whole. So, indeed, inside that method this.variableName was undefined. I learned a valuable lesson in how Vue works and learned it early!

Code Review

This app is still a work in progress. It is functionally complete, but it needs some healthy refactoring. In lots of places I violate DRY principles. In an effort to brute force it to work, I wrote code that isn't modular. There is also some boilerplate stuff still in the source code from what's generated by the vue-cli. So some of that needs cleaned up. I also need to rewrite the CSS and redesign the app entirely so that it looks nicer for my wife to use!

Future Improvements

I have multiple open issues on this repo to improve it. The major one is that the logic all needs to be refactored and cleaned up. It also needs a good coat of paint to make the timer look and feel a little more complete. I also should write some better documentation. The vue-cli spits out good boilerplate, but it should be extended.

  • Refactor all the JavaScript code to be more modular and more DRY.
  • Write better documentation
  • Redesign the app to look a little nicer.