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
- Simple API
- No complex project build setup
- No need for JSX/ES6 transpilation
The good old `Hello World` app in Vue.js:
Simple, right? Now here’s the React counterpart (without Babel and ES6):
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:
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.
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:
Then bootstrap the app:
Then bootstrap the app:
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:
It’s really fast
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.
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:
This piece of code will load the templates from the server only when a component needs to render.
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
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.