En la conferencia Front-Trends del 2013,  Gregor Martynus dio una charla titulada “Look ma, no backend!”  donde mostró una nueva perspectiva sobre el desarrollo de aplicaciones denominada “noBackend “. Este enfoque es lo contrario de lo que tradicionalmente se ha utilizado para  el desarrollado de aplicaciones web; el cual se centra principalmente en la parte del lado del servidor de una aplicación.

noBackend

noBackend es un enfoque para desacoplar las aplicaciones de backend, abstrayendo las tareas de back-end con el código de frontend (Dreamcode). Esto permite a los desarrolladores frontend centrarse en la experiencia del usuario y proporciona a los desarrolladores de back-end más flexibilidad en el lado de la aplicación.

En resumen, la idea es simple, crear el frontend de la aplicación web agnóstica al backend (sin pensar en backend en absoluto) , esto se logra construyendo una API REST que la gente de frontend utilizara. Existe un sitio web llamado noBackend donde se evangeliza aun mas esta idea y donde podemos encontrar ejemplos, soluciones entre otros.

Hoy quiero compartir con ustedes un nuevo servicio de almacenamiento y sincronización de aplicaciones llamado Firebase, “este es una plataforma especializada en el almacenamiento y sincronización de aplicaciones con la que los desarrolladores interesados pueden encontrar un entorno óptimo para la creación de apps de forma colaborativa usando solo con código front-end (Javascript)“.

Crear el primer Firebase

Lo primero que hay que hacer para empezar a trabajar con Firebase es registrarse para obtener una cuenta gratuita. Firebase crea automáticamente  una nueva app para usted, no se preocupe que usted podrá crear otras desde su cuenta entrando al Dashboard.SuFirebase tendrá un URL propia que termina en firebaseIO.com, como se muestra a continuación:

Para ver y administrar los datos de su Firebase, ya sea que escriba el URL en la barra de direcciones o haga clic en el botón “Manage App ‘. Su Firebase estará vacío al principio y sera algo como la siguiente imagen:

Data Firebase

La premisa de Firebase se centra en almacenar los datos de nuestras aplicaciones para que sean accesibles directamente gracias a JavaScript y fácilmente consumidas por los usuarios. ¿Qué supone esto? Básicamente, que podemos construir aplicaciones web ricas y potentes sin tener que preocuparnos de nuestras propias bases de datos o sitios web. Firebase convierte el tiempo real en un nuevo estándar donde reina la interactivida.

A diferencia de Microsoft Azure  Mobile Service que nos permite definir una estructuras de tablas para almacenar los datos, Firebase almacena la información en una estructura JSON  que nosotros definimos por medio de nuestro código. A continuación presento una imagen de como va a quedar nuestros datos  almacenados en firebase.

Firebase

Incluir Firebase en nuestra aplicación Javascript

Para incluir la biblioteca de Firebase en nuestra aplicacion debemos añadir una etiqueta de script en nuestro archivo HTML. Se recomienda incluir la biblioteca directamente de los CDN de Firebase:

Utilizaremos la misma variable global llamada App que esta que utilizamos en el ejercicio de Mobile Services.

Instanciar servicio de Firebase:

En el código de JavaScript, agregue el siguiente código, que crea una instancia de Firebase.

this.myRootRef = new Firebase('https://incandescent-fire-8371.firebaseio.com/');

Almacenar datos en el servicio:

Para guardar datos en Firebase, como lo comente arriba, desde nuestro código estaremos definiendo la estructura, así que para guardarlo utilizaremos la siguiente linea de código:

save: function (item) {
    // Esta linea es la que nos interesa
    this.myRootRef.child("users").child(item.Id).set(item);
}

Lo que hacemos en estas lineas de código es pasar un objeto llamado item que contiene la siguiente estructura.

Item

Item

Lo que definimos con this.myRootRef.child(“users”).child(item.Id) es que nuestro servicio de firebase va a tener un hijo/nodo llamado users,  y dentro de este van a existir varios hijos cuyo nombre sera el ID del item que vamos a guardar y debajo de este estar todo el item completo almacenado, para una mejor ilustración de esto les dejo la siguiente imagen:

SaveFirebase

Eliminar datos en el servicio:

Para eliminar un hijo de nuestro servicio, basta con identificarlo y usar remove() desde la API de firebase, vamos a pasar a nuestra variable global App en su método remove, el ID que vamos a eliminar, que representaría nuestro nodo hijo de users.

remove: function (id) {
    this.myRootRef.child("users").child(id).remove();
}

Actualizar datos en el servicio:

Actualizar un item alojado en firebase es muy fácil y es similar al eliminar solo que cambiar una palabra, ¿cuál es? obvio update en vez de remove.

update: function (item) {
    this.myRootRef.child("users").child(item.Id).update(item);
}

Leer datos en el servicio:

Firebase es una base de datos en tiempo real, por lo que los datos nunca se leen de forma sincrónica. En su lugar, para leer los datos realizamos un callback a una referencia Firebase. La URL que se utiliza para crear esa referencia Firebase debe seguir la estructura JSON de los datos almacenados en Firebase. Así que si queremos recuperar todos los items que se han guardado, podemos hacer lo siguiente:

render: function () {
    var html = "";
    this.myRootRef.on('value', function (snapshot) {
        var usuarios = snapshot.val();
        //Utilizamos un each de la librería underscore
        _.each(usuarios['users'], function (v, i) {
            console.log(v.name);
        });
    });
}

En este caso utilizando la ayuda de la librería underscoreJS utilizado la estructura  each.

Esto es todo por ahora, espero les sirva, si desean ver el código fuente de este proyecto pueden descargarlo desde acá: Aplicación noBackend: Firebase