React vs Vue

I wrote this article for sharing purpose, of course this article is based on my opinion :)

So, to begin with ReactJS, if you are familiar with Javascript or Front-End World, you should know or at least heard about ‘ReactJS’.

ReactJS is a Javascript library for building User Interfaces or as you’ve known the commonly term ‘UI’. You can see the official documentation at reactjs.org.

As for Vue.js, is basically the ‘similar but different’ thing with ReactJS.

Vue.js is a framework for building User Interfaces. You also can check
the official documentation at vuejs.org.

This two amazing tools for building a functionally User Interfaces design and approach is totally cool and magical as you’ve known before this two things exist, there also many Javascript Framework that can be used like Angular, Ember.js, Meteor.js, etc. (I never used them, only ever heard of them).

But for this article i would only talk about these React and Vue.

So, React and Vue, both of them capable to create a well-known ‘Single-Page Application’ that are popular nowadays, and I’ve been using them for making things.

Both of them also powerful in creating a ‘Reuseable Components’ for the process of building the application and front-end part of an application that including the trio ‘HTML, CSS, and JS’.

I will tell you things about them in short.

Advantages of React and Vue

React

- Huge Companies such as Facebook, Instagram, Netflix use React
- Great for building large application
- Powerful flexibility with JS & ES6/7

Vue

- Easy to understand the file management and folder structure
- Great documentation, you can solve your problem easily
- Directives makes everything easier and cooler
- Tiny size and faster

Which to learn first? React or Vue?

Before you learn both of them, make sure you at least know the basic of Javascript, because as you know, both of them based on Javascript.

I learnt Vue first before React, and for my opinion if you want to learn both, you should start with React. Why? Because everything in React is Javascript and you will likely type more Javascript in React and the HTML structures also expressed via JSX, the CSS were also could be imported as a module in your Javascript file.

So basically your Javascript skill is totally depended when you’re using React.

This is why I suggest you to learn React first before Vue. This doesn’t mean that you can’t learn Vue first, both React and Vue were easy to learn.

Vue gave you too much user-friendly syntaxes such as ‘Directives’ like ‘v-if, v-for, v-once’, etc. that makes you easier and much faster to build the application logic.

This is why for me, when I learn Vue first and proceed to React, I found several difficulties because of the ‘Javascript’ that I’ve never knew before. And the bigger picture, as I stated above, they both share many similarities.

They support and use ECMAScript for writing Javascript with more features from the next generation, they utilize a Virtual DOM and they also provide you with the Component Lifecycle. That’s why i suggest you to learn React first before Vue, but it’s really up-to-you to decide which to learn first.

Separation Concerns between React and Vue

React separate the Component files between the JS and the CSS, while Vue combined it and applying the concept of ‘Single File Components’. I really like this concept because it gave me easier access to the Component itself and I could see the Component logic, styling, and also structure in a single file.

It’s not like React isn’t good at that thing, many other users that prefer the separation between Component files to see clearer things between the styling and the structures with the logic itself. But don’t worry if you prefer the separation in Vue, you can separate it anytime you want.

React-JSX & Vue-Template

Both of them were so freaking cool in creating a ‘Reuseable Component’ as i stated above. Why? Because when you create a Component that Reuseable, it reduces the code redundancy which is great for building an application.

While React using JSX for rendering all components with XML-like syntax that returned in the render function, Vue use the Template Syntax that basically a HTML-based syntax that will also be rendered to the DOM.

React-Redux & Vue-Vuex

Both of them have the better state management. While the Components have their each state and props, it should be really hard to pass the data between each Component when the Components tree got very deep and complex. That’s why you’ll need the state management.

While React using Redux for their state management, Vue use Vuex. Basically Redux and Vuex is the same thing, they were functionally used for state managing, centralizing the state in one big place.

Personally for the use of Redux and Vuex, i think that Vuex have a better structure and easier to understand rather than Redux. Why? Because first the third-party package for Redux are split by ‘redux’, ‘react-redux’, and also ‘redux-thunk’. Vuex is only using single package provided by Vue, and the structures were clearly understandable for use. So personally i like to use Vuex better.

Conclusion

As for the conclusion, I think both of them were really powerful and provide the user great experiences for using them. But honestly I don’t know is it because i learn Vue first than React but I choose Vue.js more :D

In my personal opinion, I really like Vue.js because it makes me easier to build my application by the lot of things Vue.js provide me, and I really like the concept of ‘Single File Components’ in Vue.js.

Sadly currently Vue.js trend is not as high as other JS Framework, but I think that Vue.js has a great potential to become popular by it’s awesome features.

By the way, thank you for spending your time by reading this article, hope you can choose the things that you need for building your application as an engineer. :)