Archivo de la etiqueta: Node.js

Nuevo libro Keystone.js Succinctly

keystonejs_succinctly

Los amigos de Syncfusion han lanzado un nuevo libro sobre Keystone.js, un framework web libre y abierto para Node.js, con él se puede desarrollar sitios web con acceso a base de datos, aplicaciones y API RESTful. El framework fue construído sobre Express.js y MongoDB, utiliza el patrón de diseño Model-View-Template. En Keystone.js Succinctly junto con Manikanta Panati descubre como utilizar este framework para administrar plantillas de aplicaciones, vistas y rutas, utilizando JavaScript. Aprende como configurar un ambiente de desarrollo y un proyecto vacío, trabajar con modelos para leer, consultar y manipular datos, integra formularios complejos, autentica usuarios, puedes exponer extremos REST en una aplicación Keystone.js y más.

El libro está escrito en inglés y lo puedes descargar aquí. Si no estás registrado lo puedes hacer ahí.

Usando Grunt para convertir archivos LESS a CSS.

LESS is More = Menos es Más.

LESS es un lenguaje de hoja de estilo dinámico que luego es compilado a CSS. Este compilador está escrito en JavaScript y es más rápido que sus alternativas, SASS y Stylus.

Hay varios tutoriales de LESS pero para resumir provee de características útiles que no están disponibles en el CSS tradicional, estos son: variables, mixins, reglas anidadas, funciones y operadores. Simplemente escribir CSS es agotador y muy repetitivo.

Compilando LESS

La manera más fácil de compilar archivos LESS es instalando Node.js, hay instaladores disponibles para Max OS X y Windows. En el caso de Linux ver https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager para instrucciones de instalación utilizando administradores de paquetes.

Para descargar el instalador ir a http://nodejs.org/ y descargar el instalador puedes usar el botón “Install” allí o buscar dentro de la página de las descargas la versión para tu sistema operativo.

nodejs

En el caso de Windows 8.1 descarga e instala “node-v0.10.29-x64.msi”.

Una vez instalado abre una ventana de comandos (command prompt) o ejecuta cmd y ubícate en el directorio

c:\Program Files\nodejs

Si lo instalaste en otra ruta cambia a esa ruta entonces.

Tienes que ejecutar las variables de entorno

nodevars.bat

Una vez hecho esto ya puedes ejecutar el comando npm

Si vas a usar LESS con Bootstrap (Twitter Bootstrap) su compilador oficial es RECESS, escrito por Jacob Thornton uno de los creadores de Twitter Bootstrap.

Para instalar RECESS ejecuta el siguiente comando:

npm install -g recess

Para compilar un archivo LESS, navega a la ruta de tu proyecto y ejecuta el siguiente comando:

recess archivo.less --compile > archivo.css

Donde archivo.less es el nombre del archivo LESS que quieres compilar y archivo.css es el nombre del archivo CSS que quieres que genere.

Desafortunadamente los tiempos cambian y desde la versión de Bootstrap 3.1x RECESS ya no podrá compilarlo porque ahora se han pasado a usar grunt-contrib-less.

Por el lado bueno Grunt que es un ejecutador de tareas para Node.js puede hacer muchas cosas más, por ejemplo puede vigilar archivos LESS esperando cambios y compilarlos ni bien cambien e incluso puede volver a cargar el navegador luego de compilar tu archivo LESS.

Aquí viene Grunt.

Hasta el momento has aprendido a utilizar RECESS para compilar LESS a mano. Hay una forma más eficiente para compilar LESS.

Puedes usar Grunt y sus plugins para automatizar la compilación de tus estilos. Grunt puede hacer muchas cosas además de compilar LESS entre ellas: minificar scripts, correr pruebas, optimizar imágenes y mucho más.

Instalar Grunt.

Primero requieres la línea de comando grunt-cli. Si no instalas esto cuando quieras ejecutar grunt te saldrá “grunt: command not found” o no se encontró el comando.

Ejecuta la siguiente línea en la ventana de comandos:

