Mithril.js: un framework JavaScript de moda

En la actualidad, puede ser realmente difícil elegir un marco de JavaScript para comenzar un nuevo proyecto. JavaScript es en la actualidad un lenguaje muy popular y presente en infinidad de proyectos que ha sabido evolucionar a lo largo de sus ya casi treinta años de vida. Durante este tiempo han ido apareciendo diferentes framework como jQuery, Angular, React, Knockout, Mithril, Vue, etc.

En esta “batalla” por decidir qué framework se hace con el podium al más popular parecía que React es el favorito, pero ¿qué pasa con Vue? ¿No sería mejor usar Angular gracias al respaldo ofrecido por Google, que lo hace más atractivo para las grandes empresas? ¿Qué pasa con NativeScript? ¿Qué ocurre si Facebook decide cambiar la licencia de React nuevamente? ¿Qué framework elegir?.

Si debo ser honesto, considero toda que el proceso de tomar una decisión puede ser agotador. Nadie quiere tomar la decisión “incorrecta”. Y aquí el error. No hay decisiones incorrectas si se toman tras valorar los pros y contras de cada framework. Lo que sí puede ser incorrecto es seguir “modas” y basar nuestra decisión en lo que otros comentan o es popular. Lo ideal es siempre ser un poco rebelde y olvidarse del ruido generado por el marketing detrás de cada uno de estos marcos populares.

Entonces, ¿Qué framework elegir? Quizá la solución pasa por tomar lápiz y papel y anotar aquellas características que deseamos se cumplan. Por ejemplo:

  • API simple: Cuando recién comienzas no te importa invertir tiempo aprendiendo cosas nuevas, incluso lo agradeces pero en lo personal cuanto menos conceptos tengo que aprender, menos culpable me siento por no conocer todas las características interesantes que me estoy perdiendo y que probablemente no sean relevantes para mí de todos modos. Es más, muchos de esas características se van descubriendo de manera puntual a medida que vas profundizando sobre la marcha.
  • Rápido y versátil: Seamos francos, salvo que seas un bicho raro a nadie le gusta un sitio lento. Y, como desarrollador, no quiero tener que trabajar demasiado para hacer que un sitio funcione. Así que un framework que te permita comenzar a trabajar sin invertir tiempo en la personalización debería ser algo prioritario en nuestra elección. Por otro lado, menos código en la biblioteca significa ahorrar un valioso ancho de banda cuando nuestro proyecto web se encuentre en el proceso de carga. Esto es especialmente importante en dispositivos móviles.
  • Que no requiera un paso de compilación: En la actualidad la mayoría de aplicaciones web son aplicaciones de una sola página creadas con Webpack. Pero qué ocurre si solo quiero añadir algo de JS en una página web normal para agregar algo de dinamismo a su comportamiento.
  • Arropado por la comunidad: Creo que no hay mucho que añadir aquí. Un buen framework debe ser aquel en donde la información fluya a través de su comunidad. Si es difícil encontrar algo de información o ayuda entonces tenemos un problema. En algún momento nos atascaremos y si no encontramos ayuda, entonces, ¿qué podemos hacer?.
  • Respetando lo que JavaScript nos ofrece de manera nativa: ¿Para qué añadir funcionalidades duplicadas a nuestro código? Esto es algo que hacen algunos frameworks, pero esto además de hinchar el código, agrega más sobrecarga a nuestro aprendizaje. No se trata de reinventar la rueda, se trata de aportar funcionalidades útiles.
  • Que interactúe fácilmente con otras bibliotecas: Podemos encontrar un montón de bibliotecas JavaScript para hacer todo tipo de cosas. Un framework no debería interferir y ser amigable con el resto del ecosistema.

Claro que sobre el papel todo es ideal pero, ¿en el mundo real hay un marco que satisfaga todos estos requisitos?

Mithril

Mithril es un framework JavaScript moderno que proporciona una representación de alto rendimiento, Mithril proporciona partes MVC jerárquicas junto con plantillas seguras por defecto con un DOM distintivo. Los componentes definen Mithril al igual que en React.js, sin embargo, aquí es mucho más simple de aprender, más rápido y de menor dimensión ( <8kb Gzip ).

Esto hace de Mithril ideal para widgets JavaScript integrados o interfaces de usuario que tienen requisitos de alto rendimiento.

Mithril es similar con React en que debe estar montado en un elemento específico, operando solo dentro de él y que utiliza la lógica de Javascript para controlar la representación. Pero difiere en que podemos en su estado global de modo fácil, sin compilador/transpilador.

Es tan simple que si sabes cómo funciona JavaScript, puedes aplicar completamente ese conocimiento al usar Mithril, incluidas cualquiera de las funciones y técnicas de programación funcional de JavaScript.

