Su asistente obediente Yeoman

Una cosa es cierta: los tiempos han cambiado. No hace mucho tiempo, el desarrollo de front-end, aunque no es simple, era manejable. Aprende HTML, un poco de CSS, y ya estás en camino. En estos días, sin embargo, a falta de mejores palabras, hay muchas más variables para hacer malabares..

Los preprocesadores, la optimización del rendimiento, las pruebas, la optimización de imágenes y la minificación representan solo algunos de los factores clave que el desarrollador de aplicaciones para usuario moderno debe tener en cuenta.

Por ejemplo, aunque es fácil de usar, CSS ciertamente no se escala bien. Y, aunque es poderoso, JavaScript puede, a veces, ser un lenguaje feo y difícil para trabajar. Luego está el aspecto de rendimiento; Ya no estamos simplemente diseñando para Internet Explorer y Firefox. No, en estos días, tenemos una gran variedad de navegadores, dispositivos, resoluciones y velocidades de conexión a considerar al desarrollar nuevas aplicaciones..

Decir que la nuestra es una industria increíblemente dura sería la subestimación del siglo.

La ventaja es que, para cada bloqueo de carretera, ciertamente se han proporcionado soluciones.

La ventaja es que, para cada bloqueo de carreteras, los miembros de la comunidad ciertamente han brindado soluciones. Considere el problema de la escala CSS; Bueno, los preprocesadores, como Sass, Less y Stylus, fueron introducidos para hacer nuestras vidas más fáciles. ¿Qué pasa con el desagradable problema de los prefijos del navegador CSS3? Compass se encarga de eso! ¿Y el dilema de JavaScript? Una vez más, CoffeeScript y, ahora, ¡TypeScript al rescate! El único problema es que cada nueva solución requiere su propio sistema y proceso. Como se podría esperar, con el tiempo, esto puede complicar significativamente su flujo de trabajo. Ahora, tenemos varias pestañas de Terminal abiertas, cada una de las cuales monitorea un subconjunto de los archivos dentro de nuestros proyectos, escuchando los cambios. Y eso es sólo la punta del iceberg. Todavía no hemos tocado el flujo de trabajo, las mejores prácticas de codificación, la optimización de imágenes, las pruebas y el desarrollo de un proceso de compilación automatizado. ¡Incluso escribir sobre todos estos pasos me está acortando la respiración! ¿No sería fantástico si alguien integrara todos estos preprocesadores y las mejores prácticas en un paquete fácil de usar??

Saluda a Yeoman

Creado por algunos de los amigos de Google (incluidos Paul Irish y Addy Osmani), Yeoman es la solución a tus problemas. Tal como lo expresa el equipo central, Yeoman ofrece un flujo de trabajo con opiniones para ponerlo en marcha con nuevos proyectos lo más rápido posible. Pero, ¿qué significa esto realmente? Bueno, ofrece la posibilidad de crear nuevos proyectos, así como los marcos necesarios y las herramientas de prueba. Lo que esto se traduce esencialmente es una configuración menos tediosa y más creación..

Para comenzar con Yeoman, primero debemos instalarlo desde la línea de comandos. Ejecuta el siguiente comando:

rizo -L get.yeoman.io | golpetazo

Este script realizará una variedad de cosas, incluida la instalación de las bibliotecas necesarias para que Yeoman haga su trabajo. Probablemente encontrará que requiere algunos pasos de su parte, pero no se preocupe; te dirá exactamente lo que hay que hacer!

Una vez completada la instalación, ejecute hacendado para ver qué hay disponible. Encontrarás una variedad de opciones, tales como en eso, para inicializar un nuevo proyecto, construir, Para crear un especial, optimizado. dist carpeta para la implementación, y instalar, lo que hace que el proceso de gestión de paquetes sea lo más fácil posible.

Para obtener más información sobre lo que hace cada opción, agregue --ayuda a la orden: yeoman init --ayuda.

Vamos a crear un nuevo proyecto con Yeoman. Crea un nuevo directorio en tu escritorio, discos compactos Para ello desde la Terminal, y ejecute:

yeoman init

En este punto, se te harán algunas preguntas..

