A few months ago I wrote on Quora, in response to a question if it’s better to learn Vue or React first. I said, “Learn VueJS first. I’d say that even if I knew there was a 100% chance you’d be using React in a year.” I’ve learned a lot more about React since then and I still stand by that.
I’ve been using React more recently. Because WordPress is integrating a lot of React concepts as part of the new “Gutenberg” system, the question of which framework you should use with WordPress has changed. This is a topic that’s been debated thoroughly since Matt Mullenweg first implored us to learn JavaScript #deeply.
Both React and Vue can help you accomplish what you need to, but which is best? If you’re already comfortable with both, it can be difficult to know when to use which. This article will help you decide.
Beginner Friendliness
Vue is more forgiving than React. I got so much more frustrated by things I was doing wrong in React that either were not a problem in Vue or Vue would have agreed to do while emitting a polite warning in the console about what I was doing wrong.
That’s two different ways to encourage a best practice. Vue’s way is more forgiving. You might argue React’s way is better because it means you have to use it the right way. Fine, but that’s not beginner friendly.
As I go into more depth on React vs Vue, I’ll keep coming back to a sense I had that coming from Vue to React, I felt like React was less complete. It’s hard to explain, but I’ll give examples as I go. It’s not a hard problem to solve, but it’s not one I want to solve while learning a new framework and a new concept. That concept “reactive framework” doesn’t require React to learn.
Gutenberg
While you don’t need to know React to develop with Gutenberg, it does help a lot. WordPress, starting with version 5.0 is being rebuilt with a UI system that is built on React and Redux.
Also, you can use any framework you want with Gutenberg.
That said, you can use Vue or any other framework inside of Gutenberg. You could use Vue for controls of a block’s settings, or you can use Vue for the block preview and/ or front-end. You could even have a complete Vue app, that just used Gutenberg as it’s data provider.
Props and State
In React, components can be passed props from a parent component. These props can be used in the component, but cannot be mutated directly by the component. Components can also have state. Component state is internal, mutable, by the component. State can be defined in the component’s constructor.
Vue components also have props, that cannot be mutated by the component they are passed to. Vue Component internal state is called “data” and is exhibited using the function data or computed properties.
In React, state is accessed using this state and props are accessed using this props. Whereas in Vue both props and data are merged. As a result in React you can have a prop and a state value with the same name, in Vue that creates an error.
In React, component state is mutated using the function setState(), while in Vue, you just change the variable value directly or you use v-model directive in an HTML template and it’s all magical.
Using React’s setState is an extra step, that isn’t needed with Vue. Any mildly complex Vue or React app needs state management — using Redux, Vuex or similar — for app state and that involves state update function. That’s fine, but a function to update a component’s state is a lot of extra work that I have to do because there is no automatic binding, like v-model provides in Vue.Because this is something everyone needs to do, this makes React feel incomplete.
Templating
In both React and VueJS you can create HTML with render functions. In WordPress wp.element.createElement is also available — thanks to Gutenberg — as a render function. When creating React or Vue components this way, you have to write your own change handlers to modify state.
Both React and VueJS have a native templating system that is totally optional. This is their biggest difference. Vue is, at its origin, a cross between React and Angular. Vue’s data model is inspired by React and other frameworks based on observables. Vue’s templating with two-way data bindings is heavily Influenced by Angular (ng1) templates.
Vue templates are html-like and use two-way data bindings set with html attribute like directives that magically handle most change events and stage updates.
React uses JSX by default. JSX is a completely opposite approach then Angular and Vue html-like templates. JSX uses a JavaScript function or class. You can use a lot of HTML-like syntax. But it’s a lot less HTML-like than Vue.
Of course, you can use JSX in Vue, or other templating languages such as pug. Vue is super opinionated.
Binding To This
In a Vue component, the props and data of the component are bound to the special variable “this” of any function inside the component. This combined with the easier ways I already discussed to update internal “data” it’s just a lot easier and more obvious.
In Vue components, you can add functions to the methods property of the component and they are bound to this. Also, in a component, you can access the application instance properties and methods via this in a component’s scope. Plugins can also attach references to this.
In React none of that is automatic. If you want to mutate state in the component method, you can just use this.setState. First, you have to manually bind this to the function scope.
There are a lot of libraries out there that Amie this more magical, like Vue. Again, React isn’t exactly complete — in a good way, you just need to add a lot of other stuff. It’s all stuff that Vue has a sensible and replaceable default for.
CLI, Scaffolding and Bolierplate
One common complaint I hear is about the amount of tooling that goes into JavaScript development. Yes, it’s a lot more than opening text edit these days, but good frameworks have good CLIs.
React and Vue are no different. As long as you have npm installed, creating functional React and Vue apps takes one command, answering a few questions and waiting a few minutes.
The approach is very different between each framework. The Vue CLI creates new Vue apps and is highly extensible. Creating apps from templates is really simple. Personally, I prefer egoist/vuepack over the normal webpack template.
Once an app is created, there are commands for it, such as running the dev server or one to build for production. Those are run as npm scripts.
In the React world create-react-app is a CLI tool, like Vue CLI for scaffolding apps. There are enough templates. Instead, you have to fork create-react-app, for example as Ahmad Awais did to start create-guten-block. I prefer Vue’s approach.
Once an app is created with create-react-app, the app uses react-scripts for build and development tasks. This CLI react-scripts is a dependency, and therefore upgradable, which is great. You can, using react-scripts eject, convert that dependency to a part of the project,run using npm scripts like in Vue apps.
Neither CLI generates new code as needed for features in the way Angular CLI or Laravel CLI can be used to scaffold controllers, services or tests.
Should You Use React or Vue In WordPress?
Short answer: both.
I don’t think either is better. It really depends on the situation. VueJS is easier to use in ES5 than React. I would choose Vue when it’s being used for a part of a larger view that already exists. Vue, with it’s more forgiving API and lack of opinions is your best friend when refactoring an interface as opposed to starting from scratch.
When starting from scratch, I used to always say Vue because it’s easier and has an MIT license. with React now a part of WordPress core, and newly licensed under the MIT license I’m not going there so quickly.
I’m using both now. React is definitely the default for me when working with Gutenberg. Since you can use JSX in Vue apps and the lower level DOM APIs being similar the answer is really about which works best or is already loaded. Another way I choose is based on which library’s ecosystem has the additional packages I need for a project. That’s the beauty of having choices and finally having WordPress make it easy to work with a modern JavaScript framework and npm modules and other tools a modern front-end developer should have.
Josh Pollock
Josh is a WordPress developer and educator. He is the founder of Caldera Labs, makers of awesome WordPress tools including Caldera Forms — a drag and drop, responsive WordPress form builder. He teaches WordPress development at Caldera Learn.
The post Choosing Between React and Vue For WordPress Development appeared first on Torque.
