Escuela IT
Taller de Automatización y Optimización Front end

Jonathan MirCha - @jonmircha

Taller de Automatización y Optimización Front end

Automatización y Optimización
Front end

por @jonmircha

en Escuela IT

Jonathan MirCha
Instructor Web & Front end Devsignloper.
Entusiasta de la educación digital. Dirijo Bextlán.
Maratonista(x10) Fitness. Celiaco por amor.

Temas:

  1. Inicio
  2. Historia del Front end
  3. CLI, Editores & IDEs
  4. Git & GitHub | Git + GitHub
  5. Metalenguajes Front end y Gestores de Tareas
  6. Node.js y NPM
  7. NPM Scripts vs Task Runners
  8. Identificando Tareas Front end
  9. Workflow Front end
  10. Workflow Back end

Historia del Front end

Un poco de historia

En 1440 GUTENBERG inventa la imprenta moderna

En 1991 BERNERS-LEE propone el lenguaje HTML

Medios Impresos llevan 600 años

Medios Digitales llevan 25 años

El lienzo es el papel

El lienzo es la pantalla

Colores CMYK

Colores RGB

Dimensiones milímetros

Dimensiones pixeles

Dimensiones cerradas en las que definir y estructurar el contenido

Dimensiones abiertas en las que definir y estructurar el contenido

Frontend

Front end

Front-end

definición

Partiendo de...

Teníamos...

Y también...

Pero... en 2007

Y entonces...

FLASH VS HTML5

La base del Diseño Web Actual

SÉ UN HÉROE

HTML5

Define los actuales estándares de diseño y desarrollo web, tanto para equipos de escritorio, como para dispositivos móviles.

HTML5

Es la sinergia de 3 tecnologías que se complementan en el diseño y desarrollo Frontend:

  • HTML (estructura y contenido)
  • CSS (diseño y presentación) y
  • JS (interactividad y funcionalidad)

Implementaciones HTML5

Semantics

Multimedia

Offline & Local Storage

3D, Graphics & Effects

Device Access

Performance & Integration

Connectivity

CSS3

Más sobre HTML5

Front end Contemporáneo

¿Por qué es tan difícil encontrar un buen Front end?

Ahora nos preocupamos de...

Nuevos Conceptos

Nuevas Herramientas

Más Herramientas

Máááááááááás Herramientas

Fuente

Entendiendo el Front end

Fuente

Ubícate y Enfócate

¡¡¡ No desesperes !!!

<< regresar al temario

Terminal de Comandos

La terminal llego para quedarse
en el Front end...
acostúmbrate a ella

La interfaz de línea de comandos (en inglés, command-line interface, CLI) es un método que permite a los usuarios dar instrucciones a algún programa informático por medio de una línea de texto simple.

Las CLI pueden emplearse interactivamente, escribiendo instrucciones en alguna especie de entrada de texto, o pueden utilizarse de una forma mucho más automatizada, leyendo órdenes desde un archivo de scripts.

Comandos Básicos



Opciones para Windows

Editores & IDEs

Diferencias entre Editores e IDEs

<< regresar al temario

Software de control de versiones distribuido y descentralizado que permite a un equipo de desarrolladores trabajar sobre el mismo código.


Se denomina "distribuido" porque cada miembro del equipo dispone de una copia completa del código.

Ventajas de usar Git

  • Estándar actual
  • Código colaborativo, versionado y distribuido
  • Recuperación de archivos
  • Mayor control
  • Shorcuts y Plugins
  • Mejora tu productividad

Estándar Actual

Instalación

Configurando Git
primera vez

					
$ > git --version
$ > git config --global user.name "Jonathan MirCha"
$ > git config --global user.email jonmircha@gmail.com
$ > git config --global user.ui true
$ > git config --global core.editor nano
$ > git config --list
$ > git help [comando a buscar]
					
				

Inicializar Git en local

  • git init crea un directorio oculto .git donde se almacena toda la información utilizada por git
  • El comando UNIX touch nos crea un nuevo archivo
  • En el archivo .gitignore incluimos lo que NO queramos en nuestro repositorio (gitignore.io)
  • git status nos muestra el listado de archivos nuevos, borrados o editados (untracked)
					
$ > mkdir carpeta
$ > cd carpeta
$ > touch README.md
$ > touch .gitignore
$ > git init
$ > git status
					
				

