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)
  • May through June 2020: Javascript + NodeJS (I still hadn't decided between frontend or backend, and I used Vue for a little bit here)
  • July 2020: More Javascript + DOM Manipulation (I listened to the internet and stuck to the basics before jumping into a framework)
  • 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

But you use Javascript expressions and methods to achieve the first two, and hooks to achieve the third, which adds extra code that harms readability and/or maintenance. It's impossible to achieve 2-way bindings, but you can use something like Formik to help reduce boilerplate when writing forms

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.

Composition API

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!

Comments (1)

Iloenyenwa Victor's photo

well... another man's food is another man's poison .... i Love React and yes, i tried Vue but it didn't really click but nice article!