Brandon Travis

picture of javascript framework, VueJs

VueJS

Last updated on: Wednesday, December 22, 2021

When I first started using VueJS it was for my current internship at my school. I am using it in combination with Laravel for the backend but for this post, let us just focus on the VueJS experience for now.

VueJS boasts itself as an easy-to-learn alternative to React and Angular, and I definitely do agree that Vue is a whole lot easier to learn than Angular and it is also easier to learn than React. This definitely does attract a lot of new people to the Vue ecosystem because who doesn't like an easy-to-learn alternative to React and Angular that you can learn in an afternoon. While this didn't pull me in initially as I was more interested in working with React back in the day, I am just glad I didn't have to pull my hair out while learning Vue for work.

Another benefit that you may or may not like but I know for a fact that I do like is that, you do not use JSX while working with Vue, you use normal HTML. JSX or JavaScript Syntax Extension provides developers a way to structure their component rendering. For me personally, I do not like JSX but I have just gotten used to using it throughout the years and at this point, it is second nature to use JSX now.
If you don't know JSX syntax looks something along the lines of this:

<> <Head> {/* PWA primary color */} <meta name="theme-color" content={theme.palette.primary.main} /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" /> </Head> <body> <Main /> <NextScript /> </body> </>

While JSX isn't that bad, it also isn't the prettiest to work with but it does its job and I can't complain about it.

In regards to state management, React doesn't have an officially supported state management solution, and in return, many React developers turn to third-party solutions like Redux which forces you to write a lot of boilerplate code in order to get it set up, which obviously, no one likes to write a lot of boilerplate code. For Vue, state management is an officially supported and integrated solution that the Vue developers provide which is Vuex. This integrated solution removes a lot of the hassle of setting up state management in your projects.

Vue also includes the Vue CLI and Vite both of which in the end accomplish the same goals but handle it in different ways. The official Vue documentation recommends using Vite as the recommended way to start a new project over Vue Cli as it includes a better developer experience and HMR or hot module reload performance out of the box. This is in comparison to React where it recommends to use Create-React-App as the way to start a new project, this sets up all the boilerplate code that you would need to start a new project.

Vue also implements lifecycle hooks in an easy to use way, one example of this is if the component is mounted.

mounted() { this.$nextTick(function () { // Code that will run only after the // entire view has been rendered }) }

This may appear more user-friendly to beginner developers over React Hooks and may be easier for people to wrap their heads around it. I personally have no preference of whether I like Vuejs implementation of lifecycle hooks or Reacts way of implementation.

Overall Vuejs is a simple and user-friendly javascript framework that allows new and seasoned developers a delightful development experience that handles several things differently from React and Angular. To decide whether Vuejs is appropriate for you and your future endeavors, work projects, and side projects, take the leap and spend an afternoon getting acquainted with the Vue way of doing things. You may or may not be happy that you did, I want to bet that you will be happy maybe as happy as I was, who knows?


Related Posts

Picture of a stylized brain holding up weights
My experience with a coding bootcamp
Stock photo of computer
How I built this blog
Picture of Javascript framework, Reactjs
ReactJs, NextJs, and PreactJS
a clock that shows the time passing
Why I started coding
Picture of a man writing on a piece of paper and also using a laptop
My experience with working

Copyright © Brandon-travis.com 2022.