Plataformas web para Git

Plataformas web para Git

GUI para Git

Aprende más de Git

Crea tu cuenta

Zonas y Flujo de trabajo básico

El flujo se distribuye en tres estados locales y uno remoto

  • Estados Locales:

    1. Directorio de trabajo (Working Area)
      El directorio donde almacenamos los archivos
    2. Área de preparación (Staging Area)
      El estado en el que avisamos a Git que hemos realizado cambios
    3. Repositorio local (HEAD)
      Toma los cambios y almacena una copia instantánea en el directorio local (Git)
  • Estado Remoto:

    1. Origen Remoto (Remote Origin)
      Toma los cambios y almacena una copia instantánea en el directorio remoto (GitHub)

Flujo de Trabajo Git - GitHub
Primera Vez

					
$ > git add .
$ > git commit -m 'mensaje descriptivo'
$ > git remote add origin https://github.com/usuario/repositorio.git 
$ > git push -u origin master //Enviar archivos de local a remoto (Subir)
$ > git pull -u origin master //Enviar archivos de remoto a local (Bajar)
					
				

Flujo de Trabajo Git - GitHub
Subsecuentes veces

					
$ > git add .
$ > git commit -m 'mensaje descriptivo'
$ > git push //Enviar archivos de local a remoto (Subir)
$ > git pull //Enviar archivos de remoto a local (Bajar)
					
				

<< regresar al temario

Historial

git log nos permite conocer todo el historial de un proyecto, con la información de la fecha, el autor y id de cada cambio

					
$ > git log
$ > git log --oneline
$ > git log > commits.txt
					
				

Ramas

Una rama nos permite aislar una nueva funcionalidad en nuestro código que después podremos añadir a la versión principal

					
$ > git branch [nombre-rama] //crear rama
$ > git branch -d [nombre-rama] //eliminar rama
$ > git branch -D [nombre-rama] //eliminar rama (forzado)
$ > git branch //listar ramas
					
				

Viajar en el Tiempo y Espacio

Podemos desplazarnos en el historial del proyecto hacia atrás o adelante en cambios o ramas , sin afectar el proyecto como tal

					
$ > git checkout [nombre-rama] //cambiar a una rama
$ > git checkout [id-commit] //cambiar a un cambio
					
				

Resetear

Podemos eliminar el historial de cambios del proyecto hacia adelante con respecto de un punto de referencia

					
$ > git reset --soft //borra el HEAD
$ > git reset --mixed //borra el HEAD y el Staging
$ > git reset --hard //borra el HEAD, Staging y WorkingDir
					
				

Fusiones

Une dos ramas. Para hacer una fusión necesitamos:

  1. Situarnos en la rama que se quedará con el contenido fusionado
  2. Fusionar
					
//Nos cambiamos a la rama principal que quedará de la fusión
$ > git checkout [rama-principal]
//Ejecutamos el comando merge con la rama secundaria a fusionar
$ > git merge [rama-secundaria]
					
				

Fusiones

Cuando se fusionan ramas se pueden dar 2 resultados:

  1. Fast-Forward: La fusión se hace automática, no hay conflictos por resolver
  2. Manual Merge: La fusión hay que hacerla manual, para resolver conflictos de duplicación de contenido

Etiquetas

Con esta opción git nos permite versionar nuestro código, librería o proyecto

					
$ > git tag [numero-versión] //crear una etiqueta
$ > git show [numero-versión] //mostrar información de una etiqueta
$ > git tag //listar etiquetas

$ > git add .
$ > git commit -m 'v1.0.0'

$ > git push origin [numero-versión] //compartir etiqueta en GitHub
					
				

GitHub Pages

gh-pages es una rama especial para crear un sitio web a tu proyecto alojado directamente en tu repositorio de Github.

  1. URL del repositorio: https://github.com/usuario/repositorio
  2. URL del sitio: https://usuario.github.io/repositorio
					
$ > git init
$ > git add .
$ > git commit -m 'Creando sitio web en GitHub Pages'
$ > git branch gh-pages
$ > git checkout gh-pages
$ > git remote add origin https://github.com/usuario/repositorio.git
$ > git push origin gh-pages
$ > git pull origin gh-pages
					
				

Clonar repositorios

					
$ > git clone [url-repositorio]
					
				

<< regresar al temario

Metalenguajes Front end

