Mithril vs Aurelia 1: A Comprehensive Comparison

This website is powered by ItGalaxy.io

In the world of frontend development, Mithril and Aurelia 1 represent two distinct approaches to building web applications. While Mithril offers a lightweight, hyperscript-based approach with functional components, Aurelia 1 introduces a convention-based framework with powerful data binding and dependency injection. Let’s explore their differences and use cases.

Table of Contents

  1. Core Concepts
  2. Reactivity and State Management
  3. Templating and Components
  4. DOM Manipulation
  5. Event Handling
  6. Component Composition
  7. Form Handling
  8. Lifecycle Management
  9. Web App Features
  10. Performance and Bundle Size
  11. Learning Curve
  12. Conclusion

Core Concepts

Mithril and Aurelia 1 take fundamentally different approaches to building web applications:

  • Mithril uses a lightweight hyperscript-based approach with functional components and manual redraw triggers
  • Aurelia 1 employs a convention-based approach with powerful data binding and dependency injection

Reactivity and State Management

Declare State

Mithril

import m from "mithril";

export default function Name() {
  let name = "John";

  return {
    view: () => m("h1", `Hello ${name}`),
  };
}

Aurelia 1

<!-- name.html -->
<template>
  <h1>Hello ${name}</h1>
</template>

<!-- name.ts -->
export class NameCustomElement { name = "John"; }

Update State

Mithril

import m from "mithril";

export default function Name() {
  let name = "John";
  name = "Jane";
  return {
    view: () => m("h1", `Hello ${name}`),
  };
}

Aurelia 1

<!-- name.html -->
<template>
  <h1>Hello ${name}</h1>
</template>

<!-- name.ts -->
export class NameCustomElement { name = "John"; constructor() { this.name =
"Jane"; } }

Computed State

Mithril

import m from "mithril";

export default function DoubleCount() {
  let count = 10;
  let doubleCount = count * 2;
  return {
    view: () => m("div", doubleCount),
  };
}

Aurelia 1

<!-- double-count.html -->
<template>
  <div>${doubleCount}</div>
</template>

<!-- double-count.ts -->
export class DoubleCountCustomElement { count = 10; get doubleCount() { return
this.count * 2; } }

Templating

Minimal Template

Mithril

import m from "mithril";

export default function HelloWorld() {
  return {
    view: () => m("h1", "Hello World"),
  };
}

Aurelia 1

<template>
  <h1>Hello world</h1>
</template>

Styling

Mithril

import "./style.css";
import m from "mithril";

export default function CssStyle() {
  return {
    view: () =>
      m(
        "div",
        m("h1.title", "I am red"),
        m("button", { style: { fontSize: "10rem" } }, "I am a button")
      ),
  };
}

Aurelia 1

/* css-style.css */
.title {
  color: red;
}

Loop

Mithril

import m from "mithril";

export default function Colors() {
  const colors = ["red", "green", "blue"];
  return {
    view: () =>
      m(
        "ul",
        colors.map((color, idx) => m("li", { key: idx }, color))
      ),
  };
}

Aurelia 1

<template>
  <ul>
    <li repeat.for="color of colors">${color}</li>
  </ul>
</template>

Event Click

Mithril

import m from "mithril";

export default function Counter() {
  let count = 0;
  const incrementCount = () => (count = count + 1);
  return {
    view: () =>
      m(
        "div",
        m("p", `Counter: ${count}`),
        m("button", { onclick: incrementCount }, "+1")
      ),
  };
}

Aurelia 1

<template>
  <p>Counter: ${count}</p>
  <button click.trigger="incrementCount()">+1</button>
</template>

DOM Reference

Mithril

import m from "mithril";

export default function InputFocused() {
  let value = "";
  return {
    view: () =>
      m("input", {
        oncreate: ({ dom }) => dom.focus(),
        type: "text",
        value,
        oninput: (e) => (value = e.target.value),
      }),
  };
}

Aurelia 1

<template>
  <input ref="inputElement" />
</template>

Conditional

Mithril

import m from "mithril";
const TRAFFIC_LIGHTS = ["red", "orange", "green"];

export default function TrafficLight() {
  let lightIndex = 0;
  let currentLight = () => TRAFFIC_LIGHTS[lightIndex];

  const nextLight = () => (lightIndex + 1) % TRAFFIC_LIGHTS.length;

  const instructions = () => {
    switch (currentLight()) {
      case "red":
        return "STOP";
      case "orange":
        return "SLOW DOWN";
      case "green":
        return "GO";
    }
  };

  return {
    view: () =>
      m(
        "div",
        m("button", { onclick: nextLight }, "Next light"),
        m("p", `Light is: ${currentLight()}`),
        m("p", "You must ", m("span", instructions()))
      ),
  };
}

