React and Vue: Strengths

Hello colleagues. We renew our transferable publications. Today's text announces a long-awaited new development in web development, dedicated to the ultra-modern library Vue.js. Considering that we have in our assortment three excellent books on React , as well as a book on GraphQL , this book will undoubtedly make them a good company. On the strengths of Vue compared with React - read under the cut.

Many developers like to compare React and Vue. Someone stops at one of these frameworks and stubbornly sticks to it, not even bothering to get acquainted with the other library, which was once rejected. It is often a matter of time: in order to truly master all the ins and outs of the system, you need to work with it, fight and grow.

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

There are many comparative articles on the Internet on how to create an application in the “to-do” genre or the like. with Vue and React, but real projects are rarely that simple. In a real application, you have to take care of routing, state preservation, plugin compatibility, etc.
')
I was not interested in the differences that are contained in the base part of the Vue and React libraries, but on the specifics of creating real-world applications using these frameworks. Which toolkit is more convenient, for example, when developing one-page applications?

Applications

I have been using Vue for about two years now, and have been doing web development for eight years. For the first time I tried power with Vue, I decided that I would teach her “in the open”, putting a simple note taking application into open source, where you can authenticate the user using JWT, as well as a full set of CRUD actions with notes. In a couple with 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 application koa-vue-notes on React and also put it into open source. I thought that such an experience would at a minimum expand my understanding of JavaScript, and, perhaps, find a new favorite tool for myself.

Here is the home page of my application. Above - option with React , from below - with Vue :

Although I use Bootstrap less and less in my applications, I usually embed a new Navbar component in my applications, which appeared in Bootstrap 4. Trying to repeat this in Vue, I discovered that Bootstrap-Vue is the best option for implementing Bootstrap 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 mesh in React, but stopped at the grid-styled version, 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 with his notes, create / read / edit / delete. Log in under demousername and demopassword, if you are too lazy to register.

Source Directory Comparison

First impressions

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

I adhere to minimalist tendencies and try to get rid of all the trash that I don’t need. Therefore, it is easy to understand how much React has attracted me with its cheap and angry nature.

Comparing React-Router and Vue-Router

React-Router is an actively used routing system for React. She has excellent speed, however, having dealt with it in practice, I came across some interesting problems. The basic setting is quite simple, although I’m not a fan of adverting routes directly to HTML, as is required in React-Router v4 (the situation was different in earlier versions of React-Router).

Continuing to dissect my routes, I met the following problem: how not to allow users to those pages to which they should not have access. An elementary example: a user tries to open an account type page without logging in to the system. It took more than one hour to study the situation and actions by trial and error to produce a final solution using React-Router.

In the end, I was not satisfied with how confusing and inconvenient the code turned out for the implementation of such a simple functional. Below is the code that prevents users from accessing a particular page:



Vue-Router is Vue's own routing library. I really like how there you can add additional information to route definitions right in the route advertisement file. Look at how I closed the users access to the pages in Vue-Router using the requiresAuth property in determining the route and checked the truth in the router.beforeEach function:



Now, when we look at the Vue code, it seems a bit lengthy, but this is how it is described in the documentation, so it was easy for me to configure the application. I can’t say the same about React code; there it took me a few hours to bring to mind the same solution. When an application needs to program such an essential function as not allowing users to those pages that they are not supposed to see ... this kind of work should not take a whole night.

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

I spent an extra hour on everything about everything in order to understand everything. Not the most serious problem, however, it is strikingly different from the experience that I had with Vue-Router, namely: look in the documentation and implement the solution in the code. I'm not trying to say that with Vue - not life, but a fairy tale; just in the case of React, I got the impression that the way was markedly thornier than I expected.

Comparing Redux and Vuex

Redux is the most popular Flux data repository in React. If you don’t know Flux, I’ll explain: this is a design pattern, in general, based on a unidirectional data flow, organized by dispatching actions from within the application. In other words, it keeps everything in order when you try to access data from all kinds of your components and manipulate these components.
For example, here are the files from our Redux repository, where we create an entry using actions and reducer:



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

Vuex in the world Vue is equivalent to Redux. Both libraries have in this field a truly great support of their own. Instead of reducers, Vuex uses mutations to safely update storage data. In addition to the small 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 repository library for React, inspired by the Flux principle. I had problems due to too much stereotyped code. Naturally, now that I’ve figured it all out, everything seems simple and clear, but experience suggests that it will be difficult for a newbie to work with Redux to implement a 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 a nasty twist. Of course, I spent a couple of hours thinking about whether to use redux-saga or redux-observable instead of redux-thunk. That's when my brain creaked, the feeling just can be described by the word thunk.

It was a cross-cutting theme of this project. Recall for comparison the integration with Vuex - I, for example, remember how I caught myself thinking “is it really with me?” Adjusting all this for the first time - and by that time I had not even had time to get acquainted with the Flux design pattern.

Rendering

Of all the details of React, the rendering function seemed strange to me. In Vue, it is so easy to iterate through data and spew out elements, or to display / hide data depending on state / storage variables. In React, it seemed rather unnatural that I had to create a cycle 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 bit longer and does not support, by the way, the possibility of looping through, which in Vue can be organized using v-for. But, of course, when I became comfortable with the performance of these little simple things, they no longer seemed so strange. In general, you can get used to it, just this is how it is done in React. But, it is impossible not to note how easy it is to access data in a specific page layout in Vue. It seems that in fact small auxiliary functions like React.

Styled-Components

Do you know what I like most about this project? Styled-Components . I really like the encapsulation they provide. 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 was pleasant to work. I remember one user comment that perfectly captured this thought: “it teaches you to think in advance how you will make out the components”.

I think that a good reason why a React user is really easy on this is that the design of the components was previously somewhat clumsy. I think we were a little spoiled by the whole world of Single File Components available in Vue. On this project, I was even more able to evaluate single-file components - a truly deadly good feature.

Compare the Create-React-App and Vue-CLI

I really liked create-react-app. Besides, I'm a fan of vue-cli, the create-react-app option is a worthy competitor. I recommend that all users install a Webpack instance from scratch to get the details right. But, if you need something solid for production, I strongly recommend using ready-made scaffolding tools.

Development tools

Also note: the development tools in Redux and React are definitely not as good as the Vue tools, this applies to both the design and color, and the need to reveal a giant component tree, just to see the status of the component. In this mode, it was quite difficult for me to monitor application variables.

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

Conclusion

Other things being equal, I am very glad that I spent the time studying React. I know that I am still crooked 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 you have to develop mobile applications in the future. Such an experience just does not hurt.

I could endlessly go into small things comparison. In fact, this article is only a small fraction of what can be said about comparing Vue / React. Experiment with the application - I was actively commented on it, and these tips and tricks will also be useful to you.

Bottom line: my next project I am doing on Vue. With React you can cope, but in appearance it has a slightly weaker equipment. At first glance, this may even please you, but as soon as you figure out what's what, you will immediately understand that you are writing clearly more code than you actually need.

» Link to pre-order books

The paper version will appear at the end of March.

For Habrozhiteley a 25% discount on the coupon - Vue.js