npm install -g grunt-cli

Eso instalará la utilidad de línea de comando de Grunt globalmente en tu sistema.

Luego tienes que instalar Grunt de manera local para tu proyecto:

npm install grunt --save-dev

Cuando le agregas –save-dev al comando le agrega el plugin como una dependencia en el archivo “package.json” (si tienes uno).

Luego tienes que instalar el plugin LESS que te permite poder compilar tus estilos.

npm install grunt-contrib-less --save-dev

Eso es todo lo que necesitas instalar por ahora. Ahora tienes que crear el archivo de configuración Grunt.

Crea un archivo JavaScript, ponle de nombre Gruntfile.js y agrega el siguiente contenido:

module.exports = function (grunt) {
  // Grunt Configuration
  grunt.initConfig({
     less: {
        app: {
           files: {"css/main.css": "/less/main.less"}
        }
     }
});
// Load plugins
grunt.loadNpmTasks("grunt-contrib-less");
};

Para ejecutarlo escribe:

grunt less:app

Configuración para que la compilación sea automática.

Tienes que instalar el plugin watch.

npm install grunt-contrib-watch --save-dev

En el archivo Gruntfile.js tienes que poner lo siguiente:

module.exports = function (grunt) {
  // Grunt Configuration
  grunt.initConfig({
     less: {
        app: {
           files: {"css/main.css": "less/main.less"}
        }
     },
   watch: {
      styles: {
         files: ["less/**/*.less"],
         tasks: ["less:app"],
         options: {spawn: false}
      }
   }
});

// Load plugins
grunt.loadNpmTasks("grunt-contrib-less");
grunt.loadNpmTasks("grunt-contrib-watch");
};

Para que empiece a observar los archivos ejecuta:

grunt watch:styles

En la ventana de comandos verás la siguiente salida:

$ grunt watch:styles
Running "watch:styles" (watch) task
Waiting...OK
>> File "less/main.less" changed.
Running "less/app" (less) task
File css/main.css created
Running "watch:styles" (watch) task
Completed in 0.648s at Thu Jan 02 2014 13:05:57 GMT+0000 (UTC) -
Waiting...

Cada vez que el archivo main.less cambie o cualquier otro archivo en la carpeta LESS la tarea less:app se ejecutará

Usando Grunt para recargar en vivo (Live Reloading)

Refrescará el navegador cuando el plugin watch note un cambio

Abre el archivo Gruntfile.js y agrega la opción livereload al watch plugin (agrega las líneas que te falten)

watch: {
   styles: {
      files: ["less/**/*.less"],
      tasks: ["less:app"],
      options: {
         livereload: true,
         spawn: false
      }
   }
}

Esta opción hará que el plugin watch inicie una recarga del servidor en el puerto por defecto. Puedes especificar un puerto diferente así: livereload: 1337

En el archivo HTML tienes que agregar la siguiente etiqueta:

<script src="http://localhost:35729/livereload.js"></script>

Ten en cuenta el puerto, en este ejemplo es: 35729 en tu caso podría ser distinto.

Esto conectará tu navegador con el servidor.

Solución de problemas.

Grunt: Command not found

Requieres la interfáz de línea de comando:

npm install -g grunt-cli

Unable to find local grunt

Los binarios de Grunt no se pudieron encontrar dentro de los módulos Node de tu proyecto, reinstala grunt localmente.

npm install -save-dev grunt

La historia de “Monaco”

Monaco es el nombre clave de un ambiente para escribir código para la nube y en la nube. Complementa la IDE de escritorio, es una experiencia con poca fricción que te ayudara a comenzar, o a hacer cambios de manera rápida a un servicio de nube existente y está integrado con Visual Studio Online.

Visual Studio Online, es una colección de servicios para desarrollar que se ejecuta en Windows Azure y extiende la experiencia de desarrollo a la nube. Fue lanzado aproximadamente el 13 de noviembre 2013. Es gratis para equipos de hasta 5 usuarios.

