Jonathan MirCha - @jonmircha
Taller de Automatización y Optimización Front end
por @jonmircha
en Escuela IT
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
Define los actuales estándares de diseño y desarrollo web, tanto para equipos de escritorio, como para dispositivos móviles.
Es la sinergia de 3 tecnologías que se complementan en el diseño y desarrollo Frontend:
Semantics
Multimedia
Offline & Local Storage
3D, Graphics & Effects
Device Access
Performance & Integration
Connectivity
CSS3
¿Por qué es tan difícil encontrar un buen Front end?
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.
Diferencias entre Editores e IDEs
Editores de Código
IDEs (Integrated Development Enviroment)
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.
$ > 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]
$ > mkdir carpeta
$ > cd carpeta
$ > touch README.md
$ > touch .gitignore
$ > git init
$ > git status
El flujo se distribuye en tres estados locales y uno remoto
Estados Locales:
Estado Remoto:
$ > 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)
$ > 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)
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
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
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
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
Une dos ramas. Para hacer una fusión necesitamos:
//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]
Cuando se fusionan ramas se pueden dar 2 resultados:
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
gh-pages es una rama especial para crear un sitio web a tu proyecto alojado directamente en tu repositorio de Github.
$ > 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
$ > git clone [url-repositorio]
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:
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
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:
Node.js es:
Permite tener JavaScript en:
Conceptos que puedes investigar
para entender mejor:
Node.js es:
Node.js NO es:
node -vnpm -vsudoNode Version Manager
npm es el gestor de paquetes de Node.js... y de todo JavaScript
$ > npm init //Con asistente
$ > npm init -y //Sin asistente
{
"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"
}
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
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
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
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
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
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
$ > 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
$ > 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
Un paquete no puede volver a re-publicarse con la misma versión. Si despublicas un paquete puedes romper Internet
$ > npm publish
Lee metadatos del archivo package.json del paquete en su repositorio oficial
$ > npm view [package]
$ > npm view [package] versions
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
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.
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.
Lee este artículo publicado en diciembre de 2014
CSS
JS
HTML
Archivos
Imágenes
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
Servidor
CSS
JS
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
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
