Saltar al contenido

Categoría: Desarrollo y Programación

Desarrollo de aplicaciones web con MEAN.io (Mongo, Express, Angular y NodeJS)

Publicado por Miguel Useche el 14 de julio de 2014

Hace unas semanas, elaborando un sistema interno para Oja.la tuve la libertad de escoger la plataforma a desarrollar y como este año me había decidido a realizar una aplicación web escrita 100% en Javascript empecé a investigar sobre como empezar con la plataforma  MEAN (Mongo, Express, Angular y NodeJS), para quienes no la conocen, es como LAMP (Linux, Apache, MySQL y PHP) pero orientada a usar JS tanto en frontend como en el backend. Investigando conseguí MEAN JS, un framework para desarrollar bajo esta plataforma.

Instalación

Al momento de iniciar el proyecto, no sabía utilizar Express ni Mongo, respecto a NodeJS sólo había hecho unos experimentos sencillos para ver como funcionaba, pero ya tenía experiencia en AngularJS y herramientas como: Yeoman, Grunt, Bower y NPM. Por ello, la instalación de este framework me pareció muy sencilla: clonar el repositorio y luego mediante bower instalar todas las dependencias automáticamente. Solo realicé algunos cambios para evitar actualizar versiones no estables de librerías (no me gusta actualizar  en pleno desarrollo para evitar incompatibilidades con funcionalidades ya escritas) y eliminar cosas innecesarias para el proyecto (como autenticación usando redes sociales).

Esqueleto inicial

La forma en como está estructurado me ha gustado mucho, la separación del backend y frontend se hace notable. Respecto a Express,  la estructura es muy sencilla, principalmente se divide en las carpetas: models (los objetos que permiten se comunican con la BD), controllers (donde se guarda la lógica del proceso), routes (maneja las rutas de las peticiones del servicio web), views (las vistas a mostrar desde el servidor, las cuales son diferentes de las vistas generadas en el frontend).

En la parte pública se trabaja como cualquier aplicación de Angular, se crean carpetas por cada módulo a desarrollar, por defecto vienen incluidas 2: auth y system. La primera es el módulo de autenticación que trae MEAN.io para permitir identificarse utilizando redes sociales y la segunda, donde va la aplicación como tal. También se incluyen los archivos para manejar las dependencias del proyecto usando npm, bower y se incluye un archivo de Grunt.

Este último, trae configuraciones para montar un servidor: de desarrollo, pruebas y producción. Cada uno de ellos tiene su propia  configuración, permitiéndote trabajar con diferentes bases de datos, bibliotecas comprimidas solo en la versión de producción y pruebas. Me pareció raro que no incluía la tarea grunt-ngmin, pues permite facilitar la compresión de archivos JS de AngularJS.

Logo de Mean.io
Logo de Mean.io, chévere que sea una chica ninja

Desarrollo

El desarrollo de la aplicación se me hizo fácil gracias a esta plantilla base, si nunca has desarrollado una aplicación bajo este modelo, te recomiendo iniciarte con MEAN.io. Lo único extraño es que generalmente en otras plataformas el código de backend es diferente al de frontend, permitiendo determinar fácilmente la ubicación del código que estas viendo, como aquí todo es JS a veces debes mirar la ruta para ver si estas en frontend o backend, además, probablemente llames a los modelos de Express y Angular con el mismo nombre, confundiendo a veces la apertura de archivos.

La desventajas que vi con esta plataforma fue: la poca documentación debido a su poco tiempo de disponibilidad e incompatibilidad para navegadores antiguos (Android 2.3, IE 8, entre otros), sé de la disminución de la cuota de mercado de estos navegadores, pero aún existen clientes/usuarios que lo utilizan y en el ambiente empresarial se les debe dar soporte. Y finalmente, no me gustó mucho trabajar con MongoDB, es muy chévere almacenar los objetos en JSON y la lectura se hace rápida, pero no sé si es por mi años utilizando BD relacionales pero la falta de restricciones de diseño o tanta libertad de almacenar lo que se desee allí, me parece que puede crear daños en la integridad de datos en el futuro. Tal vez porque estoy acostumbrado a manejar toda la validación de la data en la BD y no en la aplicación, me pareció inseguro que con MongoDB toda la validación se hace en la aplicación (si me equivoco, por favor me lo aclaran en los comentarios).

Recomendaciones

