I got to do some React work this week, which has been an educational experience, a lot went wrong that shouldn't have and I learnt a few lessons which I thought I'd share.
Slow navigation I logged into the application and my environment was running incredibly slow. To navigate to where I needed to be in the application, it felt like it took 2 minutes, then I waited for that page to load and that felt like an hour.
Slow page loads I started development and quickly hit another point of frustration, it turns out I save my work A LOT and with every save, the page would refresh... for what felt like 2 hours on each reload at this point.
No debugging I wanted to debug to see what was going on with a bug I had... for some reason Visual Studio Code (VS Code) wouldn't allow me to debug, so I had to use console.log to debug.
I continued to work like this for the rest of the day and went home feeling frustrated. That night I started thinking about what I was doing and how much time I had been wasting, I felt I should have had the task completed, but I'd barely made a start, there had to be a better way of working.
Why am I even developing this component in such a slow environment? Someone else had been assigned the task of working out what was going on with the slow environment and regardless, why should I be impacted by a server side issue when I'm doing client side work. I investigated mocking out the API, but that's a massive piece of work and would need to be discussed with the team and then I realised, why don't I just develop this component in isolation
Setup throw away project I went to work the next day all excited, I created a new React application as per their setup guide. I setup a component folder and copied my component across and started working away in VS Code. I tried to debug and IT WORKED!
My excitement was back, I was starting to have a few wins, within a few hours, I had completed the task and had tested it manually against different scenario's. I had done it, the task was completed and I felt great.
Integrate Finally, I integrated my component back into the massive project and while it was still running slowly, I was able to test my work and it still behaved as it did in my throw away environment AND it was now saving data to a database.
I had done it, the task was completed and in a timely manner. I will definitely be continuing this practice moving forward, it made such a difference.
Often, I find my frustrations are there for a good reason, so I use them as a way to better my practices and myself. Looking back now, I wonder if I should have used something like Jest to develop the component in a TDD fashion.