Front-end

El lado oscuro

Por @Manz

twitter.com/Manz

Hace mucho, mucho tiempo... en un Internet muy lejano...

La tecnología principal del front-end es HTML5.

Por ejemplo, es muy sencillo crear componentes multimedia...

(usando directamente video/audio)

GIF/32MB MP4/3MB

Usar etiquetas semánticas para mejorar significado:

<div id="cabecera"></div>
<div id="contenido"></div>
<div id="piepagina"></div>

<header></header>
<div id="contenido"></div>
<footer></footer>

Por otro lado, CSS se encarga de la presentación (aspecto visual).

Chrome

Google

Firefox

Mozilla

IE

Microsoft

Edge

Microsoft

Safari

Apple

Opera

@keyframes facemove {
  0% { transform: translate(0, 0) }
  50% { transform: translate(20px, 5px) }
}
.face {
  animation: facemove 1s ease
             0.1s 5 alternate;
}

#falcon {
  width:500px;
  display:flex;
}

#falcon div {
  width:75px;
  height:50px;
}

#luke

#leia

#solo

#chewy

#falcon {
  width:500px;
  display:flex;
}

#luke

#leia

#solo

#chewy

#falcon {
  width:500px;
  display:flex;
  justify-content:center;
}

#luke

#leia

#solo

#chewy

#falcon {
  width:500px;
  display:flex;
  justify-content:center;
  align-items:center;
}

#luke

#leia

#solo

#chewy

#luke { background:linear-gradient(#8b6e5a 25%,
                                   #f5e7e5 25%) }
#leia { background:linear-gradient(#331f24 25%,
                                   #fff6e6 25%) }
#solo { background:linear-gradient(to left, #190f17 25%,
                           #f0dbd1 25%,75%, #190f17 75%) }
#chewy { background:linear-gradient(-25deg, #5e473c 50%,
                           #f6f1f3 50%,55%, #5e473c 55%) }

<div class="grid">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
  <div class="d"></div>
</div>

.grid {
  display:grid;
  grid-template-columns: 25% 1fr 1fr;
  grid-template-rows: 50vh 50vh;
}

25%

1fr

<div class="grid">
  <div class="a">Head</div>
  <div class="b">Menú</div>
  <div class="c">Main</div>
  <div class="d">Foot</div>
</div>

.grid {
  display:grid;
  grid-template-areas: "head head"
                       "menu main"
                       "foot foot";
}
.a { grid-area:head; background:blue }
.b { grid-area:menu; background:red }
.c { grid-area:main; background:green }
.d { grid-area:foot; background:orange }

Head

Menu

Main

Foot

Ejemplo

Código estrictamente necesario

.container {
  display:flex;      /* Usa módulo Flexbox CSS */
  min-height:100px;
  background:grey;
}

Ejemplo

(con vendor prefixes = retrocompatibilidad)

.container {
  display:-webkit-box;    /* v. antigua (2009) */
  display:-webkit-flex;   /* v. actual (2011) */
  display:-ms-flexbox;    /* v. antigua (IE) */
  display:flex;           /* Prop. definitiva */
  min-height:100px;
  background:grey;
}

Ejemplo

Esto tiene una serie de desventajas: discrepancias, «verbose», modernización...

.example {
  -webkit-filter: contrast(1.25);
          filter: contrast(1.25);
  background: -webkit-linear-gradient(blue, red);
  background:         linear-gradient(blue, red);
}

Preprocesadores

Pug → HTML5

(Pug, antiguamente Jade)

Pug

Etiquetas, clases, IDS y atributos

div#elementid
  div.class1.class2
    a(href="http://emezeta.com/") Enlace

HTML5

<div id="elementid">
  <div class="class1 class2">
    <a href="http://emezeta.com/">Enlace</a>
  </div>
</div>

Pug

Variables y condicionales

- var data = { user: 'Gandalf' }
#welcome
  if data.user
    h2= data.user
  else
    h2.blue Anónimo

