Writing a JavaScript framework from scratch.

Where do you start when there is already VUE and React?

For well over twenty years, I have been a full stack developer. In that time I worked with JavaScript extensively. One of the main issue with development is how things were so scattered. To do something simple I had to either use a third party plugin, or dive into the snippets-bin to achieve something meaningful. Development should be fun, not a chore. There should be a better way, I thought. So in 2024 I decided to write a JavaScript framework. Today, after a year of refining it, I committed UX.js 2.0. And here is what I learned building it.

It is no small feat to create a framework that runs smoothly. there are a lot of things to consider when designing a JavaScript framework. And so a lot of my time went into planning and organizing. How do I structure things so that I do not have to refactor much later on? How can I make sure it runs smoothly and in all browsers seamlessly? And what does a modern framework need to do? How do I wanted it to be? There were a lot of things to ferret out before I could even start writing down my first line of code. That process took about half of my time, another third went into testing rigorously. Leaving only a third of the time in writing the actual code for the framework.

First, a short introduction to UX.js. I named it so, because I wanted it to reflect the idea that it can be useful for front-end developers wanting to have a framework that aids in quick delivery of common front-end development tasks for a better user experience. So I tracked down the most common used techniques in front-end development, dived deep into ECMAScript, read all the latest JavaScript techniques and set my aim to automate the most used front-end development techniques.

UX.js in short:

UX.js is a powerful and lightweight JavaScript framework designed for building both single-page applications (SPAs) and multi-page applications (MPAs) with ease. It provides a structured and efficient approach to front-end development, enabling developers to create dynamic, interactive, and highly responsive web applications for better user experiences.

Key Features of UX.js

Automates the most common front-end development tasks

UX Components — The framework introduces a component-based architecture

UX Plugin Support — Extend the core functionality of UX.js with plugins

Reactive Modules — The framework has a reactive model

With its focus on simplicity, flexibility, and performance, UX.js is an excellent choice for developers looking to build modern web applications with a clean and maintainable codebase.

Inspirations: Vue, React — What I wanted VUE to be.

When I started UX.js I knew about VUE and React. I wanted to create something similar, but lightweight and much more portable. UX.js is therefore a blend between VUE and React. I like VUE, but it was mising something: automating the most common front-end development techniques. So in essence, UX.js is what I wanted VUE to be, and a more basic version of react. The best of both worlds, I thought.

During writing UX.js, I bought a 700+ page book about React, and what I noticed from reading it, that it was on first glance, so difficult to understand why there should be so much code for doing a basic and simple tasks, like routing a module for example. I read the book carefully and I noticed that certain things could be done more efficient and with less code. React is very well engineered, but in my opinion it lacked something. That something was VUE. So I set out on my journey in designing and developing my framework so that it would be much easier to understand and, perhaps, useful for developers.

I begun working with creating basic text interpolation, similarly as VUE does. A simple hello world example sufficed to show the function of text interpolation. Then I incrementally added features that could manipulate the DOM from basic attributes; UX.js reads all attribute handlers and calls either a function based upon that, or listens for events. From intersection observers, event listeners, to swipe events and much more. When done in total, I created 50 demo pages showcasing what UX.js could do. But I did not stop there.

I wanted UX.js to cover basic reactive support, and so I started to design a simplified reactive model. The custom UX.js attribute :reactive basically wraps the whole reactive logic around default routing. When a user clicks on a link that has a :reactive attribute, UX.js renders a module, similarly as Reactive and VUE does, much more simplified, but still modular.

In these modules, there is a render() and effect() function which are called by UX.js. (custom functions can be added and subscribed to) it is also possible to set states, which can survive a browser refresh. By using the latest JavaScript techniques, I created a mini version of React that can achieve a similar effect. By omitting most of the architectural functionalities of React, I was able to make UX.js under 3000 lines of code, about a third of React. by using all the latest JavaScript techniques that performs very well and has similar functionalities that one would find in React and VUE.

UX.js is not done, version 2.0 is simply the beginning. It is an ongoing process in refining and adding more features to it. When I write this I also am working to implement a React code parser, to support reactive code. That is of later concern, right now UX.js version 2.0 is stable enough for production.

The key take-away from this is; that it is not easy to write a JavaScript framework, but it is a highly rewarding experience.

Final Thoughts

If you’re thinking about writing your own framework — do it.

It’s a deep dive into the underpinnings of JavaScript, browsers, architecture, and performance. You’ll learn more than you thought possible.

UX.js source code can be found at: https://github.com/flaneurette/UX.js

Talkr.app is powered by UX.js, written by Flaneurette.