Meltano is now using Vue CLI 3! 🎉

Since the early days of Meltano, we have been using Vue.js, a progressive JavaScript framework, to power our frontend application.

Until recently though, we were using Vue CLI 2 to power the infrastructure behind our app. Having gone through the transition from Vue CLI 2 to Vue CLI 3 multiple times, I knew that there were numerous benefits that the team would gain as a result:

Lowers the barrier for future contributions to the Vue app

Improved developer experience for things such as managing configuration of things like linting rules

Using the scaffold of pre-commit linting in order to minimize back and forth on merge requests

And while everything was working smoothly, the team decided it was time to upgrade.

Why upgrade to Vue CLI 3?

As some of you may know, Meltano is entirely open-source. As a result, contributions from non-core team are not only more than welcome, but highly encouraged!

However, as someone who has spent a fair amount of time with the open source community, one of the biggest hurdles to contributing to a codebase that you are not intimately familiar with is the onboarding time it takes to be productive. After all, your time is extremely valuable and we want to ensure that you spend it doing something impactful rather than wading through a bunch of configuration options.

While one could argue that people “should” be able to navigate the old Vue CLI configuration options, the reality is that we needed to leverage the new Vue CLI 3 tooling in order to:

#1. Reduce technical debt

As the core library continues to grow and change, any custom configurations that we make to things such as webpack will only add to the complexity of a migration in the future.

#2. Improve the security of our code

For those who are active open source contributors, one of the major changes that came to GitHub is the alert to security vulnerabilities within dependencies that projects use. And although it would be great if we lived in a world where people did not attempt to take advantage of others by injecting malicious code in seemingly harmless packages, this is a reality of using open source libraries.

#3. Make it easier for you to contribute

At the end of the day, creating an environment that makes it easy for developers to contribute is critical to any open source project looking to thrive in the ecosystem. This means we want to make sure that you are:

Able to easily understand how to navigate our codebase since we are following many of the best practices recommended in the Vue community

Using the latest and greatest tools so that your skills are continually sharpened

Productive and creating impact in as little time as possible

What are the technical benefits?

For those who are new to Vue CLI 3, the prime directive of any CLI tool for frontend frameworks is to help automate processes such as:

Creating intelligently bundled scripts

Automatically injecting them into final production code

Managing configuration for build processes such as transpilation and integration of libraries to improve the overall developer experience

It has a lot of features out of the box

Here is what makes Vue CLI 3 special though:

Once it is installed, Vue CLI 3 makes it incredibly easy to progressively enhance Vue apps with popular tools and functionality such as:

Babel

ESLint

TypeScript

PostCSS

PWA

Unit & E2E Testing

It has a Graphical User Interface (GUI)!

Although it might seem counter-intuitive, there is a GUI to allow for an intuitive and powerful way to manage your Vue apps. Whether it is creating, developing and/or maintaining your projects, the GUI is a breath of fresh air when it comes to helping us accomplish these tasks.

It has a plugin system which makes it extensible

With an intuitive plugin system, it is easier than ever to leverage community built plugins to solve common problems. In addition, this means that users are more easily able to discover other plugins which provides the team additional opportunities for outreach.

Configuration without the mess of ejecting

Rather than put the burden of maintaining all the various standard configurations in your repo, Vue CLI 3 abstracts that away so that the longevity of a project’s infrastructure is lengthened. An additional benefit is that this ensures that any configurations being tracked in a repo are custom to the project itself. This is a big relief from a developer experience perspective since you do not have to worry about accidentally overriding default behavior.

Final Thoughts

Since we have upgraded to Vue CLI 3, the team has already been seeing benefits of the new infrastructure with things like: