How Crafting My Own JavaScript Frontend Framework Elevated My Skills
Written on
Chapter 1: The Motivation Behind My Framework
The knowledge I've gained from developing my own JavaScript framework is invaluable. This endeavor provided the challenge I needed to advance my skills.
I have always been intrigued by the latest features in JavaScript. I spent considerable time exploring videos, articles, and the Mozilla Developer Network (MDN) to uncover new functionalities. However, one day, everything changed. A colleague of mine created his own JavaScript frontend framework, and I realized that this was a challenge I had to undertake myself.
Building a framework is no small feat. It requires a deep understanding of the Document Object Model (DOM) and JavaScript. To make the task more manageable, I drew inspiration from my colleague’s work, which helped me determine where to begin.
Section 1.1: The Initial Concept
With my inspiration in mind, I decided early on that I would not incorporate reactivity like Vue or React. My primary focus was on the ease of creating new components and optimizing speed. As development progressed, this focus became even more critical, and I found myself becoming increasingly fixated on it.
The first step was to compile a list of features I wanted my framework to include. Following that, I explored the latest JavaScript functions that I aimed to implement. With these decisions made, I was ready to dive in.
Subsection 1.1.1: Beginning the Coding Journey
I jumped straight into coding with my list of desired functions. Within a few hours, I had a preliminary version of the framework—just a few hundred lines of code. I incorporated the newest functions as custom web components and utilized the Shadow DOM.
Around this time, a question arose: What about rendering SVG elements? I examined my code and thought it should be straightforward to adapt the framework for this purpose. How wrong I was.
I needed to modify the main element of each SVG component to be an SVG element while retaining the connect and disconnect functionalities from the DOM. However, I hadn't tested my framework with standard elements yet.
After developing the SVG rendering feature, I wrote my first component using the framework, and nothing happened. Yes, you read that right—nothing.
Section 1.2: Learning from Mistakes
I was taken aback that my component didn’t work as expected. I reviewed my code and discovered several errors, which I corrected within a few hours. Ready for a second attempt, I tried again—and this time, it worked! After approximately eight hours of effort, my framework was operational. Although it was far from perfect, it was running, and I felt a sense of accomplishment.
Chapter 2: Expanding My Perspective
Creating a framework is a multifaceted challenge that encourages deep-level thinking. You must consider compatibility, performance, and extensibility throughout the entire development process. Even if you don’t succeed in building the framework, you'll gain a profound understanding of the DOM and discover functions that were previously unfamiliar to you. This is the inherent value of any project you embark upon.
Moreover, the joy and pride you experience upon seeing your creation come to life is unparalleled. There’s truly nothing like it.
Are you ready to take on the challenge? I highly encourage you to give it a try!
If you enjoyed reading my journey, consider supporting my work by buying me a coffee. Alternatively, if you’re interested in my writing, feel free to check out my other stories, show some love for this one, or follow my work for more updates.
The first video titled "Building Your Own Frontend Framework: Purposes & Fundamentals" by Federico Pereiro provides insights into the motivations and foundational concepts behind creating a custom frontend framework. It’s an excellent resource for anyone looking to understand the essential principles of this endeavor.
The second video, "Learn Any JavaScript Framework in 2 Hours | Part 2," is a comprehensive guide that helps viewers grasp various JavaScript frameworks quickly. It's a valuable tool for those eager to enhance their knowledge in a short amount of time.