Son lenguajes independientes (generalmente, más amigables, potentes y prácticos) que son capaces de traducir el código al lenguaje de destino (HTML, CSS o JavaScript), que son los únicos que los navegadores son capaces de entender de forma nativa.

El objetivo de los metalenguajes o preprocesadores es tener un código más sencillo de mantener y editar. Incluyen características tales como variables, funciones, mixins, anidación y modularidad.

Son soportados por plataformas web como:

Metalenguajes HTML

Metalenguajes CSS

Metalenguajes JavaScript

<< regresar al temario

Gestores de Tareas

También llamados Build Systems o Task Runners, permiten automatizar tareas comunes de desarrollo, tales como la minificación de código, recarga del navegador, compresión de imágenes, validación de sintaxis de código, compilación de preprocesadores y un sin fin de tareas más.

No importa si eres un desarrollador Frontend o Backend. Si hoy en día no quieres perder tiempo realizando tareas comunes manualmente, debes usarlos.

Estos gestores de tareas se ayudan de componentes (plugins) para llevar a cabo su labor y cada uno tiene su propia manera de configurarse, usa el que más se acomode a tu filosofía de trabajo

Gestores de Tareas

<< regresar al temario

Si nos vamos al sitio oficial:

Node.js® es un entorno de ejecución para JavaScript construido con el motor de JavaScript V8 de Chrome. Node.js usa un modelo de operaciones E/S sin bloqueo y orientado a eventos, que lo hace liviano y eficiente. El ecosistema de paquetes de Node.js, npm, es el ecosistema mas grande de librerías de código abierto en el mundo.

En palabras de su creador:

Ryan Dahl
Video Presentación Oficial de Node.js
JavaScript has certain characteristics that make it very different than other dynamic languages, namely that it has no concept of threads. Its model of concurrency is completely based around events

Infraestructura

En síntesis

Node.js es:

  • Plataforma de desarrollo de software creada en 2009
  • Basado en V8 la máquina virtual de Chrome (V8 esta escrito en C)
  • Una marca registrada y es open source
  • Multiplataforma (Windows, OS X, Linux, etc.)
  • JavaScript
  • Asíncrono y orientado a eventos
  • Ideal para aplicaciones en tiempo real y que se ejecutan en dispositivos distribuidos
  • Lo usan y apoyan muchas empresas

Permite tener JavaScript en:

  • La Terminal de Comandos
  • Editores de Código & IDE's
  • En el Front end y los Navegadores
  • En el Back end como:
    • Lenguaje de programación
    • Servidor Web
  • En Bases de Datos NoSQL
  • Interactuando con Hardware (Johnny-Five, NodeBots)

Conceptos que puedes investigar
para entender mejor:

Node.js es:

  • Concurrente
  • Asíncrono
  • No Bloqueante
  • Single Thread
  • Usa el Patrón Reactor

Node.js NO es:

  • Paralelo
  • Síncrono
  • Bloqueante
  • Multi Thread

Más info:

Instalación

  1. Entrar a nodejs.org
  2. Instalar versión superior a la 4.0.0
  3. En la sección de descarga están los pasos a seguir para todas la plataformas existentes

Versiones

  1. LTS (Long Term Support)
    • Soporte a Largo Plazo
    • Estable, recomendada para entornos de producción
  2. Current
    • Desarrollo continuo del ecosistema Node.js
    • Con las últimas características disponibles
    • Liberaciones semanales
    • Recomendada para entornos de desarrollo

Probando Instalación

  1. Abrir una terminal de comandos
  2. Ejecutar los siguientes comandos
    • node -v
    • npm -v

Recomendaciones

  • Recuerda que para el correcto funcionamiento de Node.js tu usuario debe ser Administrador del Equipo

  • Si tu terminal no reconoce los comandos:
    • En OS X o Linux debes ejecutarlos anteponiendo el comando sudo
    • En Windows, reinicia y verifica que en las variables de entorno del sistema exista NODE_PATH

Instalación con NVM

Node Version Manager

<< regresar al temario

Node Package Manager

npm es el gestor de paquetes de Node.js... y de todo JavaScript

Iniciar un proyecto npm

					
$ > npm init //Con asistente
$ > npm init -y //Sin asistente
					
				