¿Te gustaría incluir Twitter Bootstrap para Compass??
¿Te gustaría incluir los complementos de Twitter Bootstrap??
¿Desea incluir RequireJS (para soporte de AMD)??
¿Te gustaría apoyar la escritura de módulos ECMAScript 6??

Estas preguntas le brindan la posibilidad de configurar su nuevo proyecto de inmediato. Por ahora, elija "No" para cada pregunta..

Si prefiere evitar estas preguntas en el futuro, ejecute inicio rápido de inicio. Esto preparará una nueva aplicación, con Modernizr, jQuery y HTML5 Boilerplate al horno..

Con solo ese comando, Yeoman instantáneamente crea un nuevo proyecto para ti. Sin embargo, no se sienta abrumado por todos estos archivos; si no se generaran para usted, eventualmente los crearía manualmente. Solo piense en Yeoman como el robot útil, que hace todo el trabajo manual por usted..

"Yo, hombre; ¡Ve a buscarme a JQuery y Modernizr!

Ahora que tenemos un nuevo proyecto, iniciemos un servidor de vista previa y comencemos a monitorear la aplicación para detectar cambios.

servidor yeoman

Al instante, se iniciará Google Chrome, mostrando su proyecto (también, no más errores de seguridad). Bueno, eso es práctico, pero, como pronto descubrirás, hay mucho, mucho más que ver. Coloque su navegador y editor lado a lado, e intente lo siguiente:

LiveReloading

Cambiar el h1 texto de la etiqueta, y verlo actualizar instantáneamente en el navegador, sin una actualización. Yeoman a su servicio! Esto se logra a través de la extensión LiveReload Google Chrome, pero, si no está instalado, se utilizará un proceso de recarga alternativo..

Hablar con descaro a

Cambio main.css a main.sass (o main.scss, si esa es su preferencia), y disfrute compilando y actualizando instantáneamente en el navegador. Para probarlo, intente crear y usar una variable.

// main.sass $ textColor: # 666 color del cuerpo: $ textColor

¡Bonito! Requiere configuración cero. Ahora puede separar sus hojas de estilo, según sea necesario, e importarlas en main.sass.

// main.sass @import 'grid' @import 'botones' @import 'module'

Cada vez que se guarda un archivo, Yeoman volverá a compilar automáticamente su Sass en CSS normal y actualizará el navegador.

Brújula

Si eres un fanático de Sass, es probable que también prefieras el excelente marco Compass. Sin preocupaciones; Yeoman está feliz de complacer. El soporte de Compass ya está disponible; simplemente importe los módulos aplicables y continúe como de costumbre..

// main.sass @import 'compass / css' * + box-sizing (border-box). ancho de la caja: 200 px + transición (ancho 1s) y: ancho de desplazamiento: 400 px

Si aún no eres un convertidor de preprocesador, debes admitir: esto es significativamente mejor que la alternativa:

* -webkit-box-sizing: border-box; -mano-caja de tamaño: cuadro de borde; tamaño de caja: caja de borde;  .box ancho: 200px; -webkit-transición: ancho 1s; -moz-transición: ancho 1s; -ms-transición: ancho 1s; -o-transición: ancho 1s; transición: ancho 1s;  .box: hover width: 400px;

CoffeeScript

JavaScript está bien y es excelente, pero algunos creen que CoffeeScript proporciona una sintaxis considerablemente más limpia que llena muchos de los vacíos en el lenguaje (al menos visualmente).

Dentro de guiones/ directorio, opcionalmente crear una nueva carpeta, café/, y añada su primer archivo de CoffeeScript: person.coffee.

# scripts / coffee / person.coffee class Persona

Guarde el archivo y, como magia, Yeoman lo compila de inmediato en JavaScript de vainilla y coloca el nuevo archivo directamente en el padre. guiones/ directorio. Ver por ti mismo:

// scripts / person.js var Person; Person = (function () function Person ()  return Person;) ();

Perfecto, y más importante, sin esfuerzo.!

Si necesita modificar la estructura del directorio de alguna manera, consulte la gruntfile.js archivo dentro de la raíz de su aplicación. Detrás de escena, la herramienta Ben Alman's Grunt es lo que configura la compilación..