Aurelia 1

<template>
  <button click.trigger="nextLight()">Next light</button>
  <p>Light is: ${light}</p>
  <p>
    You must
    <span if.bind="light === 'red'">STOP</span>
    <span if.bind="light === 'orange'">SLOW DOWN</span>
    <span if.bind="light === 'green'">GO</span>
  </p>
</template>

Lifecycle

On Mount

Mithril

import m from "mithril";

export default function PageTitle() {
  return {
    view: () => m("p", `Page title: ${document.title}`),
  };
}

Aurelia 1

<template>
  <p>Page title is: ${pageTitle}</p>
</template>

On Unmount

Mithril

import m from "mithril";

export default function Time() {
  let time = new Date().toLocaleTimeString();

  const timer = setInterval(() => {
    time = new Date().toLocaleTimeString();
    m.redraw();
  }, 1000);

  return {
    view: () => m("p", `Current time: ${time}`),
    onremove: () => clearInterval(timer),
  };
}

Aurelia 1

<template>
  <p>Current time: ${time}</p>
</template>

Component Composition

Props

Mithril

import m from "mithril";
import UserProfile from "./UserProfile.js";

export default function App() {
  return {
    view: () =>
      m(UserProfile, {
        name: "john",
        age: 20,
        favouriteColors: ["green", "blue", "red"],
        isAvailable: true,
      }),
  };
}

Aurelia 1

<template>
  <require from="./user-profile"></require>
  <user-profile
    name.bind="name"
    age.bind="age"
    favourite-colors.bind="colors"
    is-available.bind="available"
  ></user-profile>
</template>

Emit to Parent

Mithril

import m from "mithril";
export const AnswerButton = ({ attrs: { onYes, onNo } }) => ({
  view: () =>
    m(
      "div",
      m("button", { onclick: onYes }, "YES"),
      m("button", { onclick: onNo }, "NO")
    ),
});

Aurelia 1

<template>
  <require from="./answer-button"></require>
  <p>Can I come ?</p>
  <answer-button action-handler.call="handleAnswer(reply)"></answer-button>
  <p style="font-size: 50px">${isHappy ? "😀" : "😥"}</p>
</template>

Slot

Mithril

import m from "mithril";
import { FunnyButton } from "./FunnyButton.jsx";

export default function App() {
  return {
    view: () => m(FunnyButton, "Click me!"),
  };
}

Aurelia 1

<template>
  <require from="./funny-button"></require>
  <funny-button>Click me !</funny-button>
</template>

Slot Fallback

Mithril

import m from "mithril";
import FunnyButton from "./FunnyButton.jsx";

export default function App() {
  return {
    view: () => m("", m(FunnyButton), m(FunnyButton, "I got Content")),
  };
}

Aurelia 1

<template>
  <require from="./funny-button"></require>
  <funny-button></funny-button>
  <funny-button>Click me !</funny-button>
</template>

Form Input

Input Text

Mithril

import m from "mithril";

export default function InputHello() {
  let text = "Hello world";
  const handleChange = ({ target: { value } }) => (text = value);

  return {
    view: () =>
      m("", m("p", text), m("input", { value: text, onchange: handleChange })),
  };
}

Aurelia 1

<template>
  <p>${text}</p>
  <input value.bind="text" />
</template>

Checkbox

Mithril

import m from "mithril";

export default function IsAvailable() {
  let isAvailable = false;
  const onUpdate = () => (isAvailable = !isAvailable);

  return {
    view: () =>
      m(
        "",
        m("input", {
          id: "is-available",
          type: "checkbox",
          checked: isAvailable,
          onchange: onUpdate,
        }),
        m("label", { for: "is-available" }, "Is available")
      ),
  };
}

Aurelia 1

<template>
  <input id="is-available" type="checkbox" checked.bind="isAvailable" />
  <label for="is-available">Is available</label>: ${isAvailable}
</template>

Radio

Mithril

import m from "mithril";

export default function PickPill() {
  let picked = "red";
  let pills = ["red", "green", "blue"];
  const handleChange = ({ target: { value } }) => (picked = value);

  return {
    view: () =>
      m(
        "",
        m("", `Picked: ${picked}`),
        pills.map((pill) =>
          m(
            ".",
            m("input", {
              id: pill,
              checked: picked == pill,
              type: "radio",
              value: pill,
              onchange: handleChange,
            }),
            m("label", { for: pill }, pill)
          )
        )
      ),
  };
}

