React and Vue: Strengths

Hello colleagues. We are renewing our translated publications. Today’s text announces the long-overdue web development novelty dedicated to the cutting-edge Vue.js. Considering that we have three excellent React books and a GraphQL book in our assortment , this book will undoubtedly make them a good company. On the strengths of Vue compared to React - read under the cut.

Many developers like to compare React and Vue. Someone stops at one of these frameworks and stubbornly adheres to it, without even bothering to get acquainted with another library that he once rejected. It is often a matter of time: in order to truly master all the inputs and outputs of a system, you need to work with it, fight and grow.

Of course, spraying between similar tools is inefficient, but aren't you curious? I am curious.

There are many comparative articles on the Internet on how to create an application in the genre of “to-do list” or the like. with Vue and React, but real projects are rarely so simple. In a real application, you have to take care of routing, maintaining state, plugin compatibility, etc.

I became interested not in the differences that are contained in the base of the Vue and React libraries, but in what are the features of creating real applications using these frameworks. What tools are more convenient, say, when developing single-page applications?

Applications

I have been using Vue for about two years, and have been doing web development for about eight years. For the first time having tried my strength with Vue, I decided that I would study it “openly” by putting in the open source a simple application for taking notes , where it will be possible to authenticate the user using JWT, as well as a full set of CRUD actions with notes. In couple to him, I wrote a backend application made using Koa.

Although I did not feel the urgent need to change the framework, I reasoned that it would be nice to learn React. Therefore, I redid my koa-vue-notes application on React and also posted it in open source. I thought that such an experience would at least expand my understanding of JavaScript, and maybe I could find myself a new favorite tool.

Here is the home page of my application. Above - Option CReact , from the bottom - with Vue :

Although I use Bootstrap less often in my applications, I usually implement the new Navbar component introduced in Bootstrap 4 in my applications. Trying to repeat this in Vue, I found that Bootstrap-Vue is the best option for Bootstrap implementations 4. In React, my experiences and research led me to reactstrap .

In this case, it should be noted that in the end I did not use the Bootstrap grid in React, but settled on the grid-styled option , which was better combined with the styled-components used by me - more on this below.

In the application, you can perform signup / login / forgot / reset operations with the user, and create / read / edit / delete with his notes. Log in under demousername and demopassword if you are too lazy to register.

Comparing directories with source code

First impressions

When working with React, one thing immediately becomes apparent: you have to deal very closely with JavaScript.

I adhere to minimalist trends and try to get rid of all the trash that I do not need. Therefore, it’s easy to see how React attracted me with its cheap and angry nature.

Compare React-Router and Vue-Router

React-Router is an actively used routing system for React. She has excellent speed, however, dealing with her in practice, I came across some interesting problems. The basic setup is quite simple, though, I'm not a fan of declaring routes directly in HTML, as is required in React-Router v4 (the situation was different in earlier versions of React-Router).

Continuing to dissect my routes, I encountered the following problem: how to prevent users from accessing pages that they should not have access to. An elementary example: a user tries to open a page of type account without having logged in. It took several hours to study the situation and actions by trial and error in order to give a final solution using React-Router.

In the end, I was not happy with how confusing and inconvenient the code was for implementing such a simple functionality. The following code blocks users from accessing a specific page:



Vue-Router is Vue's own library for routing. I really like how there you can add additional information to the route definitions directly in the route declaration file. See how I barred users from accessing pages in Vue-Router using the requiresAuth property in the route definition and verified the router.beforeEach function:



Now, when we look at the Vue code, it seems a bit voluminous, but that's exactly how it is described in the documentation, so it was not difficult for me to configure the application. Can't say the same about React code; there, to bring to mind the same solution, it took me several hours. When an application needs to program such an essential function as preventing users from accessing pages that they are not supposed to see ... such work should not take a whole night.

Further, when I tried to collect some data from the Edit page by URL, I found that in the latest version of React-Router this feature was removed. It ... disappointed me. I think I understand why this was done: the data in the query line comes in all kinds of forms and forms, but, let me, if it’s impossible to take a parameter by URL, it’s somehow too much. I had to download the qs library to parse the URLs correctly, and it also found its procedural quirks. A detailed discussion is here .

I spent an extra hour on everything about everything, to figure it out. Not the most serious problem, however, it is very different from the experience that I had with Vue-Router, namely: look in the documentation and implement the solution in code. I'm not trying to say that with Vue - not a life, but a fairy tale; it’s just that in the case of React, I got the impression as if the path turned out to be noticeably more thorny than I expected.

Comparison of Redux and Vuex