Solo en este punto, Yeoman nos ha dado una gran flexibilidad. Con ese single yeoman init Ahora puede aplicar un estilo a sus sitios web con Sass, el código de CoffeeScript y, a medida que realiza cambios, verá instantáneamente las actualizaciones reflejadas en el navegador. ¡Pero aún no hemos terminado! Ni siquiera cerca.

Gestión de paquetes

Yeoman aprovecha un potente gestor de paquetes para la web, llamado Bower. ¿Qué es un administrador de paquetes? Bueno, si aún estás descargando manualmente, por ejemplo, la biblioteca de guiones bajos de underscorejs.org, entonces lo estás haciendo mal. ¿Qué sucede cuando la biblioteca se actualiza unos meses más tarde? ¿Volverás a descargar manualmente la biblioteca de nuevo? El tiempo es dinero; así que deja que Yeoman haga el trabajo por ti.

Vamos a subrayar en nuestro proyecto.

yeoman instalar guión bajo

Yeoman responderá a este comando descargando la última versión de la biblioteca y colocándola dentro de una nueva vendedor directorio. Ahora está listo para ser usado.!

Pero, ¿qué sucede si no estamos exactamente seguros de cuál es el nombre del activo que requerimos? En estas situaciones, podemos referirnos a búsqueda de yeoman. Sin pasar ningún argumento, Yeoman devolverá una lista de cada activo que está disponible para instalar. Busquemos lo popular. normalize.css proyecto, de Nicolas Gallagher.

Recuerde: Bower no es exclusivamente para activos específicos de JavaScript.

búsqueda de yeoman normalizar

Al momento de escribir este artículo, se deben devolver dos proyectos:

normalize-css git: //github.com/necolas/normalize.css.git
underscore.normalize git: //github.com/michael-lawrence/underscore.normalize.git

Parece que normalizar-css es el que queremos.

yeoman instalar normalize-css

Ahora, impórtelo de la misma manera que normalmente lo haría:

Alternativamente, cambie el nombre del archivo a normalize.scss, e importarlo en tu main.sass expediente.

// main.sass @import '… / scripts / vendor / normalize-css / normalize'

Hay una variedad de otros comandos específicos de Bower que querrás recordar:

yeoman desinstalar jquery - Desinstalar un paquete.
actualización de yeoman jquery - Actualizar la librería a la última versión..
lista de yeoman - Listar todos los paquetes instalados actualmente.

Pruebas

Si la prueba aún no forma parte de su flujo de trabajo, ¡debería serlo! ¿Qué podría ser mejor que un robot que verifique automáticamente su trabajo después de cada guardado? Afortunadamente, Yeoman hace que sea increíblemente fácil probar sus aplicaciones. Fuera de la caja, están disponibles el popular marco Mocha y PhantomJS (Webkit sin cabeza), aunque es fácilmente configurable, si prefiere una herramienta diferente, como Jasmine. Además, ofrece la biblioteca de afirmaciones de Chai, que rápidamente crecerás para amar..

Abre el pruebas / index.html expediente. Hacia la parte inferior, verá un par de pruebas de muestra proporcionadas. Adelante, elimínelos y cree un nuevo archivo de prueba: spec / person.js. Aquí hay una prueba para que comiences.

// test / spec / person.js describe ('A Person', function () it ('debería tener una edad superior a 0', function () var person = new Nombre de la persona: 'Jeffrey', edad: 27 espera (person.age) .to.be.above (0);););

Debe Interfaz

Si prefieres usar Chai's (una librería de afirmaciones) debería interfaz, volver a index.html, y cambio expect = chai.expect a debería = chai.should (). Ahora, puedes actualizar tu especificación, para que lea:

person.age.should.be.above (0);

El método que elijas depende completamente de ti. No hay elección correcta; solo preferencias.

Para ejecutar esta prueba, vuelva a la Terminal y escriba:

prueba de yeoman

Como era de esperar, la prueba debería fallar con el mensaje: "No se puede encontrar variable: Persona."Es una prueba fallida, pero, lo que es más importante, funciona: ¡estamos probando! Debido a que Yeoman aprovecha la excelente herramienta PhantomJS (Webkit sin cabeza), estas pruebas pueden incluso ejecutarse sin el navegador.

