Automatización en el Flujo Front-end

Jade - Stylus - Coffeescript

Gulp.js

Jade

Motor de plantillas de alto rendimiento influenciado por HAML

Cleaner version of HTML

Implemented with JS for Node.js
Pst! Ahora llamame Pug

Ventajas de usar Jade

  • Escritura simplificada - Adios <> - Hola Tabs
  • Buenas practicas
  • Modularización del HTML
  • Posibilidad de utilizar logica (if, else, for, variables...)
Simple HTML 
							


	
Social Networks
Simple Jade 
						
.ctn-social
  h2 Social Networks
  ul
    li
      a(href="http://plus.google.com/") Google +
    li
      a(href="http://www.facebook.com/") Facebook
    li
      a(href="http://www.twitter.com/") Twitter
    li
      a(href="http://www.instagram.com/") Instagram

Texto Plano

							
h1 Titulo

a(href="#") Link

p Este es un parrafo simple

p Este
  | es 
  | un 
  | parrafo simple
							
						
							

Titulo


Link


Este es un parrafo simple



Este es un parrafo simple

Comentarios

							
// Comentario html
//- Comentario Jade

HTML en linea

							
div.row
  div.columna
    See more
							
						
							


  

    See more

Anidamiento

							
.row
  .column
    p
      a(href="#") Link
    p Sample text


// Anidación continua
.row: .column: p: a(href="#") Link
							
						
							


  

    
Link

    
Sample text

  







  

    
Link

Etiquetas, atributos y contenido

						
// Jade a HTML
.contenedor
  p Parrafo
  //- clases
  p.rojo Parrafo rojo
  //- id
  p#description Parrafo Azul de id description
  //- Atributos
  form(method="POST", action="/", class="nice-form", id="test-form")
    input(type="text" placeholder="Ingrese un texto")
						
						



  
Parrafo

  
Parrafo rojo

  
Parrafo Azul de id description

Preparandonos para modularizar

						
html
  head
    title Web Test
  body
    //- Contenido dinamico
    .wrapper
      h1 Mi Lista
      ul
        li Elemento 1
        li Elemento 2
        li Elemento 3
        li Elemento 4
    //- Contenido estatico
    footer
      p Copyright 2016 @ Jean Paul Diaz

Extensión de plantillas

include - extends

						
//- layouts/default.jade
doctype html
html
  head
    title Web test
  body
    block content
    include ../includes/footer.jade
						
					
						
//- includes/footer.jade
footer
  p Copyright 2016 @ Jean Paul Diaz
						
					
						
//- index.jade
extends ./layouts/default.jade
block content
  .wrapper
    h1 Mi Lista
    ul
      li Elemento 1
      li Elemento 2
      li Elemento 3
      li Elemento 4

Ejemplo de estructura de archivos para Jade

						
pre-app
|
|–– includes
|   |–– footer.jade
|   |–– head.jade
|   |–– header.jade
|   |–– navigation.jade
|
|–– layouts
|   |–– default.jade
|   |–– pages.jade
|
|–– index.jade
|–– about.jade
|–– contact.jade
						
					
						
app
|
|–– styles
|   |–– main.css
|   |–– main.min.css
|
|–– scripts
|   |–– scripts.js
|
|–– images
|   |–– logo.jpg
|
|–– index.html
|–– about.html
|–– contact.html

See more!


http://jade-lang.com/reference/
https://github.com/pugjs/

CSS actual

Si, una vez mas el meme de Peter Griffin

CSS needs a hero


