Why we choose Vuejs which is not React or Angular

At Rever we just released a new version of our web client using Vue.js. After 641 commits and 16 weeks of intense development here we are, very proud of a decision we took a while ago.


At Rever (www.reverscore.com) we just released a new version of our web client using Vue.js. After 641 commits and 16 weeks of intense development here we are, very proud of a decision we took a while ago.

8 months ago our web client was using Angular 2. To be precise, it was using Angular 2 beta 9. This was a product written by an outsourcing company and we were never fully happy with it on many levels, from UX/UI to the architecture, and to some level, with Angular 2 itself.

Before I continue, I admit that Angular 2 beta 9 is a different product than Angular 2.0, but that was exactly one of the problems. From beta9 to 2.0.0 there are 8 beta versions, 8 RC and the 2.0.0 version itself, 17 versions to upgrade in total. We did try to upgrade from beta 9 to 2.0.0 but too many things broke that made the upgrade non trivial. Also, about the same time we were questioning Angular 2 as our framework of choice, the Angular team decided to start working on Angular 4. While they promised it wouldn’t be too drastic, that meant that by the time we finished upgrading to Angular 2.0.0 we were going to need another upgrade. What a waste of time and limited resources.

The main thing we didn’t like and we still don’t like about Angular 2 is Typescript. I know Angular 2 can be used with Javascript but again, the decision to use Typescript was already taken and from what I understand, using pure Javascript with Angular 2 is not the ideal way you should be using Angular 2. In any case, getting rid of Typescript meant a full rewrite of the project.

I didn’t feel Typescript added substantial value and even worse, we noticed that our coding speed was reduced. With Typescript things that were really easy to do on Javascript like defining a simple object were more complicated to do on Typescript. I highly recommend you to read the following articles before you start using Typescript. It is not the right solution for everyone.

I still remember how easy to work with Angular 1 was, it certainly had its own problems, but it was nice to work with it compared to other frameworks, something that Angular 2 lost somewhere on the way. My conclusion about Angular 2 was simple**, the only thing Angular 1 and 2 share in common is the name, they are completely different frameworks.**

So consider that we had 17 versions to upgrade on a non-tested system, a lot of pressure from the business to write new features, lots of bugs and poorly written code, the original developers weren’t on the team anymore, only one developer (me) at the time with many other responsibilities, Typescript, problems with finding the right documentation since I was using a beta, and Angular 2 moving to version 4. The list of negatives started to accumulate very rapidly.

We made a decision, if we were going to spend that much time upgrading, we needed to see if we had other options first. And we did.

React

The first obvious choice was react, because well, everybody is doing it and the ones who are not, are talking about it. So that was one option, certainly knowing that Facebook is behind it, helps. However, React itself is not a framework, you need to add extra stuff to make it shine.

Vue.js

Vue.js was a new player, I never heard about it before although they just released version 2 back when we started to look at different options. At first it caught our attention, but it looked risky.

Decision process

We first started to define what our decision points were going to be. We knew the framework of our dreams would need to have the following:

  1. It should be stable
  2. Backed by a strong community or some big players
  3. Good documentation or lots of questions on StackOverflow
  4. Easy to learn
  5. Integration with Bootstrap
  6. Small size
  7. Ideally it would allow us to reuse code
  8. Coding speed test should be increased
  9. Reactivity
  10. Component based

After having our decision points decided, I had to get my hands dirty, so I gave both React and Vue.js a couple of days each to review each decision point that wasn’t going to be answered by Google. Since I knew nothing about any of them, at the end of two days I would reevaluate how far I got into rewriting some parts of the actual project we were going to migrate.

The parts I chose to rewrite were:

  1. Some basic API calls
  2. Two layouts for two different pages.
  3. Reactivity for user related stuff
  4. Login Forms and some content forms
  5. One bootstrap modal

I was surprised by how far I got with Vue.js, in a couple of days I actually had a proof of concept to show up to the rest of the team and to my CTO. I got a good understanding of the basic concepts of Vue.js, defined a good and extendable architecture but most importantly I really enjoyed the experience of writing code with it and I felt I was doing it faster than with React.

React was a lot harder than I thought, choosing between Redux and MobX is more problematic than having one option that is well integrated with the framework like Vue.js and Vuex do. This is simple because when having no experience with a framework, it gives you more confidence knowing than a framework has an official library for doing something. By the way, I felt that reactivity was easier with Vuex than with Redux but probably that’s just a perception, like all learning curves.

