Why We Love, Use, And Support Vue.js

Let me tell you a story about Vue.js. Not just from my perspective as a Vue developer. I will also try to explain some of the many reasons behind why we use Vue.js here at Monterail, and why we recommend it to companies we work with. You will find out why Vue.js is a smart decision from both developer and product owner perspective. I will tell you how we embraced the community and how it led us to make a major contribution to its history by organising the first international Vue conference!

Enjoy!

First things first, let me introduce myself. I am a front-end developer, co-curator of vue-newsletter, the author of vue-multiselect and co-author of vuelidate. I’ve been using Vue.js for almost two years now, including commercial purposes. For the past seven months, I’ve been heavily involved in organising VueConf, which – and this is crazy – starts on tomorrow! Our team has also crafted the State of Vue.js report which is yet another milestone in our mission to evangelize developers and businesses.

Why We Use Vue.js

My first encounter with Vue.js happened around the end of 2015 as I was looking for a viable alternative to AngularJS and React. AngularJS already felt outdated back then and I wasn’t a fan of React mostly due to the fact I wasn’t initially sold on the whole JSX idea. Vue got my attention due to its super friendly documentation and over the next couple of months, I researched Vue extensively within several internal projects to see whether it would fit with Monterail’s stack. Surprise, surprise it turned out it fits just right! Finally, I seemed to have found the grail of frameworks — cutting-edge, flexible, and simply beautiful both in terms of internal architecture as well as API.