body {
  font: 12px Helvetica, Arial, sans-serif;
}
a.button {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

How if we could omit braces?


body
  font: 12px Helvetica, Arial, sans-serif;

a.button
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;

How about semi-colons?


body
  font: 12px Helvetica, Arial, sans-serif

a.button
  -webkit-border-radius: 5px
  -moz-border-radius: 5px
  border-radius: 5px

Keep things DRY

DRY = Don't Repeat Yourself 

border-radius()
  -webkit-border-radius: arguments
  -moz-border-radius: arguments
  border-radius: arguments

body
  font: 12px Helvetica, Arial, sans-serif

a.button
  border-radius(5px)

How about transparent mixins?


border-radius()
  -webkit-border-radius: arguments
  -moz-border-radius: arguments
  border-radius: arguments

body
  font: 12px Helvetica, Arial, sans-serif

a.button
  border-radius: 5px

Create & Share


@import 'vendor'

body
  font: 12px Helvetica, Arial, sans-serif

a.button
  border-radius: 5px

What if it were all optional?


fonts = helvetica, arial, sans-serif

body {
  padding: 50px;
  font: 14px/1.4 fonts;
}

Si eso te gusta, mejor usa Stylus!

http://stylus-lang.com/

CoffeeScript

Vista rapida


      # Asigancion:
      number = 42
      opposite = true

      # Condicionales
      number = 1304 if opposite

      # Functions
      cuadrado = (x) -> x * x

      # Arrays
      list = [1, 2, 3, 4, 5]
    

      var number, apposite, cuadrado list;

      number = 42;

      opposite = true;

      if (opposite) {
        number = -42;
      }

      cuadrado = function(x) {
        return x * x;
      }

      list = [1, 2, 3, 4, 5];

Vista rapida


# Objetos
math =
  root: Math.sqrt
  square: square
  cube: (x) -> x * square x

# Existencia
alert "Epa! Coffescript" if elvis?

# Array comprehensions
cubes = (math.cube num for num in list)
    

var math, cubes;
// Objetos
math = {
  root: Math.sqrt,
  square: square,
  cube: function(x){
    return x * square(x)
  }
};

// Existencia
if (typeof elvis !== "undefined" && elvis !== null){
  alert('Epa! Coffescript');
}

// Array comprehensions
cubes = (function() {
  var i, len, results;
  results = [];
  for (i = 0, len = list.length; i < len; i++) {
    num = list[i];
    results.push(math.cube(num));
  }
  return results;
})();

Mas info

http://coffeescript.org/

Util

http://js2.coffee/

Gulp

The streaming build system

Antes de empezar


        $ npm init
  • Instalar modulos con npm

      $ npm install --save-dev gulp
      $ npm install --save-dev gulp-jade

Era pre-gulp - Grunt


Source: Frontendlabs.io

Ahora con gulp


Source: Frontendlabs.io

Como funciona gulp?

  • Selecciona archivos
  • Lo transforma
  • Los repone o re-ubica una copia

Gulp solo tiene 4 comandos!

Sus cuatro fantasticos

Nope!

Gulp task
Gulp src
Gulp dest
Gulp watch


Gulp task


      gulp.task('nombretarea',function(){
        // aqui continuamos
      });

Gulp src


      gulp.task('compilarJade',function(){
        gulp.src('ruta/de/archivo')
        // aun continuamos aqui
      });

Gulp dest


      gulp.task('compilarJade',function(){
        gulp.src('./jade/*.jade')
          .pipe(gulp.dest('ruta/de/destino'));
      });
Tarea simple que mueve un archivo de un lugar a otro

wait! Que es pipe?

Gulp dest


      gulp.task('compilarJade',function(){
        gulp.src('./jade/*.jade')
          .pipe(jade())
          .pipe(gulp.dest('./public/'));
      });
      //continuamos aqui
Tarea para compilar jade

Gulp watch


      // tarea para compilar jade
      gulp.task('compilarJade',function(){
        gulp.src('./jade/*.jade')
          .pipe(jade())
          .pipe(gulp.dest('./public/'));
      });

      // watch
      gulp.watch('./jade/*.jade',['compilarJade']);

Estructura de un archivo de gulp

      
      // variables que contienen los modulos que usamos
      var gulp = require('gulp');
      var jade = require('gulp-jade');

      // tarea para compilar jade
      gulp.task('compilarJade',function(){
        gulp.src('./jade/*.jade')
          .pipe(jade())
          .pipe(gulp.dest('./public/'));
      });

      // watch
      gulp.watch('./jade/*.jade',['compilarJade']);

Listo. Ya sabes gulp.

Front Kick Alpha

Un Flujo de trabajo front end :) https://github.com/jeanpaul1304/front-kick-alpha

Preguntas y comentarios

Gracias!

Github http://github.com/jeanpaul1304
Diapositivas http://jeanpaul1304.github.io/gulpjs-expo
Front-kick-alpha https://github.com/jeanpaul1304/front-kick-alpha
and as @jeanpaul1304 at all long the web...

‪#isiljsday