Mithril.js – A modern client-side Javascript framework

Can someone summarize with an example that shows why this has benefits over React? I read the first few examples and it seems simple enough, but I've bought into the whole JSX benefit and don't see how those first few examples allow me to write less code and code that is closer to the HTML I'll eventually be rendering. Is it the tooling that mithril allows me to forget about? Is it something special that mithril gives me a novice who doesn't realize I'm being held back by using React?

(Mithril author here)

Usually, what I hear from folks is that you come out of using Mithril with more transferable knowledge than something like React.

One example that comes to mind was when someone realized you could implement an incredibly simple atomic CSS composition framework by basically doing this:

    /* some atomic CSS */
    .primary-color-700 {color:blue;}
    .pad-700 {padding:1em;}

    /* a bog standard CSS selector string */
    const MyWidget = '.primary-color-700.pad-700';

    /* a Mithril element */
    m(MyWidget) //  in JSX

So you can get a fairly aggressive CSS optimization scheme for basically free, and you can iteratively improve the quality of your atomic CSS as you learn more about plain CSS / semantic taxonomy practices. And meanwhile, you're still just writing bog standard CSS and Mithril templates. There's no compile-time shenanigans to dedupe styles, no extra library runtime, and CSS is actually CSS so if you server-render you stay on the browser's streaming rendering happy path instead of waiting blocked on scripts.

Now compare with what one would do with most frameworks: one would pick some CSS-in-JS library, get things done and over with, but probably learn nothing interesting in the process and have little idea of what sort of code is actually getting shipped to customers.

This is really useful. Thank you.

I recently rediscovered Mithril.

I needed to build a fairly complex tree-table in our legacy ES5 app and I initially turned to Vue to build the first prototype. I'm a big fan of Vue, but for the first time with Vue I found myself really fighting against the framework. In particular Vue's templating system and lack of template fragments make it hard to create complex HTML table elements as they require a strict structure. Another issue is our ES5 app already has its own build system so we'd either be stuck with using Vue without Webpack (which in Vue is a really inferior experience) or attempting to use both build systems which is a bit cumbersome.

While researching Vue template fragments I discovered Mithril has had support for fragments since its inception (React recently also added support for fragments). I had always discounted Mithril. I'm not sure why. Perhaps it's the simple homepage, the seemingly brief documentation, hyperscript, or the lack of HN hype. Wow was I ever so wrong. The documentation is short because the API surface area is tiny and this is a GOOD thing. I never felt like I was writing framework code or trying to figure out the Mithril way of doing things. It pretty much gets out of your way. Hyperscript, which I thought I would hate, turned out to be one of my favorite parts of using Mithril especially when I paired it with Tailwind CSS. Since Hyperscript is pure JavaScript, doesn't require a build step, and is the standard way of writing Mithril components, integrating Mithril into our legacy JS app was absolutely dead simple.

mithril.js includes a router and an ajax helper (that is much simpler than fetch)

If you include those in preact they may have similar size.