Transitioning from React to Vue
Hey there, it's been a while since I've written anything. A lot has changed since then:
- I turned 16 (the least significant change tbh)
- I got a mechanical keyboard
- I got a second monitor
- I moved my PS4 to my room (finally)
- I think I want to move away from React to Vue
Obviously a lot more has happened but this is what I wanted to mention for now. Let's talk about the last point.
My coding journey
I'm not sure where to start counting so I'll start from the beginning:
- 20??: Java (Didn't like it so much, wanted to mod Minecraft but gave up)
- 2018: Python (Only did basic command line apps, school didn't leave me time)
- 2019: Arduino C++ (This is where I really enjoyed programming, but it was too expensive) & Basic HTML + CSS (Learned in the summer for fun, didn't plan on using too much)
- Early 2020: MicroPython (It sparked my love for Python again)
- March through April 2020: Python 3, Flask, and Django (I made use of HTML and CSS, and I was learning Python)
- Late July through August 2020: React then Svelte (React was my main focus, and Svelte was easy to pick up, but I never used it for anything serious)
- September through December 2020 (now): Still using React, but not too happy with it.
With React, I couldn't work with any state management library because they require so much boilerplate and add so much complexity, and I never clicked with the code I wrote. Everything was super complex and boilerplatey.
I worked on a basic frontend for my dad's company, using NextJS. It was decent but nothing spectacular.
My co-worker took it from there, and created a v2 mostly based on the same layout. I actually got some use of it, seeing how he organized code and which parts he separated into components really helped me realize how little components I use and how much I mash everything together, but it also made me realize how much I dislike React and how much I dislike JSX.
JSX is helpful and reduces boilerplate in a lot of cases, but it makes it hard to separate concerns and in some cases adds unnecessary code. The fact there's no built-in:
- List rendering
- Conditional rendering
- Computed properties
- 2-way input bindings
So here I am, in my bed at 2am, when Brad Traversy's excellent video on Vue pops up on my YouTube feed (Brad's twitter, YouTube channel, and Vue crash course video) and I decide to watch it. Mostly out of boredom but also hoping that I like the style of the framework and give it a try the next day. The latter happened and I gave it a try the next day, making a todo app first then experimenting with some other apps like a meme generator. I quite liked it but I was still on the fence and still leaning towards React.
I watched Brad's video about Vuex and used it to create a slightly more complex todo app, and I loved it... but I was still on the fence, this time leaning towards Vue. That's partly because I still haven't tried anything "Real-world" yet and I was afraid that anything more complex than a todo app would make me pull my hairs out.
I spun up a quick API for a blog, and made an SPA with it, and it went super well! There was just one more thing: Server-Side apps. I wasn't sure if I would like Nuxt so I gave it a try.
I don't know if this was a good move or not, but when using
create-nuxt-app I noticed a "content" module, which basically covers most of the boilerplate required for a simple, Markdown-based blog, so I used it. I figured it wouldn't hurt and it's something I would use in a real-world application anyways, why not give it a try here.
The whole blog would've been done in an afternoon if I didn't spend hours nitpicking simple styles and choosing between 2 almost identical styles, but regardless, it was done with ease in a few hours, and it's something I'd use if I didn't want to use something pre-built like Hashnode.
At this point I'm completely over React, but it's not a case of "I won't touch it ever again", but rather a "I won't use it for personal projects unless it makes sense to" case.
I'm gonna find something to work on now, either something with Nuxt or just plain old Vue.
I actually did most of my SPAs twice: once in Vue 2 and once in Vue 3 using the composition API. Which one do I prefer? Neither really. I like both of them, and each have their advantages and disadvantages, so I'll use any of them.
I don't know if I'll share more about the things I find weird when transitioning between the two frameworks, but if I do, it'll probably in my Twitter rather than another blog post like this. Maybe in the future after using Vue for 6 months or a year. Until next time, see you!