Vue.js: why we love it

by Boris Stoyanov

Well know for its stores and sports products, Decathlon has been for a long time associated with retail. Digital and physical frontiers are changing the way traditional companies are reaching their audience, how they engage with them.

To adapt to this new area, besides manufacturing great products at a fair price, Decathlon is durably and quickly embracing the tech side: building tools, services, code base and application serving the public, but also entrepreneurs and developers.

Front-end application & Vue.js

As part of this strategy of quickly releasing products in the sports area, Decathlon works on developing web application increasing sport accessibility to the public. It means providing people with information about where to practice and discover sports.

Think about an application geolocating you and providing you with real time information regarding places around you where you can try a new sport while being on vacation? Exciting! That's Decathlon Community.

In order to accomplish this, a technology had to be chosen for front-end development. Being a small team carrying this vision, we had to go fast. Experienced in React, Angular and Vue.js, our front-end team made the call on the adoption of Vue.js: smooth learning curve, great documentation, promising new CLI (supporting PWA and soon SSR!). We also came to the conclusion that on-boarding new team members to Vue framework wouldn't take much time, allowing us to move quickly.

Speed comparison is often taken as a differentiation angle for framework. This was a part of the decision we made, but was not the major trigger. Indeed, Vue is one the fastest framework out there among the most used technologies.

PWA, Cordova, React Native

Part of the stack used for front-end development, mobile was a big piece. The option of hiring iOS and Android developers was quickly forgotten: multiple code base & heavy process management for what would be a proof of concept. So we considered the following options:

• React native: steeper learning curve.
• PWA: maybe less engaging because not present in both iOS and Android stores, but still very effective to market test a web application but really fast implementation, lightweight, and relative access to native functionalities. The exhaustive list here.
• Cordova: the next step after PWA but we like to think PWA has a bright future.

Decathlon Community, a proof of concept

As a good proof of concept, we used Vue.js to develop Decathlon Community, a Single Page Application consuming our APIs (we'll go through a concrete application in the next section).

Having an open-source mindset, the project is open to contribution to internal contributors. TypeScript is used in the project, making our fast-growing code base safer.

Highlights

• Powerful single file components. Vue.js allows writing in a single file HTML, Javascript / TypeScript / CSS. Vue.js being completely template agnostic, you can use JSX or ES6. HTML and CSS being easily reusable across projects.
• Community & resources. Still not the biggest community out there compare to React, but a great documentation to go through before diving in. It takes no time to start writing it.
• Hiring. React being from far the language used by the majority of modern front-end projects / companies, adopting Vue.js developers can scare IT teams because of lack of developers. We experienced hiring experienced React developers and onboard them very quickly. Bonus, after few weeks working on it, Vue.js seems to be more intuitive.
• CLI. Vue new CLI reinforced our trust into the framework. Powerful out of the box features when kicking off a new project, PWA support and soon Server Side Rendering…

The small things that makes your life easier

The simple two-way binding system offered by the v-model directive.

And then in your data method. Note the use of TypeScript here. So very time your input changes, data's being updated.

The event bus allowing you to quickly trigger events across your app.

And then in your script, declare your method.

It will send an event to the desired component. In our case, it’s a dialog. Note the v-model holding the open value.

The pretty straight forward store management thanks to Getters, Actions and Mutations. Still assuming you're using TypeScript, it would look like this:

Conclusion

Long story short, we love the way Vue.js is evolving and how easy to use. On-boarding people appears an easy task, writing it is fun. Iterating quickly and being able to build a long-term maintainable code base, allowing internal developers to quickly jump into a project makes Vue.js undoubtedly a great framework.