Blog

Grunt Facebok App – Scaffold para tus aplicaciones de Facebook

Estoy orgulloso de lanzar mi nuevo proyecto, un scaffold para crear aplicaciones de Facebook.

¿Qué es un scaffold?

Es una estructura base para la creación de un proyecto. Es el esqueleto genérico para crear un algo.

¿De qué trata?

En esta primera versión, hicimos la estructura según los requerimientos de varias aplicaciones que teníamos que empezar en el estudio, discutimos las formas más viables para llevar el proyecto y a esto es lo que llegamos.

El proyecto intenta hacer nuestros proyectos más fáciles de podes adoptar por otros desarrolladores dentro del equipo, creando una estructura base y tareas automatizadas para entregar un proyecto más profesional y de una manera más ordenada.

Con grunt hacemos que las tareas como minificación, concatenación, compilación de Less (o Sass) conciernen a la máquina y no a nosotros, haciendo que sea un proceso natural sin preocuparnos de ello.

Bower, nos permite tener la modularidad de los paquetes que utilizamos en la aplicación, haciendo fácil actualizar versiones o agregar archivos, js o css.

¿Porqué está creado así?

Como mencioné, me gusta la separación del backend con el frontend, por ello pienso que una forma ordenada de programar tener en cuenta: “separation of concerns“.

Entonces todos los archivos de servidor devuelven json o en su defecto la respuesta necesaria, pero no se mezcla con la estructura. En su defecto todo se modifica con javascript.

Primero, nuestra carpeta principal y donde están todos nuestros recursos es la src. Esta carpeta contiene los siguiente:

  • images – todas las imágenes que necesitamos utilizar en nuestra aplicación
  • includes – son todos los archivos que debamos incluir en nuestra aplicación, por ejemplo un php de certificado de Facebook
  • partials – son todos “parciales” de nuestra aplicación, dentro encontrarás header.html y footer.html, puedes crear los que necesites y tengan código repetido
  • scripts – está app.js que contendrá todo el código de tu aplicación, puedes separar tu código en diferentes archivos pues existe una tarea que concatena todos en un solo archivo (estos son concatenados en orden alfabético)
  • services – esta carpeta tiene toda la comunicación al servidor, aquí colocas todas las funciones que necesitan digamos una conexión a la base de datos, un archivos que te devuelva un json con un servicio.

Viene en 3 sabores

  • Less CSS
  • Sass
  • CSS plano

Por lo que tu eliges que preprocesador utilizar.

Instrucciones de uso

Luego de haberlo instalado (ver instrucciones en la página de github), pegas esto en tu línea de comandos (estando en el directorio donde vas a crear tu aplicación)

grunt-init facebook-app

Luego de que se haya instalado (te preguntará algunas cosas para la configuración), tecleas:

npm install

Para empezar a utilizarlo solo tienes que teclear:

grunt watch

Debes tener en cuenta que, todo se exporta a la carpeta app/ que es la que subes a tu servidor o colocas como folder root de tu dominio de prueba.

Tareas especiales

  • grunt watch – lo utilizas, y escucha cada vez que medificas algún archivo dentro de scripts, styles o un html que esté dentro de src/ y lo copia a la carpeta app/.
  • grunt copy:static – copia todos los archivos dentro de images/, includes/ y services/ y los pasa a app/, esto por lo separe pues al copiar todos los archivos de imágenes cada vez que cambias un archivo y pasar todo de una carpeta a otra puede ser un poco pesado si tu aplicación es muy grande.