Bundling Code-Bases with Large File Structures

Vite, Spotify and the Power of Genius.

Life is about Suffering

And building web applications helps you understand a bit of what suffering is like. It is not supposed to be fun, or fast, or awesome, but you most certainly have to get the job done with whichever tools you choose.

As a technologist, you are blessed with an array of tools that are needed to help you achieve your goals and whichever tool you choose has the potential to facilitate or completely destroy your chances of having a successful application, and given the fact that technology tools come and go, it’s up to you to update your tech stack every once-in-a new technology.

Or else.

My career as a technologist started with a simple Django application I built at the table in the small room that housed my techno-capital ambitions as a young immigrant. To fuel my love for writing, I built a blog I would use to host my articles and I named the domain (now defunct) after a nickname I had given myself at the time: Django-Guy. Six months later, my frontend enthusiasm had seen me switch from being a Django guy to a Vue menace.

Over a few months I took a rather weird deep dive into the Vue ecosystem and studied past Vue versions from Vue1 to Vue3. Then I went into NuxtJS and almost broke my back. After working with a few companies that use VueJS as their primary mode of communicating with their backend servers, all I can say is:

Evan You is a genius.

Only the Paranoid Survive

VueJS has a lot of functionalities absent in more popular frontend frameworks like Svelte and React that make it powerful for building fast and scalable frontend frameworks. But the genius of VueJS and the Vue ecosystem lies not in the fundamentals of its technology, but in the genius of its founder.

Much unlike Mark Zuckerberg’s top-down nature of problem solving that led to the wide-scale adoption of react, Evan You’s entire ideology is built around understanding problems deeply and solving them from the ground up to the customer.

As evident in many of the tools in the VueJS and NuxtJS ecosystem they are designed to follow Evan’s method of solving specific problems, and although they may not all be perfect, they do precisely what they are meant to do and more importantly, they do it better than many other frameworks out there.

But his genius doesn’t stop there.

Webpack and my mental health

Everytime I hear the word webpack, I get instant flashbacks from that one time I had a bug that almost jeopardized months of painstaking work. The same flashbacks I get from hearing the word rest, from the nights and weekends I spent building on the Django Rest framework.

Pardon me, I do not mean to scare you — Webpack is fun. And although I can’t say the same about the Django rest framework, I do wish it was faster.

See, the beautiful thing about Webpack is that you get to see your code in all its glory. From the entry webpack.config.js file, which gives connects your entire application for bundling in both development and production environments, through the entry directory configured by you — the 10x developer.

I dare say that as a creative developer, the pains of webpack are definitely worth it considering the large amount of files that are bundled for the sake of rendering scenes, 2D and 3D elements to be manipulated in the DOM.

But the struggle in this beauty is in its lack of speed.

Bundling away from the past

The technology industry is built on speed. And the faster you are to adopt new technologies (both internally and externally), the better for you and your company. With that in mind, it think it is not too far fetched to say that most new companies underestimate how fast things can change and the need to update their systems. I think the same can be said for Webpack.

Founded by Tobias Koppers, Sean Larkin, Johannes Ewald, Juho Vepsäläinen, Kees Kluskens, and open-source contributors Webpack was initially released on 19 February 2014 and up till now has remained the dominant bundling tool for modern web applications. Outperforming other native bundlers like gulp, grunt and browserify. I still believe it will remain relevant for at least a few more years but its influence has started to dwindle.

From 2018, all native modern web browsers began to support ES6 modules. And like all strategic inflection points, this created an opportunity for a new technology to emerge from the dust.

Getting Started with Vite — /:veet/

A Spotify illustration

According to new youtube videos, vite is what is supposed to replace webpack. And while I do not see it as a webpack replacement, I am definitely of the opinion that it offers a lot of performance improvements straight out the box. I say this because of the problems it has helped me solve in my work as a creative developer.

So about a few months ago I started integrating the current playing song feature you see in many websites. My website was built with plain Javascript (no frameworks). And since it is bundled with webpack, I found it hard to make requests to and from the Spotify API in the spotify.js component I built because webpack didn’t run the frontend (I didn’t know that). It only bundled it to be served by the browser on request.

After trying a few more solutions (including parcel), i stumbled on the ViteJS implementation of a website i built following a course by Luis Henrique Bizaro and instantly decided to see if ViteJS would solve my problem. It hasn’t solved it completely. But I had fun learning it so I’d like to share it with you.

npm create vite --app name

This is the command that starts the Vite dev server, prebuilding your dependencies and bringing out template options for you to choose for your application. Vite4 currently supports Vue, React, Preact, Lit Element, Svelte, and even Vanilla. It’s not limited to these, we will keep adding more as we go. For my vite-spotify-app, I chose the vanilla js template because: I am not a man of many problems. I hate stress.

Then I proceeded to change the root to the src folder I created which would house all my files, including the .env file I would use to retrieve my environment variables which was a problem in webpack because I couldn’t access the process.env object from my client in order to make API calls. For ViteJS you have to use import.meta.env to access your environment variables for the root folder.

To run the application, go to the terminal and type in npm run dev. This would start the ViteJS dev server. Your terminal should show your localhost which appears in 671ms for me which, unlike parcel and webpack, is rather fast.

For a more detailed illustration of the speed of ViteJS kindly take a look at this video.

The spotify application should show your currenttly playing song after following the guide in the readme of the github folder linked above. This article doesn’t go too deep into spotify since that is not the main focus of this article. For an introduction to the spotify API check out my previous article on the topic.
References

Since this article is a walkthrough of my personal experience with VueJS and ViteJS along with a small tutorial on building an application with Vite, there’s not much of a reference list, everything you need to get started with ViteJS is here.

However the links below are sources that can help you bolster your knowledge to go from a newbie to building more powerful applications with ViteJS

1. Develop with Vite, a talk by Antfu at Vue Beijing Conference.
2. Vite crash course, by Travesty Media.
3. Vite3 documentation.

Thank you so much for making it through this article and I wish you good success in building your first (or your next) ViteJS application. If you’re kind enough I’d love to know what you think about this article.

For an intro on the Spotify Web API and how to integrate it to your app, check out the links below.

1. Crunching the spotify Web API by Chukwuemeka Mba
2. Emeka Spotify Clone by Chukwuemeka Mba