Introduction to Mithril JS

Mithril is a sophisticated and lightweight JavaScript framework used for building Single Page Applications (SPAs).

Key Features

• Small size (less than 10 KB gzipped) for fast loading.
• Emphasizes simplicity and performance.
• Offers powerful and flexible API.

Getting Started

To get started, include the Mithril library in your project:

  <script src="https://unpkg.com/mithril/mithril.js"></script>

Creating a Component

A fundamental part of Mithril are components. They allow you to create reusable pieces of UI. Here’s a simple example:

  const ExampleComponent = {
    view: function() {
      return m("div", "Hello, Mithril!")
    }
  }

Rendering a Component

To render a component, use the m.mount function:

  m.mount(document.body, ExampleComponent);

Working with State

You can manage state using plain JavaScript objects:

  const Counter = {
    count: 0,
    view: function() {
      return m("div", [
        m("button", { onclick: () => { Counter.count++ } }, "Increment"),
        m("p", Counter.count)
      ])
    }
  }
  m.mount(document.body, Counter);

Fetching Data from an API

Mithril provides a m.request method to make HTTP requests:

  const UserList = {
    users: [],
    oninit: function() {
      m.request({
        method: "GET",
        url: "https://jsonplaceholder.typicode.com/users"
      })
      .then(function(result) {
        UserList.users = result;
      })
    },
    view: function() {
      return m("ul", UserList.users.map(function(user) {
        return m("li", user.name);
      }))
    }
  }
  m.mount(document.body, UserList);

Routing

Mithril provides built-in routing capabilities using m.route:

  const Home = {
    view: function() {
      return m("div", "Home")
    }
  }

  const About = {
    view: function() {
      return m("div", "About Us")
    }
  }

  m.route(document.body, "/", {
    "/": Home,
    "/about": About
  });

A Sample Application

Combining the above examples into a simple application:

  const Home = {
    view: function() {
      return m("div", [
        m("h1", "Home"),
        m("a", { href: "#!/about" }, "Go to About")
      ])
    }
  }

  const About = {
    view: function() {
      return m("div", [
        m("h1", "About Us"),
        m("a", { href: "#!/" }, "Go to Home")
      ])
    }
  }

  const App = {
    view: function() {
      return m("main", [
        m.route(document.body, "/home", {
          "/home": Home,
          "/about": About
        })
      ])
    }
  }

  m.mount(document.body, App);

Mithril offers a great balance between simplicity and power, providing all the essential tools to build modern web applications effectively.

For further reading, check the official Mithril documentation.

Hash: 3311063c3d681e3bb048ea56a5130a820bf6ddc606140ca2f2e3c692cdd61bbb