Overview

Mithril

Stacks88

Followers79

Votes86

Preact

Stacks444

Followers291

Votes28

Mithril vs Preact: What are the differences?

Introduction

In this article, we will compare the key differences between Mithril and Preact, two popular JavaScript libraries for building user interfaces. Both libraries are designed to be lightweight and efficient, but there are some important distinctions that developers should be aware of. Let's dive into the details.

Virtual DOM Implementation: Mithril and Preact utilize different approaches when it comes to handling the virtual DOM. Mithril uses a diffing algorithm that updates only the necessary parts of the DOM, resulting in efficient rendering and better performance. On the other hand, Preact uses a VNode system that aims to provide a similar API to React, making it easier for React users to switch to Preact.
Package Size: When it comes to the file size of the library, Preact has an advantage over Mithril. Preact's core library is remarkably small, with the minified version being around 4KB. This makes it an ideal choice for projects that prioritize size optimization. Mithril, although still lightweight, has a slightly larger file size compared to Preact.
API Similarity to React: If you are familiar with React, you might find Preact to be more straightforward to work with. Preact aims to provide a nearly identical API to React, including components, lifecycle methods, and hooks. This similarity allows React developers to easily migrate to Preact without significant changes to their codebase. However, Mithril has its own API, which may require a learning curve for React developers.
Community and Ecosystem: React has a massive community and a vibrant ecosystem, which makes finding resources, libraries, and solutions much easier. Preact, being built as a React alternative, can tap into this existing ecosystem and benefit from the wide range of available tools and plugins. Mithril, while having a dedicated community, may have a more limited set of resources and plugins compared to Preact.
Plugins and Extensions: Preact and Mithril offer different approaches when it comes to handling plugins and extensions. Preact has a built-in compatibility layer called "preact-compat" that allows it to work with existing React codebases and plugins. Mithril, on the other hand, provides a simpler and more lightweight core with fewer built-in features, relying on external plugins for additional functionality.
Project Popularity: In terms of popularity, React is undoubtedly at the top, followed by Preact and then Mithril. React has gained widespread adoption and has become the industry standard for building user interfaces. Preact, being designed as a lightweight alternative to React, has also gained popularity and has a growing user base. Mithril, while having its own dedicated community, may have a smaller user base compared to React and Preact.

In summary, Mithril and Preact are both lightweight JavaScript libraries for building user interfaces, but they differ in their virtual DOM implementation, package size, API similarity to React, community and ecosystem support, handling of plugins and extensions, and project popularity. It is important to consider these differences when choosing the right library for your project.

🔥 Trending in Frameworks on StackShare

SmartClient Framework by Isomorphic Software Frameworks

SmartClient Framework by Isomorphic Software

Try it View Docs Alternatives

Try

0

1

Advice on Mithril, Preact

Damiano

Oct 27, 2019

Decided

Preact offers an API which is extremely similar to React's for less than 10% of its size (and createElement is renamed to h, which makes the overall bundle a lot smaller). Although it is less compatible with other libraries than the latter (and its ecosystem is nowhere as developed), this is generally not a problem as Preact exposes the preact/compat API, which can be used as an alias both for React and ReactDOM and allows for the use of libraries which would otherwise just be compatible with React.

25.6k views25.6k

Comments

Detailed Comparison

Mithril	Preact
Mithril is around 12kb gzipped thanks to its small, focused, API. It provides a templating engine with a virtual DOM diff implementation for performant rendering, utilities for high-level modelling via functional composition, as well as support for routing and componentization.	Preact is an attempt to recreate the core value proposition of React (or similar libraries like Mithril) using as little code as possible, with first-class support for ES2015. Currently the library is around 3kb (minified & gzipped).
Only 12kb gzipped, no dependencies;Small API, small learning curve;Safe-by-default templates;Hierarchical MVC via components;Virtual DOM diffing and compilable templates;Intelligent auto-redrawing system	-
Statistics
Stacks 88	Stacks 444
Followers 79	Followers 291
Votes 86	Votes 28
Pros & Cons
Pros 16 Lightweight 12 Faster than React 10 Pure JavaScript 10 Virtual Dom 8 Robust Cons 1 Virtual Dom	Pros 15 Lightweight 5 Drop-in replacement for React 4 Performance 3 Props/state passed to render 1 ES6 class components
Integrations
TypeScript JavaScript	React

What are some alternatives to Mithril, Preact?

jQuery

jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.

AngularJS

AngularJS lets you write client-side web applications as if you had a smarter browser. It lets you use good old HTML (or HAML, Jade and friends!) as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. It automatically synchronizes data from your UI (view) with your JavaScript objects (model) through 2-way data binding.

React

Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.

Vue.js

It is a library for building interactive web interfaces. It provides data-reactive components with a simple and flexible API.

jQuery UI

Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

Ember.js

A JavaScript framework that does all of the heavy lifting that you'd normally have to do by hand. There are tasks that are common to every web app; It does those things for you, so you can focus on building killer features and UI.

Backbone.js

Backbone supplies structure to JavaScript-heavy applications by providing models key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface.

Svelte

If you've ever built a JavaScript application, the chances are you've encountered – or at least heard of – frameworks like React, Angular, Vue and Ractive. Like Svelte, these tools all share a goal of making it easy to build slick interactive user interfaces. Rather than interpreting your application code at run time, your app is converted into ideal JavaScript at build time. That means you don't pay the performance cost of the framework's abstractions, or incur a penalty when your app first loads.