Vue,js VS React ? Thoughts and Opinions

Hi guys,

Just a general chat topic here. I’m interested in learning / using a new JS framework for building out an application for a friend. They want to keep things minimal and so I thought this could be a good chance to learn either React or Vue.js

I just wanted to hear if anyone has tried them both and could provide any pros and cons to either / or?

Thanks in advance

1 Like

Posting here so I can follow this discussion. (I don’t have React experience… yet.)

The Vue author has written this comparison against other frameworks. Good read, just take with a grain of salt since it’s the Vue’s author that wrote it.

I only have experience in AngularJS (ver1.x). But reading his comparison with Angular1, I do agree with his assessment. The html template syntax between Vue and Angular1 is very similar, and author states it was inspired by Angular1.

While Angular (backed by Google) and React (backed by Facebook) are more popularly adapted here in the US, I’ve read that Vue has caught on big in China (adapted by Alibaba, Baidu, Xiaomi, etc).

I think Vue is simple and easy enough you can pick it up fast in days…

1 Like

Yeah i have used angular 1 before and it seems quite similar, but yet much less complex. I just watched this tutorial which was a pretty good basic rundown:

It looks like a good option, but my biggest concern is that files would get messy quite quickly. Does anyone have these problems with React, especially on larger apps?

3 Likes

I haven’t had much experience with React but I’ve used Vue.js for a few small projects and it was very easy to use (especially in comparison with Angular) but probably isn’t as powerful.

with react, not the files get messu, but the project :slight_smile:
so many components…srs

1 Like

Check out this Vue.js vs React thread for my experience using the two.

Pros of Vue:

  • It scales progressively. Fine to throw it in a webpage with a CDN link like jQuery and use a single Vue instance, or you can use webpack for a large components-based single-page app. React can be done with CDNs, but really not meant to be used this way–should always be done with webpack.
  • State management library (Vuex) and router library (Vue-Router) are produced by the core team and thus guaranteed to work well together
  • Vue directives (the “Angular-like” parts) come with just enough “magic” for common needs (v-for list rendering, v-if conditional rendering, massively useful, v-model for dead simple input modeling)
  • I think single-file components (.vue files) are such a pleasant way to assess and work on components. Like mini-webpages with their corresponding vue instances. Another great thing is “scoped” attribute css in the <style></style> which keeps css in large project simpler
  • Reading through and understanding code is very much clearer in Vue because the structure vs. a React class

Pros of React:

  • More popular, so more jobs for now (and more third party libraries)
  • Currently more developed mobile native ability with React Native
  • …more maybe, but not coming to mind.
6 Likes

First I’ve heard of this. Why?

I was mostly parroting what I had heard in tutorials, but here are the docs on the subject:

On the React install page, they say you can try it out with CDN links, but “It does a slow runtime code transformation, so don’t use it in production. If you want to use it for a full application, there are two popular ways to get started with React: using Create React App, or adding it to an existing application.”

The CDN argument for Vue often references its size (the smallest of the popular frameworks after the 2.0 upgrade), see a comparison here, but beyond that the Vue.js Docs Framework Comparison, they (vetted by React team) write:

Scaling Down

React is renowned for its steep learning curve. Before you can really get started, you need to know about JSX and probably ES2015+, since many examples use React’s class syntax. You also have to learn about build systems, because although you could technically use Babel Standalone to live-compile your code in the browser, it’s absolutely not suitable for production.

While Vue scales up just as well as, if not better than React, it also scales down just as well as jQuery. That’s right - all you have to do is drop a single script tag into a page:

<script src="https://unpkg.com/vue/dist/vue.js"></script>

Then you can start writing Vue code and even ship the minified version to production without feeling guilty or having to worry about performance problems.

I think the reason Vue can do this has to do with something under the hood having to do with its templating and rendering systems, but I’ll have to dig a little deeper some other time.

2 Likes

I see. What they’re talking about in particular is the HTML file you can download to try React out. It’s set up with a client-side transpiler that takes JSX and turns it into usable JavaScript. In anything but the simplest test app, you want this transformation to happen on the developer’s computer (or, sometimes, the server) well before it hits the client. CDNs for the React library itself aren’t really the issue here, and it’s almost always faster to use a CDN for libraries rather than host the files yourself.

Yeah, is there a nice way to structure everything, like some recommendations?

With Vue, there seems to be almost no barrier to entry. Pretty much the same learning curve as jQuery, it seems.

I’m excited to try it out, mainly because I’ve been frustrated with my sluggish progress with Angular and React. Vue just makes sense to me, everything is simple and clear.

My biggest thoughts currently are how you can pass variables, functions, etc around to different components easily in order to create a fully connected app… But I mean, i’m sure there are some good tutorials out there. That being said, does anyone have some links to some good Tutorials?

The Vue.js tutorials from Laracasts, Mindspace (Youtube) are top notch.

