Download - 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
Automatización y Metodología Desarrollo UX 3|
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
Automatización y Metodología Desarrollo UX 4|
¿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
Automatización y Metodología Desarrollo UX 5|
¿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.
Composición de herramientas básicas para el entorno UX
Automatización y Metodología Desarrollo UX 6|
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.
Composición de herramientas básicas para el entorno UX
Automatización y Metodología Desarrollo UX 7|
GULP VS GRUNT
Grunt realiza lectura y escritura en ficheros durante el proceso
Gulp usa streams, leyendo y escribiendo en memoria
Composición de herramientas básicas para el entorno UX
Automatización y Metodología Desarrollo UX 8|
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
Composición de herramientas básicas para el entorno UX
Automatización y Metodología Desarrollo UX 9|
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 herramientas básicas para el entorno UX
Automatización y Metodología Desarrollo UX 10|
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.
Composición de herramientas básicas para el entorno UX
Automatización y Metodología Desarrollo UX 11|
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…
Composición de herramientas básicas para el entorno UX
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