Switching From React to Vue.js

tarihinde gönderildi - Son değiştirilme

These days, many React developers are switching to Vue.js. They have similarities, but also  differences. Many of these differences are a reflection of how much Vue has been influenced by Angular.

What is React?

React is described as a flexible, efficient, and declarative JavaScript library, which is used for developing user interfaces. It comes with various components, which instruct React about what a developer wants to render. It then renders and updates the correct components every time the developer’s data changes.

What is Vue.js?

Vue.js is a progressive library for developing user interfaces. It varies from other monolithic frameworks because it is created from the ground up, which gives it incremental adaptability. The main library focuses on the ‘view layer only’ option, which makes it easy to select and merge with existing projects or other libraries. Vue also powers practical single page applications when used with supporting libraries and modern tooling.

Similarities between React and Vue

  • They both use virtual DOM, which is a virtual illustration of the DOM tree. Updating a real DOM can be quite lengthy as compared to updating JavaScript elements, because the latter is lightweight. Using a virtual DOM enables designers to create a JavaScript element as opposed to the real DOM. In case changes take place, the creation of a new DOM is effected, and the alterations between the new and old are applied to the new DOM.
  • Both frameworks support component-based architecture. This is the act of separating an application into specific elements of linked functionality. Each element has its defined method of communicating with one another. A component is a small element that forms a piece of the user interface. For instance, inside the scope of Facebook’s UI, a comment feed, chat, and a regularly updating friend list are all components.        
  • Both Vue and React come with bootstrap apps that enable developers to work easily within their development environment. In React, the build tool is (CRA) Create React App) while in Vue, it is vue-cli. Both frameworks enable the developer to get templates that have been organized as per the current best practices. CRA is an inflexible tool which limits developers when it comes to options. Developers using CRA must use Babel and Webpack outside of the box. Vue-cli is more flexible, and provides options as templates. Both CRA and vue-cli are good for developers as they present them with a modern and solid starting point before marching ahead with coding.
  • Both Vue and React come with good Chrome extensions which enable developers to debug. Developers could inspect their apps just like they would inspect any website while coming across the option: React or Vue version. Additionally, developers can monitor the state of application data and updates as they happen in real time.       
  • Both Vue and React focus on the UI layer. Functionalities, such as state handling and routing are left to companion frameworks. There is, however, a difference which comes by the way they relate to each of their companion frameworks. In React, community members under the React/Facebook umbrella maintain the react-redux and react-router in React. In Vue, the vuex and vue-router are maintained by Vue’s core team which stores them under Vue’s main umbrella.

You can find the most competitive and professional individuals on platforms like Freelancer.com to help you complete your project.

Differences between Vue.js and React

The main differences between React and Vue are that React uses JavaScript, while Vue relies on HTML. Vue has both an automatic rendering system, which is referred to as reactivity and a mutable state. Below is an in-depth coverage.

Templating

In Vue, developers are encouraged to prepare templates, using regular old HTML. This influences custom features on standard HTML components. The features can also be utilized on individual file components, but they need a build step in order to change the syntax to  valid HTML and JavaScript. Vue uses a simple Angular-style method to output active content with Mustache-style syntax. This makes Vue easy to merge into already existing apps, because developers can easily incorporate Vue templates into previously existing templates. This also makes it easy for beginners to adjust to the syntax. On the other hand, in case of React, developers are encouraged to write their template codes in JavaScript, using JSX which is defined as an extension to JavaScript.

JSX/React appears wordy at a glance. However, incorporating the use of JavaScript in the templates gives the developer more power. Developers should be aware that more power demands more responsibility. JSX is simply a JavaScript that comes with a strange XML syntax. When developers get used to using it, it gets more robust and flexible. Vue’s template takes away the temptation to add logic to components or view, which helps maintain a split of concerns. Developers should remember that unlike React, Vue does not support render functions and JSX.

Components

In Vue.js, the API method component is used to declare components. This takes arguments from a definition object and an id. Chances are high there will be both familiar and unfamiliar elements of Vue’s components.

Lifecycle hooks

Vue’s components have comparable lifecycle methods to the ones on React components. For instance, the developed hook is prompted before a component is uploaded on the page and when the component state is prepared. Vue’s reactivity system does not require shouldComponentUpdate.

Re-rendering

The initial steps on Vue involve walking through every data property, and changing them into setters and getters. Vue included the setters and getters to activate change notification and dependency tracking every time the property is modified or accessed.

Mutable state

Developers do not need a setState method to alter the component state in Vue. They only need to mutate. To change the state of a component in Vue, you don’t need a setState method; you just go ahead and mutate:

// React

this.setState({ message: 'Hello everyone' });

// Vue

this.message = 'Hello everyone';

If a value of message is altered by mutation, the setter is prompted. The set method will then activate a new value and carry out a task to inform Vue that a value has been altered. This may have implications on every part of the page that depends on it. Sometimes, it may require re-rendering. When a message is sent as a prop to child components, Vue becomes aware of automatic re-rendering. This explains why Component Update is not a necessity on Vue components.

Main template

Vue is similar to Angular when it comes to the fundamental template file. Just as it is in React, Vue requires mounting in a page. However, developers can continue to add the main index.html as it remains in the template for root component. Child component templates can also be defined in the index.html, through the use of HTML attributes such as inline-template or c-template - but this is not a good practice, because it causes separation of templates and components.

Directives

Vue, just like Angular, enables developers to improve their templates, using logic through directives. These are exclusive HTML features which come with the v-prefix. For instance, v-bind to secure expressions to regular HTML features, and v-if for limited rendering. The authorized value to a directive is a JavaScript expression. Therefore, developers can prefer to include ternary options and data properties.

Workflow

Vue has a create-vue-app which has been developed by the Vue community, which means it is not official. To bootstrap a project in Vue, developers should use vue-cli, which can generate a fully decked out Webpack and Server-side rendering project, and a simple project with an individual HTML file. While React can articulate this as well, Vue projects use fewer Es6 attributes. They also do not rely on JSX, which means they do not have to add Babel. Additionally, Vue comes with an all-inclusive library.

Developers looking forward to trying a new JavaScript UI framework can either use Vue.js or React. React is quite popular, but Vue.js is fast catching up. Each framework has its own advantages, which developers can utilize to ease their work.

Feel free to comment below, and share this article with your friends. The above guide can help developers identify the framework that meets their needs. Do you have anything to share with us concerning this topic? We would love to hear from you!

İlan Edilmiş 6 Eylül, 2017

LucyKarinsky

Software Developer

Lucy is the Development & Programming Correspondent for Freelancer.com. She is currently based in Sydney.

Sonraki Makale

Top 25 Must-Visit Personal Portfolio Websites