JSX was also a problem since we could not reuse HTML code and Vue.js did allow us to do it to some extent. Vue files are actually pretty good to work with since I don’t like inline templates. React mixes both JSX/HTML with JS code which I just don’t like since I strongly believe in separation of concerns and it looks ugly IMHO.

Coding speed

Coding speed was an area Vue.js won by far, not having to learn JSX was of huge help. This speed was later confirmed when another developer joined the project and was contributing to the project in a matter of hours after a training session of about 1 hour.

This was extremely important for us and you can see it right away by opening a vue file. It contains a template section with HTML and tags that look similar to Angular 1 so if you did some Angular 1 it will be really familiar. A vue file also has a styles and pure javascript sections where you actually use javascript and you only need to learn a few things that about Vue.js to fully understand them. Understanding Vue.js properties like methodscomputedpropertiesdata and created takes you to about 90% of what you need to understand to start coding, really easy.

Documentation

To have proper speed we needed good documentation and Vue.js documentation is superb. Guides, examples, questions and API are documented really well and cover all of the doubts we found during development. We were afraid to find Chinese documentation for many of the questions we would had but that was not the case, everything was available in English.

Asking around

Vue.js looked really good after more than a week of consideration but to my surprise, asking around was useless, since no one had used Vue.js before, the only comment I got was in the order of “looks cool but I haven’t used it”. React took the most mentions and Angular 2 came in a distant second place.

I started to look for local talent with Vue.js experience and I did find some who were really good so I started to think that I was not alone, my social techy circle was probably too small and I shouldn’t play enough attention to the fact that I didn’t know anyone in person working with Vue.js on production.

Mobile

At the time we were thinking about Vue.js vs React, we were also considering rewriting our mobile app and React Native looked like a really good choice. That was a big plus for React since Vue.js didn’t have anything remotely stable that resembles what React Native is trying to do, so the possibility of reusing code between the web and app clients was a huge plus, but I decided that I wasn’t going to consider possibilities that might or might not happen. After all, from my experience, with Node.js I reuse a really insignificant amount of code between the browser and the server.

Licensing

At the time I write this, there is great amount of discussion because Facebook changed the React license to BSD+Patents. According to Facebook, this license is meant to protect them from patent trolls. This was not primordial in our decision making process but I’m glad we didn’t go the React way since any noise related to Licenses is not a noise you want to hear.

In the end, Facebook being behind React might become a liability for the project instead of a strength, that is why it is usually better to have independent foundations or organizations in charge of a successful Open Source Software project. Facebook should do the right thing, take IBM as an example, when IBM bought Strongloop, they donated Express.js to the Node.js foundation where such an important software belongs. Pressure from the community and willingness from IBM to ensure the continuity of the software made it happen. Twitter is another good example, they released Bootstrap under the very permissive MIT License and no one is talking about License problems with Bootstrap.

Final words

Out of the many web pages I researched before making a decision, one graph caught my attention, the developer satisfaction on The state of Javascript survey that Sacha Greif @sachagreif does every year. I admit, as the author does, that is not scientific survey but it does offer a good amount of information and this was later confirmed by our decision points when we had a clearer picture, specially about Vue.js since we knew nothing about it at the start of our research. You can read The State of Javascript on the following link.

Overall, Vue.js was the the winner in our evaluation, it had many questions answered on Stack Overflow, the clearest official documentation of the three options, the smallest code base, integrates well with Bootstrap and learning that it was backed by strong projects like Laravel and a big company like Alibaba was a big plus. Not having a community as big as React’s was not a real factor since it was big enough.

Going with Vue.js was the right choice, it took me a while to convince my CTO but I’m grateful he always asked the right and tough questions and force me to be 100% sure of my decision, I was going to regret it if I made a mistake. I think there was a small part of him that wasn’t sure until he wrote a whole component and found it really easy.

In the end the whole decision process was really helpful, but the fact that I was able to learn really fast made a huge difference, call it gut feeling if you like, but learning something really fast gave me great confidence in the more complex problems that I knew I would face during actual development.

I’m not saying React is a bad choice, I’m surprised by how big the community is and there’s a good reason for it, but jQuery is bigger and that doesn’t make it a good framework / library for the project we wanted to do.

Vue.js is gaining momentum and we saw that during development which only reassured us that we took the right choice.

