Front-end: El lado oscuro

Tu navegador no soporta HTML5. Para una buena experiencia, por favor, utiliza un navegador moderno compatible con HTML5.

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:

CSS3

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

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

Preprocesadores

PugLESSBabel

Pug → HTML5

(Pug, antiguamente Jade)

Pug->HTML5

LESS → CSS3

(Preprocesador CSS)

LESS->CSS3

¿Y qué pasa con Javascript?


  • ECMAScript (ES)
  • ¿Crossbrowser?
  • ↑ Complejidad
  • ↑ Trabajo

ES5

ECMAScript5 (Dic/2009)

ChromeFirefoxInternet ExplorerEdgeSafariOpera

CH5499% FF50100% IE1199% ED14100% SF1098% OP4199%

ES6

ECMAScript6 (Jun/2015)

ChromeFirefoxInternet ExplorerEdgeSafariOpera

CH5497% FF5092% IE1111% ED1493% SF10100% OP4197%

ES7 (2016+)

ECMAScript7 (En desarrollo)

ChromeFirefoxInternet ExplorerEdgeSafariOpera

CH5455% FF5050% IE114% ED1452% SF1044% OP4155%

BabelJS → JS

Transpiler: JS/ES6 a JS/ES5

BABELJS->JS

ES6 Kangax Compat-Table

Preprocesado

Esquema de "compilación"

Preprocesadores web
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)

Minificadores (Minify HTML, JS, CSS)
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»

PostCSS

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>
HTML5 Guy

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;
}

Task Runners

Automatizadores de tareas (repetitivas o tediosas)

GruntGulpJSBroccoli
/* 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

Grunt
  • 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

GulpJS
  • Código
  • Streams (rápido)
  • Simple

Pulsa espacio o para avanzar.