package.json

					
{
    "name": "module-name",
    "version": "10.3.1",
    "description": "An example module to illustrate the usage of a package.json",
    "author": "Your Name <you.name@example.org>",
    "contributors": [{
        "name": "Foo Bar",
        "email": "foo.bar@example.com"
    }],
    "bin": {
        "module-name": "./bin/module-name"
    },
    "scripts": {
        "test": "vows --spec --isolate",
        "start": "node index.js",
        "predeploy": "echo im about to deploy",
        "postdeploy": "echo ive deployed",
        "prepublish": "coffee --bare --compile --output lib/foo src/foo/*.coffee"
    },
    "main": "lib/foo.js",
    "repository": {
        "type": "git",
        "url": "https://github.com/nodejitsu/browsenpm.org"
    },
    "bugs": {
        "url": "https://github.com/nodejitsu/browsenpm.org/issues"
    },
    "keywords": [
        "nodejitsu",
        "example",
        "browsenpm"
    ],
    "dependencies": {
        "primus": "*",
        "async": "~0.8.0",
        "express": "4.2.x",
        "winston": "git://github.com/flatiron/winston#master",
        "bigpipe": "bigpipe/pagelet",
        "plates": "https://github.com/flatiron/plates/tarball/master"
    },
    "devDependencies": {
        "vows": "^0.7.0",
        "assume": "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0",
        "pre-commit": "*"
    },
    "preferGlobal": true,
    "private": true,
    "publishConfig": {
        "registry": "https://your-private-hosted-npm.registry.nodejitsu.com"
    },
    "subdomain": "foobar",
    "analyze": true,
    "license": "MIT"
}
					
				

Paquetes NPM

Tipos de Instalación

  • Única (no se recomienda)
  • Global
  • Dependencia de proyecto
  • Dependencia de desarrollo
  • Múltiple

Instalación Única

Se instalan en la carpeta donde se encuentre la terminal de comandos, NO se registran en el archivo package.json

					
$ > npm install [nombre del package]

$ > npm install [nombre del package]@3.4.12 // Versión específica

$ > npm i [nombre del package] //shortcut
					
				

Como Dependencia de proyecto

Se instalan en la carpeta donde se encuentre la terminal de comandos, SI se registran en el archivo package.json como dependencias del proyecto, esto significa que el proyecto requiere de éstos paquetes para funcionar

					
$ > npm install [nombre del package] --save

$ > npm install [nombre del package] -S //shortcut
					
				

Como Dependencia de desarrollo

Se instalan en la carpeta donde se encuentre la terminal de comandos, SI se registran en el archivo package.json como dependencias de desarrollo del proyecto, esto significa que facilitan y optimizan las tareas comunes de desarrollo y publicación del proyecto

					
$ > npm install [nombre del package] --save-dev

$ > npm install [nombre del package] -D //shortcut
					
				

Instalación Global

Se instalan localmente en el ordenador independientemente de donde se encuentre la terminal de comandos, esto significa que estarán disponibles en todas las carpetas del ordenador, NO se registran en el archivo package.json

					
$ > npm install [nombre del package] --global

$ > npm install [nombre del package] -g //shortcut
					
				

Instalación Múltiple de paquetes

Se pueden instalar múltiples paquetes, separando sus nombres con un espacio en blanco y al final especificar el flag del tipo de instalación

					
$ > npm install [package1] [package2] [package3] --flag
					
				

Instalación de proyecto con package.json

Cuando un proyecto tiene el archivo package.json se pueden instalar todas las dependencias de proyecto y desarrollo que tenga registradas en el mismo

					
$ > npm install
					
				

Actualización de paquetes

					
$ > npm update [package] //se actualiza de la carpeta node_modules

$ > npm update [package] --save

$ > npm update [package] --save-dev

$ > npm update [package] --global

$ > npm update [package] //shortcut
					
				

Desinstalación de paquetes

					
$ > npm uninstall [package] //se borra de la carpeta node_modules

$ > npm uninstall [package] --save

$ > npm uninstall [package] --save-dev

$ > npm uninstall [package] --global

$ > npm un [package] //shortcut
					
				

Publicación de paquetes

Un paquete no puede volver a re-publicarse con la misma versión. Si despublicas un paquete puedes romper Internet

					
$ > npm publish
					
				

Mostrar información de paquetes

Lee metadatos del archivo package.json del paquete en su repositorio oficial

					
$ > npm view [package]
$ > npm view [package] versions
					
				

Scripts de paquetes

