#intervue: Jonathan Johnson, Creator of the Webpack Bundle Analyzer Packtracker

In this part of our #intervue series, Jonathan Johnson shares his journey of developing Packtracker, a Webpack Bundle Analyzer built with Rails and Vue.js.

You might find a link to a gem of a talk by him about this stack! Read on to find out more about his process and challenges.

Johnathan D Johnson

Full-Stack Software Engineer

Springfield, MO

About #intervues: This article series gives you insights about creators from the Vue.js community. You can learn about their journey, stack, and projects.

Can you tell us who you are and what you're currently doing?

My name is Jonathan Johnson and I'm a full-stack software engineer based in the midwest. I’ve been building web products in the SaaS world for nearly 10 years. I’m currently working to build-out the SaaS CI/CD platform at CloudBees by day, and am working on a webpack bundle analyzer called packtracker.io in my spare time.

Tell us a bit about the idea behind Packtracker!

After making the transition to webpack a while back, I was really enjoying the ability to pull in npm packages and make use of them on the front-end. Unfortunately, I had not stayed on top of my bundle size and upon checking it, I noticed we were sending megabytes of JavaScript down to our users. Knowing this was unacceptable, I wanted a way to check and make sure that the changes I was making were not ballooning our asset sizes. Such a service did not exist, so I decided to take a swing at building one.

The general idea behind packtracker.io is that we ingest your webpack bundle stats and then track that data over time, reporting changes in your asset's sizes back to your GitHub pull requests via pull request checks. This means that if you have a pull request that adds an npm package, you’ll know exactly how that package affects your bundle size before it ever hits your users.

We also have asset budgets that allow us to fail your pull requests if any individual assets exceed your budget. In addition to JavaScript, if you process your CSS, images, and fonts with webpack, we also report on those as well.

What's your tech stack?

There really are 3 primary pieces to talk about.

The first piece is the open source webpack plugin itself. It is responsible for collecting the data the service needs to perform its analysis and upload it. It’s fairly straightforward, and also comes with a CLI tool for frameworks that don’t expose the webpack configuration directly. We also have an experimental GitHub Action that performs the upload to our service if you’re feeling adventurous.

The next piece is the system that ingests the uploads. We use a mixture of AWS Lambda, S3, SQS to field and process the stat uploads.

The last piece is our Ruby on Rails application that handles all our business logic, user management, viewing of commits, and reporting data to your GitHub Pull Requests.

What part of Packtracker did you build with Vue.js?

All of the interactive elements of our Rails application are done using Vue.js. Everything from the charting, to the billing workflows.

What did the process of building it look like?

I recently gave a talk at RubyHACK 2019 about this process. Essentially because Ruby on Rails gives us a lot of rapid productivity when it comes to standard CRUD workflows, we don’t want to reinvent the wheel for those basic functions. But, when you do actually need some browser interactivity, you want to use a modern tool like Vue.js. We accomplish this by thinking less in terms of a “Single Page App”, but thinking about building “Multi App Pages”.

Have there been any particular challenges throughout this project?

Honestly, the biggest challenge in any side-project is staying motivated. I had many seasons of being intensely focused on it, but then also many seasons where it was the last thing I wanted to work on. Once you solve the interesting bits, it’s really difficult to push through and create an actual product out of it. User management and permissions systems aren’t terribly exciting 😄

How do you think Vue.js compares to other JS frameworks?

The thing that jumped out at me when starting with Vue.js is it feels very comfortable for someone coming from a standard web development workflow. That the concepts and shape of it have been made in a way that a person familiar with web development will not feel completely out of place in picking it up. That it’s malleable enough to fit many different types of workflows.

When comparing it to React, for example, it feels to me as though it takes far less conceptual overhead to understand what’s going on and how to use it.

Are there any Vue.js components or packages you really like?

We make heavy use of Vuex for more complex pages, and I can’t imagine the mess those pages would be without it.

Where can people learn more about you and your work?

I’m hoping to start blogging again soon on jondavidjohn.com and you can find me on Twitter and GitHub.

You can also follow updates from packtracker.io on Twitter.