Vue 3 Beta (opens in new tab)

Vue is kinda the unofficial successor of Backbone.js, Angular 1 and friends. You write templates mixing HTML and Vue syntax that you bind to DOM elements. You can pass data and event handlers to your templates. You separate your markup, your CSS and your JavaScript like you have always been doing. It just works. Pretty easy and quick to get started, even without a big programming background.

Meanwhile, React lets you write your UI with JavaScript functions, which is completely different from anything I've seen before. You develop a bunch of functions and reuse them everywhere. Since functions are first-class citizens in JavaScript (i.e. you can pass a function as argument to a function and a function can return another function), there are pretty cool patterns in React. Like functions that enhance or inject styles or logic into your components (which are just functions too). This offers a lot of composability and reusability options to design and code your applications. (personal tip: Add TypeScript and VSCode on top of it to make your productivity skyrocket)

They're pretty similar, but Vue enforces structure and good patterns early on in the development cycle. React gives you more freedom.

I've been a consultant using both for over 3 years now, full time and I can tell you I just use Vue these days. Everything is more readable, well-organized when the project is finished. You could do the same with React too, but it puts the mental burden on you.

I think performance-wise as well Vue is faster (it used to be). Not that it matters a lot. But, if you are a company, it's easier to find React developers than Vue developers.

Also, in big company environments, teams using React always end up in messy code that's not maintainable because of the freedom the framework gives as opposed to teams using VueJS.

So you need to pick the one that fits your use-case.

They're pretty similar. I prefer React because the JavaScript-first approach is much better for large applications. It leads to a smaller API while simultaneously giving you more control over how things work. Also Vue has a lot more magic to it which you might care about on a large project.

The use case I recommend Vue for is when you just want a quick drop-in solution. For any serious development I stick with React.

Very very roughly:

Vue tries to keep code and HTML separate.

React says "everything is code".

Having spent years in the old "MVC html template framework" world, I used to be in the former camp. But nowadays I find JSX/TSX incredibly convenient. It's nice that a component is represented by a single javascript(ish) language.

I think it's just easier to ramp up in Vue.js than in React. The Single File Component approach is easy to grasp for beginners since it just looks like an HTML file with three main tags: template, script, style.

You might find useful information here: https://phabricator.wikimedia.org/T241180

(The Wikimedia Foundation describes why they went with Vue.js instead of React or other competing libraries)

I started a project in Vue and strongly regret it. At some point I would like to switch to React.

The biggest reason is that React works properly with Typescript. Vue can't type check anything in your templates, you can't type check Vuex (its state management system), you can't type check injected dependencies. Everything is strings. This means you'll spend a lot more time chasing down runtime errors and writing tests than with React. A lot more time.

Other differences:

* React doesn't have events, but frankly you should not use them in Vue either - use callbacks instead.

* CSS has to go in a separate file in React. That is a little annoying to be honest.

* React has an API split between traditional class-based components and function-based components ("Hooks"). They say to use Hooks in new code but I've seen some things that are really awkward to do with Hooks. Still you can just use class-based components if you like (same as with Vue).

* The React NPM package has something like 5 dependencies. Vue has something like 1000. It's basically impossible to avoid the NPM insanity if you use Vue.

* React has better documentation. Not that Vue's is bad, it's just not as extensive as React's.

* React is way more popular. Easier to hire people to work on it, bigger community to get help from etc.

* React has better tool support. Everything supports JSX/TSX. Not many things support .vue files. For example if you define a type in a .vue file you can't actually import it from any other Typescript files. Quite annoying.

There are probably other things I've forgotten. If you're using the class-based React approach then yeah they are quite similar; React is just much better engineered. If you are using React Hooks then it is quite a different approach to Vue.

For me Vue biggest advantage is it's simplicity. I haven't learned much about Vue 3 yet but Vue 2 can still run the good old jQuery way and all you need is a script tag (no weback, etc). Also I find the syntax super easy and minimal.

