The day I started modern front-end development, I made a decision every single developer are once doing in its life: choosing the right framework.
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.
Here are the reasons why I loved (and still love) VueJs.
1. Keeping my precious HTML/CSS/JS structure at one place
By far, the number one argument to sell VueJS, make it incredible.
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 to me over 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 page directory.
Components in component directory.
Store in store directory.
Middleware in middleware directory and so one.
All the injections are transparent. nuxt.config.js centralize all configurations. Amazing ! It let you build SSR-enabled website and SPA without headaches.
But I give React a try (again)
I didn’t tell you that before learning Vue I tried React but it was too brutal at first glance.
My knowledge about how a 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 works. 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 know and master classes, interfaces and enumerations. It was why I was able to understand how React Components works and integrates in an application.
You can use ES6 syntax as well with Vue but React is well more 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 (today in 2020) doesn’t involve class anymore but functional component (and hooks).
TypeScript is making JavaScript great again. Just try it out, and you’ll like it.
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 a part of 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 minded 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 React Component. The problem is, 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 state with hooks. It removes a lot of boilerplate and useless constructors.
function MyComponent() {
const [counter, setCounter] = useState(0)
return(<div />)
}
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 Github repos, numbers speak by themselves.
Or with their respective frameworks.
Community leverage reliability of your code by solving bug fixes quicker. Finding people with the same problem as you make your resolution fast therefore your shipping.
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, 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 ? Matter of interest.
Top comments (5)
Recently, I have one new reason to prefer React (actually, Next.js) -- npmjs.com/package/eslint-plugin-js...
Of course, another reason is React is more TypeScript friendly.
I don't think Vuex is easy as well. I only use it for monitor state (via $watch), but it isn't very TypeScript friendly.
Especially Hooks looks bizarre at the beginning (if you had a lot of experience with class based components before), but the more you work with them, the more benefits you see (i.e. ease to extract logic from the component and share it) and they become your number one approach for building React components.
As a React-Vue developer, I see 2 "frameworks" is 90% same, Everything that Vue provides can be found from react-community, I prefer React because it is more js-friendly and its constantly updates, Hook did change the game last year, it makes react is more and more powerful and easier syntax. Vue really need an big update like that!
All good reasons Alexandre! 🙏 Thanks for the article
great, thank you :)