Mejorar las aplicaciones web con AmplifyJS

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Parece que hay una nueva cosecha de bibliotecas de JavaScript de propósito especial cada semana. Al parecer, se acabaron los días de usar una sola biblioteca por proyecto. Hoy les presentaré una biblioteca de componentes muy interesante, AmplifyJS, que ofrece solo algunos componentes muy especializados.

Devs, Meet AmplifyJS

Según el sitio web:

AmplifyJS es un conjunto de componentes diseñados para resolver problemas comunes de aplicaciones web.

Suena prestigioso, pero ¿qué hay realmente en esta biblioteca?

AmplifyJS tiene tres piezas principales:

Una API de AJAX
Un sistema de eventos PubSub
Una API de almacenamiento del lado del cliente

¡Únete a mí ahora para un recorrido por la increíble biblioteca AmplifyJS! Vamos a construir un rastreador de empleados súper simple; en realidad, es solo una tabla con algunas características de aplicación, cortesía (en parte) de AmplifyJS.

No es necesario que nos preocupemos por los problemas de diseño y estilo de hoy, por lo que usaré la biblioteca de Twitter Bootstrap. Es increíblemente simple: solo incluye el link al archivo CSS, que te permite un enlace directo desde Github, y estás en el negocio.

Paso 1: Configurándolo

Entonces, hazte un directorio de proyectos. Comience con el archivo index.html y una carpeta js. Ahora, dirígete al sitio web de AmplifyJS y haz clic en el enorme botón rojo de "descarga". Una vez que tenga el archivo zip de la biblioteca, extráigalo y muévalo a la carpeta js. Vamos a necesitar algunas otras cosas también:

jQuery: el componente AJAX de Amplify utiliza la función AJAX de jQuery debajo de su API, al menos de forma predeterminada. Pero usaremos jQuery para otras cosas, así que entremos.
bootstrap-modal.js: La biblioteca de Twitter Bootstrap incluye algunos scripts para obtener todos los interactivos. Y vamos a utilizar uno: el plugin jQuery de la ventana modal. Descárgalo y agrégalo a esa carpeta js.
Hay otros dos scripts que mencionaré en el camino, pero estos nos escribiremos nosotros mismos.

Luego, comience nuestro archivo index.html como este:

<!DOCTYPE HTML>
<html>
  <head>
    <title>AmplifyJS</title>
    <link rel='stylesheet' href='http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css' />
  </head>
  <body>
    <div class='container'>
      <div class='row'>
        <div class='span16' id='alert-area'>
        </div>
      </div>
      <div class='row'>
        <div class='span4'>
            <h2>Commands</h2>
        </div>
        <div class='span12'>
          <h1>Employees</h1>
        </div>
      </div>
    </div>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>
    <script src='js/amplify/amplify.min.js'></script>
    <script src='js/bootstrap-modal.js'></script>
  </body>
</html>

Si no estás familiarizado con el uso de Twitter Bootstrap, verás que no es fácil de usar. Tenemos un container de 940px de ancho. Entonces, tenemos dos rows. El primero tiene una columna, que cubre las 16 columnas. La otra tiene dos columnas: una tiene 4 columnas de ancho y la otra tiene 12 columnas de ancho.

Una cosa más, antes de que lleguemos a una codificación real: vamos a abrir una ventana modal que nos permite ingresar empleados. Debajo de <div class='container'>, agregue este HTML de ventana modal. Sí, parece mucho código, pero principalmente son cosas de Bootstrap:

<div id='add-employee-modal' class='modal fade'>
  <div class='modal-header'>
    <a href='#' class='close'>x</a>
    <h3>Add an Employee</h3>
  </div>
  <div class='modal-body'>
    <form id='employee-form'>
      <div class='clearfix'>
        <label for='firstName'>First Name:</label>
        <div class='input'><input type='text' name='firstName' placeholder='John' /></div>
      </div>
      <div class='clearfix'>
        <label for='lastName'>Last Name:</label>
        <div class='input'><input type='text' name='lastName' placeholder='Doe' /></div>
      </div>
      <div class='clearfix'>
        <label for='role'>First Name:</label>
        <div class='input'><input type='text' name='role' placeholder='Designer' /></div>
      </div>
    </form>
  </div>
  <div class='modal-footer'>
    <button id='create-employee' class='btn primary'>Add</button> 
  </div>
