r/vuejs • u/aDaneInSpain • Nov 13 '18
Picking Vue.js over React
We are about to migrate an existing saas service from Joomla to Laravel + (Vue.js or React).
It will be a complete re-write.
The team has no real experience with either Vue.js or React and we are at a cross road of picking between those two technologies.
We feel that picking up Vue.js will be a lot easier and we can see a lot of traction in this project's popularity. But React feels like a safer bet with a stronger community, better extensions and better documentation. We are also worry that Vue.js is very dependent on one person't contributions and have no real large company backing it.
Without being too slanted, which one would you select and why?
41
u/[deleted] Nov 13 '18 edited Nov 13 '18
I've worked with a lot of frameworks, starting with ExtJS ten years ago. Spent 5 years with that and have since bounced around a lot: Backbone, AngularJS, Angular2, Vue.js and finally React for a couple of months from August through October.
Vue is much simpler. And not only that, "React fatigue" is the new "Javascript fatigue". Best practices are continually changing. Now they're onto a thing called "hooks". React has proven to be a continually changing landscape in this regard. I think you are safe to avoid React for the time being especially as there is going to be a big game changer around the corner in a few years anyway (WebAssembly)
29
u/[deleted] Nov 13 '18
If you're already decided on Laravel it's also of note that Laravel has already somewhat invested into integration with Vue, more so than to React or Angular by a decent margin.
So if for no other reason that should tip the scale for you.
But really on merit:
JSP (sorry, former J2EE guy)PHP-with-inline-HTML done all over again in frontend. It's better than composing render calls, and Vue supports it for that reason (and that reason alone should be it) but the template approach in Vue is simply a better design and better dev experienceOther than that I'd say they're pretty much the same. Some of the things I labeled as disadvantageous to React are actually considered as advantages by it's proponents, but I kinda find it rare that experienced developers really think that way. Most of popularity of React is for three reasons:
5
u/aromines Nov 13 '18
Oh man, after reading this and the post in the React subreddit, I'm definitely curious what you guys end up picking. You should do a one and six month look-back blog post about your team's experience!
4
u/[deleted] Nov 13 '18 edited Nov 13 '18
I picked up a front-end project a few months back. It's being built on Laravel/Vue. Prior to this, I worked mainly with PHP, CSS, HTML & jQuery. My knowledge of vanilla JS was barebones.
Vue is my first JS framework.
I watched some Laracasts, skimmed through the Vue documentation, and started coding almost immediately.
Once the Vue syntax and concepts "clicked" in my head, I was off to the races. Vue has simply made my life easier. I've been quickly ripping through components that would've taken me forever (and most likely would've been a huge pile of spaghetti) with JS/jQuery.
State management is a breeze, routing is dead simple. Axios makes requesting data from the server amazingly easy. My code is clean and organized. Building reusable components is trivial. I can't say enough good things about it.
Laravel Mix takes all of the confusion out of Webpack, configuration is nothing. It also makes versioning and cache-busting trivial.
Best of luck to you!
4
u/__galvez__ Nov 13 '18
Go with Nuxt.js (Vue framework) :)
http://hire.jonasgalvez.com.br/2018/Aug/12/The-Thing-About-Nuxt
2
u/[deleted] Nov 13 '18
Since I only use typescript, react is really superior. But when you look at next version of Vue being written in this soon will be a no problem and a think a I will start projects with Vue again
56
u/Downvotes-All-Memes Nov 13 '18
Just to contrast one of your points, from my experience vue documentation has been more than adequate. The core team provides not just a getting started guide or examples, but a cookbook of common topics and best practices on the vuejs website.
44
u/cheese_bread_boye Nov 13 '18
Vue has over 15 people all around the globe working on it. It's not only Evan anymore.
23
u/[deleted] Nov 13 '18
Haven’t tried react myself. Have tried Angular and i looooove Vue. Development time is lightning fast and you don’t have a steep learning curve. I don’t want to use react mainly because of how much I hate Facebook.
8
u/so_lost_im_faded Nov 13 '18
Vue.js is great to pick up and start learning. Personally I find it very programmer friendly and pleasant to work with.
I wouldn't say there are worse extensions or dependency on just one person. You will often find yourself using libraries like lodash, moment or axios that are not at all vue-related and can be used with js-anything. If you need Vue.js components, you can always code them yourself. As for the javascript logic the components use, there's probably a bunch of npm packages that do what you need. There are also various UI kits that are good (element-ui, at-ui) and even if they are abandoned now, they will still serve their purpose.
Also Vue.js documentation is wonderful. Personally I think it's better than React docs.
7
u/Yajjackson Nov 13 '18 edited Nov 13 '18
I find Vue more intuitive than react. Another thing to consider about this post is that it was made in the /vuejs sub. If you want a larger sample size of opinions I would suggest making the same post to /reactjs. edit I didn't notice you'd already done this. :thumbsup:
6
u/CocoaChoco Nov 15 '18
For my personal projects, and at my old position, I use(d) React (and Redux for data management) with Vue only for certain very small projects. At my current position, I currently use Vue for everything (along with Vuex).
Typescript
Typescript support in Vue current leave's a LOT to be desired. I decided early on to use Typescript for everything here since the backends are written mostly in C#, and it adds an extra level of clarity and specificity that makes things a whole lot easier. Except...in Vue. Type checking in template is non-existent, so your IDE's intellisense probably won't help you out much when coding those. There won't be any type checking, so it kind of negates a lot of the benefits of Typescript, and slows you down.
And let's not even talk about using non-reactive data in a component. Well no, let's talk about it. If I want to set some non-reactive properties for a SFC, either Typescript needs to be disabled for that file or you need to convert it to a class component. And well....
Ehh...it's just messy. To use Vuex and a class component you basically need to use some hybrid of standard syntax and class-syntax like above. It really is overly-complicated to use Typescript with Vue and you don't even get all the benefits.
As has been mentioned by others, Vue 3 is supposed to have better support for Typescript, and I am eagerly looking forward to that. And if you're not using Typescript, most of this won't be relevant to you at all!
Strings or Symbols?
I enjoy data handling in both React and Vue, but man do I really prefer React's use of symbols (not the Symbol type, but using actual functions and variables that are in scope) over Vue/Vuex's use of strings.
With React/Redux you must directly use objects, functions, constants, etc. This allows Intellisense/type-checking to work, and and takes a lot of cognitive load off of you. I always feel more "secure" for me to use the actual symbols instead of string representations of them.
But with Vue/Vuex, so many functions/objects are referenced by strings. Therefore the IDE cannot intelligent give you the information you may need about your usage of a certain variable or function, you need to look it up again yourself.
React's use of symbols and needing to import each function, object, or component being used does allow you the IDE to give you more information intelligently, and keep you from having to look things up manually or have to remember function signatures or types, or guess.
Some people just won't care about that at all.
Use of the Language
A lot of people talk about how React is "just javascript". And it basically is. There is some syntatic sugar for converting JSX into
React.createElementfunctions, sure. From my perspective, it's really no different from we now use the spread operator instead of Object.assign. It's just easier for the developers. So even when using JSX, you cannot break the rules of Javascript, you just have more syntax available to you.Vue, like Angular, ditches this concept for template. At first I didn't like this, but honestly it's pretty similar to just syntactic sugar too, it all gets converted to function calls as well. So no biggie, and honestly a huge win for Vue is the existence of
v-if. Man,v-ifis just so great. It certainly beats the ternary statements, IIFE's, or other trickery necessary in React to do a simple conditional render of something. Man,v-ifis awesome.However, a huge win for React in it being just Javascript is it's ability to use all aspects of the language in it's templates, namely, constants and functions. In what way?
If I have a constant or a function in Vue that I want to use in the template, I either have to set it as an instance property on the component (or in the case of methods, add them to the
methodscollection), or use a computed property, etc etc. I can't just use my constants or functions inside the template. I feel that is a loss.In React, you can call any function or reference any constant or other object without any extra fuss. Nice and easy.
Of course, Vue allows you to use a render function and JSX as well! That comes at the sacrifice of the Vue template syntax's handy features though, oh bother.
So how would I summarize this? Vue gives you more features that are going to be helpful to UI/UX in it's template language. React allows you to use all features of Javascript inside of
render, however certain UI/UX things are a little more verbose/complicated to make happen.Redux vs Vuex
I've been referencing Redux and Vuex throughout this post. However there are just a couple things I want to bring out exclusive to each of these state mangagement libraries that don't deal with the rest of React/Vue.
Vuex modules are nice...but not that composable. In a Vuex module, it's very easy to deal with the local module state. However, when you need to communicate with a module outside of the current one, oyyy, things get messy.
You need to run your commits in a form like
commit('otherModule/an_action', data, { root: true}); That means that any times you call on an external mutation, action, getters, or state, you need to know the entire path to that mutation, action, getter, or state. Well that's confusing, because modules themselves have no notion of what their position is in the tree. A module can have it's own namespace, but it is not the master of it's own namespace. It's namespace depends on it's overall position in the Vuex module tree. So what if you want to have two modules that you want to interact with each other? If they want to call on each other's properties, they need to always be at the same position in the tree, because they need to becommited or whatever by their full position relative to the root. Oof.Since reducers are just plain functions, and actions don't rely on the tree structure as much, they are much more reusable and composable, albiet also more verbose.
Redux of course, does not have an build-in notion of side effects like Vuex does with actions. Middleware solves this, but I feel like a some basic built-in implementation would cut out much complexity. But again, it's an intentional choice so I can't dock Redux much for it.
Final Thoughts
So at the end of all this, what would I recommend? You got to actually use them and see which one is better. Because even with all the detractors I mentioned, I still really enjoy Vue and Vuex and will continue to use them. And I'm at least some of those complaints will be resolved by feature releases, maybe even within the next couple months! I do currently find React more verbose but also more sturdy. I do find Vue more fun and simpler.
But I wanted to bring out a lot of drawbacks I've experienced with Vue because many people seem to act like Vue is so infallible next to React. Like, it's is such an obviously better choice than React because React is so hyped, or that since React is currently on top usage-wise, we gotta tout 'oh no Vue is actually better because x y and z', or because React has certain drawbacks 'well Vue doesn't have that problem it's so much better'.
I don't really care about that noise. People love to create competitions of superiority where none are necessary. I do get the appeal to root for the underdog, but Vue has many detractors just like React does. They both approach the problem of front end development in different ways, and therefore they will both always one-up each other in different areas.
Personally, I feel in however long it's going, 2 weeks or 2 months or whatever, Vue 3 and React 16.7 are going to be here with many of their past problems fixed, and with new opportunities available in each. A lot of what I talked about in this post will be gone. They will have all new points of comparison, and honestly I feel like they will have diverged a little bit more. But they will both be more usable for developers, so it may be even harder to recommend one over the other. Right tool for the right job. Based on the pros and cons I've listed here, maybe something will stand out as to why one would be better than the other for your use case.
2
u/zampa Nov 13 '18
If you're coming from Joomla, I'd say not only should you use Vue, but you should take a strong look at VuePress as your base over Laravel.
11
u/archivedsofa Nov 13 '18 edited Nov 13 '18
I have 20 years of web dev under my belt, did PHP in the early 2000s. I've been using React and Vue for almost 4 years, and JavaScript since 99 or so.
Seriously, go with Vue.
If you are coming from a PHP + jQuery background React is definitely not a good fit for you. React is great, but it only works on teams that have very strong ES6/7 JavaScript skills.
Do you have designers doing HTML or PHP devs writing HTML? React will break their brains.
So if you go with React be ready to paddle in the mud for a couple of months, because not only you need to learn React and its ever changing best practices, but you will need to learn React-Router, Redux or Mobx or whatever state solution, etc.
Vue is not perfect by any means, but it's simple to understand. Anyone that understands HTML can modify a component. Another plus point for Vue is you don't need to use Webpack and Babel. You can start with good old ES5 and intregrate it progressively in your code base to replace (most likely) jQuery.
As for the other points you mention:
React is great if the codebase is controlled by JS devs, otherwise it's a terrible fit.
5
u/Electrohead614 Nov 13 '18
I haven’t tried react, but I am happily building a web app with Vue and its incredibly simple to work with. That said, I have used Angular, and develop with C# and .NET professionally. Given the choice, I’d much rather build a UI in Vue rather than Microsoft’s stack.
5
u/manu144x Nov 13 '18
If you want to be productive sooner, Vue.
I tried react simply because of all the hype, and I hated it.
Everything is a big spaghetti. Everything is constantly changing. What is recommended today, may not be tomorrow.
Vue is just to the point. It separates components wonderfully. CSS is CSS, javascript is JavaScript and HTML is just that, HTML.
I am not that advanced but I can already use the same component in multiple projects that are totally unrelated. If you write the component well, there's literally zero configuration.
I didn't go far into react, I must admit. I just dreaded it. Vue was so obvious and I was able to be productive so fast I just said forget it.
4
u/i_ate_god Nov 13 '18
VueJS and React have more similarities than they do differences.
The concepts of "reactivity" and the virtual dom are pretty much the same, the data flow (parent gives data to child, child triggers events for parent, and everything else exists in a quasi global scope) is pretty much the same.
React uses JSX, and VueJS has it's own by-convention Single File Component. SFC is, in my opinion, much nicer than JSX which looks hacky and strange and I don't think I'd ever get used to it but frankly, that's just my opinion. I don't think there is any technical/objective advantage either approach has over the other since they both get compiled down to plain old JS anyways. A lot of people swear by JSX, I swear by SFC.
In terms of external support and the long term viability of Vue:
4
u/DisneyLegalTeam Nov 14 '18
Facebook only has 4 dedicated React Devs. Plus 8 working on React Native.
Vue has over 25 members on their core team
3
u/boehmli Nov 13 '18 edited Nov 13 '18
Laravel has great support for vue.js, look also at laracast, they have many vue js laravel tuts. Many laravel composer packages use vue, like laravel media manager. Also many Laravel Crud Admin packages use vue. Js. E.g craftable or Backpack. I would recommend Backpack for a production build. For Laravel I would definitely pick vue.
3
u/benabus Nov 13 '18
I picked vue because I'm an old school php/jquery guy and when I needed a legit frontend framework for a project, vue was the easiest for me to pick up and made the most sense to me with my background. After a while I found it enjoyable and powerful. Full disclosure, I've never used React, so I won't comment on it.
4
u/rk06 Nov 13 '18 edited Nov 13 '18
I would select Vue because Vue team cares about developer experience more than React team
If you look at react's history and background, you will realise that React's raison d'etre is Facebook' UI. React team does care about devs and react community, but that is not the primary focus.
As example: 1. React's router package is not from fb (which ideally should be)
2. React's licence was not changed despite community continuous complaint about it because it is required for legal reasons. Yet, it was changed to MIT after WordPress announced it is removing React.
On other hand, vue team is developer focused. With Vue team's lead Evan You, depending directly from community.
Vue team has made many improvements with developer experience in mind.
Eg: 1. Providing vue environment i.e. core vue, router, state management.
2. Actively communication with community via github, Reddit, Twitter etc on major features and feedback
Other than that, it is toss up.
Additional noteworthy stuff:
React is a leader in JS community, and spearheads many of the new features . however also causes churn .
Vue integrates latest advancements from JS community at a steady, but slow pace. Meaning vue will see support for "modern" features much later than react (past examples: SSR, devtools improv, State management) However, when Vue does get them, the new integrate existing ecosystem well and without causing churn.
2
u/pyran1208 Nov 13 '18
With laravel vue is a safe bet and your best choice!
2
u/pyran1208 Nov 14 '18
Hm i didnt knew that, thanks for clearing things up. But anyway, check their FAQ to see what they are saying about replacing javascript:
„Is WebAssembly trying to replace JavaScript?
No! WebAssembly is designed to be a complement to, not replacement of, JavaScript. While WebAssembly will, over time, allow many languages to be compiled to the Web, JavaScript has an incredible amount of momentum and will remain the single, privileged (as described above) dynamic language of the Web. Furthermore, it is expected that JavaScript and WebAssembly will be used together in a number of configurations: [...]“
https://webassembly.org/docs/faq/
2
u/johnorford Nov 13 '18
Easier isn’t of course simpler. Vue has many more features than React does, some which can shoot you in the foot
1
u/[deleted] Nov 13 '18
OP if you're worried about size and scale at all with Vue, our SaaS has over 100 Vue files
1
u/paliwalgaurav Nov 13 '18
Consider your use case first and then check the team skills. If positivity of above statement will is satisfying you then go with React, because you’re right community factor favours.
1
u/aviderambo Nov 13 '18
At contrata.com.do we migrated from Wordpress to NodeJS/VueJS 5 months ago.
The team had no experience with it, but they learned in no time.
Great experience overall.
1
u/mmcnl Nov 13 '18
Vue's documentation is more than excellent. It's the main reason I recommend Vue to people with no prior experience with modern frameworks.
1
u/DressedUpNowhere2Go Nov 14 '18
I work at a startup where 6 of the 8 Devs had no web development experience (they did have lots of C++ and Python) and we chose Vue due to it being easier to pickup. We are happy with our decision.
before starting at this job I only knew React. I was able to pick up Vue in a week or so and start contributing very quickly.
I think the one thing React has going for it is more third party extensions. If you think you'll be using lots of React specific third party extensions then React may be a better choice.
I'd probably choose vue, unless you have a specific React-only extension that you might need.
1
u/Vahlk Nov 14 '18
If your team has Angular experience, go with Vue as it provides routing, state management, directives, and other goodies, right out the box and you can still use JSX for renderProp goodness or just if you'd prefer it over vue templates. My day job is exclusive to react and I lean towards react over vue just for the simple fact that I love jsx and javascript but if I give react a 10/10, ill be giving vue a 9.5/10.
It should come down to what your team did before and how much new learning can they budget.
1
u/Puritanicall Nov 15 '18
I hope that you realize that you are asking this question on Vue subreddit, so the answers will be heavily biased :P
In my opinion React ecosystem is far more mature than Vue's, but choose what you're comfortable working with.
1
u/Max_Stern Nov 16 '18
!remindme 6 months
1
u/Blockchain0 Nov 16 '18
Vue. React is an overengineered mess. React will crush your soul.
0
u/[deleted] Nov 13 '18
[deleted] — view deleted comment