Mithril vs Svelte: What are the differences?

Introduction: Mithril and Svelte are two popular JavaScript frameworks that are used to build user interfaces for web applications. While both frameworks share the goal of making web development more efficient and streamlined, there are several key differences between them.

1. Virtual DOM vs Compiler approach: Mithril, like other popular frameworks such as React, uses a virtual DOM to efficiently update the UI. It compares the previous and current states of the virtual DOM and applies only the necessary updates. On the other hand, Svelte takes a different approach by compiling the components at build time. This means that Svelte doesn't rely on the virtual DOM and generates code that is optimized to run directly on the browser, resulting in a smaller bundle size and faster rendering.

2. Size: Mithril is known for its small size, weighing in at just a few kilobytes. It has a minimalistic design and offers only the essential features needed to build web applications. Svelte, although it offers more features and capabilities, tends to have a larger bundle size due to its compiler-based approach. However, Svelte's ability to eliminate runtime dependencies can still result in smaller overall bundle sizes in certain cases.

3. Reactivity: Both Mithril and Svelte provide reactive programming capabilities, allowing developers to efficiently update the user interface based on changes in the underlying data. However, Svelte takes this a step further with its reactive declarations and reactive statements. These features automatically update the UI whenever the referenced data changes, providing a more intuitive and declarative approach to handling reactivity.

4. Component Structure: Mithril organizes components using a hierarchical structure, where components can have child components that inherit properties and state from their parent. Svelte, on the other hand, uses a flat component structure, where all components are independent and can be easily reused or composed together. This provides more flexibility in managing and organizing components in complex applications.

5. Syntax and Templating: Mithril uses a JavaScript-based syntax for creating components and templates, allowing developers to use the full power of JavaScript to define and manipulate UI components. Svelte, on the other hand, uses a custom templating language that resembles HTML, with added features like reactive statements and expressions. This can make it easier for developers who are more familiar with HTML to quickly get started with Svelte.

6. Build Process: Mithril can be used within any build process or framework, and it doesn't have any specific build requirements. Developers can choose their preferred build tools and configure them accordingly. Svelte, however, has its own build process based on Rollup, a module bundler. It provides a streamlined build experience with features like automatic code splitting and dead code elimination, but it can be a bit more restrictive for developers who prefer more flexibility in their build setup.

In summary, Mithril and Svelte have distinct approaches to building web applications. Mithril utilizes a virtual DOM, has a small footprint, supports hierarchical component structure, uses JavaScript syntax for templating, and can be easily integrated into any build process. On the other hand, Svelte uses a compiler approach, offers advanced reactivity features, has a different component structure with flat organization, uses its own templating language resembling HTML, and comes with its own build process based on Rollup.