Lucia.js: Creating Performance-Focused Web Applications

Clickety-click. Clack. Loading Bar. I try to play my favorite game online but I’m getting beat by enemies because of lag. This experience is not unique one. Just imagine, going to Amazon or Google, I’m sure you’ve experienced sluggish and slow loading speeds. I mean, isn’t it supposed to be 2021? Maybe if you were back in the 2000s, this would be acceptable, but users now expect blink-of-an-eye loading speeds. Why aren’t websites able to accomplish this with the advent of faster computers, networks, and web technologies? This isn’t to blame on developers. In fact, they are stuck in the bottleneck of choosing between two evils: on one side using plain web technologies and JavaScript, creating an arduous developer experience, decreasing maintainability and readability; or on the other side, a JavaScript library, which provides componentization and a suite of features, but resulting in poor web performance. It’s the ultimate dilemma, and this is what I experienced back in 2018, two years into my web development journey. I wondered why there was no library that offered both performance and features for me to use, and I know many other web developers agree with me on this issue.

In the past year, since the COVID-19 pandemic came down, I came upon this issue again. I had plentiful amounts of time to work and learn new technologies, but after studying the entire summer, I just wanted to have some fun. During that August afternoon, I hacked up a prototype of a DOM-based text interpolation engine. When I shared it with some of my peers, they really liked the project because of its simplicity and speed. Although it was nothing to marvel at, I realized that this might be something that not only could be useful to me, it was actually useful to other developers. As months passed by, with many hours and hours (10 hours a week, spanning almost 35 weeks) spent into research, development, discussion, and debugging, I incrementally iterated upon every version.

As I published new versions and contributed more code, eventually what I wanted to do short-term and long-term became disorganized, so I turned to the Github platform. It itself is a simple platform for version control systems, but once you dive into it, you’d find it but also allows for issue tracking, task management, and code sharing. Using the Github platform, I was able to break down tasks into actionable and incremental portions, allowing me to keep improving and stay on track, but also innovate and try new ideas when I wanted to. Although Github was great, disorganization was only one of the difficulties I faced. Due to the nature of the project being open-source, contributions to the project did not have any benefit from an outsider's perspective. Often, when creating a standard research project, researchers have direct access to experts and mentors, allowing them to get feedback on their research and have a clear path. For my project, I was virtually working alone, digging for the resources on library design, which were far and few between. Eventually, I realized that the best source of inspiration is the code of these pre-established libraries. To understand how to build a good web library, you first need to analyze and learn the pros and the cons of what already exists. Luckily enough, I had already been using these mainstream libraries for years, so I had a good understanding of what features were necessary and what features were not cost-efficient in terms of meaningful value.  Although my research journey was lonely, difficult and time-consuming, I learned a lot and was able to apply the lessons I learned in my own library.

My project was completed at home, as my project is fully online. I was not officially supervised by any specific person(s), as there were no available mentors that had expertise in my area.However that did not scare me off of this challenge. I did work under the Camas High MST Magnet Research Program, but they have provided me a lot of freedom on what I am able to do with this project. Both of my nominees, Mrs. Brianna Abraham and Mr. Samuel Greene are teachers for Camas High MST Magnet who encouraged me to pursue what I want to do. In regards to assistance to my project, I had very little in terms of direct access. Most of what I was able to extrapolate and learn was from analyzing other libraries’ source code and documentation, as well as lots and lots of experimenting by building my own. Some of my inspirations for the philosophy behind library design come from Evan You and Caleb Porzio, who are both creators of popular web libraries. When sharing my web library online on YC Hacker News, I received lots of feedback from actual web developers, and a user who goes by the username canDry provided me a lot of resources on how other people have created these types of libraries and promotion avenues. I am extremely grateful for his advice, as Lucia would not be here today if it was not for him.

COVID-19 not only didn’t negatively affect my project, it also contributed to the idea behind Lucia, and is one of my motivations. During the COVID-19 lockdown, I created a web platform called COVID Heroes, which connected people in need with local community suppliers. One major difficulty I faced was with how frustrating using libraries was. I initially started using no library, but that quickly became an issue as it took too long to write and time was of the essence. Once I switched to a web library, it initially was great, in fact I was able to increase maintainability and push stable features quickly.  However, as the web platform became busier and more users depended on the platform, using a web library became somewhat of a burden. The majority of the features that the libraries provided I didn’t even use (I only used around 10% of the features), resulting in a substantially large code size and large amounts of waste. Not only this, web performance was degraded. When more and more posts were added to the platform, the library took exponentially longer to load these posts. This motivated me to create Lucia and provide a useful product that solves these issues: providing features that you need, while maintaining performance.

My submission has a high value impact on a specific niche of web developers worldwide. After I launched my project Lucia, it has impacted many areas already. My project has been used in tech startups, specifically a German tech startup called Wegli. It is also being used in the Repl.it and Glitch community platforms, which are services that offer a Google Docs-like experience for programming. My projectalso has been featured in major developer publications, including but not excluding JavaScript Weekly, Techmedia Habr, YC Hacker News, awesome-javascript, and BestOfJS. Not only this, it has qualified for the International Science and Engineering Fair (ISEF) and won first place at the Southwest Washington Regional Science Fair in February. In regards to the Github, my project  has received over 430+ stars, and had over 10k+ visitors to the website per day during the peak. These attributions show that it not only is useful to other developers, but it is being used in production right now and is positively impacting the world.

My submission also is innovative and can be replicated upon as it is inherently open-source and open-contribution. Other developers are able to add to my codebase upon approval, allowing for collaboration of new ideas. It also combines both raw performance with necessary features, improving how the web is built in regards to user and developer experience. It is unique because so far, nobody has successfully brought this sort of idea to a large playing field and have seriously considered this to be feasible. In fact, it is 5x faster in regards to boot up time, task execution, and code size than the average of all of the mainstream libraries I benchmarked according to my data.

I have seen my work benefiting other developers and I hope to see this trend continue. My next step is to promote my project further, so that it is able to have more developer awareness. I also want to build out more tooling, allowing for developers to apply to more complex use cases. I believe that my project could substantially disrupt how web applications are made, and through continuous innovation, I am able to impact further.

Page 1: Research Paper

Page 2: Video Presentation