Aurelia 1

<template>
  <div>Picked: ${picked}</div>

  <input id="blue-pill" checked.bind="picked" type="radio" value="blue" />
  <label for="blue-pill">Blue pill</label>

  <input id="red-pill" checked.bind="picked" type="radio" value="red" />
  <label for="red-pill">Red pill</label>
</template>

Select

Mithril

import m from "mithril";
const colors = [
  { id: 1, text: "red" },
  { id: 2, text: "blue" },
  { id: 3, text: "green" },
  { id: 4, text: "gray", isDisabled: true },
];

export default function ColorSelect() {
  let selectedColorId = 2;

  const handleSelect = ({ target: { value } }) => (selectedColorId = value);

  return {
    view: () =>
      m(
        "select",
        { value: selectedColorId, onchange: handleSelect },
        colors.map(({ id, text, isDisabled }) =>
          m("option", { key: id, id, disabled: isDisabled, value: id }, text)
        )
      ),
  };
}

Aurelia 1

<template>
  <select value.bind="selectedColorId">
    <option value="">Select A Color</option>
    <option
      repeat.for="color of colors"
      value.bind="color.id"
      disabled.bind="color.isDisabled"
    >
      ${color.text}
    </option>
  </select>
</template>

Web App Features

Fetch Data

Mithril

import m from "mithril";

export default function App() {
  let isLoading = false;
  let error = null;
  let users = [];

  async function fetchUsers() {
    isLoading = true;
    try {
      const { results } = await m.request(
        "https://randomuser.me/api/?results=3"
      );
      users = results;
    } catch (err) {
      error = err;
    }
    isLoading = false;
  }

  return {
    oninit: fetchUsers,
    view() {
      if (isLoading) return m("p", "Fetching users...");
      if (error) return m("p", "An error occurred while fetching users");
      return users.map((user) =>
        m(
          "li",
          { key: user.login.uuid },
          m("img", { src: user.picture.thumbnail, alt: "user" }),
          m("p", `${user.name.first} ${user.name.last}`)
        )
      );
    },
  };
}

Aurelia 1

<template>
  <p if.bind="isLoading">Fetching users...</p>
  <p if.bind="error">An error ocurred while fetching users</p>
  <ul if.bind="users">
    <li repeat.for="user of users">
      <img src.bind="user.picture.thumbnail" alt="user" />
      <p>${ user.name.first } ${ user.name.last }</p>
    </li>
  </ul>
</template>

Performance and Bundle Size

Mithril

  • Extremely lightweight (~10KB gzipped)
  • Fast virtual DOM diffing
  • Built-in routing and XHR
  • Minimal API surface

Aurelia 1

  • Convention over configuration
  • Powerful dependency injection
  • Strong data binding system
  • Modular architecture
  • Extensive ecosystem

Learning Curve

Mithril

  • Simple and straightforward API
  • Minimal concepts to learn
  • Functional programming approach
  • Excellent documentation

Aurelia 1

  • Convention-based approach
  • Object-oriented programming
  • Strong TypeScript support
  • Comprehensive documentation
  • Active community support

Conclusion

Choose Mithril if you:

  • Need a minimal, lightweight framework
  • Prefer functional programming
  • Want built-in routing and XHR
  • Value simplicity and performance
  • Are building small to medium applications

Choose Aurelia 1 if you:

  • Prefer convention over configuration
  • Need powerful dependency injection
  • Want strong data binding capabilities
  • Value object-oriented programming
  • Are building medium to large applications

Both frameworks excel in different scenarios:

  • Mithril is perfect for lightweight applications that need performance and simplicity
  • Aurelia 1 shines in larger applications that benefit from conventions and strong architecture

The choice between Mithril and Aurelia 1 often depends on your specific needs:

  • Use Mithril for small to medium projects that need performance and simplicity
  • Use Aurelia 1 for larger applications that need strong conventions and architecture





Decouvrez plus d’Offres de la plateform ItGalaxy.io :

Découvrez notre gamme complète de services et formations pour accélérer votre carrière.

1. Nous contactez

  • Description: Besoin de Formation et des Solutions cloud complètes pour vos applications
  • Links:

2. Infra as a Service

  • Description: Infrastructure cloud évolutive et sécurisée
  • Links:

3. Projets Développeurs

4. Développeurs

5. Formations Complètes

6. Marketplace

7. Blogs

This website is powered by ItGalaxy.io