Pruebas de CoffeeScript

Si prefiere escribir sus pruebas en CoffeeScript, necesitará hacer un par de ajustes a su gruntfile.js. Comience agregando un nuevo compilar objetar al Brújula tarea. Dentro de este objeto, especifique los archivos que deben ser vistos. En este caso, le estamos ordenando a Grunt que compile todos los archivos de CoffeeScript dentro de prueba / especificaciones / café.

// Coffee to JS compilation coffee: dist: src: 'app / scripts / ** / *. Coffee', dest: 'app / scripts', compile: files: "test / spec /": " prueba / spec / coffee / *. coffee "

El último paso es decirle a Grunt que vigile ese directorio. Cuando se guarda un archivo, se debe volver a compilar, en consecuencia.

Encuentra el reloj tarea, y actualizar el café objeto, como tal:

café: archivos: ['',' test / spec / coffee / *. coffee '], tareas:' recarga de café '

Arriba, simplemente estamos agregando un nuevo camino a la archivos formación. De esta manera, Grunt sabe que necesita ver el prueba / especificaciones / café directorio también para cambios, y ejecute el café y recargar tareas, en consecuencia.

Poniendolo todo junto

Para ilustrar algunas de las habilidades de Yeoman, tomemos este nuevo aprendizaje y lo apliquemos a un proyecto simple desde cero. Nuestro objetivo es mostrar los últimos tweets sobre Yeoman en la página e incluir el avatar del tweeter y un enlace al tweet original. Empecemos.

Comenzamos creando rápidamente una nueva aplicación con Yeoman..

mkdir tweets && cd tweets yeoman init quickstart

A continuación, iniciamos el servidor y comenzamos a ver nuestros archivos Sass y CoffeeScript para detectar cambios. Si está trabajando, asegúrese de colocar su navegador y editor uno al lado del otro para obtener el mejor flujo de trabajo.

servidor yeoman

Siéntase libre de eliminar el HTML de plantilla que Yeoman proporciona como ejemplo. A continuación, comenzaremos a escribir el código necesario para obtener los tweets. Dentro de guiones/ directorio, crea un nuevo cafe / tweets.coffee archivo, y haga referencia a la versión compilada de este archivo dentro de index.html.

A continuación, buscaremos los tweets deseados utilizando la API de búsqueda fácil de usar de Twitter. Para recuperar un archivo JSON, que contiene estos tweets, podemos usar la siguiente URL:

http://search.twitter.com/search.json?q=yeoman.io

Sin embargo, porque vamos a recuperar estos datos, utilizando $ .getJSON, necesitaremos especificar un llamar de vuelta Parámetro, para que activemos el formato JSONP de Twitter..

Consulte la API de Twitter para más opciones de búsqueda.

Vamos a crear la clase.

App = App o  clase App.TweetsCollection constructor: (query = 'yeoman.io', apiUrl = 'http://search.twitter.com/search.json') -> @query = query @apiUrl = apiUrl fetch : -> $ .getJSON "# @ apiUrl? q = # @ query & callback =?"

Tenga en cuenta que estamos usando la inyección de dependencia (del constructor) para facilitar considerablemente el proceso de prueba de este código (más allá del alcance de este tutorial).

Si desea probarlo, ejecute dentro de la consola de su navegador:

var tweets = new App.TweetsCollection tweets.fetch (). done (función (datos) console.log (data.results););

La consola ahora debería mostrar una lista de tweets, que hacen referencia a "yeoman.io".

Ahora que hemos logrado recuperar los tweets, debemos preparar el HTML para mostrarlos. Si bien se recomienda usar un motor de plantillas adecuado, como la barra de manillar o la implementación de Underscore, para los fines de este tutorial, lo mantendremos simple. Por suerte, las cadenas de bloques y las funciones de interpolación de CoffeeScript hacen que el proceso de incorporación de HTML sea lo más elegante posible..

clase App.TweetsView el: $ ('') constructor: (tweets) -> @tweets = tweets render: -> $ .each @tweets, (index, tweet) => # En su lugar, intente utilizar un motor de plantillas. @ el.append "" "   # tweet.text 
 "" "@

