Making a Web Application Framework

I never thought I'd be creating a framework, but here we are. Though I have to say it probably sounds more grandiose than it is. I'm not trying to reinvent the wheel. Rather, I intend to encapsulate what I'm already doing in my apps in a way that's easier to use. So it'll definitely be built on top of Vue, TailwindCSS, and Soukai.

But I have to start this task with a confession. I've already been working on this for a while 🙈️. Whilst doing the previous task, it was so boring that I just started to tinker on this "on the side". You may not know this, but I work 4 days a week at Moodle, and I allocate 1 day a week to "side-project work"; which is what I write about in this website. In a way, you could say I have a normal 5 days workweek; it's just that I'm self-employed 1 day a week (and I don't have a salary xD). But that means that I still have free weekends and afternoons where I do "life stuff" (not related to programming). However, as things go, sometimes I end up coding anyways. That's usually the same as my side-project work, but during the last month that has felt like a chore and I didn't feel like working on it. So you could say this has been my side-side-project 😅️.

Anyhow, I'm focusing my full attention on this now!

I started making apps "seriously" about 4 years ago (I've talked about this in a recent talk I gave at FOSDEM). During this process, I've been mostly learning about the Solid Protocol and how to make apps the best they can be (according to my tastes, of course). At the beginning, there was a lot of things that changed from one app to the next, but now I feel like I've converged on a certain architecture. The trouble is that I'd like to update my earlier apps, but I don't want to make a complete rewrite. So that's the basic idea and motivation for this task.

My ultimate goal with all of this is being able to focus on the UX of the app itself, rather than thinking about Solid or how to organize my code. I want to avoid accidental complexity complication through conceptual compression. The funny thing is that I was already doing that, back in the days when I was using Laravel. But when I started working on Solid Apps, I lost that. I regained the data layer with Soukai, and I want to create this framework for everything else.

So today, it's official. I'm working on Aerogel!

I haven't reached any important milestones yet, but it's been a month since I started working on this so I thought I'll give a short update on how things are going.

One of the new things I'm trying with this project is using a mono-repo. I have seen this in other frameworks, so I thought I'd give it a try and so far it's working great. I could have used some tools such as Lerna or Turborepo, but I started with npm's built-in in workspaces and so far that's enough.

I also tried using Vitest, and it's also very nice. It's been very easy to get started with since it works mostly like Jest, but mocking has been far easier and everything seems faster. There are also some neat features such as Testing Types that are missing from Jest. It also lives up to the promise of working with the same Vite config in my apps, but for library packages I'm using Rollup so the configuration isn't unified yet. Although I'm giving serious consideration to using Vite for bundling libraries as well. I'll explore that at some point.

Other than that, there isn't much else worth sharing. But if you're curious, I have set up a playground with some of the basic features I've been working on. There is also links to the source for each page, so if you're curious that should give you an idea of what working with the framework will look like.

Funnily enough, I still haven't added any Solid-specific functionality; that will come from Soukai and extracting the Authenticator pattern I'm using in my apps.

Given that we're in summer now and I'll be working less than usual, I don't expect to have any relevant updates for a couple of months. That's also the reason why I'm not thinking of my appetite or setting any deadlines yet. But I'll probably start thinking about that in September/October.

Summer is over (kind of), and I'm back in the saddle.

I did continue working on this during my stay in Japan, but I wasn't trying to get anything done. And to be honest, that's been my mindset for this task since I started it. But I think it's time to start setting some goals into my sight.

Some of the things I've been doing were productive though. For example, I finally added Offline First functionality to the framework, and it was easy to extract from Umai. Other things I've been doing haven't been so fun; in particular all the jazz with bundling, versioning, and taming Node's dependency hell. There's been a lot of talk about AIs taking our jobs as programmers, though I don't think that's happening any time soon. But if anything actually happens, I hope that is AIs taking care of all of this mess. One can only hope.

Anyhow, to wrap up this exploration phase I've prepared a demo that I think encompasses what the framework is all about. If you still weren't sure what the heck I'm trying to do, this should make it clear. And I thought the best way to do the demo was on video. You can find it in my Youtube channel: Aerogel Sneak Peek.

The process of making the video was in itself interesting, because it's the first time I do something like this. It's not like I'm going to become a Youtuber or anything, but I always enjoy watching videos of developers going through code. So I thought it would be fun to give it a shot myself. I'm not 100% happy with the result, but I also think the point of doing this is to get it done quickly, so it's fine that it turned out a bit rough. If you're curious about the tooling, I used OBS for recording the video/camera, and Olive for editing. Honestly, it was a lot easier than I expected. And if I want to improve anything about this in the future, it's more related with my presentation skills than video editing or recording. Special shoutout to Better Dev Screencasts though. Simon is awesome, and even though I didn't spend almost any time on my setup, it was still useful.

Now that that's done, my next goal will be to start writing real apps using the framework. There are still many things I haven't finished in the framework itself, but it's better to start using it rather than waiting for it to be perfect. And the best place to get started is rewriting Ramen. Ideally, the UI will stay the same, because one of my goals with this framework is to empower bespoke UIs. We'll see how that goes!