</div>

De acuerdo, ¡estamos listos! Vamos a codificar.

Paso 2: La ventana modal

Abra una etiqueta script en la parte inferior de index.html (solo lo hago en línea, pero siento que debo ponerlo en un nuevo archivo JS). Comienza de esta manera:

  (function () {
    var employeeModal = $('#add-employee-modal').modal({ backdrop: 'static' });

  }());

Estamos usando el plugin modal de Bootstrap aquí; esto simplemente "crea una instancia" de la ventana modal. Ahora, queremos que la ventana aparezca cuando hacemos clic en el botón "Agregar empleado". Por supuesto, primero tendremos que agregar el botón: coloque esto en <div class='span4'>, justo debajo de <h2>.

  <p><button id='add-employee' data-controls-modal='add-employee-modal' class='btn'>Add Employee</button></p>

Ese atributo data-controls-modal='add-employee-modal' mostrará el modal con dicha identificación cuando se haga clic en el botón.

Por lo tanto, el usuario deberá completar el formulario, haga clic en el botón "Agregar" que tiene un ID de create-employee. Entonces, conectemos un controlador de eventos de clic para el botón:

$('#create-employee').click(function () {
    var form = $('#employee-form');
    employeeModal.modal('hide');
    EMPLOYEE.create(
        form.find('[name=firstName]').val(), 
        form.find('[name=lastName]').val(), 
        form.find('[name=role]').val()
    );
    form.find('input').val('');
});

Obtenemos el formulario, y luego ocultamos la ventana modal. Luego, llamaremos un método EMPLOYEE.create, pasando el nombre, el apellido y el rol como los tres parámetros. Finalmente, se borra el formulario.

`amplify.publish`

Pero espera, dices, ¿qué es EMPLOYEE.create? Bueno, es una micro-"clase" que he puesto en js/employee.js. Echale un vistazo:

var EMPLOYEE = {
    create : function (firstName, lastName, role) {
       var employee = {
            firstName: firstName,
            lastName: lastName,
            role: role,
            dateEmployed: new Date()
       };
       amplify.publish('employee-created', employee );
       return employee;
    }
};

Querrás lanzar una etiqueta de script para que sea igual a la de los demás.

Bastante simple, ¿verdad? Simplemente creamos un objeto literal con nuestros parámetros y agregamos una propiedad dateEmployed. Pero luego, y finalmente, tenemos la primera entrada del marco AmplifyJS. Aquí, estamos usando el componente pub / sub events. Esto es ideal para hacer acoplamientos sueltos entre partes de su aplicación.

Este método no tiene que saber si otra parte de nuestro código quiere hacer algo con cada nuevo empleado que creamos; Nuestro controlador de eventos del botón "Agregar" no tiene que preocuparse por ello. Solo lo publicaremos como un evento "creado por el empleado" para cualquier parte que esté interesado en participar. Pasamos nuestro nuevo objeto de empleado como datos para cualquier persona interesada. Luego, devolvemos el objeto de empleado (aunque no lo seguimos en nuestro controlador de eventos).

Paso 3: Reaccionando con `amplify.subscribe`

Entonces, ¿hay alguna otra parte de nuestra aplicación interesada en el "creado por el empleado"? Sí, de hecho. Queremos hacer dos cosas. Primero, agregue este empleado a una tabla en nuestra página. Segundo, queremos almacenar al empleado en localStorage. Aquí está la primera parte de eso:

  amplify.subscribe('employee-created', function (employee) {
    employeeTable.add([employee.firstName, employee.lastName, employee.role, employee.dateEmployed]);
    newAlert('success', 'New Employee Added');
  });

