Front-end Framework? Nah… I got this.
There I was, ripe with knowledge about all the recent Web API developments and ES6/ES7 features. I was set. I was going to build a web app all on my own. I was done with Vue. I enjoyed it, but it was like training wheels. I had outgrown it.
I jumped head first into development. I started by building out a sweet bundling process. This thing was beastly and lightning fast. I separated all of my app components into different directories, and wrote a Node script to package them all together and turn them into a single index.html file. Kinda like Webpack, but not as powerful. But seriously, Webpack? Ha, only scrubs would use such a thing. Nah, I got this.
I needed this to be a single-page application, so I had to find a way to render the proper HTML templates dynamically, dependent on the URL path. Easy, it only took around 20 lines of code. Vue Router? Ha, yeah right. I built my own router in less than a day’s time. It didn’t have any middleware, it couldn’t handle nested routes, and it didn’t do any of those other powerful features that Vue Router does. But hey, this was my router. My own, baby. You can’t beat that feeling of doing it all yourself.
Deployments Like A Boss
Once I got my bundling process working to my liking, I realized I could upload the single index.html file to an AWS S3 bucket and host the app directly from there. Didn’t even have to launch an Ec2, that day was a good day.
Off to the races, I was. I started building features left and right. First I built the login page, then the signup page, then all the damn pages. Sort of… like I didn’t build all of the functionality, I just built the skeleton. You know, the easy stuff. Day by day, week by week, my app was starting to feel like a real web application!
Not only was I building a baller-ass web app that was going to shake up the web development world, but I was learning so much every day. In fact, I was spending about two-to-four hours a day just researching the Web API’s documentation and trying to figure out why things weren’t working. I eventually did get those silly little things to work, after a good day or two, or three. Whatever, it was only a day or so, right?
Data Synchronization, The Ultimate Killer
I built sweet web components that were keeping all of my site’s data in sync with the DOM. Well, not all of the data. Only a small portion of the data was in sync with the DOM. The rest I hadn’t built yet. I was getting there though. My components were already pretty ginormous, but at least they were working!
Well, the few parts I built were working… not all the other features I hadn’t gotten to.
Now all I had to do was figure out how to render each component in the most efficient way possible. It was simple. All I had to do was create setters and getters for each of my component’s properties. Then I had to implement functionality to handle dynamic attributes to allow parent components to access and reassign them. Then, I needed to create a render function in each component to handle the data changes and update the DOM. I wanted to use string interpolation for this, inside of the template, kinda like how it’s done in Vue, but that was going to take too long to build, I was on a deadline, after all.
Instead of that, I got to building these sweet render functions. Man, these functions were so fun to write. Every property on the component had to be accounted for. You know what they say;
“You don’t have to reinvent the wheel, but sometimes you might as well give it a shot.”
- Anonymous
Let’s Back Up For a Hot Second
Although my productivity nearly slowed to a halt, I was still pushing on when I realized that maybe my stubbornness had led me astray.
I realized I was building my own framework and build-tools. Except, I was building them quickly, not testing them, and not accounting for performance or security. Basically, I was building a worse version of Vue and Webpack, and it was taking me three times longer to build the application because of it. Did I mention I was building this web app on a deadline for a paying customer?
In spite of my stupidity, this process helped me to develop a greater appreciation for front-end frameworks. They make web development a breeze. I can only imagine what web-development was like 15–20 years ago, trying to do everything with no Javascript classes, no npm modules, and no robust frameworks. To all of you senior devs that remember those days, I salute you for braving the course and building great tools for the future generations.
The Enlightened Programmer
So what did I end up doing? I took all of my CSS, HTML and Javascript logic and injected them into a Nuxt app. Nuxt is a higher-level framework built on top of Vue and Webpack. It’s a true beast, and I can’t recommend it highly enough. I had everything up-and-running in three days, and was building new features faster than a hare on fire.
Just remember, you don’t need a front-end framework. But that doesn’t mean you shouldn’t use one.
