Once upon a time I wrote a front-end of web app in pure JavaScript with a little help of jQuery. It was a quick way to start. However, when my project grew I noticed a sad consequence of my approach: the code after just about a year was total Spagetti!
Vanilla JS - gateway drug
I thank that some developers start with JS this way.
- Oh! I can have button just by typing
<button>in my HTML file! Great! Let's see how do I make it do something after clicking. - So I use JavaScript for that [BE CAREFUL]
- Let's add some
onClick="alert('clicked')"attribute to my button - Then after some time You find out about [DANGEROUS]
getElementById(). At this point a real madness about Vanilla JS begins…
When I write code, I often have a feeling about what it should do. Sometimes of course there is some specification, but my inner hacker always wants something to be done by just written code. This is why using getElementById() is so tempting every time. Just define id for element, than copy-paste some code from Stack Overflow, and boom! Work is done. However creating an app this way leads to anger, anger leads to hate and hate leads to spaghetti code.
Dark times
Ok, so I managed to deploy my freshly created legacy code to production. Did I mention I had no code review whatsoever? Surprisingly this code worked more often than not, and nobody asked for too much changes in it, so I leaved it for about 6 months. After that stability of the app came into question, and I was wondering about fixing things, improving compatibility with browsers, etc. I didn't even want to look at it. It was about 900 lines in pure JS with atrocities like getElementById() everywhere. I heard about this great React. That it is easy and powerful. However, I never was into front-end so I didn't start learning it. After watching some videos on YouTube about it, I got grasp of key concepts of React. As it grew on me, I decided to get out of this Legacy-Hell created by myself.
Quickstart with React
When I got basic concepts of React - components, state, props everything started to get brighter. I finally could make some sensible modules, isolate thing from each other, use some nice architecture and hierarchy. Not only that! After making Hello World in React it was clear to me that creating front-end this way is even easier than in vanilla JS! In about a week I was able to get rid of ugly 900 lines of my own legacy and replace it with fresh React code.
Every time when I learned new feature of React I really appreciate its design. It is great! Use React!