We value simplicity and Vue.js achieves that, this simplicity is reflected on the learning curve, the documentation and specially in coding speed. If you’re still confused or need more arguments, I encourage you to go and read the following link:

Rever (www.reverscore.com) is an online platform that enables companies to engage all their employees in frontline innovation every day. Rever demystifies innovation and makes it a daily habit for everyone. We are always recruiting, if you want to work with an amazing tech team, check out our opportunities at https://reverscore.com/careers/

Luis Elizondo is the Lead Engineer at Rever where he does Backend and Frontend Web development. He’s also in charge of automation, infrastructure, systems architecture and security. He has more than 10 years of experience working with multiple programming languages, designing application architectures, automating processes and operations and administering servers on the cloud.

30s ad:

☞ Vue JS 2 - The Complete Guide (incl. Vuex)

☞ Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

☞ Build A Web App with VueJS, Spring Framework and MongoDB

☞ Vue JS 2.0 - Mastering Web Apps

☞ Vue JS 2: From Beginner to Professional (includes Vuex)

10 Best Vue Icon Component For Your Vue.js App

10 Best Vue Icon Component For Your Vue.js App

In this article, I will collect 10 Vue icon component to bring more interactivity, better UI design to your Vue application.

Icons are the vital element of the user interface of the product enabling successful and effective interaction with it. In this article, I will collect 10 Vue icon component to bring more interactivity, better UI design to your Vue application.

1. Animated SweetAlert Icons for Vue

A clean and simple Vue wrapper for SweetAlert's fantastic status icons. This wrapper is intended for users who are interested in just the icons. For the standard SweetAlert modal with all of its bells and whistles, you should probably use Vue-SweetAlert 2

Demo: https://vue-sweetalert-icons.netlify.com/

Download: https://github.com/JorgenVatle/vue-sweetalert-icons/archive/master.zip

2. vue-svg-transition

Create 2-state, SVG-powered animated icons.

Demo: https://codesandbox.io/s/6v20q76xwr

Download: https://github.com/kai-oswald/vue-svg-transition/archive/master.zip

3. Vue-Awesome

Awesome SVG icon component for Vue.js, with built-in Font Awesome icons.

Demo: https://justineo.github.io/vue-awesome/demo/

Download: https://github.com/Justineo/vue-awesome/archive/master.zip

4. vue-transitioning-result-icon

Transitioning Result Icon for Vue.js

A scalable result icon (SVG) that transitions the state change, that is the SVG shape change is transitioned as well as the color. Demonstration can be found here.

A transitioning (color and SVG) result icon (error or success) for Vue.

Demo: https://transitioning-result-icon.dexmo-hq.com/

Download: https://github.com/dexmo007/vue-transitioning-result-icon/archive/master.zip

5. vue-zondicons

Easily add Zondicon icons to your vue web project.

Demo: http://www.zondicons.com/icons.html

Download: https://github.com/TerryMooreII/vue-zondicons/archive/master.zip

6. vicon

Vicon is an simple iconfont componenet for vue.

iconfont
iconfont is a Vector Icon Management & Communication Platform made by Alimama MUX.

Download: https://github.com/Lt0/vicon/archive/master.zip

7. vue-svgicon

A tool to create svg icon components. (vue 2.x)

Demo: https://mmf-fe.github.io/vue-svgicon/v3/

Download: https://github.com/MMF-FE/vue-svgicon/archive/master.zip

8. vue-material-design-icons

This library is a collection of Vue single-file components to render Material Design Icons, sourced from the MaterialDesign project. It also includes some CSS that helps make the scaling of the icons a little easier.

Demo: https://gitlab.com/robcresswell/vue-material-design-icons

Download: https://gitlab.com/robcresswell/vue-material-design-icons/tree/master

9. vue-ionicons

Vue Icon Set Components from Ionic Team

Design Icons, sourced from the Ionicons project.

Demo: https://mazipan.github.io/vue-ionicons/

Download: https://github.com/mazipan/vue-ionicons/archive/master.zip

10. vue-ico

Dead easy, Google Material Icons for Vue.

This package's aim is to get icons into your Vue.js project as quick as possible, at the cost of all the bells and whistles.

Demo: https://material.io/resources/icons/?style=baseline

Download: https://github.com/paulcollett/vue-ico/archive/master.zip

I hope you like them!

Collection of 10 Vue Markdown Component for Vue.js App in 2020

Collection of 10 Vue Markdown Component for Vue.js App in 2020

