Documentación de Mithril.js 2

¿Qué es Mithril.js?

Mithril.js es un framework de JavaScript moderno para el desarrollo de aplicaciones del lado del cliente, específicamente para construir Aplicaciones de Página Única (SPA - Single Page Applications). Es ligero (8.9 KiB comprimido con gzip), rápido y ofrece utilidades de enrutamiento y XHR (XMLHttpRequest) listas para usar.

Tamaño de descarga

Mithril.js (8.9 KiB)

Vue + Vue-Router + Vuex + fetch (40 KiB)

React + React-Router + Redux + fetch (64 KiB)

Angular (135 KiB)

Rendimiento

Mithril.js (6.4 ms)

Vue (9.8 ms)

React (12.1 ms)

Angular (11.5 ms)

Mithril.js es utilizado por compañías como Vimeo y Nike, y plataformas de código abierto como Lichess.

Si eres un desarrollador experimentado y quieres saber cómo se compara Mithril.js con otros frameworks, consulta la página de comparación de frameworks.

Mithril.js es compatible con IE11, Firefox ESR, y las dos últimas versiones de Firefox, Edge, Safari y Chrome. No se requieren polyfills.

¿Buscas la documentación de la v1? Haz clic aquí.

Empezando

Para facilitar el aprendizaje, una forma sencilla de probar Mithril.js es incluirlo desde un CDN y seguir este tutorial. Cubrirá la mayor parte de la API (incluyendo el enrutamiento y XHR), y solo tomará unos 10 minutos.

Creemos un archivo HTML para seguir el tutorial:

html

<body>
  <script src="https://unpkg.com/mithril/mithril.js"></script>
  <script>
    var root = document.body;

    // ¡Tu código va aquí!
  </script>
</body>

Para simplificar aún más las cosas, puedes probar Mithril.js directamente aquí. Este es un entorno de pruebas en vivo con Mithril.js precargado que, por cierto, también está construido con Mithril.

var root = document.body;

// Tu código aquí

m.mount(root, {
  view: function () {
    return m('h1', 'Pruébalo tú mismo');
  },
});

Haz clic aquí para abrir el ejemplo en flems.io

Hola mundo

Comencemos con algo muy simple: renderizar texto en la pantalla. Copia el siguiente código en tu archivo (y al decir "copia", me refiero a que lo escribas; aprenderás mejor).

javascript

var root = document.body;

m.render(root, 'Hola mundo');

Ahora, cambiemos el texto a otra cosa. Agrega esta línea de código debajo de la anterior:

javascript

m.render(root, 'Mi primera app');

Como puedes ver, usas el mismo código tanto para crear como para actualizar el HTML. Mithril.js calcula automáticamente la forma más eficiente de actualizar el texto, en lugar de recrearlo ciegamente desde cero.

Ejemplo en vivo

var root = document.body;

m.render(root, 'Hola Mundo');

Elementos DOM

Envolvámos nuestro texto en una etiqueta <h1>.

javascript

m.render(root, m('h1', 'Mi primera app'));

Puedes usar la función m() para describir cualquier estructura HTML que desees. Si necesitas agregar una clase al <h1>:

javascript

m('h1', { class: 'title' }, 'Mi primera app');

Si quieres tener múltiples elementos:

javascript

[m('h1', { class: 'title' }, 'Mi primera app'), m('button', 'Un botón')];

Y así sucesivamente:

javascript

m('main', [
  m('h1', { class: 'title' }, 'Mi primera app'),
  m('button', 'Un botón'),
]);

Ejemplo en vivo

var root = document.body;

m.render(root, [
  m('main', [
    m('h1', { class: 'title' }, 'Mi primera app'),
    m('button', 'Un botón'),
  ]),
]);

Nota: Si prefieres la sintaxis <html>, puedes usarla mediante un plugin de Babel.

jsx

// Sintaxis HTML vía el plugin JSX de Babel
<main>
  <h1 class="title">Mi primera app</h1>
  <button>Un botón</button>