Te recomiendo utilizar Mean.io si deseas hacer una aplicación bajo esta plataforma en poco tiempo, realmente es sencilla de usar si tienes experiencia desarrollando aplicaciones web con Javascript. Probablemente la curva de aprendizaje para un novato sea fuerte pero vale la pena el esfuerzo. Si deseas algo mas sencillo o simple (sin sacrificar calidad), puedes probar Mean.JS un fork realizado por el autor de Mean.io para mejorar algunos problemas de diseño de la plataforma.

Actualización al 17/10/2019: El proyecto ha migrado a su fork MeanJS, realizado por el mismo autor del proyecto.

4 comentarios

Añadir soporte a Firefox OS en MobilePress

Publicado por Miguel Useche el 28 de octubre de 2013

MobilePress es un buen complemento para WordPress para crear una versión móvil del sitio. Básicamente su función es detectar si se visita desde un dispositivo móvil (teléfono o tableta) y muestra un tema adaptado a las resoluciones que manejan las pantallas de esos.

Su funcionamiento es muy bueno y lo utilizo desde hace años por la facilidad para crear un tema móvil. Sin embargo, al acceder desde un dispositivo con Firefox OS me llevaba al sitio de escritorio, revisando me di cuenta que el «Agente de Usuario (User Agent)» del navegador utiliza:
Mozilla/5.0 (Mobile; rv:18.0) Gecko/18.0 Firefox/18.0

