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:
The Omnistack Week was an online event hosted by a Brazilian tech company, Rocketseat.
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
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:
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.
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.
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
In the following example I bring the application's root in Vue:
The application's template is fitted into the
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.
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
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
handleSubmit function calls the
onSbmit function that was passed as a prop in the DevForm component, like is shown below:
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:
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
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:
@ 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.
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
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.
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 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
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
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.
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.
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 firstname.lastname@example.org.
Thank you for your attention.