JQUERY NO ES EL ÚNICO. PROBANDO MINIFIED.JS

< script src=”my own” title=”probando minified.js”>

En una aplicación web Javascript “sencilla”, es mucho lo que puedes necesitar: desde un framework CSS hasta una librería de manipulación del DOM y puede que algún manejador de templates HTML. Y como si esto no fuera suficiente, también pudieras necesitar integración con Backend (API REST y esas cosas ^^’ ), programación asíncrona (con Promises o callbacks ^^’ ) e incluso manipulación de objetos (underscore.js lo hace muy bien). Típicamente (o de facto) pensarías en Bootstrap CSS, jQuery y Handlebars para resolver…

¡Que bueno que jQuery no es el único!

Buscando y rebuscando nuevas formas de matar a jQuery (como siempre yo de asesino :mrgreen: ), me encontré con una grata sorpresa que no me decepcionó en lo absoluto. Se trata de Minified, una librería muy potente que para ser un peso ligero, no tiene nada que envidiarle a jQuery, ¿por qué?

QUE ME GUSTÓ DE MINIFIED…

  1. Realmente ligero: Todas las funciones de Minified (que no son pocas) caben en ¡8KB!
  2. API consistente: Las funciones universales .get() y .set() fueron las que más me impresionaron. Eso de usar funciones únicas para todo me parece genial.
  3. Modular: Minified tiene 5 módulos claramente identificados que verás más adelante.
  4. Todo en uno: Los 5 módulos con los que cuenta Minified comprenden manipulación del DOM y eventos, manejo de transiciones y animaciones CSS sencillas (fade y slide), creación de nodos, manejo de objetos Javascript y un sistema de templates HTML bastante parecido a Handlebars.
  5. Programación Asíncrona: Minified implementa una forma mínima de la API Promises A+ ¡por defecto!

BIEN… AHORA ¡MANOS AL CÓDIGO!

Para probar mi punto acá, decidí hacer una lista de tareas bien sencilla, que permita añadir y borrar tareas, muy similar a lo que hice en esta aplicación pero sin persistencia, usando todos los módulos de Minified. Para los CSS use Skeleton y Octicons como pack de íconos.

En los comentarios está la información relevante del código. Para mayor información consulta la API de Minified 😀 :

/* Aunque no se esté usando Node.js, Minified.js usa su propia forma de AMD (Asyncronous Module Definition) */
var MINI = require('minified');

/* Definición de espacios de nombre para todas las funciones de Minified.js */
var _ = MINI._,				// Helper de funciones Javascript (basado en "_")
		$ = MINI.$,				// Manipulación de DOM (como jQuery o Zepto)
		$$ = MINI.$$,			// Efectos especiales y transiciones CSS
		EE = MINI.EE,			// Creación de nodos y elementos del DOM
		HTML = MINI.HTML;	// Compilación de templates HTML (basado en mustache)

/* Manejador del Evento onload (como en jQuery o Zepto)*/
$(function() {
	// "_" tiene [casi] las mismas funciones de Underscore
	var today = _.formatValue('dd-MM-yyyy hh:mm a', new Date()),
	// Sintaxis de templates como mustache
			template = '

<div class="todo">

<h3 style="display: inline-block;">{{title}}<span class="u-pull-left" style="margin-right: 5px;"><i class="octicon octicon-x"></i></span></h3>


<span class="u-pull-right">{{date}}</span>

{{content}}
</div>



'
	//EE() permite crear elementos y nodos del DOM, también permite anidar elementos y crear formas complejas de interacción
			todoForm = EE('form', {'@id': 'todoForm'}, [
				EE('input', {'@id': 'title', '@type': 'text', '@placeholder': 'Título', '$marginRight': '5px'}),
				EE('input', {'@id': 'content', '@type': 'text', '@placeholder': 'Descripción', '@size': '69', '$marginRight': '5px'}),
				EE('button', {'@id': 'newTodo', 'className': 'button-primary'}, 'Nueva Tarea')
			]);

	// .add() añade un nodo hijo al selector
	$('#form').add(todoForm);

	// .toggle() permite crear mapas de animaciones o cambios entre dos estados
	var toggleForm = $('#form').toggle(
	//$$slide y $$fade maneja interacción automática slideIn y slideOut / fadeIn y fadeOut respectivamente
		{'$$slide': 0},
		{'$$slide': 1},
		300
	);

	// Manejo de eventos personalizados (click, change, focus, hover)
	$('#add').onClick(function() {
		toggleForm();
	});

	$('#newTodo').onClick(function() {
		var todo = {
			title: $('#title').get('value'), //Universal .get()
			date: today,
			content: $('#content').get('value')
		};

		toggleForm();

		$('#title, #content').set({'value': ''}); //Universal .set()

		//HTML() permite la "compilación" de templates con objetos
		$('#todo-list').add(HTML(template, todo));

		//Manejador de eventos asíncronos
		$('.octicon-x').onClick(closeTodoHandler);
	});

	function closeTodoHandler(e, index) {
		var self = this; // Viejo truco ^^'
		this.up('.todo')
			.animate({'$$fade': 1, '$$fade': 0}, 300) //Manejo de transiciones
			.then(function() { //Manejo de API Promises A+
				self.up('.todo').remove();
			});
	}

});

Y la vista principal

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="skeletonCSS/css/skeleton.css">
	<link rel="stylesheet" href="skeletonCSS/css/normalize.css">
	<link rel="stylesheet" href="octicons/octicons.css">
	<title>Lista de Tareas Minified</title>
</head>
<body>


<div class="container">


<div class="row">


<h2>Lista de Tareas</h2>


			<button id="add" class="button-primary">Añadir Nueva Tarea</button>


<hr>




<div id="form">
				<!-- Formulario de nueva tarea -->
			</div>




<div id="todo-list">
				<!-- Lista de tareas -->
			</div>


		</div>


	</div>


	<script src="minified.js"></script>
	<script src="todoApp.js"></script>
</body>
</html>

Hasta una próxima pequeña oportunidad 🙂

Posdata: Todos estos archivos fuente estarán están en mi Gato-Pulpo 😉

</script>

Anuncios