DEV Community

Pavel Kříž
Pavel Kříž

Posted on

1

Mithril PWA Todo app < 20 kB

This is my 5th write up on dev.to site. Yet another todo app written using Mithril JS.

Mithril JS

As a fan of mobile PWA app development I have written some mobile apps. SPA/PWA (mobile) apps are web pages/apps with some extra features written with combinations of HTML, CSS and JS.

I used to use Quasar framework (both JS and CSS) and VueJS (v2 --> v3).

Mithril JS is another framework for SPA (Single Page Apps). It is one lightweight JS file (cca 10 kB).

Well, I decided to write simple app with Mithril instead of Vue.

16 kB challenge

My first idea and challenge was to write lite app under 16 kB complete. The real SPA PWA app, HTML + CSS + JS, service worker, manifest, icon, all together under 16 kB.

And what is the simplest app than todo? There is no one :-)

As you can suggest from the title of this post, I haven't touch my goal and the entire app has slightly more than 16 kB.

Todo app

My app is under 20 kB total size, one page only with the ability to add, edit and delete todos. It has extra features: you can choose one of four background color of the todo, one of the five languages - although this is very funny, couse there are few words only to translate - and the background color of the app itself with gradient effect.

If you are interested or courious you can check it on its URL address: https://mithril-todo.netlify.app/

It is PWA app, so you can install it to your device (Android, iOS, Windows, Chrome OS).

Image of Datadog

Master Mobile Monitoring for iOS Apps

Monitor your app’s health with real-time insights into crash-free rates, start times, and more. Optimize performance and prevent user churn by addressing critical issues like app hangs, and ANRs. Learn how to keep your iOS app running smoothly across all devices by downloading this eBook.

Get The eBook

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more