Hacker News Reader

Comment by lhorie | Hacker News Reader

FWIW, the framework I wrote (Mithril) is a direct product of working on a multiple-man-year Angular codebase and the pains that arise from such a beast. I wrote about that here ( http://lhorie.github.io/mithril-blog/lessons-learned-from-an... )

On a related topic, I talk about complexity walls (the idea of code that outgrows a framework's zone of comfort) here ( http://lhorie.github.io/mithril-blog/decreasing-cognitive-lo... ) and there are slides for a presentation I gave a while back that talks about the design decisions that went into Mithril to reduce learning curves. (here: http://lhorie.github.io/mithril-presentation-oct-js-tech-nig... )

View on HN

Mithril is a tremendous little framework, and Leo has done an exemplary job of writing it, documenting it and blogging about usage patterns and tricks. While declining frequent requests that he cram more functionality into its core, he takes the time to explain the trade-offs, showing a deep understanding of the problem space which gives me confidence to build upon his work. So thanks Leo!

Hopefully, in time, more people will realise the "zen" of mithril's minimal approach. In the meantime, interested readers can check out lichess.org, which recently rewrote its impressive UI using mithril.

I work at a coding bootcamp and we recently used Mithril to teach one of our JS units. I was skeptical at first that it would be properly understood by novice developers... boy was I wrong.

Mithril is an awesome framework. A breath of fresh air really.

Mithril "HTML" syntax is not for my taste:

return m("html", [

    m("body", [

        m("input"),

        m("button", "Add"),

        m("table", [

            m("tr", [

                m("td", [

                    m("input[type=checkbox]")

                ]),

                m("td", "task description"),

            ])

        ])

    ])

]);

Agreed, it's not the best. Maybe you can help come up with something more palatable?

I did a quick tweak of React's JSX transpiler to output mithril-compatible code [1], as the above was the sort of syntax I was using JSX to get away from!

    return <html>
      <body>
        <input>
        <button>Add</button>
        <table>
          <tbody>
            <tr>
              <td><input type="checkbox"/></td>
              <td>task description</td>
            </tr>
          </tbody>
        </table>
      </body>
    </html>

[1] https://github.com/insin/msx/

Definitely more readable than Mithril

yes man, this abstraction is horror, I hope mithril adheres to something else for declarative tasks a the one above

I think it starts to look like HAML / Slim / Jade once you use CoffeeScript. Understandably not for everyone, but I quite like it, and it doesn't mess with your syntax highlighting like JSX does.

  m "body",
    m "input"
    m "button", "Add"
    m "table",
      m "tr",
        m "td",
          m "input[type=checkbox]"
        m "td", "task description"

Where does Mithril fit in this stack: RequireJs, Knockout (with components), SammyJS (for routing/browser history and events)?

--After doing some reading it looks like it replaces some of knockout and sammy but I'd lose data binding and dependency tracking of knockout.

Mithril is roughly equal in scope to Knockout+Sammy. The small gap between what most frameworks call "bidirectional data binding" and what it actually is in terms of vanilla js can be bridged with simple functions (I talk about that in a slightly more advanced context here: http://lhorie.github.io/mithril-blog/asymmetrical-data-bindi... ).

Dependency tracking can refer to two things: tracking changes for the purpose of updating the DOM (which Mithril does handle, albeit in a different way), or computed properties (which I personally think are not a good idea, but that you could do w/ an observable library from microjs)

Reply on news.ycombinator.com