</main>

Componentes

Un componente de Mithril.js es un objeto que contiene una función view. Aquí está el código de arriba como un componente:

javascript

var Hello = {
  view: function () {
    return m('main', [
      m('h1', { class: 'title' }, 'Mi primera app'),
      m('button', 'Un botón'),
    ]);
  },
};

Para activar el componente, usamos m.mount.

javascript

m.mount(root, Hello);

Esto genera el siguiente marcado:

html

<main>
  <h1 class="title">Mi primera app</h1>
  <button>Un botón</button>
</main>

La función m.mount es similar a m.render, pero en lugar de renderizar HTML solo una vez, activa el sistema de redibujado automático de Mithril.js. Para entender esto, agreguemos algunos eventos:

javascript

var count = 0; // se agregó una variable

var Hello = {
  view: function () {
    return m('main', [
      m('h1', { class: 'title' }, 'Mi primera app'),
      // se cambió la siguiente línea
      m(
        'button',
        {
          onclick: function () {
            count++;
          },
        },
        count + ' clics'
      ),
    ]);
  },
};

m.mount(root, Hello);

Definimos un evento onclick en el botón, que incrementa una variable count (que se declaró al principio). Ahora también estamos renderizando el valor de esa variable en la etiqueta del botón.

Ahora puedes actualizar la etiqueta del botón haciendo clic en el botón. Dado que usamos m.mount, no necesitas llamar manualmente a m.render para aplicar los cambios en la variable count al HTML; Mithril.js lo hace automáticamente.

Si te preocupa el rendimiento, Mithril.js es muy eficiente al renderizar actualizaciones, ya que solo modifica las partes del DOM que son absolutamente necesarias. Así que, en nuestro ejemplo anterior, cuando haces clic en el botón, el texto en él es la única parte del DOM que Mithril.js realmente actualiza.

Ejemplo en vivo

var root = document.body;
var count = 0; // se agregó una variable

var Hello = {
  view: function () {
    return m('main', [
      m(
        'h1',
        {
          class: 'title',
        },
        'Mi primera app'
      ),
      m(
        'button',
        {
          onclick: function () {
            count++;
          },
        },
        count + ' clics'
      ),
    ]);
  },
};

m.mount(root, Hello);

Enrutamiento

El enrutamiento (routing) se refiere al proceso de navegación entre diferentes pantallas en una aplicación.

Agreguemos una página de inicio que aparezca antes de nuestro contador de clics. Primero creamos un componente para ello:

javascript

var Splash = {
  view: function () {
    return m('a', { href: '#!/hello' }, '¡Entrar!');
  },
};

La parte #! se conoce como hashbang y es una convención común en las Aplicaciones de Página Única para indicar que lo que le sigue (la parte /hello) es una ruta.

Ahora que vamos a tener más de una pantalla, usamos m.route en lugar de m.mount.

javascript

m.route(root, '/splash', {
  '/splash': Splash,
  '/hello': Hello,
});

La función m.route conserva la funcionalidad de auto-redibujado de m.mount y, además, habilita el reconocimiento de URL, lo que permite a Mithril.js saber qué componente renderizar según la URL.

El argumento "/splash" justo después de root indica que esa es la ruta por defecto. Es decir, si el hashbang en la URL no coincide con ninguna de las rutas definidas (/splash y /hello, en nuestro caso), entonces Mithril.js redirige a la ruta por defecto. Por lo tanto, si abres la página en un navegador y la URL es https://localhost, serás redirigido a https://localhost/#!/splash.

Además, como era de esperar, hacer clic en el enlace en la página de inicio te lleva a la pantalla del contador de clics que creamos anteriormente. Observa que ahora tu URL apuntará a https://localhost/#!/hello. Puedes navegar hacia adelante y hacia atrás a la página de inicio usando los botones de retroceso y avance del navegador.

