Same Application in React and Vue, Which one is better?

This post is a english version of another one made by myself on Medium. The original post is in Brazilian Portuguese and can be found here:

https://medium.com/sysvale/semana-omnistack-10-frontend-em-vuejs-35eea549c211

Omnistack Week

The Omnistack Week was an online event hosted by a Brazilian tech company, Rocketseat.

The challenge of the event is to implement a Fullstack Javascript application using the most relevant technologies at the time like React, Node with Express and React Native.

The application developed on the 10ª edition of the Omnistack Week was a "Developer Finder". An web app that lets you show to people searching for developers what are the technologies that you work with and you location. With an Mobile App the shows a map with previously registered developers

My Personal Challenge

I re-implemented the web application in Vue, witch was written in React. Why? I wanted to compare the development experience in each one of that frameworks.

It goes like this. Using the same libraries and CSS I "translated" the application's logic to Vue.

Following, I write about every step of the development.

The final result and the source code of my version are in repository below:

https://github.com/esron/semana-omnistack-vue

CLI Tools

There is little to no difference bewteen create-react-app, the React CLI, and vue-cli, booth are easy to use and install, the only relevant difference is that create-react-app comes with more boiler plate code.

The initial product of both tools is an application pre-configured with linter and hot-reload.

What there is in common?

After creating the application's basis using vue-cli I organized the structure and created the components files, still empty. I reused the api.js file in the services folder. Finally, for the preparation, I erased some of the boiler plate code.

From that the modifications where guided by the practices of framework Vue.

Diferences in template

I believe that this is the fundamental difference between React and Vue: what you hear around is that React is HTML inside of Javascript and Vue is Javascript inside of HTML. See why:

This is the template base code in React:

Using the JSX syntax it is possible to transform the React components in HTML tags, like what we can see with the <DevForm> and <DevItem> tags.

In the following example I bring the application's root in Vue:

The application's template is fitted into the <template> tags.

We can see now that, in Vue, we program the behavior of a template while in React we program what is returned in a function.

Now I'll explore the differences in the form implementation.

Differences in DevForm

I'll put only the code snippets for the DevForm component that show the differences that I find more relevante for this comparison. Begging by the inputs and the form tag.

class is a reserved word in Javascript, so, in React, the class attribute in a HTML element is changed to className, also is importante to notice the use of camelCase in the attributes. The events are connected to function declared in the script. For example, the handleSubmit function is connected to the submit event through the onSubmit attribute.

The handleSubmit function calls the onSbmit function that was passed as a prop in the DevForm component, like is shown below:

This way of programming the functions highlights the characteristics in React of being "HTML in Javascript".

I also want to emphasize how React manages the states of text inputs.

In general lines, using the useState function we are connecting the setGithubUsername function to the githubUsername variable value. To evolve the application state it is necessary to use that function and that variable in the input like is shown below:

In my opinion, that makes our code more bureaucratic and boring to write, in compensation, highlights the use of functional programming what gives more confidence to modify the variables values.

Something that called my attention was the way we access the Browser geo-location functionality as soon as the page loads:

The useEffect function executes the function passed as parameter when some event is triggered in the list passed as the second parameter, if an empty list is passed then the function is executed once when the component is mounted.

Now we are going to explore how this is made in Vue. Again, showing the snippet equivalent to the form tag and the input that controls the githubUsername variable.

Unlike React, Vue is written in HTML, and the basic structure of a Vue component is made up of three HTML tags:

<template>
  <!-- ... -->
</template>

<script>
  <!-- ... -->
</script>

<style>
  <!-- ... -->
</style>

Well, not exactly HTML, but utilizing the HTML syntax.

The connection between the submit event and the handleSubmit function is made using a special syntax in Vue: @submit.prevent=handleSubmit where @ is a shortcut for v-on:, to see more details you can look up the documentation of Vue. The prevent modifier is equivalent to call preventDefault() in the submit event.

The handleSubmit function then is mapped in the methods object inside the component:

Another relevant difference between React and Vue is the component API. While in React everything is communicated trough props, in Vue a component receive props and emits events. In our case, we emit an submit event to the parent component of DevForm sending the values of every field, and soon after, we clear the variable github_username and techs.

It is possible to notice that, by the last few steps in the function, another difference in both tools: in Vue it is possible to alter the state variables in the component directly, provided they have been declared in the data() function as follows:

Remembering that what links the variable github_username to the text input is the v-model property applied to the input, which is a shortcut to do a two way data binding.

The latitude and longitude initiation is made by life cycle hooks, that are self explanatory:

Using the life cycle hooks makes the execution of this tasks more clear, in my opinion.

I believe that I already have described the main changes in the DevForm component. Now, let's analyse the more relevant differences in the DevItem implementation.

Differences in DevItem

The DevItem component is more simple, it is only for presentation of data, therefore, it doesn't have any logic, conditionals or loops. It's receives as props an dev object and shows the properties. See the code in React:

Now the code in Vue:

There is little difference in the implementations, in this case. But I would like to emphasize the Vue binding syntax in the properties of the dev object using the : shortcut.

Differences in Root Component

We can now go back to the Root component to show some of the differences that caught my eye the most, the iteration in the devs list to create the DevItem components.

Se the code in React first:

Here we literally iterate trough the devs list using map and returning an DevItem for each iteration.

Let's compare with the Vue code:

Here we make use of the v-for directive to iterate trough the devs list in a more transparent way.

This difference shows that in Vue we are implementing a layout's behavior while in React we insert a layout in Javascript code.

Conclusion

I believe that the "dev experience" in Vue is more pleasant in general terms. The components API and the syntax are more intuitive. Organizing my components in only one file is more conveniente.

That, and by the reasons that I showed above, is why I often choose Vue as my frontend framework for applications in Javascript.

I wish to point out that this article is my opinion, if you don't agree on that, want to compare with other technologies or want to give your opinion you are welcome to use the comments o contact me directly by Twitter or by email in esron.silva@sysvale.com.

Thank you for your attention.