Markdown is a way to style text on the web. The 10 Vue markdown components below will give you a clear view.

Markdown is a way to style text on the web. You control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown.

The 10 Vue markdown components below will give you a clear view.

1. Vue Showdown

Use showdown as a Vue component.

View Demo

Download Source

2. showdown-markdown-editor

A markdown editor using codemirror and previewer using showdown for Vue.js.

View Demo

Download Source

3. markdown-it-vue

The vue lib for markdown-it.

View Demo

Download Source

4. perfect-markdown

perfect-markdown is a markdown editor based on Vue & markdown-it. The core is inspired by the implementation of mavonEditor, so perfect-markdown has almost all of the functions of mavonEditor. What's more, perfect-markdown also extends some features based on mavonEditor.

View Demo

Download Source

5. v-markdown-editor

Vue.js Markdown Editor component.

View Demo

Download Source

6. markdown-to-vue-loader

Markdown to Vue component loader for Webpack.

View Demo

Download Source

7. fo-markdown-note Component for Vue.js

fo-markdown-note is a Vue.js component that provides a simple Markdown editor that can be included in your Vue.js project.

fo-markdown-note is a thin Vue.js wrapper around the SimpleMDE Markdown editor JavaScript control.

View Demo

Download Source

8. Vue-SimpleMDE

Markdown Editor component for Vue.js. Support both vue1.0 & vue2.0

View Demo

Download Source

9. mavonEditor

A nice vue.js markdown editor. Support WYSIWYG editing mode, reading mode and so on.

View Demo

Download Source

10. vue-markdown

A Powerful and Highspeed Markdown Parser for Vue.

View Demo

Download Source

Thank for read!

Collection of 15 Vue Input Component for Your Vue.js App

Collection of 15 Vue Input Component for Your Vue.js App

Vue input component gives you a baseline to create your own custom inputs. It consists of a prepend/append slot, messages, and a default slot. In this article I will share 15 Vue input components to you.

Vue input component gives you a baseline to create your own custom inputs. It consists of a prepend/append slot, messages, and a default slot. In this article I will share 15 Vue input components to you.

1. Maska
  • No dependencies
  • Small size (~2 Kb gziped)
  • Ability to define custom tokens
  • Supports repeat symbols and dynamic masks
  • Works on any input (custom or native)

Demo

Download


2. v-range-flyout

A vue component that wraps a input type=number with a customizable range slider flyout with 2-way binding.

Demo

Download


3. vue-tel-input

International Telephone Input with Vue.

Demo

Download


4. Restricted Input

Allow restricted character sets in input elements.

Features

  • Disallow arbitrary characters based on patterns
  • Maintains caret position
  • Format/Update on paste
  • Works in IE11+

Demo

Download


5. Vue Currency Input

The Vue Currency Input plugin allows an easy input of currency formatted numbers.

Demo

Download


6. vue-fields

Input components for vue.js.

Demo

Download


7. vue-material-input

Simple example of issue I am seeing with input labels.

Demo

Download


8. vue-tribute

A Vue.js wrapper for Zurb's Tribute library for native @mentions.

Demo

Download


9. vue-number-smarty

Number input with rich functionality for Vue.js.

Features

  • integer/float
  • signed/unsigned
  • step size
  • increment/decrement value by scrolling when focused
  • align variants
  • min and max boundaries
  • max length of integer part (only for float type)
  • max length of float part (only for float type)
  • max length of string
  • error state
  • readonly state
  • theme options

Demo

Download


10. Vue input mask

Super tiny input mask library for vue.js based on PureMask.js (~2kb) exposed as directive. No dependencies.

Demo

Download


11. vue-r-mask

mask directive for vue.js

  • Template similar to javascript regular expression. /\d{2}/
  • Directive useful for your own input or textarea.
  • Arbitrary number of digits in template /\d{1,10}/

Demo

Download


12. Vue IP

An ip address input with port and material design support.

Demo

Download


13. v-money Mask for Vue.js

Tiny input/directive mask for currency

Features

  • Lightweight (<2KB gzipped)
  • Dependency free
  • Mobile support
  • Component or Directive flavors
  • Accept copy/paste
  • Editable

Demo

Download


14. Vue Masked Input

Dead simple masked input component for Vue.js 2.X. Based on inputmask-core.

Demo

Download


15. VueJS input component

Mobile & Desktop friendly VueJS input component
Features used
CSS variables
Vue's transition-group
Flexbox

Demo


I hope you like them!