Para suscribirse a un evento, llamamos amplify.subscribe. Queremos suscribirnos a los “employee-created”; cuando ocurren esos eventos, queremos agregarlo a la tabla employeeTable; observe que en lugar de simplemente pasarle el objeto employee, lo "convertimos" en una matriz; Esto se debe a que debemos estar seguros de que los elementos estarán en el orden correcto. Luego, queremos mostrar un mensaje, informando a nuestro usuario que el empleado fue agregado exitosamente.

¿Qué pasa con esta variable employeeTable? Bueno, primero, tenemos que agregar <table> a nuestro documento. Entonces, debajo de nuestros "Employees" <h1>, agregue esto:

<table id='employee-table' class='zebra-striped'>
    <thead>
        <tr>
            <th> First Name </th>
            <th> Last Name </th>
            <th> Role </th>
            <th> Date Employed </th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Ahora, tenemos que capturar esta tabla como una variable hacia arriba en nuestra declaración var en la parte superior:

employeeTable = TABLE.create($('#employee-table')),

¿Y TABLE? Esa es la última pieza de JS para este rompecabezas. Ponga esto en js/table.js y no olvide la etiqueta de script:

var TABLE = {
    proto : {
        init : function (el) {
            this.element = $(el).find('tbody'); 
        },
        add: function (arr) {
            var row = $('<tr>').html(function () {
                return $.map(arr, function (value) {
                    return '<td>' + value + '</td>';
                }).join('');
            });
            this.element.append(row);
        },
        load: function (rows, order) {
            for (var i = 0; rows[i]; i++ ) {
                this.add(rows[i]);
            }
            var fields = [];
            for (var j = 0; order[j]; j++) {
                fields.push(rows[i][order[j]]); 
            }
                this.add(fields);
        },
        clear: function () {
            this.element.empty();
        }
    },
    create : function (el) {
        var table = Object.create(this.proto);
        table.init(el);
        return table;
    }
};

Es un poco complicado, pero no deberías tener problemas para asimilarlo. Tenemos una propiedad proto que es el prototipo para nuestras instancias de tabla. Luego, cuando llamamos create, usamos Object.create para crear un objeto que hereda de this.proto. Después de eso, llamamos al método init para establecer cualquier propiedad. Finalmente, devolvemos la instancia de tabla.

Esta micro-API nos facilita trabajar con nuestra mesa. Debería poder ver cómo pasar una matriz al método add agregará una fila a nuestra tabla. Tenga en cuenta también que podemos pasar una matriz de filas para load y llenar la tabla; Lo usaremos pronto.

Oh, entonces está el método newAlert que llamamos:

function newAlert (type, message) {
    $('#alert-area').append($('<div class='alert-message ' + type + ' fade in' data-alert><p> ' + message + ' </p></div>'));

    setTimeout(function () {
        $('.alert-message').fadeOut('slow', function () { this.parentNode.removeChild(this); });
    }, 2000);
}

Como puede ver, esto simplemente agrega un div al revés <div id='alert-area'>; el nuevo div aprovecha el estilo de alerta de Twitter Bootstrap; Después de dos segundos, eliminamos la alerta y la eliminamos.

`amplify.store`

Pero esa no es la única cosa que queremos hacer cuando ocurre el evento "employee-created":

employeeStore = amplify.store('employees') || [];

En la parte superior, con nuestras otras dos variables, haga la tercera y la última: employeeStore. Si amplify.store('employees') devuelve algo, lo usaremos; de lo contrario, utilizaremos una matriz vacía.

amplify.subscribe('employee-created', function (employee) {
    employeeStore.push(employee);
    amplify.store('employees', employeeStore);
});

Ahora estamos usando el componente de almacenamiento de AmplifyJS. Realmente no podría ser más simple: para almacenar un valor, pase amplify.store una clave y el valor. Para recuperar el valor, entrégale la clave. Debajo, AmplifyJS almacena esa clave y valor en cualquier tipo de almacenamiento disponible en ese navegador.

Así que aquí, agregamos un nuevo empleado a la matriz y almacenamos la matriz en la clave "employees". Debo tener en cuenta que, dado que estamos almacenando una matriz, AmplifyJS está utilizando la serialización JSON para convertir esa matriz en una cadena. Por lo tanto, si está tratando de admitir navegadores sin soporte nativo de JSON (IE 5 y abajo, Firefox 3 y abajo), querrá incluir la biblioteca json2.js.

