Same Application in React and Vue, Which one is better?
Tags: javascript, refactorit
Published: 2020-06-07 01:29:33

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:

![Base template React code](https://dev-to-uploads.s3.amazonaws.com/i/a0mp3jprjvz45ahwvuo9.png)

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:

![Base code for the vue template](https://dev-to-uploads.s3.amazonaws.com/i/xnhydhk4mrck3xhkudhw.png)

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.

![DevForm written in React](https://dev-to-uploads.s3.amazonaws.com/i/zizkagcpimrb2fo3fcoo.png)

`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:

![HandleSubmit function linked to component in React](https://dev-to-uploads.s3.amazonaws.com/i/1ai46lsyrrcfw001pal7.png)

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.

![State management in React](https://dev-to-uploads.s3.amazonaws.com/i/sj81dx5yqmb0426q0ftn.png)

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:

![Github username bidding example](https://dev-to-uploads.s3.amazonaws.com/i/1qv93px22nw06phsdofp.png)

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:

![UseEffect function usage to get browser geo-location](https://dev-to-uploads.s3.amazonaws.com/i/5fr2nvc823zpw52c6yc5.png)

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.

![DevForm code snippet in Vue](https://dev-to-uploads.s3.amazonaws.com/i/l0adqfgis1ta3wk2w4au.png)

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

```html
<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](https://vuejs.org/v2/api/#v-on) 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:

![Methods object in Vue](https://dev-to-uploads.s3.amazonaws.com/i/eqphit4uji9jsvto7x8k.png)

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:

![Data function in Vue](https://dev-to-uploads.s3.amazonaws.com/i/zvt13rkg4cae6tcpakgk.png)

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](https://br.vuejs.org/v2/guide/forms.html).

The `latitude` and `longitude` initiation is made by [life cycle hooks](https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram), that are self explanatory:

![Mounted method implemented in Vue](https://dev-to-uploads.s3.amazonaws.com/i/3ayrgjq7u050cqlny9i0.png)

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:

![DevItem component implemented in React](https://dev-to-uploads.s3.amazonaws.com/i/00gltw5ehjp7safgrsaj.png)

Now the code in Vue:

![DevItem component implemented in Vue](https://dev-to-uploads.s3.amazonaws.com/i/829qbabahqpqu781vonz.png)

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:

![Snippet of the iteration in the devs list implemented in React](https://dev-to-uploads.s3.amazonaws.com/i/829qbabahqpqu781vonz.png)

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

Let's compare with the Vue code:

![Snippet of the iteration in the devs list implemented in Vue](https://dev-to-uploads.s3.amazonaws.com/i/ut5skgm9y1h9btxax9z0.png)

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](https://twitter.com/OEsron) or by email in esron.silva@sysvale.com.

Thank you for your attention.