Initial state
Having worked with Vue for the majority of the past 3 years, I got very used to the Vue syntax and libraries and became ve...
For further actions, you may consider blocking this person and/or reporting abuse
I tried react but disliked the experience, it doesn't has directives or a proper separation between markup, style and logic. That's why I prefer Angular and Vue to React.
I have to admit that markup and logic are together in React, but they are together since the React's concept, so we couldn't create a library that separate them and continue to be React-like.
However, you can separate styles very well: You can put them in another file inside the same folder you put your React Component, like
SubscriptionButton/index.jsxandSubscriptionButton/styles.css. You can do that with regular CSS, CSS-in-JS or CSS Modules, besides that with SASS too. But, you could do all that inside the same component's file. The freedom of choice is yours.Therefore, you no longer have a component with 8 lines of markup and 40 lines of style, which would pollute the component and lead to creating a huge file for a component with just 8 lines of markup. Personally, I would like to say the same about Vue, but I haven't found how to do this separation in 2 files until the moment. Anyways, because of that I think it's incorrect to say that you can't separate style from the rest in React.
Well, style is the only thing you can separate properly
Actually, you can modulate everything. Take Airbnb as project patterns example.
You still have extensions like ESlint to apply these modulation patterns, and guarantee you will separate it correctly.
It's not the same as using Vue or Angular, I'd rather not have to configure a framework so it can do what others can do by default.
I must admit I disliked the experience at first, but I guess that's a common reaction to change. It took me about 2 weeks of reading and playing around with React before I really began to understand what was happening. In those two weeks, I was evangelising to colleagues about how Vue was cleaner and more organised. Do I still believe Vue is more organised? Yes I do.
But I suppose the reality is that your employment options tend to be a bigger determinant of what you should be learning than any individual developer's opinion. So React vs Vue? 🤷
Vue, I'd rather use a library/framework that has a coding paradigm I prefer. There might be more react jobs available but I don't care since I know both Vue and Angular.
I think at this point, the Hooks API has done a disservice to the JS developer community in teaching anti-patterns. There's so much sloppy code out there with the multiple nested hooks I keep seeing. I mean, we're treating functions like classes when we should just be using React classes in the first place. If we have to keep using functions, I'd rather continue using Redux, given its readability works better with React's one-way data flow style
This comparison focuses on the 'Options' API of Vue 2. I am interested in your thoughts on Vue 3 using the 'Composition' API (and script setup) which feels, in some ways, closer to React hooks with some of Svelte's conciseness thrown in.
Nice write up of your experiences!
Tbh, I haven't had the opportunity to work with the Composition API. Correct me if I'm wrong, from what I understand the Composition API does not remove the Options API functionality. It is an additive feature that helps developers to break up complex components into reusable hooks (as you say very similar to React hooks). If so, the glossary above is still relevant, the only difference being that each map maps to both the Vue option and the equivalent API within Vue composables.
I personally am a fan of React hooks. I write quite a few custom hooks of my own and if Vue composables are as flexible as React hooks, and I'm sure they can be written to be as flexible, then I'd definitely be using composables where appropriate.
Haven't tried Svelte out yet but just going through the getting started guide, it looks like a framework that's even closer to vanilla HTML/CSS/JS than Vue is. Will definitely spend some time on it when I can!
Correct, you can use both the Options API and the Composition APIs in the same app.
There is a community library that brings together many common composables for easy re-use. Having used it in a couple apps, I can say it's wonderful and really proves out the way they've been designed for Vue 3.
vueuse.org/functions.html
Here's some examples of the
<script setup>syntax, which I've also adopted and found to be great for removing boilerplate.v3.vuejs.org/api/sfc-script-setup....
Nice article i have tried to learn React but because of it's confusing syntax i stopped and started learning Vue and i am glad that my decision was right.... as Vue is a Great Framework and it should be used more then react to increase it's power with it's simplicity
Another huge advantage of Vue is that you can use a react-like render function if you have a complex component.
React forces you to use render by default so lots of simple components are built with spaghetti JS blocks.
I worked with Vue for several years (and still do on my spare time, utilizing latest features). And have to work with React for a year now.
Not sure how React development may be any faster.
Also, that hell of a mix of logic and template in JSX.
No out of box caching of components (no, keys don't keep you from re-render, even if props don't change).
No out of box reactivity. Vue tracks dependencies for you. React wants you to track dependencies yourself. This often leads to bugs.
I am forced to either extract styles to a separate file, which I hate to do, as I love to keep all the component's stuff in it's file, OR to use some you-name-it library, as React doesn't support it out of box.
At least, there's MobX to save us from Redux hell, where you need to fight a dragon to make it work with async/await, and it's boilerplate, low performance and GC overkill.
I will never-ever use React to start my own project. I prefer using tools with no boilerplate. Tools, that don't make me fight them or overload with tons of libs to make them work the intended way.
Vue definitely is the apple of my eye. Provide/inject, composition API, script setup, upcoming with RFC, but already utilizable $ref() and $computed(), Pinia. I never met better DX.
Honestly, I hate it when my company picks React for a project just because "there's more React than Vue developers out there". Of course there are! Because of such company decisions. It's inertial popularity of a more complex tool, that doesn't offer any real benefits (please correct me if I am wrong, I haven't yet met anything in React that Vue couldn't do with same or less effort). Please don't use popular tools. Use better tools and make them the popular ones!
I used to be quite fanatical about VueJS and disliked ReactJS. But after using both for awhile, I realize that it is not really the language.
Poor implementations of either framework can lead to bad developer experiences.
You need to be careful about major version changes too, e.g. VueJS 2 to 3, plugins build for version 2 most likely would not work for version 3, but guess what... you actually do not need to use those plugins... e.g. instead of vue-leaflet, just use leaflet directly...
For ReactJS, have to be careful on things like HOC, if you wrap many layers, changes and fixes will be painful. However, It was fortunate that Class and Hooks components could work in same code base.
I've been using React for a long time, and I totally agree with the 5 five struggles you mentioned here.
I'm currently learning Vue, and I find it to be so much more self-explanatory than React. In addition, React has way more boilerplate code (such as the work you have to do in order to achieve two-way binding), which makes it harder for beginners to understand.
I can not wait to discover more about Vue in the following days. So far, I've found multiple upsides over React (even though React has its own ones) and I have no doubt that the list will continue to expand. 🙌🏻
For me one of the biggest pain points when moving from Vue to React is the lack of
<v-for>,<v-if>and the like.Well, it shouldn't be a pain. In React you just need to use JS features like
mapandifto do the same you used to do with<v-for>and<v-if>. The main difference is that by one hand Vue re-invented the wheel throught providing his own style to do ifs and loops, by the other hand React use native features that already exists in JavaScript.I think this barrier of how to do loops and ifs should be lower because you don't have to learn the features that the framework has created to do this because you already know them in JS.
Thanks, this a great article, i use vue but i would like to learn react at some point.
Great writeup!
Yep, according to my experience with development of integration libraries for both React and Vue I have to say I would go for React as well. :)
Precise and objective very good comparison, Cheers!
nice bro, can you visit my blog? here : bit.ly/3lcmNJd
Great article, thanks! Though I have to say I feel stressed just reading it, let alone diving in and attempting any code 😬
It's always so daunting at the start, but so rewarding when you feel like you've hit certain milestones.
React is difficult to learn for the first time but When we clear about it and combined it with typescript it very powerful, freedom and fast in development.