Paso 4: Guardar en el servidor (con `amplify.request`)

En nuestro pequeño ejemplo de aplicación, estamos diciendo que, de forma predeterminada, los datos que ingresa en la aplicación solo se guardan en su computadora (en ese navegador). Sin embargo, si el usuario lo desea, podemos permitir que lo coloquen en el servidor (hipotéticamente, esta es información privada que tal vez no quieran compartir); sin embargo, si desean acceder a ella desde otros dispositivos, pueden hacerlo.).

Comenzaremos agregando un botón para cargar los datos.

<p><button id='push-data' class='btn'>Push Data to Server</button></p>

Ahora, por supuesto, sus mentes brillantes ya han descubierto que usaremos el componente AJAX de AmplifyJS. amplify.request es una API increíblemente flexible, y no veremos todo lo que puede hacer. Sin embargo, obtendrá una buena idea de cómo funciona aquí.

Hacer AJAX con AmplifyJS es un poco diferente que con otras bibliotecas: la idea es que primero se defina una conexión al servidor; luego, puedes usar esa conexión varias veces después de eso. Comencemos por definir una conexión, llamada "recurso" por AmplifyJS:

amplify.request.define('pushData', 'ajax', {
    url: 'data.php',
    type: 'POST'
});

El primer parámetro aquí es resourceId, que estamos configurando como "pushData"; así es como nos referiremos a nuestra conexión cuando la estemos usando. El segundo parámetro es el tipo de solicitud; en este caso, "ajax". Este es el único tipo de solicitud integrado en AmplifyJS; Puedes agregar el tuyo, pero esto es adecuado para nuestras necesidades de hoy.

Finalmente, tenemos un objeto de opciones. De acuerdo con la documentación, sus opciones de configuración son cualquier cosa que establezca en jQuery.ajax, así como la memoria caché (que le permite configurar una memoria caché personalizada) y un decoder (para analizar la respuesta AJAX). En nuestro caso, solo se necesitan dos opciones: la URL y el type de solicitud que estamos realizando.

Por supuesto, necesitaremos un PHP simple en el back-end; asegúrese de que la carpeta data es de escritura.

data.php

 <?php
   $employees = json_encode($_POST['employees']);
   $file      = fopen('data/data.json','w+');
   fwrite($file, $employees);
   fclose($file);

   echo 'success';
?>

Ahora, ¿qué hay de usar la conexión, el recurso, que hemos definido? Bueno, hagamos esto en un controlador de clic para ese <button id='push-data'>:

$('#push-data').click(function () {
    amplify.request('pushData', { employees: amplify.store('employees') }, function (data) {
        amplify.publish('data-pushed', data);
    });
});

Cuando se usa el recurso, el primer parámetro es el ID de recurso; es el mismo ID de recurso que tenemos el recurso que definimos, por lo que AmplifyJS sabe cuál usar. En segundo lugar, pasamos el hash de datos. En este caso, pasamos el contenido en nuestra tienda, bajo la clave "employees". El parámetro final es una función que se llama cuando recibimos una respuesta.

Una vez que obtengamos una respuesta, publicaremos el evento "data-pushed". Luego, solo alertaremos al usuario que funcionó:

amplify.subscribe('data-pushed', function () {
    newAlert('success', 'Data successfully sent to server');
});

Yendo un paso más allá

Bueno, esa es nuestra pequeña aplicación de ejemplo. Hemos analizado el uso de los tres componentes de AmplifyJS: amplify.publish / amplify.subscribe, amplify.store, y amplify.request. Hemos cubierto prácticamente todo lo que hay que saber sobre el pubsub y las partes de la tienda (¡hay un poco más!), Pero hay mucho más que puede hacer con la API de solicitud. Entonces, ¡echa un vistazo al sitio web para obtener más información!

Entonces, ¿qué piensas de AmplifyJS? ¿Gusta? ¿Lo encuentras demasiado redundante? ¡Vamos a escucharlo en los comentarios!