React vs Vue
I wrote this article for sharing purpose, of course this article is based on my opinion :)
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.
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
- Huge Companies such as Facebook, Instagram, Netflix use React
- Great for building large application
- Powerful flexibility with JS & ES6/7
- 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?
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.
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.
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. :)