Single-file web applications
A few weeks ago I made Amie, an application for keeping track of who you meet at conferences. Amie lets you create an event, then add people by name and/or domain, Mastodon, or BlueSky handle. 1
I was inspired to build Amie because I went to a web meetup a few months ago where I met many people with websites. I wanted a better way to keep track of the sites people shared with me than to leave browser tabs open on my phone, which I may accidentally close or otherwise lose track of. I haven’t used Amie at an event yet, but I plan to!
When I built Amie, an architectural question came to mind: can I build all of this in a single file using HTML, CSS, and JavaScript? The advantage of this approach would be: (i) I wouldn’t need to maintain a back-end (note: the kind of back-end I would want to build for an application storing contacts would involve significant privacy and security planning), and; (ii) a single file would mean that I could share the application with others. All data would be local.
With a single-file application, anyone could save the source of Amie, put it on their website, and their your own instance that works on their device. With this flexibility, people could add their own features, change the colour scheme of the application to make it their own, and make any other changes they want. If someone sees Amie and wants it to be pink, they can make a copy of the source code and make it pink!
This is related to my thoughts around how to promote a remix culture for the web. I am interested in tools built on, of, and for the web that people can copy, remix, and use for themselves. While Amie does not come with a license, I will at some point make sure it is under a public domain-compatible license like MIT 0 such that people have confidence all the code is theirs to play with and share.
I have another example of a time when I applied this single-file application pattern. Last year I built Athena (see live version), an experimental HTML editor for mobile devices, on a similar principle. I wanted all the code to be in a single file so that the application could be more easily shared. I was able to achieve that goal, so anyone could copy the source and have their own version of Athena. (Note: Athena is really experimental. I don’t recommend using it, but it is fun to play around with.)
The idea of a single-file application introduces difficulties around updates. If I update Amie to fix a bug, for example, how can I share those changes with everyone else? There could be some kind of email list to which people could subscribe for significant updates. People could do a diff to see what has been changed and decide what to keep in their version of the code. I don’t have a solution for update notifications for this kind of remixed software, but I thought I’d document this point anyway.
I also see a potential downfall of a single-page web application that is huge just so that it is in a single page. I would consider that an anti-pattern. The goal is not to compress an application into a page, but to consider what could be built as a small, shareable web page like Amie or Athena or my coffee/water ratio calculator page.
Technically, Amie is a few files: it has a service worker and manifest, for example, to support offline mode and a progressive web application mode, as well as a font that is used. But, the bulk of the application is in a single file and so I consider it in the spirit of the idea I am discussing here.
[1] Amie doesn’t make any requests to validate profiles: it just saves them in a list; @example@example.com is, for example, enough to know that a handle is for Mastodon, without having to do any validation.