Dezember 1, 2020

React.js vs. Mithril.js - nein, nicht das Silber aus Herr der Ringe 🙄🧙🏻‍♂️

Mithril.js - wer kennt es nicht. Das JS-Framework Nummer I auf dem Markt. Aber was hat es eigentlich mit diesem "React.js" auf sich? Und wo liegen die Unterschiede zwischen beiden?

Spaß beiseite... Tatsächlich sind die Unterschiede gar nicht groß. Ja, wenn man möchte, kann Mithril sogar fast genauso aussehen wie React.

Standardmäßig verwendet Mithril Hyperscript als Templating Language, wohingegen React auf sein eigens kreiertes JSX setzt. Nun ist es aber so, dass auch Mithril so konfiguriert werden kann, dass es JSX versteht - was ich präferiere, da ich es nicht leiden kann, HTML zu abstrahieren. Danach sind beide kaum noch auseinander zu halten und haben in ihrer Funktionsweise diverse Parallelen. Auch, wenn sich Mithril selbst da natürlich trotzdem weit vorne sieht. 😉

Wer React kennt, dem dürfte das nun sehr bekannt vorkommen...

const ExampleView: m.Component<Attrs, State> = {
    
    oninit({state, attrs}: m.Vnode<Attrs, State>) {
        console.log('Ich wurde initiiert...');
    },
    
    oncreate({state, attrs}: m.Vnode<Attrs, State>) {
        console.log('Ich wurde gerendert...');
    },
    
    onremove({state, attrs}: m.Vnode<Attrs, State>) {
        console.log('Ich werde ausgeblendet und aus dem DOM geschmissen...');
    },
    
    view({state, attrs}: m.Vnode<Attrs, State>) {
        return (
            <div>Ich sehe zwar aus wie React. Bin es aber nicht.</div>
        );
    },
};

oder das...

function ExampleView() {
    view({state, attrs}: m.Vnode<Attrs, State>) {
        return (
            <div>blabla</div
        );
    }
}

via GIPHY

Beide Libs setzen auf Komponenten mit lifecycle methods und einer view-Methode zum Rendern. Zudem nutzen beide einen virtual DOM mit Key basiertem Abgleich. Ein wesentlicher Unterschied zwischen beiden dürfte aber sein, dass Mithril aufgrund von Events re-rendert, während React Veränderungen im State zum Anlass nimmt, die Komponente zu aktualisieren.

So führen bei Mithril zum Beispiel alle Javascript Events dazu, dass der redraw-Mechanismus ausgeführt wird. Auch nach Ajax-Requests, die mittels der in Mithril fest verbauten request-Methode abgesetzt werden, wird automatisch neu aufgebaut. Änderungen im State führen hingegen nicht zu einem redraw, weshalb es dem Entwickler auch selbst ermöglicht wird, mittels m.redraw() alles auffrischen zu lassen, wenn er meint, dass das nötig sei - was einem sehr viel Kontrolle über den rendering flow ermöglicht.

Eigentlich schade, dass es Mithril bislang nicht zu mehr Ruhm geschafft hat. Das Arbeiten mit der Library ist recht angenehm. Mittlerweile habe ich ziemlich viel damit programmiert und richtigen durch Mithril verursachten pain in the ass gab es eigentlich nie. Nichtsdestotrotz sollte man natürlich nicht außer Acht lassen, dass bei React Facebook im Hintergrund steht, während Mithril als Open Source Framework bloß knapp zwei wirklich stetige Contributor zur Seite hat - die allerdings sehr aktiv & präsent im Gitter-Chat abhängen, immer für eine Frage zu haben.

Ich bin durch meinen letzten Jobwechsel zu Mithril gekommen, da es dort schon im Einsatz war. Anfängliche Skepsis verflog, als JSX erfolgreich konfiguriert war. Heute ist mein gesamtes Side Project WsWf | wer-steht-wofuer.de darauf aufgebaut.

So langsam wird es aber mal Zeit, sich wieder etwas ausführlicher mit React auseinander zu setzen. Viele Sachen, wie React Hooks, kriegt man sonst nur noch von der Seitenlinie mit, obwohl sie nen coolen Eindruck machen. Deshalb: das nächste Mini-Frontend wird mit React umgesetzt. Die Architektur sollte das eigentlich hergeben.

Aber umgekehrt wird ein Schuh draus. Give it a try - it's worth it. Wer bisher nur React, Vue oder Angelar im Bett hatte, sollte vielleicht mal nen Seitensprung zu Mithril wagen. Vom Tellerrand zu springen, schadet ja bekanntlich nicht...

via GIPHY