I've had a bad day. I'm converting a single legacy haml template to React. It's straight forward, I tell myself. I thought this would give me a little pick me up after a couple days spent out my comfort zone trying to work with Ruby, Drone (the AWS Continuous Integration platform) and Docker. That Ruby task has been put on hold while someone more knowledgable sorts out our CI to something I would have to do less with to upgrade Ruby on our app. Sorry, I'm waffling.
I thought I'd have a nice productive day. Getting this simple template converted would be all I need to show some progress at work, feel productive and maybe learn something along the way.
All I've learned is that the more complexity, dependencies or technology (or anything at all really) you add to a project, the more pitfalls you have to fall into.
The specific problem I had was that the component would not render at all. Nothing, aside from a big red error telling me I had done something wrong.
You might have mixed up default and named imports.
Nope, I've checked that 10 times.
Was there anything different about the page I was working with? Nope, standard page and I could render another component fine.
Was there something funky in my naming of things? Nope, not that I could see.
I started to question whether or not I would ever get this working. I had spent 3 hours on this. 3 hours just to get a simple React component rendering. No logic, just some props.
This should be easy.
Fair to say my confidence was knocked.
Was I misreading the error messages? What had I done wrong? Was it something I didn't know or misunderstood about in Ruby, Rails, Hypernova, React, Webpack, or one of the many other things we use?
But then Eureka! I spotted it. I was importing a component that imports a component from a list of named components! React was right (as in the icon I wanted to use was named differently in the old template world to the new React world, and the prop I passed was not named in the component in a component in a component). I mean I wasn't mixing default and named imports up, but I passed a bad value in to an odd import logic for Icons.
I was hoping for a high. I had done it, 3 hours debugging, staring, resting, thinking, some more staring and eventually I found the problem and fixed it.
But then I had a think. And I was upset. Nearing angry. I think back to the talk I did on learning web development. I've been doing this job for over 10 years. Yeah, I still lack some technical knowledge, but this was not supposed to be that hard. But because of the huge tech stack we use, I was getting lost and overwhelmed. I felt like React was victim blaming me.
You might have mixed up default and named imports. or rather had no idea that the name of an icon had changed between Rails world and React world.
At the end of the day, I did make a mistake, but I felt like I had so many places to look for the problem, I got a bit lost and felt like I didn't know where to look next, and would I even understand the problem if I found it.
I've rambled on here and this is much longer than I anticipated. But the 2 things I learned are:
1) The more technologies you have to more tiny pitfalls you have to fall into, and not necessarily know where to look for the problem.
2) If you're a frustrated developer without much experience, don't be frustrated if you can't solve a problem - I've been doing this 13 years and still get really stuck (but if you think I can help, please ask, because sometimes I do feel like I know what I'm doing!)
Unfortunately today was not one of those times.
Top comments (2)
I like to tell people it gets easier but truthfully, you can't avoid the days you'd like to tear your hair out. Web technologies harbor a particular quality of frustration as they're volatile, ever changing with the times.
There's also a lot that could have been improved about the error to tell you where to look.
Another lesson to takeaway from this is when building software, provide useful, complete, and accurate error messages!