Redux is the most popular data warehouse in React, built on the Flux template. If Flux is unknown to you, I’ll explain: this is a design pattern, in general, based on a unidirectional data stream organized by dispatching actions from within the application. In other words, it keeps everything in order when you try to access and manipulate data from all kinds of your components.
Here's an example of files from our Redux repository where we create a record using actions and reducer:



Basically, the idea is this: we dispatch actions to trigger reducers that safely manipulate data from the repository. In this way, each component can safely read data and respond to changes in it.

Vuex in the Vue world is equivalent to Redux. Both libraries have truly excellent support in this area. Instead of reducers, Vuex uses mutations to securely update storage data. Besides minor differences in naming, both libraries are very similar. Below, I implemented the same functionality in the Vue application in src / store / note.js (of course, both examples are slightly reduced):



Honestly, Redux seemed to me to be a useful and powerful storage library for React, inspired by the Flux principle. I'm having problems due to the extra stereotyped code. Naturally, now that I’ve figured out everything, everything seems simple and clear, but experience suggests that it will be difficult for a newbie to use Redux to implement clear and concise code for React.

For example, you have to study and install the redux-thunk library to dispatch actions from other actions, and for me it was an unpleasant turn. Of course, I spent a couple more hours thinking about whether to use redux-saga or redux-observable instead of redux-thunk. Then my brains creaked, the feeling can just be described with the word thunk.

This was the cross-cutting theme of this project. For comparison, remember the integration with Vuex - for example, I remember catching myself thinking “is this really with me?”, Setting up all this for the first time - and by that time I had not even managed to get acquainted with the Flux design pattern.

Rendering

Of all the React details, the rendering function seemed the strangest thing to me. In Vue, it is so simple to iterate over data and spew out elements, or show / hide data depending on state / storage variables. In React, it seemed rather unnatural to have to create a loop of notes outside the renderer.

In Vue, if you want to show or hide something, just do this:



and this code will depend on the truth of your myVariable. In React, apparently, you have to do this:



The code is a little longer and does not support the current possibility of looping, which in Vue can be organized using v-for. But, of course, when I got used to doing these little simple little things, they stopped seeming so strange. In general, you can get used to it, just that’s how it is done in React. But, it should be noted how easy Vue has access to data in a specific page layout. React seems to be really small helper functions.

Styled-components

Do you know what I like most about this project? Styled-Components . The encapsulation they provide really impresses me. Yes, in Vue you can pin the scoped property in the section of your component and, in principle, do the same.

There was something really smooth and pleasant about how each component turns into a small “thing in itself”. There are some difficulties with the transfer of arbitrary properties (props), but having settled some details with them, it became pleasant to work. I remember one user comment that perfectly grasped this thought: “it accustoms you to think ahead of time how you will design components.”

I think the good reason why the React user is really easy to get into is that the design of the components was a little awkward before. I think we got spoiled a bit by the whole world of Single-File Components available in Vue. On this project, I was even more able to appreciate the single-file components - a truly deadly good feature.

Compare Create-React-App and Vue-CLI

I really liked the create-react-app. While I'm a fan of vue-cli, the create-react-app option is a worthy competitor. I recommend that all users install an instance of Webpack from scratch in order to understand the details. But, if you need something solid for production, I highly recommend using ready-made scaffold tools.

Development tools

I also note that the development tools in Redux and React are definitely not as good as the Vue tools, this concerns both the design and color, and the need to open a giant tree of components, just to see the state of the component. In this mode, it was pretty hard for me to monitor application variables.

Maybe I'm missing something or using a version that is not currently considered a valid standard in the community. Vue tools seem to me, without exaggeration, amazing, worked well and conscientiously, as well as visually pleasing. Considering how much time you have to spend working with these tools, you will understand how important these small details are.

Conclusion

Other things being equal, I am very glad that I spent time learning React. I know that I am still a krivoruk both in working with him and in programming in general, but at least now I have mastered some complex things and got acquainted with concepts. I also plan to try React Native, in case I have to start developing mobile applications in the future. Such an experience will definitely not hurt.

I could endlessly go into a comparison of little things. In fact, this article is only a fraction of what can be said about the Vue / React comparison. Experiment with the application - I have been actively commenting on it, and these tips and tricks will come in handy for you too.

Bottom line: I am doing my next project on Vue. You can deal with React, but it looks a bit weaker. At first glance, this may even please you, but as soon as you figure out what's what, you will immediately realize that you are writing clearly more code than is actually necessary.

» A link to pre-order books The

paper version will appear at the end of March.

25% off coupon for hawkers - Vue.js