Ejemplo en vivo

var root = document.body;
var count = 0;

var Hello = {
  view: function () {
    return m('main', [
      m(
        'h1',
        {
          class: 'title',
        },
        'Mi primera app'
      ),
      m(
        'button',
        {
          onclick: function () {
            count++;
          },
        },
        count + ' clics'
      ),
    ]);
  },
};

var Splash = {
  view: function () {
    return m(
      'a',
      {
        href: '#!/hello',
      },
      '¡Entrar!'
    );
  },
};

m.route(root, '/splash', {
  '/splash': Splash,
  '/hello': Hello,
});

XHR

Básicamente, XHR (XMLHttpRequest) es una forma de comunicarse con un servidor.

Cambiemos nuestro contador de clics para que guarde los datos en un servidor. Para el servidor, usaremos REM, una API REST simulada diseñada para aplicaciones de demostración como este tutorial.

Primero creamos una función que llama a m.request. La propiedad url especifica un endpoint que representa un recurso. La propiedad method especifica el tipo de acción que estamos realizando (típicamente el método PUT, que realiza un upsert). body es la carga útil que enviamos al endpoint. withCredentials habilita el envío de cookies, lo cual es necesario para que la API REM funcione.

javascript

var count = 0;
var increment = function () {
  m.request({
    method: 'PUT',
    url: '//mithril-rem.fly.dev/api/tutorial/1',
    body: { count: count + 1 },
    withCredentials: true,
  }).then(function (data) {
    count = parseInt(data.count);
  });
};

Llamar a la función increment inserta o actualiza un objeto {count: 1} en el endpoint /api/tutorial/1. Este endpoint devuelve un objeto con el mismo valor de count que se le envió. Observa que la variable count se actualiza solo después de que la solicitud se completa, y se actualiza con el valor que devuelve el servidor.

Reemplacemos el controlador de eventos en el componente para llamar a la función increment en lugar de incrementar la variable count directamente:

javascript

var Hello = {
  view: function () {
    return m('main', [
      m('h1', { class: 'title' }, 'Mi primera app'),
      m('button', { onclick: increment }, count + ' clics'),
    ]);
  },
};

Hacer clic en el botón ahora debería actualizar el conteo.

Ejemplo en vivo

var root = document.body;
var count = 0;

var increment = function () {
  m.request({
    method: 'PUT',
    url: '//mithril-rem.fly.dev/api/tutorial/1',
    body: { count: count + 1 },
    withCredentials: true,
  }).then(function (data) {
    count = parseInt(data.count);
  });
};

var Hello = {
  view: function () {
    return m('main', [
      m(
        'h1',
        {
          class: 'title',
        },
        'Mi primera app'
      ),
      m(
        'button',
        {
          onclick: increment,
        },
        count + ' clics'
      ),
    ]);
  },
};

m.mount(root, Hello);

Cubrimos cómo crear y actualizar HTML, cómo crear componentes, cómo definir rutas para una Aplicación de una Sola Página e interactuar con un servidor a través de XHR.

Ahora que estás familiarizado con los conceptos básicos de la API de Mithril.js, te recomiendo consultar el tutorial de la aplicación simple, que te guiará en la construcción de una aplicación más completa.

Documentación de Mithril.js 2 ​

¿Qué es Mithril.js? ​

Tamaño de descarga

Rendimiento

Empezando ​

Hola mundo ​

Ejemplo en vivo ​

Elementos DOM ​

Ejemplo en vivo ​

Componentes ​

Ejemplo en vivo ​

Enrutamiento ​

Ejemplo en vivo ​

XHR ​

Ejemplo en vivo ​

Documentación de Mithril.js 2

¿Qué es Mithril.js?

Empezando

Hola mundo

Ejemplo en vivo

Elementos DOM

Ejemplo en vivo

Componentes

Ejemplo en vivo

Enrutamiento

Ejemplo en vivo

XHR

Ejemplo en vivo