There are things that I think are implemented better by each of the frameworks. For example, I think passing props down into components is far easier in React. While things like conditional rendering or looping look less messy in Vue.

If you’re not doing a full blown SPA, you’ll be happy with either of them.

1 Like

Yeah, it seems like a cleaner version of Angular 1. And a less hectic version of React.

Honestly, I’m excited to dive into it. It seems like a great way to transition as a beginner from jQuery and into the world of “commercial web development”.

I just wonder what companies have started adopting it and what it looks like at scale.

https://www.quora.com/How-popular-is-VueJS-in-the-industry

1 Like

@PortableStick Yes, sorry I did not mean to give the impression CDNs themselves are somehow unusable, just that a React-built app would suffer in performance if not bundled in webpack. Vue does not have this issue for smaller use cases. For a nice walk through its progressive design by the creator, anyone interested can check out this presentation.

@JackEdwardLyons One other nice thing about Vue is they have really great docs. The tutorial sites Bigghead mentioned are also good. If you want to pay for a Udemy course (wait until its on sale), I thought the Vue.js 2 - The Complete Guide was a great walk through the docs as well as scaling to a SPA with Vuex and Vue Router.

Vue is very popular in China for several reasons including there has been good Chinese documentation from the start. Most of the big companies over here have teams using it. I work at a Chinese company building a massive (2mil LOC?) SPA with Vue. It’s a lot of components, and I’m very happy with the compartmentalized CSS in single-file components (.vue files) as a result. I can try to answer any questions you might have about how it works at scale.

2 Likes

Just one question…

I love Angular 2 because you can break your code up into HTML, CSS (scoped) and the JS file itself. Can you do that with Vue, because from the tutorials I’ve seen so far, you basically put the HTML, CSS and JS all in the one .vue file.

If you could break it up, that would be amazing :slight_smile:

In the docs, you can read more about Single File Components and the advantages of using them.

Under “What About Separation of Concerns”, it says:

Even if you don’t like the idea of Single-File Components, you can still leverage its hot-reloading and pre-compilation features by separating your JavaScript and CSS into separate files:
`

This will be pre-compiled
`

I’ll be upfront in saying I don’t clearly see how that is implemented from the example, but there you are.

It’s worth noting that when you make a Vue component (as opposed to a Vue instance), it is like a custom element, and the “HTML” part is actually a template rendered as React renders JSX. Here, you’re still limited to dividing your code at a per-each-component level, but instead of one file, you have 3 files and you’re losing out on all the advantages of single-file components.

I think depending on the scale and need of your app, you could approach it either by using normal HTML and creating multiple complementary Vue instances assigned to those HTML elements as needed for data binding and interactivity, or if you have larger needs, you could use a components system and implement it as suggested above.

1 Like

Yeah I suppose it just depends on the case and scale of the app. But I don’t I should worry about that too much for now. Thank you for the help!

Just been watching this tut series too, it is really amazing how clean and simple Vue is:) Has anyone here built out there full stack projects using Vue?

Well, I have a project on my plate that needs some smart interaction on client side… I figure the time is right to jump into Vue and learn it. So I’m learning Vue as I go. Definitely, it’s easier to use than AngularJS!

What I like about Vue is I can reach into it’s data properties from outside the Vue instance! So it’s very easy to integrate to existing code.

Backstory: Client has an old site, composed of static pages. I’m converting it to a database-driven site with custom CMS. Problem is, the need to import 2500+ static content webpages into the CMS. I guess one can sit there and copy/paste the individual pieces of text into the online form (author, title, date, content, etc…). But that’s a lot of tedious work. So Vue and jQuery to the rescue!

jQuery + Vue code: Grabbing information from a Vue instance, make ajax call, and then updating the Vue data back. I love how I can mix 3 technologies on the same webpage! (C# asp.net, Vue, jQuery).


$('#fetchUrlButton').click(function(event){
            event.preventDefault();
            // make ajax call to server
            // fetchUrl.cshtml will get the webpage for us, do some cleanup and minor transformations so we get back a ready-to-use html content
            // then we just plug this html content to our Vue model and update the wysiwyg editor
            $.ajax({ 
                url: "/api/fetchUrl.cshtml",
                method: "POST",
                data: {url: app.originalUrl},
                datatype: "html"
            })
            .done(function(urlFulltext) {
                // app is our Vue object. We need to update the Vue model from here, i.e. outside the Vue instance
                app.originalUrlImported = 'Y'; 
                app.articleText = urlFulltext;
               // Manually update WYSIWYG editor's content from our Vue model
                CKEDITOR.instances.ArticleText.setData(app.articleText);   
                // alert( "success" );
            })
            .fail(function() {
                alert( "Oops, we couldn't retrieve the content of the page you requested. The page is missing, or you may have typos in the url." );
            })

1 Like