En lo personal lo he usado para construir pequeñas herramientas internas de la compañía, así como un mapa digital del campus muy visitado para una universidad. Lo he usado tanto en el contexto de una aplicación existente renderizada en PHP sin ningún tipo de cadena de compilación, como en una aplicación completa de una sola página con enrutamiento, ES6, recarga de módulos en caliente y etc.

Lo que inicialmente me atrajo a Mithril fue la promesa de ser una pequeña biblioteca que le brinda estructura y alivia la carga de pensar todo el rato en las actualizaciones que se producen en el DOM y poner nuestra atención en lo realmente importante. Si estás familiarizado con la programación basado en el modelo MVC ya sabes lo que quiero decir. Pero si no déjame explicarte lo que quiero decir:

  • POJOs: Mithril toma antiguos objetos JavaScript simples y no requiere ninguna función mágica o sistema de eventos para funcionar.
  • m.prop: Podemos usar m.prop para crear acceso a propiedades (getter-setter),. Podemos construirlos nosotros mismos pero Mithril lo pone muy fácil, porque tiene los métodos m.startComputation, m.endComputation y m.redraw a nuestra disposición.Estos métodos son fáciles de aprender y, a pesar de su simplicidad, son muy potentes gracias a la estrategia de rediseño configurable. Gracias a que trabajamos sobre VDOM no necesitamos sobreescribir el DOM hasta que realmente lo necesitemos.
  • Componentes hasta el final: la "estructura" que proporciona Mithril es muy enfocada y autónoma. Todo es un componente. Cada componente puede incorporar otros componentes.

  • Un enrutador robusto: simplemente funciona. Sin una configuración compleja. Simplemente declaramos una ruta para alimentar nuestros componentes.
  • "Hyperscript": la forma en que Mithril declara tu HTML es más simple que la mayoría. No necesitamos aprender diferentes sintaxis diferentes para nuestras plantillas ya que Mithril usa solo una: ¡JavaScript!.
  • Debuggable: dado que Mithril no necesita un sistema de compilación complejo, podemos depurar nuestro código manualmente, no es necesario realizar configuraciones complejas de testrunner. Si confiamos en la solidez de esta biblioteca (redibujando, enrutando y generando accesores de propiedad) y depurar será fácil porque todo lo demás es nuestro código.

Con Mithril no importa que hagamos, ya sea una SPA o solo algunos widgets para sitios HTML estáticos, siempre será un placer, porque depurar nuestro propio código es mucho más fácil sin muchas capas de abstracción de framework diferentes.

"Hola Mundo" con Mithril

Una prueba de lo fácil que puede ser escribir código con Mithril es creando nuestro primer “Hola Mundo”. Si bien este ejemplo puede no ser muy llamativo, es impresionante la poca cantidad de código que se necesita para crear una instancia de Mithril y renderizar algo.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/mithril/mithril.js"></script>
    <title>Hello, Dev!</title>
</head>
<body>
    <script>
        m.render(document.body, m('h1', 'Hello, Dev!'))
    </script>
</body>
</html>

 

Pero para darnos una idea mejor de lo simple que es trabajar con Mithril y especialmente con componentes. Para ello utilizaré un sencillo ejemplo, una aplicación para crear una lista de tareas en nuestro navegador.

todo.js

var root = document.getElementById('root');
var newTodo = '';
var todos = [];

function setNewTodo(value) {
  newTodo = value;
}

function removeTodo(i) {
  todos.splice(i, 1);
}

function addTodo(value) {
  todos.push(value);
  newTodo = '';
}

var TodoComponent = {
  view: function() {
    return m('div', [
      m('ul', todos.map(function(todo, i) {
        return m('li', [
          m('span', todo),
          m('strong', { href: '#', onclick: function() { removeTodo(i) } }, ' X'),
        ]);
      })),
      m('input', { value: newTodo, oninput: m.withAttr('value', setNewTodo) }),
      m('button', { onclick: function() { addTodo(newTodo) } }, 'Add Todo'),
    ]);
  }
};

m.mount(root, TodoComponent);

 

Index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Mithril Example</title>

  </head>
  <body>
    <p>I'm outside the root!</p>
    <div id="root"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mithril/2.0.4/mithril.min.js"></script>
    <script src="/js/todo.js"></script>
  </body>
</html>

 

Si todo ha ido bien, el resultado en nuestro navegador será un sencillo formulario en donde podemos añadir nuestra lista de tareas o eliminar aquellas de la lista haciendo click sobre la “X”.

 

Conclusiones

Mithril es un framework muy accesible, especialmente para principiantes. Es un marco compacto, ligero y elegante. Su estructura de representación rápida es adecuada para diferentes tipos de proyectos. Y si nos surge alguna duda dispone de una documentación en su sitio web oficial muy fácil de leer e implementar.

Por supuesto no es el framework definitivo, pero si nos gusta lo simple y no vamos a trabajar en un proyecto muy complejo y en donde el tiempo apremie, Mithril se comportará de una manera excepcional. Como una navaja suiza, siempre a punto para sacarnos del apuro.