Al verlo me llamó la atención la ausencia de identificación del sistema operativo, esto se debe según Mozilla a que la web es la plataforma y no Firefox OS. Como la mayoría de programas identifican a los sistemas móviles por su marca: Android, iPhone, etc. No suelen detectar la palabra Mobile. Revisando el plugin MobilePress, en el archivo mobilepress/classes/check.php hay una función llamada function is_mobile() donde a través de una expresión regular revisa varios agentes de usuario escritos y si lo encuentra muestra la versión móvil. Entonces al cambiar la expresión regular y añadir Mobile (con mayúscula):
preg_match( '/(Mobile|alcatel|

Una vez guardados los cambios, ahora podrás disfrutar de tu sitio móvil en Firefox OS.

Deja un comentario

Ponencia de John Carmack en el Quakecon 2013

Publicado por Miguel Useche el 14 de septiembre de 2013

Una de mis conferencias favoritas de todo el año es la de John Carmack (creador de Quake, Doom, Wolfeinstein) en el Quakecon,  porque suele hablar de la industria de los videojuegos y las futuras tecnologías desde el punto de vista de un programador. Sus charlas siempre suelen muy largas, mayores a 2 horas y aunque no entiendo mas de la mitad de lo que habla, siempre es interesante aprender lo poco que se entiende.

Este año habló sobre el futuro de los videojuegos, el piensa que es importante como el usuario interactúa con el juego y por ello empieza a comparar el PS Move con Kinect, para él ambas soluciones no son tan buenas como la realidad virtual usando un casco y como está invirtiendo en el desarrollo de estos dispositivos porque para él, es el futuro a seguir. De las consolas de la siguiente generación no quiso hablar porque no ha programado para ella por los momentos. Como defensor de OpenGL habla como ha logrado triunfar y estar en varios dispositivos, de hecho, como ahora cualquier teléfono celular soporta esta tecnología y la posibilidad crear juegos en OpenGL para disfrutar en cualquier lugar.

Como programador, hace una discusión entre la programación estático contra la dinámica. Dice preferir la estática por el poder que tiene y el control sobre cualquier aspecto del programa, pues en el dinámico se siente limitado con muchas cosas sobre todo en la optimización. También compara Nvidia con AMD, el dice preferir Nvidia por sus innovaciones y herramientas para los desarrolladores, pero realza que el equipo de personas que trabaja en AMD ha venido haciendo un buen trabajo.

John Carmack Keynote - Quakecon 2013

En fin, es mejor ver escuchar el video con calma y por partes, porque es mucha información en mucho tiempo.

Deja un comentario

Automatiza tareas de desarrollo web con Guard

Publicado por Miguel Useche el 8 de junio de 2013

Hace tiempo en una charla de Paul Irish, ví un programa llamado Live-reload para recargar automáticamente una página en el navegador cada vez que realicemos un cambio en ella. Pero nunca había podido configurarla en Linux, luego hace unos días en una entrevista de Addi Osmani vi un comentario que me hizo volver a tratar de instalarla, su comentario fue: «Ya en el 2013 nadie debería perder tiempo en recargar manualmente el navegador».

Así que me puse instalar el programa y descubrí Guard, una aplicación hecha en Ruby para chequear las modificaciones realizadas a archivos y realizar acciones en base a ello. Esto permite por ejemplo, que al realizar algún cambio en un archivo escrito con SASS o SCSS genere el CSS automáticamente, si modificas un archivo JS de desarrollo genere el archivo final ya comprimido, generar el archivo JS desde CoffeScript, entre otros. De esta manera automatiza gran cantidad de tareas que usualmente harías manualmente a través de comandos del Editor/IDE.

Instalación

Aunque existen instaladores para MacOS y Windows los desarrolladores prefieren instalarlo a través de Ruby GEMs, el proceso es sencillo y se aplica para todos los sistemas operativos que soporten Ruby, para ello en la consola debes ejecutar los comandos:

gem install bundle #facilita el proceso
gem install guard #el programa que estamos comentado
gem install guard-livereload #extensión para actualizar el navegador
gem install guard-sass #para pre-procesado de CSS

Configuración

Luego te diriges a la raíz del proyecto que estás elaborando, allí ejecutas el comando:’

bundle init

Nota: Si el comando falla es porque no tienes el comando gem en tu variable $PATH
Esto creará un archivo llamado Gemfile que contiene toda la información de los gems utilizados en el proyecto y las dependencias de lo mismos. Una vez creado con el comando mencionado, lo abres y agregas el siguiente contenido:

gem 'guard'
gem 'guard-livereload'
gem 'guard-sass', :require => false

Luego debes crear un archivo con el nombre Guardfile en la raíz del proyecto, en él se definirán las reglas que deben ocurrir para realizar las acciones. El siguiente ejemplo está diseñado para ser usado en un proyecto PHP con el framework Yii:

# Módulo para que al modificar un archivo SASS genere el CSS ya comprimido
guard 'sass',
:input => 'css',
:output => 'css',
:style => :compressed

#reglas para la recarga del navegador
guard 'livereload' do

#actualiza el navegador al ocurrir cambios en las vistas, modelos y controladores.
watch(%r{protected/views/.+\.php})
watch(%r{protected/views/.+/.+\.php})
watch(%r{protected/views/.+/.+/.+\.php})
watch(%r{protected/models/(.+)/(.+)\.php$})
watch(%r{protected/controllers/(.+)\.php$})

#Comprime los archivos de Javascript utilizando un script llamado compressJS ubicado en la carpeta js/
watch(%r{js/.+\.original\.js}) {`js/compressJs`}

#Una vez generado los archivos JS finales (ya comprimidos) recarga el navegador
watch(%r{js/.+\.js})

#Recarga el navegador cuando se modifica un archivo CSS
watch(%r{css/.+\.css})
end

La sintaxis es watch(%r{EXPRESION_REGULAR_DE_ARCHIVOS}) {comando a ejecutar}, con esto puedes jugar a detectar cambios en algunos archivos y realizar a través de una secuencia de comandos, tareas respecto a ese archivo modificado. También noten como por ejemplo al comprimir el archivo JS no se recarga el navegador, sino en otra regla cuando se modifica un archivo JS, es decir, algunas cosas deben hacerse a través de la definición de varias reglas.

Uso del programa

Para ejecutarlo debes iniciar guard con el comando:

bundle exec guard

A partir de ahora guard chequeará los cambios en los archivos y ejecutará las acciones configuradas. Para refrescar el navegador automáticamente, es necesario instalar LiveReload para Firefox o Chrome . Una vez instalada, ve a la pestaña donde estas visualizando el proyecto, presionas el botón de LiveReload y debería conectarse sin problemas a guard.

Complemento de LiveReload
Botón para conectarse con Guard LiveReload

Para probarlo, edita un archivo de vista  y debería actualizarse la página sin problemas. También al editar un archivo SASS (o SCSS) debería generar el archivo CSS y a su vez recargar la página para ver la nueva apariencia, al editar los archivos de Javascript deberían comprimirse y cualquier otra acción que hayas configurado.

Ahora depende de ustedes que utilicen estas herramientas todos los días, pues mejorarán su trabajo al automatizar ciertas tareas y enfocarse en otras mas importantes. Si alguien conoce otra utilidad para Guard, no duden en dejar un comentario.

1 comentario