Nota: cuando esté listo para usar un motor de plantillas dedicado, no olvide instalarlo con Yeoman y, detrás de escena, Bower: yeoman instalar manillares.

Este código es bastante simple. Cuando se crea una instancia, se espera una serie de tweets (que ya sabemos cómo recuperar). Cuando su hacer() El método se activa, se desplazará a través de esa matriz de tweets y, para cada uno, agregará un elemento de la lista con los datos necesarios a una lista sin ordenar (@el). Eso es!

Si tienes curiosidad por la => firmar (en lugar de ->), a eso nos referimos como una flecha gruesa en CoffeeScript. Asegura que, dentro de la función anónima., esta todavía se referirá a la TweetsView objeto, en lugar de la única Pío.

Ahora que nuestro código está en su lugar, ¡comencemos a rodar! De vuelta a index.html archivo, añadir un nuevo app.js referencia.

Dentro scripts / coffee / app.coffee, añadir:

tweets = new App.TweetsCollection tweets.fetch (). done (data) -> tweetsView = new App.TweetsView (data.results) .render () $ (document.body) .html tweetsView.el

Al guardar este código, gracias a Yeoman, mire cómo se actualiza el navegador al instante para mostrar los últimos tweets sobre Yeoman!

Usted podría estar preguntándose dónde hecho método viene de Esto es necesario porque, detrás de escena, cuando el ha podido recuperar() método se llama en App.TweetsCollection, Se está realizando una solicitud de AJAX. Como tal, una "promesa" está siendo devuelta.

Piense en una promesa como jQuery prometedor para notificarle cuando una operación asíncrona ha finalizado. Cuando esta solicitud asíncrona esté "hecha", ejecute esta función de devolución de llamada.

Es cierto que este fue un proyecto bastante simple, pero Yeoman ha mejorado significativamente nuestro flujo de trabajo.

El último paso es construir el proyecto para optimizar nuestros activos e imágenes (si corresponde) lo más posible.

construir yeoman

Este comando le indicará a Yeoman que ejecute todas las tareas necesarias y, en última instancia, produzca una nueva dist Directorio que debe ser empujado a su servidor para la producción. Todos los archivos serán comprimidos y optimizados..

Una vez que se complete la operación, realice una vista previa ejecutando:

servidor yeoman: dist

¡Vea la fuente y observe cómo se han comprimido los activos! Pero lo podemos hacer mejor. En este punto, los scripts y las hojas de estilo (no aplicables en nuestro proyecto) no se han concatenado. Vamos a arreglar eso con Yeoman!

Volver a su index.html archivo, y envolver la guión referencias con un comentario HTML, que le indica a Yeoman que concatene y minimice los archivos contenidos.

Esto se traduce en: cuando construya el proyecto, concatene todos los archivos dentro del construir: js bloque de comentarios, y reemplace los scripts con una sola referencia a scripts / scripts.js, que Yeoman generará automáticamente para usted. De esta manera, en producción, trabajamos con una sola solicitud HTTP en lugar de tres. Esto también se puede usar para sus hojas de estilo, sin embargo, si está usando Sass, no es necesario.

Con ese cambio, construir y previsualizar el proyecto nuevamente..

servidor de yeoman de yeoman: dist

¡Aún funciona! Vea la fuente y observe que ahora solo tenemos una referencia de script.

Gente, esta es la optimización gratuita. Sin cuotas escondidas. ¡Úsalo! Su último paso sería empujar el dist Carpeta hasta su servidor y diríjase a casa por el día.!

Pensamientos de cierre

Yeoman no podría haber venido en un mejor momento.

Quizás lo mejor de Yeoman es que está abierto. Si bien algunas herramientas similares cuestan dinero, Yeoman es de código abierto, lo que significa que tú sí, puedes hacerlo y ayudar a mejorarlo.!

A medida que la web avanza cada vez más hacia aplicaciones centradas en el cliente, Yeoman no podría haber llegado en un mejor momento. Entonces, olvida la preparación y configuración; vamos a empezar a construir cosas.

Para mantenerse al día sobre las últimas noticias de Yeoman o para realizar sugerencias y solicitudes de funciones, no dude en seguir @yeoman en Twitter y suscribirse a su grupo de Google..

Código