How I refactored my code after the free weekend - DevDiary #0.5

Last weekend you could watch all the courses on Vuemastery for free. Actually they extended it to today, but I learned a lot already I want to implement what I learned in my current project as soon as possible. I could learn Nuxt.js today and make a Nuxt.js project tomorrow. Nuxt is like a framework for Vue, which is a framework itself. I am convinced of it's features, especially the best practice oriented structure and the possibility to make my app more search engine friendlier. I will definitely turn my App into a Nuxt.js App, but not right now. I have just bought the yearly membership at Vuemastery.com so I learn it whenever I like. My priority right now is to have a running minimum viable product as soon as possible and that collides with spending a few days learning Nuxt.js and figure out how to make and Nuxt App do what my Vue App does. I will give me just this one refactoring day, because my code has gotten really messy to a degree where I have to search for over half a minute to find the right line in the code. I will tell and show you how exactly I am going to do this.

First of all: My current project is a website, where voluntary organisations can present themself. Second: What do I want to change? I learned a few newt concepts this weekend, that I want to apply. Let's make a list:

• Services
• Vuex
• Filters

How to refactor

The refactoring process is not as hard as it seemed to me at the start. First of all the most important thing: USE A VERSION CONTROL SYSTEM. You will mess up and there are just two coping mechanisms: Use a version control system or cry because you lost hours of work. I prefer the first option. It is just a four step process. The screenshots are from the changes I did to implement the services.

Step One: Delete the dependency you want to get rid of. In this case it is firebase for me. If you don't have a dependency and just want to shift some methods or data from one file to another skip this step.

Step Two: You got an error everywhere you had the dependency, so now you know that you have to put this method into your new files. If you didn't had a dependency than you don't have errors, but you should know even without errors which methods to move.

Step Three: You have to change the methods. Since they don't have direct access to the data you have to define input parameters and export the result.

Step four: Replace code or method call with calls of refactored code.

Services

Services is the concept to put call to the backend or similar stuff inside own Javascript files . I am using firebase for my backend and currently all my firebase requests are inside the Components they are used in. It would be much cleaner to just put them inside there own Javascript Data. I am using three firebase services: The database, the storage for images and the authentication for register and login and there is already a Javascript file that exports the access to this services. I could do a service file for every one of those services, but I think it is more intuitiv to order them by what they are for. The authentication is for the user data and the database and storage are for the organisations data. I could also have put everything inside the firebase configuration. I didn't do it because I know every organisation will have the possibility to post jobs in the future and then I don't want to mix the job functions and the organisation functions. I will import those files in the matching components for now and then put them into a matching store module after implementing Vuex into my project. 

While coding it like I described in the previous part, I found a small problem:

The buttons didn't wanted to stop loading, because I set the loading attribute to false inside a method that didn't have access to this attribute. So what to do? I had to put the ".then(...)" part in the component. For this to work the service needs to return a promise. How to do this? Just put the return in front of the database call and when you call the method inside your component you can just add ".then(...)" afterwards.

So what was the effect. I reduced 439 lines of code to 423. It took me 4 hours. Was it worth it? I think yes. My code looks a lot cleaner now and the next time I write firebase access code or change it (I know I will have to). It will save a lot of time and trouble. After successfully refactoring my app to have the services in an own file I will commit my changes, so I can go a step back if I mess up with Vuex.

Vuex

Vuex is a Vue libary that enables easy state management. What does that exactly mean? Data, that is used multiple times can just be put inside a store file. There are special rules for accessing the data and especially modifying it, probably so it is harder to muss up the data and ruin everything.

There are three things I want to store globally: The static list of impact areas of voluntary organisations, the user authentication data and the loaded organisations as cache to reduce data traffic.

It is not that intuitiv to install Vuex after initializing the project, but it went fine. In just copied the right stuff from the tutorial project into the right spot in my project. I total failed to implement the firebase authentication with Vuex and gave up because to be honest it doesn't really bother me. In fact it bothers me a lot more that I spend so much time one trying to refactor something that is a minor inconvenience at worst. So my teaching from this story: Don't start working on something before checking if it is really something worth working on. I will write a module for the organisations data because that will be actually useful to minimize the traffic.

When to refactor?

I didn't manage to do all the refactoring I planned to do today. That is fine. I will refactor the rest tomorrow. An important question in this question is when to refactor? You could either write the code as clean as possible from the start and refactor every time the structure change, so that your code is constant state or "clean". This is a good approach and I think it is a very good habit to write good code without rewriting it. But If you are not that experienced with your currently used language or framework that is nearly impossible, because you are constantly learning better ways to write your code. For example I did a lot of refactoring today because I learned a lot on the weekend. I think the perfect time for refactoring your code is when you need more than half a minute to find the line you need.