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:
Claro que sobre el papel todo es ideal pero, ¿en el mundo real hay un marco que satisfaga todos estos requisitos?
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:
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.
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.
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);
<!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”.
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.