A valid vue component can be as simple as {template: <div>{{1+1}</div>'}

Ofcourse you can extend it all you want and it even comes with its own cli but the fact they've managed to keep things so simple is what I love most about it.

Superficially the first thing that most developers I've spoken to notice is JSX vs HTML-based templating. But both frameworks are very similar. I started with Vue and when I took a job which used React I found that I already knew how things worked.

Beyond that, I would say the biggest difference between the two is that Vue is the scope of the framework. Vue includes much more in the framework itself and as first-party helper libraries whereas React relies heavily on third-party packages of which there often many competing options and which one is used varies from company to company and project to project.

They achieve similar goals, it's all about how they go about that.

React is pretty opinionated; it wants you to do things a certain way. There's a very good reason for that way too: Facebook arrived at that opinion after solving some serious real-world problems.

Vue seems to steer around any strong opinions. It feels like something that the W3C would have come up with, it feels like it belongs in a browser. You can use mostache-like templates (which approximate web components), or you can use JSX, or you can use no-frills raw JS (which really set it apart for something I was solving).

It is mostly aesthetic parameters. There are functional parameters, but you're in rare company if you care about them.

For my uses Vue is actually much more friendly towards non-standard environments but that’s never been a selling point it’s just a bonus. I heavily use TS, Components, and VueX so Vue 3 here looks pretty good to me. I’ve seen more devs in my shop take a liking to react due to it being slightly more mainstream. Vue doesn’t offer an OOTB solution to everything as much as react does but the other side of the coin there is that it’s more adaptable to uncharted territory. I think for devs out there that just desire a few things and they’re ready to start coding Vue is the perfect framework.

I've worked extensively in both. In my opinion:

Vue embraces web technologies. JS is to enhance your HTML.

React is a javascript-first, FP-first mentality.

Minor point: vue benchmarks slightly faster these days. The react runtime has gotten pretty thick.

For larger applications using JSX together with Typescript means you get type checking in model code and view code. For that reason alone I'd go with React for bigger apps.

I like that I can embed a bit of vue code into an existing web page. Bit like old school javascript. AngularJS 1.x was like that too and the inspiration for Vue. React/Angular require a whole build process with NPM/webpack etc etc to create a SPA.

React is more popular, which is a gift and a curse. It leads to a lot of amateur coding, which is quite bad, but if you just want to glue something together, you can find the parts.

Vue itself is both smaller and more full featured than React. To make a working React you need to add a lot of parts (React DOM, CRA, Redux, React Router, CSS in JS…) which are often only semi-official, whereas Vue has solutions either built in or officially supported.

I honestly wouldn’t recommend React per se to anyone who has a choice, but it’s good to be familiar with it to get a sense of how the trends are moving, and they often have ideas that inspire (built in or officially supported) parts of Vue.

When anyone I talk to asks me about developing modern web pages, I point them to Vue, and they have all come back with praise for it. I can't imagine doing that with React or Angular (I'm in the middle of a pile of Angular wishing I was somewhere else). The learning curve and simplicity, to me, is the number one killer feature of Vue.

React can make people better javascript developers.

React itself is written in Flow, but the React team doesn't make any official recommendations as for language or static type syntax to use.

That said, a recent survey of /r/reactjs readers [0] showed 50% using plain JS, 48% TS, and only 2% using Flow . Given that the React ecosystem probably has the most Flow users, I'd say it's safe to describe Flow as dead.

From my viewpoint, TS has more than hit enough critical mass to survive for the long term:

- Microsoft is heavily invested in its ongoing development

- The Angular community requires use of TS

- Per that stat, it's reached solid adoption in the React community (see guides like the React+TS Cheatsheet [1])

- Where CoffeeScript introduced new syntax entirely, TS's focus on being a superset of standardized JS means that there's both less to worry about compat-wise _and_ it can be seen as a way to use new language features instead of Babel.

So, seems like it's going to be around for a while.

I wrote up my thoughts last year on my own experience learning and using TS from both an app dev and library maintainer's perspective [2].

[0] https://www.swyx.io/writing/react-survey-2019/

[1] https://github.com/typescript-cheatsheets/react-typescript-c...

[2] https://blog.isquaredsoftware.com/2019/11/blogged-answers-le...

It's important to remember that there are still a lot of front-end folks who aren't interested in application engineering, but still might find these frameworks useful. For those kinds of people, static typing is a harder sell.

For anyone else, yeah, they should probably be using TypeScript in 2020.

The tooling for Typescript still isn't good enough to claim that accolade. There are still combinations of libraries, linters, editors, and frameworks, that throw opaque errors that will roadblock students and junior developers significantly. Ultimately until browsers can accept Typescript directly without a compilation step it will remain a second-class citizen. Until then, all of Webpack, gulp, parcelJS, problems and inefficiencies are Typescript's problems and inefficiencies.

It's not fair - Microsoft and co. have done a tremendous job with the implementation and documentation of Typescript. But the reality exists nonetheless.

I think TypeScript already won around a year ago.

Probably not. The numbers I’ve seen suggest that far less than 5% (I think it was 2%) of websites use a library like react, Vue, or angular. Of course, you can use Typescript on its own, but if you are using Typescript, chances are you are also using one of the big 3.

I think it's worth clarifying that Vue 3.0 won't require you to use TypeScript. I think the way to think about this is that tooling will ideally improve for a lot of JS devs regardless of whether they decide to use types or not.

I don't get the hype. We wasted a lot of time fighting the compiler and warnings and errors, and then falling back to `any` and by then, why not just use Javascript the way God Himself intended.

For those interested in static tying for SPA's and Web applications it seems to have won.

That doesn't mean everyone needs to use it.

Totally agree.

I've used Vue, React, Preact, Mithril, Inferno, Imba, and Angular for the past 6 years. I started doing front end in the late 90s btw.

I tried Svelte for a small project last year and liked it. A couple of weeks ago I evaluated it more seriously and decided to go with it for my current big project.

I was initially attracted to Svelte by the performance and small bundle sizes but was concerned about all the custom syntax, single file components, and the pragmatic magical approach. But oh boy after using it for a couple of days you become super productive really fast. I think this is actually its best feature.

Apparently scheduling/skipping renders is hard with this approach, since render function gets compiled away and becomes hardcoded DOM calls in the result bundle. React with Suspense takes a different approach here and allows to suspend renders, skip slow renders (I think) till they're ready, prioritise keyboard input, etc.

It's essentially a similar tradeoff as in AOT vs JIT. Even though AOT brings the compilation step forward, JIT would have much more runtime context for better performance.

I’ve been using Svelte for nearly all my personal projects for a while and I absolutely love it. The only thing I really wish it had was typescript support, which I think is in the works.

> The approach of using a compiler instead of a framework makes a lot of sense

I agree, I wish it wasn't an entire framework though and more of a front-end library like react. I've learnt long ago not to invest too much into a single tool.

Curious that Vue threads on HN always have some upvoted post about svelte

I don't think so. This is the nature of software.

The first version jumped right in and solved an immediate problem. Even with the best foresight possible the designers simply could not see all the problems they would run into.

Or even if they did, sometimes pragmatism forced fixing issues down the road.

After doing this for over 20 years (I build software coders/designers/laymen use) I am really impressed with how well Vue was designed to start with, and the migration path (at a glance) looks nearly painless from v2 to v3.

It actually not very different in its core(except the transition to Proxy). In fact, you can already do that on vue 2, just you are unlikely to.

Put method in data or prop? It actually works, but why would you do that when there is a field called `methods`?

The setup method seems like a slightly enhanced data() that allow you to place things in a more free way.

I think the original plan was to eventually phase out the Options API, but the community pushed back during the first RFC phase resulting in the dual API solution.

Although the benefits of the Composition API are clear-cut, the Options API is beloved by the community for its ease of use and clarity. For me personally, it will be hard to switch since I'm not a heavy user of mixins and I don't venture too far beyond simple components. However, I still need to learn the Composition API in more detail so I can make a more informed decision. Evan and the Vue team worked very hard on v3 and I trust them to make the right decisions.

mods you know what to do

yes, it should be a lot faster: https://github.com/krausest/js-framework-benchmark/pull/697

I have a feeling it's about the renderer being compartmentalised and the potential for a native renderer to be used with vue 3 instead.

I'd also suggest https://www.youtube.com/watch?v=V-xK3sbc7xI&t=2319s