Visual Studio ha evolucionado con los años, empezó como un IDE (ambiente de desarrollo integrado o Integrated Development Environment) para el escritorio, luego se expandió para incluir capacidades de desarrollo en equipo en el servidor con Team Foundation Server. Ahora es el siguiente paso, extender la IDE de Visual Studio con una colección de servicios para desarrollador, hospedado en Azure, lo cual ofrece una experiencia integrada de desarrollo de principio a fin (end to end) para aplicaciones modernas.

Los servicios online incluyen:

  • Control de código fuente hospedado (hosted source control). Puedes usar Git o Team Foundation Version Control (TFVC) y sincroniza con tu escritorio cuando inicias sesión en Visual Studio.
  • Seguimiento de código de trabajo (work item tracking) y planeamiento ágil.
  • Colaboración
  • Servicio para construir (build service) en la nube. Cada cuenta te da 60 minutos por mes para construir gratuitamente.
  • Servicio de prueba de carga elástica (elastic load testing service). Actualmente en vista previa preliminar pública (public preview). Permite rápidamente simular un gran número de usuario concurrentes y esta escalabilidad puede ser llevada hacia la nube.
  • Visual Studio Online Application Insights. Te provee con una visión de 360 grados de la salud de tu aplicación.
  • Visual Studio Online “Monaco”. Permite editar tus sitios web directamente en la web, desde cualquier navegador moderno, desde cualquier dispositivo. Ya está siendo usado como la tecnología detrás de otra experiencia de desarrollo en la nube, desde Office 365 desarrollo “Napa” hasta edición de archivos en SkyDrive.

La historia de Monaco (según Mary Jo Foley) comienza cuando Microsoft en el 2011 contrata a Erich Gamma, anteriormente trabajaba para IBM y estaba involucrado en herramientas de desarrollo para Eclipse Java. Durante 2 años y medio el ha estado trabajando en un sub-conjunto de Visual Studio que puede funcionar no sólo en Internet Explorer sino en otros navegadores modernos incluyendo Safari y Chrome. Cuando Gamma estuvo trabajando en IBM, Microsoft lo buscó para interesarlo en trabajar en herramientas en línea. Microsoft no estaba interesado en reemplazar su cliente nativo en Windows, la idea era construir una caja de herramientas desde cero. Gamma se interesó y decidió moverse a Microsoft.

Gamma decidió utilizar TypeScript (un superconjunto de JavaScript de Microsoft) y su equipo utilizó Node.js (una tecnología JavaScript del lado del servidor para recibir y responder peticiones HTTP) y Git para desarrollar Monaco.

Según Gamma “una mente abierta les dió la habilidad de utilizar lo que querían y apuntar hacia todos los navegadores modernos”.

Desde el comienzó el equipo se enfocó en casos de uso específicos donde un conjunto de herramientas basados en navegador tuviera sentido. El primer caso de estudio se enfocó en permitir desarrolladores/gente que hace pruebas editar sitios web de Windows Azure directamente desde cualquier navegador moderno, en cualquier dispositivo (ya sea Windows o no). La idea es que los desarrolladores puedan hacer correcciones relativamente simples a sus sitios web hospedados en Azure desde cualquier lugar utilizando Monaco en un navegador.

Monaco encontró un lugar en “Napa”, un conjunto de herramientas de desarrollo de Office 365. Monaco provee las capacidades de edición en la nube usando un navegador. Otras tecnologías que tienen Monaco integrado (aunque en prueba por el momento) incluyen el Team Foundation Service (TFS) y SkyDrive (para edición de archivos con un navegador)

El equipo de Monaco decidió no construir una versión de Visual Studio tipo Metro/Tienda Windows. La ruta navegador/herramientas tenía más sentido dijo Gamma, ya que los desarrolladores cada vez van necesitando estar conectados a la web en todo momento. No hay muchos casos de uso fuera de línea (offline)

Basado en el artículo Microsoft’s browser-based dev toolbox: How ‘Monaco’ came to be (zdnet.com)