3 ms·
I rewrote a ~30k line React app in Mithril and since then it's been my go-to view library. It's not mentioned here often, which is surprising given how nice it
by seabass 8y ago
I rewrote a ~30k line React app in Mithril and since then it's been my go-to view library. It's not mentioned here often, which is surprising given how nice it is to work with. The biggest improvements for my workflow have been closure components and the css selector syntax.
Closure components let you use closures to hold state, which ends up being a very elegant pattern. In react:
class Square extends React.Component {
constructor(props) {
super(props);
this.state = {
value: null,
};
}
render() {
return (
<button
className="square"
onClick={() => this.setState({value: 'X'})}
>
{this.state.value}
</button>
);
}
}
Is roughly equivalent to the following mithril code:
function Square() {
const state = { value: null };
return {
view() {
return (
m('button.square', {
onclick() { state.value = 'X'; }
}, state.value);
);
}
}
}
Notice that the closure gives us access to the state without needing to know what `this` refers to. You can also see the selector syntax in the mithril hyperscript above (`'button.square'`). That becomes especially nice if you're using an approach like tachyons for css, where simple classes are layered to create a style. I use this all the time for layout, which in react I would have created a bunch of stateless components for. Also worth noting: we happen to be directly mutating state in this example, but since mithril isn't opinionated about that you could really store and update your state however you please. Also, for quick projects that don't justify all the cruft that you get with `create-react-app`, it's nice to be able to just use a framework with no build steps whatsoever.