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.
About #intervues: This article series gives you insights about creators from the Vue.js community. You can learn about their journey, stack, and projects.
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.
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.
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.
All of the interactive elements of our Rails application are done using Vue.js. Everything from the charting, to the billing workflows.
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”.
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 😄
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.
We make heavy use of Vuex for more complex pages, and I can’t imagine the mess those pages would be without it.
You can also follow updates from packtracker.io on Twitter.