I was fascinated. Vue has been seeing a tremendous rise in popularity (#2 most starred JS framework on GitHub) since I’ve heard about it for the first time. Although it started out small, it has since been adopted by companies and business entities across the board, big and small, including Alibaba, GitLab, Sainsbury's, Codeship and Baidu.

I’ve seen dozens of Vue reviews, articles, and comparisons with other libraries and frameworks, and most of them speak with one voice, praising the clean syntax, smooth learning curve, and the general flexibility of the library—and I couldn’t agree more.

For me, it was love from the first code snippet I’ve seen—a feeling that I later managed to pass over to other JavaScript developers at my company—Monterail. And honestly, persuading them to come over to the Vue camp wasn’t all that hard.

After all Vue.js is in the sweet spot between the more opinionated AngularJS framework we already knew and a much more verbose and flexible React.

It takes the best out of those libraries (with a little bit of Knockout reactivity magic on top).

All that packed into a very elegant solution that evolves as you need it. What I mean here is that Vue.js can be deployed in a very broad range of use cases, starting from simple widgets, enhancing legacy Rails apps, up to full-blown SPA or server-side rendered isomorphic applications. That’s exactly the cases we face as a software house.

Given our extended experience with Angular, introducing Vue was a breeze. My fellow co-workers were able to pick it up and start writing apps in a matter of hours/days, thanks to it feeling super familiar to what they already knew. React fans were also happy given the very similar architecture patterns (components all the way down) and the overall feeling. All that without sacrificing the developer experience. If you’re a React fan there’s a small chance you might believe in some misconceptions about how Vue compares to React – I will try to address that at the very end of this article.

A developer’s perspective on Vue.js

Speaking of developer experience—Vue seems to be the first framework that makes it extremely easy to introduce new people into the project. I’ve seen juniors get productive in a matter of hours in a mid-sized project. I believe that’s mostly thanks to the beauty of single-file components that make it so much easier to scale and navigate through your app’s codebase.

Being able to quickly glimpse the file contents and see exactly what it does really speeds things up. How’s that possible? The template, CSS, methods, props, computed values, data model, watchers, mapped Vuex actions, state and getters, lifecycle hooks—are all kept inside the .vue file. Additionally, due to Vue’s dependency tracking system (which is nothing like AngularJS watchers!), the framework takes care of the dirty work like optimising the component re-render strategy. You can simply focus on writing the application.

When it comes to the ecosystem. Back in 2015, it was still relatively small, but now it feels quite the opposite. Trust me on that, I’ve been involved with curating the vue-newsletter for almost a year (49 issues. Since 2018 it's an official newsletter of the framework!) now and each week we kind of struggle with picking just the most relevant plugins and components as those pop up like crazy.

I’m pretty positive that the ecosystem already has everything one would need to build all kinds of applications. The best part, however, is the fact that the most important libraries like vue-router or Vuex (state management) are developed by the Vue core team, which means excellent support and compatibility with the main library. But that’s not all. 

It is a community, not a one-man project

I have had the pleasure of being a member of the Vue.js Team Slack channel (with several other active community members) for a while now and being a part of it helped me understand that Vue is far from being a one-man project. Vue.js community members are working hard on a range of developments, refinements, and tweaks, such as improvements to the testing experience, Nuxt.js – the SSR framework based on Vue or more recently an integration with NativeScript. Not to mention the intense development of Weex, the Vue-compatible alternative to React Native. That’s right, you can already build native mobile apps with Vue. Developers from top Chinese tech companies like Alibaba are already doing it.

Some sceptics may say that Vue is not a viable choice because it lacks the support from large tech corporations like Google and Facebook. I don’t believe that’s actually a real problem.

There are many incredibly popular and successful projects such as webpack and Babel that started in a similar way and now are at the very core of modern Web development. And what do all those projects have in common? They embraced their communities and this is exactly what Vue does.

At Monterail, we work with various startup projects. As you may know, for startups, time and money matter a lot. We need to deliver fast to fit within the declared budget and that’s something Vue.js helps us with tremendously—the library, together with its rapidly growing ecosystem, gives us everything we need to be productive from day one and then smoothly scale as the app requirements grow.

It doesn’t mean that Vue is suitable only for small- to medium-size projects, on the contrary—it works just as well for large applications.

Don’t believe me? Just watch Evan’s keynote speech :)

Evan You during his keynote speech on VueConf 2017.

What’s in Vue for me personally?

Vue gave me the perfect opportunity to do something I’ve always dreamed of—to start giving back to the community. Just over a year ago, together with a couple of friends, I’ve released vue-multiselect and published the first issue of the vue-newsletter. A few months later, we hosted a Q&A session at the local Meet.js event with Evan You, the creator of Vue.js himself. My most recent community-related project was a library for validations called vuelidate that I co-authored with Paweł Grabarz @frizi09. It was all so exciting and rewarding on so many levels that we made a decision to take another, BIG step—big for us as a company and for Vue itself.

VueConf

VueConf is the first international Vue.js conference and it’s starting this week. Seventeen speakers and over 300 attendees from all over the globe are coming to Wrocław to talk and listen about this very framework. I have to admit, the last couple of months have been a crazy ride. Do you remember the very first Angular conference? The first React conference? VueConf is a huge milestone and I couldn’t be more excited about it. Not to mention the fact that we’ve also started several Vue.js-based projects in Monterail!

BONUS: Common misconceptions about Vue.js

As I already mentioned, comparisons between React and Vue can be found all over the Internet. Unfortunately, some of those contain misconceptions that are later repeated over and over and should be cleared up. In case you’ve been deliberating on which framework to use in your project—Vue or React—you may find the following useful:

• Vue is also “just JavaScript,” just as React is. The templates compile to Virtual DOM render functions exactly like React’s JSX does. Templates additionally give you some neat syntax sugar for things like event handling: @keyup.enter.prevent=“doStuff” and include numerous optimisations like static tree hoisting. In React, you need to install additional Babel transforms to accomplish that. However, if that’s your thing, you can just use JSX with Vue. Or even hand-written render functions. Functional and async components are supported too.
• There is no two-way data binding. Props are always one-way down and you’re not allowed to mutate them. v-model is just syntax sugar for passing a value prop and reacting to an event.
• There’s no dirty checking. If you wonder how the reactivity/dependency tracking works, you can read my articles about the concept. Hint: “MobX” works in a very similar manner and React devs are loving it because of how much it simplified their apps. Vue.js has it built in.
• You’re not forced to mutate the local state. You can use Redux if you wish, although Vuex is super capable and tailored for Vue! It actually uses a Vue instance inside.
• Vue has one of the best async components/code splitting patterns support as well as top-notch SSR. For example the Vue SSR framework Nuxt.js scores 100/100 in Lighthouse (a performance and PWA analysis tool by Google) out of the box like it’s nobody’s business. Just check out the recent talk by Addy Osmani at Google I/O 2017 about Progressive Web Apps.
• Vue.js has its own create-react-app in the form of vue-cli with many useful templates like PWA, Nuxt.js a full-fledged webpack setup and multiple community templates. 

Should I use Vue.js?

Vue.js is flexible, easy to learn, and powerful. Its ecosystem is still growing and it already has everything you need to build all kinds of applications (yes, mobile apps, too). And if you still need to be convinced, I wholeheartedly invite you to read the full State of Vue.js report. It provides multiple great reasons why Vue.js is a good choice for companies of different shapes and sized.

With its community and rapid growth, we can definitely expect an influx of amazing libraries and integrations, making it the technology of choice for more companies.