C’est la “Vue”

The journey from giving up React.js in favor of Vue.js

The intrigue

As technology is evolving at a fast pace and microservices are a thing now, the number of frontend libraries/frameworks that endorse this architectural design style has gone up to the roof.

Making a choice has begun to be a pain in the a.. as the perfect framework does not exists and flaws are sometimes hidden far beneath in the mist of time. As you will see, it’s more about knowing what you want and not the number of articles that endorse a framework, the community or even the company behind it.

HX Team

HX (Team) stands for Human Experience and was our team name of choice as it suggests the vision that we believe in: “Making intuitive and easy to use applications for all eMAG’s employees.”

Being part of the HX team means more than creating a pleasant user experience or a consistent UI across applications. Our mission goes further than this and translates into creating easy to use tools for developers.

React JS

react-js-logo

A couple of months ago we’ve decided to give a try to one of the frontend frameworks in order to respond to the rise of RESTful APIs and the separation of frontend and backend. The framework should have been used for internal applications in eMAG that adopts this architectural design style.

Making the choice was not easy, so we’ve started with the following needs and expectations:

  • Large community of developers
  • Fast DOM Changes
  • Great architecture
  • Easy debugging
react-js

Therefore we’ve chose React over Angular 2 (it was in Beta back then).

React is an open-source JavaScript library for building user interfaces. It’s just a library, so if you want to make use of a fully featured framework, the React guys invented Redux (a framework that uses Flux architecture).

We’ve set the goal of not using jQuery, as using it with React could lead to serious issues in the page (like overriding each other). This could be a possible problem because we’ve wanted to reuse eMAG Apps UI Kit (the internal eMAG UI Kit) that had many plugins dependent on jQuery (even Bootstrap 3.5 that the UI-Kit uses needs jQuery).

As weeks started passing by the efforts we were making didn’t conclude in something very tangible and other developers were also complaining of it being hard to use and maintain.

So we’ve had to step back and ask ourselves, what is the problem?

The ugly truth

  • Taking into account that React uses ES6, JSX, Flux architecture the learning curve was not one linear or pleasant
  • jQuery it’s still a thing. You won’t find complex plugins in React as you will find in jQuery (for example a grid with a subgrid that supports bootstrap and is easy to change), even with its big community
  • Simple things were made harder to develop. React was created to make DOM changes fast, really fast, so you will have to use React functions to make use of this, some of which you will not be familiar with (because React has a different architectural style)
  • React plugins were not so much customizable as changing some of them required making a fork

Don’t get me wrong, React is great, but only if you want to develop a simple application where the UI should not be consistent across different technologies or where DOM changes should be made really, really fast.

Vue JS

vue-js-logo

Finding meaning again

As we were put into the position of acknowledging that React doesn’t fit eMAG’s internal needs, we’ve come to discover Vue.js.

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable.

Vue was not only great, it was perfect for what we’ve wanted to do:

  • It had an amazing boilerplate with dev and prod tasks
  • It had linters, libraries for unit and functional tests, all out of the box
  • It could be used with jQuery (by making wrappers for plugins)
  • It’s small
  • It accepts FLUX architecture if you need it
  • It has an amazing template engine
  • The development is easy
  • It separates the template engine from components javascript

By making the decision of using Vue we’ve managed to reduce the roadmap time by half (even starting from zero) compared to React.

So after a month of hard work, we’ve made wrappers for our JQuery components from eMAG Apps UI Kit, created examples for them, simple unit tests, services all by having a clean code and RESTful APIs to test our frontend.

react-vs-vue

React JS component

export class Autocomplete extends React.Component {
constructor(props) {
super(props);
this.state = {
value: this.props.value || '',
}
}
componentWillMount() {
this.options = this._initOptions();
}
render() {
return (<div>
<Select.Async
....
/>
</div>)
}
}

Vue JS component
<template>
<div class="input-group">
<input type="text" :id="'date_time_' + _uid" class="form-control" autocomplete="off">
<div class="input-group-addon">
<i :class="icons.date"></i>
</div>
</div>
</template>
<script>
import datetimeMixin from './../mixins/Datetimepicker'
export default {
name: 'datetimepicker',
props: ['dataOptions'],
mixins: [ datetimeMixin ],
data () {
return {
...
}
},
mounted () {
$('#date_time_' + this._uid).datetimepicker(this.options)
},
destroyed: function () {
try {
$(this.$el).find('#date_time_' + this._uid).data('DateTimePicker').destroy()
} catch (ex) {}
}
}
</script>

Conclusion

Now we can say that when making a choice we have different criteria that we are looking for:
  • Easy to use
  • Familiar
  • Community (not so much plugins, but responses for issues)
  • Reuse of our code
the-end