Podemos ejecutar comandos de un paquete mediante la definición de scripts en el archivo package.json

'npm start' no necesita especificar 'run', es el script standar para lanzar un proyecto npm

					
"scripts": {
  "sass": "node-sass -o ./dist/ ./src/",
  "stylus": "stylus -w ./src/style.styl -o ./dist/style.css",
  "start": "supervisor main.js"
 }
 
$ > npm run sass
$ > npm run stylus
$ > npm start
					
				

Documentación NPM

<< regresar al temario

NPM Scripts vs Task Runners

Los task runners son herramientas que nos ayudan a automatizar tareas repetitivas y de este modo optimizar nuestros recursos y tiempo. Los más conocidos son Grunt y Gulp, y aunque no está considerado un task runner, también podemos utilizar Webpack.

En este curso veremos como podemos reemplazar estas herramientas por simples scripts NPM para automatizar tareas. De este modo, además de tener mayor control, nos ahorraremos bastante tiempo y esfuerzo ya que la curva de aprendizaje es casi nula.

¿Por qué?

Aunque herramientas como Grunt y Gulp han sido y aún son de gran utilidad, el principal problema de dichas herramientas es que requieren de una curva de aprendizaje que en algunos casos puede ser bastante pronunciada.

Por otro lado la búsqueda, configuración y ejecución correcta de plugins, que, aunque existen un montón y cubren casi cualquier necesidad puede ser un gran dolor de cabeza.

Otro problema común suele ser la incompatibilidad entre diferentes versiones. Sobre todo cuando utilizamos muchos plugins, es posible que al actualizar nos encontremos con errores.

Los scripts NPM solucionan estos problemas por que Node.js es multiplataforma, además nos dan pleno control sobre nuestras tareas y restamos dependencias a nuestros proyectos.

¿No te convences?

Lee este artículo publicado en diciembre de 2014

¿Sigues Dudando?

Comparemos código

Gulp

NPM Scripts

Por ello NPM es nuestro ganador

<< regresar al temario

Identificando Tareas

  • Tareas de Compilación
  • Tareas en Tiempo Real
  • Tareas de Publicación

Tareas de Compilación

  • Sass
  • Babel
  • Pug

Tareas en Tiempo Real

  • Servidor Web
  • Servidor Proxy
  • Recarga en vivo
  • Observar cambios

Tareas de Publicación

CSS

  • Concatenación
  • Depuración
  • Prefijos
  • Minificación

JS

  • Concatenación
  • Minificación
  • Ofuscación

HTML

  • Reemplazar referencias
  • Minificación

Archivos

  • Archivos Estáticos
  • Limpieza de archivos
  • Creación de carpetas

Imágenes

  • Optimización
  • Compresión
  • Conversión
  • Redimensión

<< regresar al temario

Let's to Code! \
XD
/

Workflow Front end

Repositorio del curso

Paquetes a usar

instálalos globalmente npm i -g   y como dependencia de desarrollo npm i -D

node-sass babel-cli babel-preset-latest pug pug-cli browser-sync parallelshell rimraf mkdirp uncss postcss-cli autoprefixer buildify useref useref-cli html-minifier copy imagemin imagemin-cli imagemin-pngquant imagemin-jpeg-recompress imagemin-webp imagemin-svgo imagemin-gifsicle

Herramientas Adicionales

<< regresar al temario

Let's to Code! \
XD
/

Workflow Back end

Workflow WordPress

Servidor

  • Proxy
  • Recarga en vivo
  • Observar cambios
    (php, css y js)

CSS

  • Concatenación
  • Prefijos
  • Minificación
  • Depuración

JS

  • Concatenación
  • Ofuscación
  • Minificación

WordPress con Gulp

Paquetes a usar

instálalos globalmente npm i -g   y como dependencia de desarrollo npm i -D

browser-sync gulp-cli gulp gulp-sass gulp-concat gulp-uglify gulp-uncss gulp-autoprefixer gulp-clean-css

Gulp

WordPress con Scripts NPM

Paquetes a usar

instálalos globalmente npm i -g   y como dependencia de desarrollo npm i -D

browser-sync node-sass buildify onchange parallelshell postcss-cli autoprefixer uncss

Muchas Gracias

\
=D
/ ¡Hasta la próxima! \
=D
/

@jonmircha / jonmircha@gmail.com / jonmircha.com

<< inicio