We just love it when we stumble on new ways of doing things that make our lives easier. As developers, finding a new solution or tool that fixes issues with the way we’ve been doing things is sort of like finding gold.
Recently, a challenging new project arose, with a requirement being the ability to serve layout structure from the API. This triggered a bit of an office war as to which framework to use, as we have developers on our team who have experience in React, and others with experience in relative underdog, Vue.js, along with Ember.
Initially leaning towards React, after discussions with the client and going deeper into the requirements we decided to choose Vue.js, the main reason being that it’s easier to work with async templates in Vue.js than React (more on that later).
After working on a proof of concept, one of our senior team members, Jakub – a long time React developer - has been enchanted by Vue.js. Jakub says he now prefers Vue.js over React, and if he knew Vue.js earlier it would save headaches with issues in a couple of previous projects. A convert indeed! As a former React advocate, now espousing the virtues of Vue.js, we present Jakub’s personal list of things that he liked in the framework.
Very easy to get started with
Vue.js has:
- Simple API
- No complex project build setup
- No need for JSX/ES6 transpilation
- Etc.
The good old `Hello World` app in Vue.js:
1
2
3
4
5
6
7
8
9
10
11
<div id="app">
{% raw %}{{ message }}{% endraw %}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>Simple, right? Now here’s the React counterpart (without Babel and ES6):
1
2
3
4
5
6
7
8
9
var Element = React.createClass({
render() {
return React.createElement('div', {}, this.props.message);
}
});
ReactDOM.render(
React.createElement(Element, { message: "Hello World" }),
document.getElementById('root')
);Easy to drop into existing projects
Because there is no build setup required, you can just drop the library into any existing project and start using it immediately.
You can also drop React into existing projects, but using React without JSX is cumbersome -especially when render returns nested elements, as we can see here:
1
2
3
4
5
6
7
8
9
10
var Element = React.createClass({
render() {
return React.createElement('div', { className: 'form-group' },
React.createElement('label', {}, 'My input'),
React.createElement("div", { className: 'form-field' },
React.createElement("input", { type: "text", value: this.props.message })
)
);
}
});Great CLI
Vue.js comes with templates for most common build tools like webpack and browserify, and helps with scaffolding new projects. It supports all of the most popular libs like sass, less, stylus, hot module reloading, etc. CLI is also open for extension so you can create your own templates if you feel the need to.
Contrarily, in the React world, there are many boilerplates, such as react-create-app, react-production-starter, react-boilerplate, react-slingshot or react-starter-kit - just to name a few. It can be difficult to know which one to choose that will also support all necessary features for projects out of the box.
Single-file components
With Vue.js, each component contains separate template, script and style sections which are super easy to get your head around (even for designers).
Consider these 2 examples:
Vue.js component:
1
2
3
4
5
6
7
8
9
10
<template>
<h1>Hello, {% raw %}{{this.name}}{% endraw %}</h1>
</template>
<script>
export default {
props: {
name: String
}
}
</script>Then bootstrap the app:
1
2
3
4
5
6
7
new Vue({
el: '#root',
template: '<App/>',
components: {
App
}
})React component:
1
2
3
4
5
6
7
8
class App extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>
}
}
App.propTypes = {
name: PropTypes.string
};Then bootstrap the app:
1
2
3
4
ReactDOM.render(
<App name="iRonin" />,
document.getElementById('root')
);As you can see, Vue.js is more like regular HTML, so it’s easier to work with for people who are already familiar with HTML and CSS.
Scoping CSS styles
In Vue.js, each component’s CSS styles can be scoped out of the box - just by adding the `scoped` attribute to the `style` section:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
<h1>Hello, {% raw %}{{this.name}}{% endraw %}</h1>
</template>
<script>
export default {
props: {
name: String
}
}
</script>
<style scoped>
h1 {
font-size: 16px;
}
</style>It’s really fast
Nowadays speed is no longer a bottleneck for most modern JavaScript frameworks - but it wasn’t always like that. React themselves basically set the speed standards, so that any new up and coming library usually is compared against it for performance. Vue.js rises to the challenge and meets those standards without any problems. It can be as fast as React or even faster. Want proof? Here is a link to one of the comparisons done. As with any performance benchmark, you should take it with grain of salt, and do your own tests, though.
Official 3rd party libraries
Additional libraries like Vuex and Vue Router are officially supported by Vue.js’s authors. They are also default choices by most developers. In React’s ecosystem the 2 most popular libraries for state management are Redux and MobX. They both follow a slightly different approach for state management, but neither is maintained by the core team.
If you go back in time to the point when Flux was introduced to React, you will notice that the most popular implementation was Reflux. Over the years it has changed and Redux has become top dog. Having multiple unofficial libraries can also be a double edged sword - they may eventually become unmaintained and successors do not necessarily need to follow the same API.
Async components
Vue.js presents an easy way to load templates on demand, which can also be used with webpack’s code-splitting.
In the project we mentioned in the beginning, our requirement dictated that templates had to be delivered by an API server, depending on some complex business logic.
With Vue.js we are able to define our components like this:
1
2
3
4
5
6
7
// Template loaded from the server
Vue.component('App', resolve =>
TemplateLoader.loadView(view)
.then(({ data }) => resolve({
template: data
});
);This piece of code will load the templates from the server only when a component needs to render.
Great community
Even though Vue.js is currently less popular than React (at least in Europe and the US), there is already a great community who do a brilliant job of maintaining the healthy state of the project.
Let’s compare the number of open issues on each frameworks Github repo, shall we?
- Vue.js - 58 open issues At the time of writing this, only 7 are marked as a `bug` .
- React - 577 open issues At the time of writing this 38 of them are marked as a `bug` .
Even though most large adopters come from China (Alibaba, Baidu, Tencent, Xiaomi, Didi Chuxing, DJI, Ele.me - all of them with $1B+ valuation!), there are now companies from America and Europe like Gitlab or Codeship who have already selected Vue.js as their framework of choice.
Support from server side frameworks
Laravel chose Vue.js as its default JavaScript framework for their frontend side and Ruby on Rails supports it out of the box with `webpacker` (with React and Angular among the others) - https://github.com/rails/webpacker/tree/master/lib/install/examples. This definitely shows the framework is gaining momentum and can not be ignored.
MIT license
This may sound like a minor thing but if you take a look at articles about React’s license (http://react-etc.net/entry/your-license-to-use-react-js-can-be-revoked-if-you-compete-with-facebook and https://www.elcaminolegal.com/single-post/2016/10/04/Facebook-Reactjs-License) you will notice that you are not allowed to compete directly with Facebook :). If that’s your plan, along with global domination, it’s better to use solutions that are licensed under MIT (like Vue.js).
MIT is the simplest and most permissive license in the open source world. It basically allows you to do anything with the code as long as you link back to the original author.
As you can see there are many benefits to choosing Vue.js. Try giving it a spin in your next project to see what can be done with Vue.js. Or, if you prefer, why not let us at iRonin do the dev work for you? Our experience with Vue.js sets us apart from other providers and can give your project the stability and flexibility it needs.
