Why we chose VueJs over REACT and Angular 2 to replace Angular 1
We have been using AngularJS 1 since 2014 for all our websites at Numberly. Today we are moving to VueJs for our Data Catching Websites.
Angular was really useful and allowed us to create and work quickly on new projects. We went from Yeoman generator with custom bower libraries to Slush Generator to finally a custom boilerplate.
As the boilerplate became bigger and more complex, REACT and Angular 2 (then VueJS) became popular in the JS community and we started thinking: “Do we have to switch, and if so what framework/lib do we have to choose?”.
Nb: All those choices are based on the type of projects that we develop at Numberly, in this case, Data Catching websites (from 15 to 25 websites a month). It’s not about which is the best or if Typescript is the holy grail or not.
Our current boilerplate setup:
- Angular 1.6 (ngAnimate, ngResource, ngCookies, …)
- ui-router (with a lot of custom resolve rules)
- Gulp with node-sass, autoprefixer, uglify, …
- Custom services/factories/providers/directives
Typescript vs ES6
- In ES6 we can easily switch between Front-end frameworks and Vanilla JS (Front apps or NodeJs apps).
- Is Typescript here to last, and is learning and teaching Typescript to your team a good investment ? (remember Coffeescript ?)
In our case ES6 wins.
Angular 2 pushes developers to switch to Typescript, so Angular 2 is out. (and we didn’t event talk about this crazy brackets thing in the templates, providers, injectors, etc…). Our goal is to clean, lighten and adapt the existing boilerplate, not to spend time on over-complicating things.
Framework “flavored” syntax
Frameworks are great but there are two main issues.
- When you’re searching for a dev you often find a “REACT developer” or an “Angular developer” instead of a JS developer who knows about Angular or REACT Framework.
- The more “flavored” the syntax you use is, the more you forget the vanilla JS syntax (ex: angular.forEach, angular.filter, $timeout…)
In my opinion the less “flavored” the syntax you’re using is, the better.
Let’s make a factory, oh no I should use a service. Oh wait I want it to be configurable in a config block, you know the block that runs before the run block, so I have to use a provider. Then I’ll use $injector cuz I can’t directly usemy other factory in the provider when my app is in the config state…
A component is defined by an object with clear attributes to configure your component.
The readability is better in VueJs.
I really like the “object oriented” component configuration, it’s like having a room with a shelf for each type of “tool” you need, one for methods, one for data, computed data, watched data, components… It’s not because you can do Classes in ES6 that you have to use them everywhere.
HTML with special attributes (ng-click, ng-src, …)
Native JS or JSX directly in the js component file, no HTML template. A lot less readable and you can’t split the work in 2 parts: HTML/CSS integration and js development (in case you want 2 team members with different skills on the project).
HTML with special attributes ( “@” for event, “:” for dynamic attributes, v-for, v-if, v-model, easy to remember when you come from Angular 1).
I love the Vue file concept: 1 file containing template, scripts and styles.
REACT could have been a winner too if we were working on webapps from scratch with larger deadlines.
Documentation & Community
- The documentation is ok but you often end up searching on Google or StackOverflow.
- Big community
- Cristal clear documentation and examples.
- Growing community
- Evan You thought about “everything” (VueJobs, VueRouter, Vuex, Chrome devtools extension, Vue resources listing, …)
- Human readable errors handling
VueJs wins again!
Good documentation, tooling and errors handling are important when you need to release trusted websites quickly and if you want to be sure everyone in your team understand every part of the framework correctly. No time wasted, no dark areas, no “copy/paste” code from StackOverflow without knowing what it is.
And the winner is… VueJS!
- REACT may have a bigger community but VueJs seems to have the pros of both Angular and REACT.
- VueJs clear and minimalist syntax is really pleasant to use alongside ES6.
- Vue file format is useful and allows us to reuse a custom component by only duplicating a single file in a new project.
- With Scoped css (or scss) we can tweak and override css only on a specific component without having to care about the global style declaration.
- It’s easy to switch from Angular 1 to VueJs
- Vuex and Vue-router are perfectly integrated to VueJs
- Easy to extend via the plugin system.
- The chrome devtools extension is a real plus.
Our new custom boilerplate setup:
- VueJS 2
- Axios (http queries)
- Custom plugins, store modules and components
- Vee-validate (form validation)
- VueJs examples http://vuejs.org/v2/examples
- VueJs Documentation http://vuejs.org/v2/api
- Vue-cli (ready to use boilerplate generator) https://github.com/vuejs/vue-cli
- Vue-router https://github.com/vuejs/vue-router
- Vuex (state manager) https://github.com/vuejs/vuex
- Vue Chrome DevTools https://github.com/vuejs/vue-devtools
- Vue resources list https://github.com/vuejs/awesome-vue