HTML5

<div id="welcome">
  <h2>Gandalf</h2>
</div>

Pug

Arrays y bucles

- var array = [ 'uno', 'dos', 'tres' ]
ul
  each i in array
    li= i

HTML5

<ul>
  <li>uno</li>
  <li>dos</li>
  <li>tres</li>
</ul>

LESS → CSS3

(Preprocesador CSS)

LESS

Anidación, ámbitos y añadidos

#contenido {
  background:black;
  .destacado, .info {
    color:white;
    &:hover { background:red }
  }
}
.destacado {
  background:blue;
}

CSS3

#contenido {
  background: black;
}
#contenido .destacado, #contenido .info {
  color: white;
}
#contenido .destacado:hover,
#contenido .info:hover { background: red }
.destacado {
  background: blue;
}

LESS

Variables y mixins simples

@filtro: grayscale(1);      // Filtro a aplicar

.simplemixin () {           // Mixin reutilizable
  filter:@filtro;
  -webkit-filter:@filtro;
}
.elemento {                 // Clase
  .simplemixin;
}

CSS3

.elemento {
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
}

LESS

Mixins paramétricos

.mixin (@bg: #222,
        @color: #FFF) {
  background:@bg;
  color:@color;
}
.clase2 {  // Paramétrico
  .mixin(#888, #111);
}
.clase3 {  // Clase = mixin
  .clase2
}

CSS3

CSS resultante

.clase2 {
  background: #888888;
  color: #111111;
}
.clase3 {
  background: #888888;
  color: #111111;
}

¿Y qué pasa con Javascript?

ECMAScript (ES)
¿Crossbrowser?
↑ Complejidad
↑ Trabajo

ES5

ECMAScript5 (Dic/2009)

CH5998% FF52100% IE1199% ED14100% SF1097% OP4698%

ES6

ECMAScript6 (Jun/2015)

CH5997% FF5294% IE1111% ED1493% SF1099% OP4697%

ES7 (2016+)

ECMAScript7 (En desarrollo)

CH5983% FF5279% IE113% ED1441% SF1041% OP4683%

BabelJS → JS

Transpiler: JS/ES6 a JS/ES5

ES6 Kangax Compat-Table

Preprocesado

Esquema de "compilación"

Pros

Flexibilidad en el código
Automatización de tareas
Organización y estructuración

Cons

Requiere preprocesamiento (complejidad)
Necesidad de coherencia (discrepancias)

Minifiers

Reducir tamaño (condensar espacio innecesario)

CleanCSS CSS Minify Benchmark

cleancss index.css -o index.min.css

UglifyJS

uglifyjs events.js -o events.min.js

HTMLmin

htmlmin index.prev.html -o index.html

PostCSS

«Más allá de CSS»

Autoprefixer

postcss -u autoprefixer index.css -o output.css

.clase {
  display:flex;
}

.clase {
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
}

color-hex-alpha / custom-properties

postcss -u (nombre_del_plugin) index.css -o output.css

:root {
  --color: #FF000055;
}
.clase {
  color: var(--color);
}

.clase {
  color: rgba(255, 0, 0, 0.33333);
}

cssnano

postcss -u cssnano index.css -o output.css

.clase {
  -webkit-border-radius:16px;     /* obsoleto */
  border-radius:16px;
  font-weight:normal;
  margin: 10px 20px 10px 20px;    /* redundante */
  font-weight:normal;             /* repetida */
  color: rgb(255,0,0);            /* formato largo */
  z-index:555;                    /* valor muy alto */
} /* 271 bytes */

.clase{border-radius:16px;margin:10px 20px;
font-weight:400;color:red;z-index:1} /* 79 bytes */

postcss-sorting

postcss -u postcss-sorting index.css -o output.css

.button {
  margin:0 10px;
  padding:0 15px;
  border:1px solid #f3f3f3;
  border-radius:4px;
  background-color:#fefefe;
}

.button {
  padding:0 15px;
  margin:0 10px;

  background-color:#fefefe;
  border-radius:4px;

  border:1px solid #f3f3f3;
}

SVG

Gráficos vectoriales SVG

<svg>
  <title>HTML5 Guy</title>
  <path class="leg left-leg" d="..." />
  <path class="leg right-leg" d="..." />
  <g class="body">
    <path class="arm left-arm" d="..." />
    <path class="arm right-arm" d="..." />
    <path class="shield" d="..." />
    <path class="inner-shield" d="..." />
    <path class="left-five" d="..." />
    <path class="right-five" d="..." />
  </g>
</svg>

SVG Animado

Gráficos vectoriales SVG + Animaciones CSS

<svg>
  <style>
    @keyframes move {
      0% { transform: translateY(10px) }
      100% { transform: translateY(50px) }
    }
    .body {
      animation: move 1.5s linear
                 infinite alternate;
    }
  </style>
  ...
</svg>

SVGO

SVG Optimizer

svgo logo.svg -p 2 -o logo.min.svg 

Done in 85 ms! 
8.14 KiB - 81% = 1.5 KiB

PNG/39KB · SVG/8KB · SVG optimizado/1.5KB

ATOM Editor

less-postcss-autocompile

Convierte LESS a CSS y añade prefijos

// out:out.css,autoprefixer:true
@color: #44AA88;
.dark-side {
  background:@color;
  filter:contrast(0.5);
  color:#FFF;
}

.dark-side {
  background: #44aa88;
  -webkit-filter: contrast(0.5);
          filter: contrast(0.5);
  color: #FFF;
}

Convierte LESS a CSS, añade prefijos y minifica

// out:fin.min.css, compress:true, autoprefixer:true
.dark-side {
  filter:brightness(0.5);
}

.dark-side{-webkit-filter:brightness(.5);
filter:brightness(.5)}

Task Runners

Automatizadores de tareas (repetitivas o tediosas)

/* Gruntfile */
module.exports = function(grunt) {
  grunt.loadNpmTasks('grunt-postcss');
  grunt.initConfig({
    postcss: {
      options: {
        map: true,
        processors: [ require('autoprefixer')() ]
      },
      dist: {
        src: 'css/*.css'
      }
    }
  }
  grunt.registerTask('default', ['postcss:dist']);
});

GruntJS

Configuración
Temp files (lento)
«Verbose»

/* gulpfile.js */
gulp.task('css', function() {
  var postcss      = require('gulp-postcss');
  var autoprefixer = require('autoprefixer');
  var minifycss    = require('gulp-minify-css');

  return gulp.src('./src/*.css')
             .pipe(postcss([ autoprefixer() ]))
             .pipe(minifycss())
             .pipe(gulp.dest('./dist'));
});

GulpJS

Código
Streams (rápido)
Simple

Front-end

El lado oscuro

GIF/32MB MP4/3MB

Cambio de estrategia

Ejemplo

Ejemplo

Ejemplo

CanIUse: Filtros CSS

CanIUse: Grid CSS (IE & Edge!!)

CanIUse: Grid CSS (2017)

Preprocesadores

Pug → HTML5

Pug

HTML5

Pug

HTML5

Pug

HTML5

LESS → CSS3

LESS

CSS3

LESS

CSS3

LESS

CSS3

ES5

ES6

ES7 (2016+)

BabelJS → JS

Preprocesado

Pros

Cons

Minifiers

CleanCSS CSS Minify Benchmark

UglifyJS

HTMLmin

PostCSS

SVG

SVG Animado

SVGO

PNG/39KB · SVG/8KB · SVG optimizado/1.5KB

ATOM Editor

less-postcss-autocompile

Task Runners

GruntJS

GulpJS

GulpJS plugins ¹

GulpJS plugins ²

GulpJS plugins ³

¡Gracias!