It was the time to stop making ugly-unstructured-plain-old-JavaScript with jQuery.
Let’s enter in the new era of the trendy-shiny-popular-modular-JavaScript framework.
So I choose VueJS.
1. It Keeps My Precious HTML/CSS/JS Structure in One Place
By far, this is the number one argument to sell VueJS.
Vue files are very appealing for beginners. It’s simple to understand and easy to break your entire HTML template to Vue files.
I can find out, at a glance, the structure (template), the behavior (script), and the look and feel (style).
<template>
<div id="myComponent">
<Counter />
<span v-if="reading">Hello reader !</span>
</div>
</template>
<script>
import Counter from "@/components/Counter";
export default {
name: "myComponent",
components: {
Counter
}
}
</script>
<style>
#myDiv {
display: block;
}
</style>
2. Vuex
When I discovered how a state management system works, I started with Redux. It was hard to learn and seems overly complicated.
With Vuex, it was damn good.
Only actions, mutations, and stores are involved compared to actions, reducers, and stores belonging to Redux. I didn’t catch reducers logic compared to mutations due to a lack of general knowledge when I discovered it, or some bad learning resources I used.
For me, Vuex has been easier to start with for a newbie.
3. NuxtJS
To be honest, NuxtJS — inspired by the React NextJS — was my go-to-framework for a Vue project.
I like the convention-over-configuration architecture of a Nuxt project.
Pages are under pagedirectory.
Components in component directory.
Store in storedirectory.
Middleware in middleware directory, and so on.
All the injections are transparent. nuxt.config.js centralizes all configurations. Amazing! It lets you build SSR-enabled websites and SPA without headaches.
But, I Gave React a Try (Again)
I didn’t tell you that before learning Vue that I tried React, but it was too brutal at first glance. My knowledge about how state management works and knowing more about ES6 language specifications has changed.
I saw plenty of articles even people around me are talking about React, so I give it a try. And it worked. Enough to adopt the framework in my projects.
Here is my point of view of the React's best benefits.
1. ES6 and TypeScript friendly
Developers master classes, interfaces, and enumerations. This was why I was able to understand how React components work and integrate into an application.
You can use ES6 syntax as well with Vue, but React is more well-designed than Vue. Look at how you have to do to register components in React:
class MyComponent extends React.Component {
render() {
return(<div />)
}
}For VueJS, you pass an object to the Vue Component function:
Vue.component({
template: `<div></div>`
})Therefore, modern React (in 2020) doesn’t involve class anymore, but instead functional component (and hooks).
VueJs now offers TypeScript support. This support is not well polished like React using CRA (Create React App) with TS support in a single command.
For Vue, we still need some third-party packages with custom decorators and features to create a true, complete TypeScript application, and the official documentation does not include all the information you need to get started.
2. JSX
JSX is not evil.
There are two schools: the pro-JSX, and the anti-JSX. I don’t like to take part in that conflict. JSX can be good or bad; it depends on how you want to work with your template.
From my point of view, it is more logical for a developer to write JSX like:
return (
<div>
{students.map(student => <p>{student}</p>)}
</div>
)
than the more HTML-ish way of Vue:
<div>
<p v-for="student in students">{{ student }}</p>
</div>
It’s a matter of preference; I find JSX more powerful and flexible.
3. Getting hook by hooks
I started learning and developing with the React component. The problem is that to create a single component as a React component class, it takes a lot of effort.
class MyComponent extends React.Component {
constructor(props) {
super(props)
this.state = {
counter: 0
}
}
render() {
return(<div/>)
}
}Functional components let you use local states with hooks. It removes a lot of boilerplate and useless constructors.
React Hooks simplify the use of state and other React parts like useEffect instead of componentDidMount and componentDidUpdate.
Some developers like the OOP approach by staying with classes, others the functional approach. You can use both in a project! 🤙
4. Community
Behind great projects are great humans.
By experience, there is much more documentation, third-party tools, and modules for React than Vue.
I sometimes struggled by looking for Nuxt issues and found lots of Next (React) topics.
By looking at Github repos, the numbers speak for themselves.
Or with their respective frameworks:
Community leverage the reliability of your code by solving bug fixes quicker. Finding people with the same problem as you makes your resolution fast.
Vue 3 is Coming…
Vue is currently in version 2; version 3 is still in beta, but there are a lot of big changes.
One of them is the Composition API, where you can manage the state without Vuex, and more cool things on the road!
So, do I like VueJS? Yes.
Do I like React? Yes.
Is React better than Vue? It’s a matter of interest.
Resources
- VueJS: https://vuejs.org/
- ReactJS: https://reactjs.org/
- NuxtJS: https://nuxtjs.org/
- NextJS:https://nextjs.org/
WRITTEN BY
Alexandre Lion
No comments:
Post a Comment