presentación sobre el entorno ux

SOBRE EL ENTORNO UXFront-End - Herramientas y Entorno UX

Conjunto de las herramientas básicas que conforman nuestro entorno UX.

Automatización y Metodología Desarrollo UX 2|

Índice

01 La base de los proyectos

02 ¿Qué es NodeJS?

03 ¿Qué es Gulp?

04 Gulp vs. Grunt

05 API de Gulp

06 Composición de Gulpfile.js

07 Gestores de paquetes y dependencias


LA BASE DE LOS PROYECTOSComposición de herramientas básicas para el entorno UX

NodeJS como entorno de ejecución. GULP para automatizar el proyecto. PUG como lenguaje de plantillas

HTML. SASS como lenguaje de preprocesado

CSS. AngularJS como Framework MVC.

Motor

Presentación

Lógica y Control


¿QUÉ ES NODEJS?

Node.js es un entorno Javascript del lado del servidor, basado en eventos. Node ejecuta javascript utilizando el motor V8, desarrollado por Google para uso de su navegador Chrome. Aprovechando el motor V8 permite a Node proporciona un entorno de ejecución del lado del servidor que compila y ejecuta javascript a velocidades increíbles. El aumento de velocidad es importante debido a que V8 compila Javascript en código de máquina nativo, en lugar de interpretarlo o ejecutarlo como bytecode. Node es de código abierto, y se ejecuta en Mac OS X, Windows y Linux.

JavaScript es un sólo un lenguaje de programación del lado del cliente que se ejecuta en el navegador, ¿verdad?. Ahora ya no. Node.js es una forma de ejecutar JavaScript en el servidor, entre otros tantos usos que le podemos dar.

Composición de herramientas básicas para el entorno UX


¿QUÉ ES GULP?

Gulp es una herramienta ‘task runner’, sirve para automatizar tareas. Mediante Gulp se define cómo deben ejecutarse esas tareas.

Estas herramientas construyen estructuras y tareas comunes para todos los desarrolladores.

El uso típico incluiría:- Compilación de CSS y JavaScript preprocesado.- Concatenación.- Minificación.- Lanzar un servidor para la recarga automática en el browser.- Creación de una build para despliegue.



GULP VS GRUNT

Ambas son task runners: herramientas para definir y ejecutar tareas. Estas tareas permiten automatizar la gestión del proyecto.

Grunt (2012) salió primero y Gulp (2014) después ofreciendo varias mejoras.

Tienen un enfoque distinto:Grunt se centra en la configuración.Gulp se centra en el código.

Internamente están implementados con conceptos distintos:Grunt almacena en ficheros temporales.Gulp utiliza streaming en memoria.



GULP VS GRUNT

Grunt realiza lectura y escritura en ficheros durante el proceso

Gulp usa streams, leyendo y escribiendo en memoria



API DE GULP

1. gulp.taskDefine una tarea

2. gulp.srcLee ficheros

3. gulp.destEscribe los ficheros

4. gulp.watchObserva si hay cambios en los ficheros



API DE GULP1. gulp.task()

Define una tareaTiene 3 argumentos:

- el nombre de la tarea- dependencias de otras tareas- la función a ejecutar

2. gulp.src()Toma como parámetro una cadena que coincida con uno o más archivos.Utiliza patrones que usa el intérprete de comandos de unix(shell).Retorna un stream que puede ser “pipeado” a un plugin adicional ó hacia el método gulp.dest().

3. gulp.dest()Canaliza y escribe archivos desde un Stream.Puede canalizar a varias carpetas.Creará las carpetas que no existan.Retornará el Stream, por si deseamos realizar alguna acción más.Sirve para escribir los datos actuales de un Stream.



COMPOSICIÓN DE GULPFILE.JS

El gulpfile debe de estar en la raíz del proyecto.

La estructura debe contener:- La definición de las dependencias.- La definición de las tareas.- Tareas de observación.- Tarea por defecto.



GESTORES DE PAQUETES Y DEPENDENCIAS

NodeJS está basado en aplicaciones completas llamadas módulos o plugins. Cuando surge un nuevo requerimiento para el proyecto, se puede extender el

funcionamiento para abarcar dicho requerimiento con la instalación de módulos.

Para la instalación de los módulos de NodeJS, se utiliza Node Package Manager (NPM), que además una vez instala los módulos, puede añadirlos como dependencia al proyecto.

Cada tarea de Gulp se basa en uno o varios plugins (Módulos de NodeJS), por lo que podremos extender el proyecto sin ningún tipo de limitación.

Con todo lo relacionado a la extensión de frameworks CSS, JS y plugins derivados, disponemos del gestor de paquetes Bower, con el que podremos instalar cualquier framework y sus plugins en distintas versiones según nuestros requisitos. Como ejemplo tenemos AngularJS, Bootstrap, jQuery, etc…


Jose María Aparicio GijónDesarrollo Front [email protected]

Ronda de Toledo, S/NCentro Mixto de Investigación y Desarrollo13005, Ciudad RealT +34 926 278 000www.indracompany.com

presentación sobre el entorno ux

Education