domingo, 17 de abril de 2016

No inicies desde cero, Yeoman te da una mano!


Para los desarrolladores es de suma importancia a la hora de iniciar un nuevo proyecto o la construcción de una nueva aplicación tener un punto de partida que nos indique una forma ideal de estructurar nuestro código y uso de buenas prácticas, particularmente los desarrolladores que solemos usar Visual Studio para la mayoría de nuestro proyectos estamos acostumbrados a encontrar este apoyo en las diversas plantillas o starters que VS nos ofrece, pero qué pasa si nos encontramos trabajando en un entorno diferente a Windows y no contamos con VS como IDE de desarrollo?



Pues una buena alternativa sin duda es el uso de Yeoman, una popular herramienta Open source de Scaffolding web, que cuenta con un amplio sistema de generadores, los cuales permiten obtener starters para diversos tipos de proyectos en diversas tecnologías que ofrecen un buen punto de partida, si quieres indagar un poco más sobre Yeoman te puedes remitir a su sitio oficial http://yeoman.io/ y aquí puedes encontrar su código fuente https://github.com/yeoman/yeoman



Yeoman actualmente cuenta con 3.738 generadores, entre los cuales encontramos algunos soportados por el equipo de Yeoman y otros por la comunidad, en estos generadores podemos encontrar starters para Angular, Ionic, Asp.Net Core, BootStrap, React y muchos más. Una característica bien importante de Yeoman es que se apalanca del uso de un Task runner (Gulp, Grunt, etc) y un gestor de paquetes (Bower, npm, etc) para sacarle el mayor provecho, dado que a través de Bower por ejemplo se pueden descargar las dependencias que tienen los diferentes generadores para lograr correctamente y a través de Grunt se pueden ejecutar tareas de compilación, concatenación, minificación, servir la aplicación, etc.

Ahora que ya conocemos un poco acerca de Yeoman, vamos a ver como lo podemos usar, empecemos por instalarlo:

En primer lugar vamos a instalar NodeJs, el cual puedes descargar de la siguiente página https://nodejs.org/en/ una vez lo estés instalando observarás que se instalará por defecto también npm, el gestor de paquetes de NodeJs, el cual nos permitirá instalar posteriormente, Yeoman, Bower y Grunt.

Ahora usaremos la consola de npm para instalar Bower, que recordemos nos servirá para instalar las dependencias de los starters que usemos con Yeoman, para esto ejecutamos el siguiente comando:

$ npm install -g bower

Ahora instalaremos Gulp, que es un Task Runner al igual que Grunt, podemos usar cualquiera de los dos, en este caso instalaremos Gulp, a través del siguiente comando:

$ npm install --global gulp-cli

 Y ahora a lo que vinimos, instalaremos Yeoman, a través del siguiente comando:

$ npm install -g yo

Para nuestro ejemplo vamos a crear una aplicación Asp.Net Core, por lo cual vamos a descargar su generador correspondiente, para iniciar vamos a escribir el comando "yo" en la ventana de comandos de Windows, de esta forma se nos presentarán algunas opciones a ejecutar


Si elegimos la opción instalar un generador, posteriormente nos pedirá digitar alguna palabra clave del nombre del generador para que se busque y se instale, puedes observar todos los generadores existentes y buscar más amigablemente en la siguiente página http://yeoman.io/generators/ Nosotros instalaremos directamente el generador de aplicaciones Asp.Net 5 a través del siguiente comando:

$ npm install -g generator-aspnet

Una vez termine de instalar el generador procedemos a crear nuestra aplicación Asp.Net 5 a través de este, para esto ejecutamos el siguiente comando:

$ yo aspnet

Para este generador en particular se nos preguntará que tipo de aplicación deseamos crear, aplicación de consola, Web, Web Api, etc


En nuestro caso seleccionaremos Web Application, y para finalizar debemos especificar el nombre que tendrá nuestra aplicación.

Con esto Yeoman genera la estructura de nuestro proyecto, y nos sugiere ejecutar los siguientes comandos para posicionarnos en la aplicación, restaurar los paquetes o dependencias, compilar y ejecutar respectivamente:


Si tenemos Visual Studio instalado, podemos abrir el proyecto a través de este IDE y seguirlo trabajando a través de él, pero en caso de que no lo tengamos podemos optar por los comando sugeridos anteriormente.

Como podemos ver en los comandos anteriores se hace uso de DNU y DNX, estos corresponden al .Net Execution Enviroment, que es el ambiente de ejecución que permite ejecutar las aplicaciones .Net Core, para lograr ejecutar estos comandos debemos instalar antes este entorno de ejecución, para eso usamos los siguiente comando, te recomiendo este post si quieres tener un poco más de contexto:

$ dnvm upgrade -r coreclr

Ahora que tenemos el ambiente de ejecución, ejecutaremos el siguiente comando para restaurar los paquetes o dependencias:

$ dnu restore

El siguiente comando para compilar el proyecto:

$ dnu build

Y para terminar el siguiente comando para ejecutar nuestra aplicación en un servidor local

$ dnx web

Y veremos el siguiente mensaje que nos indica en que url está corriendo nuestra aplicación para que la podamos probar:


Y si navegamos a través de un browser podremos ver nuestra aplicación corriendo con el starter por defecto de Asp.Net 5



Una vez tenemos nuestra aplicación Yeoman no nos deja solos en lo que viene, también a través de este podemos crear ítems específicos para nuestro proyecto, por ejemplo con el siguiente comando podríamos crear una nueva clase:

$ yo aspnet:Class ElTavoClase

Y bueno amigos con esto damos por terminado este artículo, sobre cómo usar Yeoman para iniciar nuestras aplicaciones, espero les haya resultado interesante y de utilidad.

No olvides darle me gusta mi página en Facebook para mantenerte actualizado de lo que pasa en el Tavo.Net https://www.facebook.com/eltavo.net

Saludos y buena suerte!

5 comentarios:

  1. hey tavo what´s up?!!! I ask you about the future of Core this blog resolve a part of my questions !!! ;) thx

    ResponderEliminar
  2. Good and nice information, thanks for sharing your views and ideas.. keep rocks and updating..


    Java Training in chennai

    Java Training institute in chennai

    ResponderEliminar
  3. Hi, i really enjoyed to read your article.. i got clear idea through your views and ideas.. thanks for sharing your post..

    Dot Net Training in chennai


    IOS Training in chennai

    ResponderEliminar
  4. Yeoman is a good tool to structurize the code and, in my opinion, every developer should try this software at least once to understand the pluses of it.

    ResponderEliminar