JS: del espagueti a la lasaña, paso a paso

Los comienzos



<a onclick="return confirm('Are you sure?');"
   href="/delete">Delete everything</a>

Primeros pasos



<script>
  confirmDelete = function() {
    return confirm('Are you sure?');
  }
</script>

<a onclick="confirmDelete" href="/delete">Delete everything</a>

Segundos pasos



<a id="delete-link" href="/delete">Delete everything</a>

<script>
  // Order matters
  document.getElementById('delete-link').onclick = function() {
    return confirm('Are you sure?');
  }
</script>

Infinitos pasos,
todos mal (o regular)

Browser wars (DOM APIs' hell)

Polución del espacio global (modularidad cero)

¿Rendimiento? ¿eso qué es?

Librerías to the rescue

Prototype

Dojo

MooTools

YUI

pero sobre todo jQuery

The way of the jQuery


<script>
$(function() {
  $('.delete-link').on('click', function(event) {
    if (!confirm('Are you sure?')) {
      event.preventDefault();
      alert("Saved by the bell!");
    }
  });
});
</script>

<a class="delete-link" href="/delete_all">Delete everything</a>
<a class="delete-link" href="/delete_some">Delete something</a>

JS y jQuery correcto, pero...

No es eficiente

No es modular

Acoplado al DOM
(no resiste modificaciones)

Un pelín espagueti

Recetas para hacer lasaña

(añadir una capa más)

No usar el tag <script>
con contenido

Choose the most convenient

Múltiples src
(devel only y ojo a las dependencias)

Preprocesadores y empaquetado

Gestores de dependencias
(carga dínamica)

IIFEs y Module pattern

No polucionar el espacio global

Encapsular estado y publicar APIs

IIFE + Module Pattern

var counter = (function() {
  var counter = 0;

  var inc = function() {
    counter += 1;
  };

  var value = function() {
    return counter;
  }

  return {
    inc: inc,
    value: value,
  }
})();

counter.inc();
console.log(counter.value()); // 1

No usar callbacks inline

(dentro de un orden ;)

Espagueti (anonymous) callbacks



$('.link').on('click', function(event) {
  event.preventDefault();
  $.get('/data.html', function(html) {
    $('.target').html(html);
  };
});

Callback functions



 var loadCallback = function(html) {
   $('.target').html(html);
 };

 var clickCallback = function(event) {
   event.preventDefault();
   $.get('/data.html', loadCallback);
 };

 $('link').on('click', clickCallback);

Usar promesas

(no solo para llamadas AJAX)

Promesa AJAX



var clickCallback = function(event) {
  event.preventDefault();
  var promise = $.get('/data.html');
  promise.done(doneCallback);
}

var doneCallback = function(html) {
  $('.target').html(html);
}

$('.link').on('click', clickCallback);

No veo la diferencia

Hay diferencias

el evento es un suceso

la promesa es un proceso

Independencia del momento

el evento no la tiene

la promesa sí

llamada vs whatsapp

¿seudocódigo? de inicialización + evento




service.initialize = function() {
  async_code_block {
    trigger('init');
  }
};

service.initialize();

// ... unknown amount of time passes ...

service.on('init', callback); // maybe called

¿seudocódigo? de inicialización + promesa




service.initialize = function() {
  this.promise = new Promise();
  async_code_block {
    this.promise.resolve();
  }
}

service.initialize();

// ... unknown amount of time passes ...

service.promise.done(callback); // always called

Más diferencias

las promesas (procesos) pueden encadenarse y paralelizarse

Peticiones paralelas: the shitty way


var loaded = 0, data1, data2;

var doneCallback = function() {
  if (loaded === 2) {
    console.log(data1, data2);
  }
}

$.get('/first_data.json', function(data) {
  data1 = data;
  loaded += 1;
  doneCallback();
})

$.get('/second_data.json', function(data) {
  data2 = data;
  loaded += 1;
  doneCallback();
})

Peticiones paralelas: the cool way




var doneCallback = function(data1, data2) {
  console.log(data1, data2);
})

var promise1 = $.get('/first_data.json');
var promise2 = $.get('/second_data.json');

$.when(promise1, promise2).then(doneCallback);

Delegación de eventos

Los eventos del DOM
fluyen jerárquicamente

Handlers and callbacks


// n handlers, n callbacks
$('a').on('click', function() {
  // ...
});


var callback = function(event) {
  // ...
}

// n handlers, 1 callback
$('a').on('click', callback);

// 1 handler, 1 callback
$('body').on('click', 'a', callback);

Desacoplarnos
del DOM

(desacoplarse del markup)

Un ejemplo

Componente que cuenta clicks
(¡qué original!)

El HTML




<p class="counter">0</p>
<a class="countable" href="#">Link 1</a>
<a class="countable" href="#">Link 2</a>

The fast way: funciona, pero...




$(function() {
  var count = 0,
      $counter = $('.counter');

  $('.countable').on('click', function() {
    count += 1;
    $counter.html(count);
  });
});

Seleccionar el nodo adecuado

(adecuadamente)

En busca del selector perdido



$(function() {
  $('#countable').on ... // Mal

  $('.countable').on ... // Regular

  $('.js-countable').on ... // Algo mejor

  $('[data-role~=countable]').on ...  // Perito!
});

El HTML usando data-xxx





<p data-role="counter">0</p>
<a data-role="countable" href="#">Link 1</a>
<a data-role="countable" href="#">Link 2</a>

JS usando data-xxx




$(function() {
  var count = 0,
      $counter = $('[data-role~=counter]');

  $('[data-role=countable]').on('click', function() {
    count += 1;
    $counter.html(count);
  });
});

Separemos la lógica
en un componente

No nos aisla del DOM,
pero nos ayudará luego :)

Y hará nuestro código reusable :D

Un componente


var Counter = function($counter, $links) {
  this.count = 0;
  this.$counter = $counter;
  this.$links = $links;

  var that = this;

  $links.on('click', function() {
    that.count += 1;
    that.$counter(that.count);
  };
};

$(function() {
  new Counter($('[data-role~=counter]'),
    $('[data-role~=countable]'));
});

Seguimos un poco
pegados al DOM

añadamos otra capa

Un wrapper para encapsular la manipulación DOM




var CounterDom = function($node) {
  this.$node = $node;
};

CounterDom.prototype.setCount = function(count) {
  this.$node.html(count);
}

Usando el wrapper


var Counter = function(counterDom, $links) {
  this.count = 0;
  this.counterDom = counterDom;
  this.$links = $links;

  var that = this;

  $links.on('click', function() {
    that.count += 1;
    that.counterDom.setCount(this.count);
  };
};

$(function() {
  var counterDom = new CounterDom($('[data-role~=counter]'));
  new Counter(counterDom, $('[data-role~=countable]'));
});

Un wrapper para encapsular eventos del DOM




var CountableDom = function($node) {
  this.$node = $node;
};

CountableDom.prototype.onInteraction = function(callback) {
  this.$node.on('click', function(event) { callback(); }
}

Usando el wrapper


var Counter = function(counterDom, countableDom) {
  this.count = 0;
  this.counterDom = counterDom;
  this.countableDom = countableDom;

  var that = this;

  countableDom.onInteraction(function() {
    that.count += 1;
    that.counterDom.setCount(this.count);
  });
};

$(function() {
  var counterDom = new CounterDom($('[data-role~=counter]'));
  var countableDom = new CountableDom($('[data-role~=countable]'));
  new Counter(counterDom, countableDom);
});

Ventajas

No depender de jQuery ;)

Testear sin depender del DOM

DOM intercambiable

Test al rico mock de piña para el niño y la niña

describe('Counter', function() {

  var countableDomMock = {
    onInteraction : function(callback) {
      this.cb = callback;
    }
  }

  var counterDomMock = {
    setCount: function(value) {
      this.value = value;
    }
  }

  counter = new Counter(counterDomMock, countableDomMock);

  it('counts clicks', function() {
    countableDomMock.cb(); // mock interaction
    expect(counterDomMock.value).toEqual(1);
  });
});

Checkboxes en lugar de enlaces


<p data-role="counter">0</p>
<label>
  <input type="checkbox" data-role="countable"/> Check 1
</label>
<label>
  <input type="checkbox" data-role="countable"/> Check 2
</label>



var CountableDom = function($node) {
  this.$node = $node;
};

CountableDom.prototype.onInteraction = function(callback) {
  this.$node.on('change', function(event) { callback(); });
};

Relanzar eventos

Evento DOM => Evento Custom

Alternativa para
desacoplarse de los eventos

Relanzando eventos


var CountableDom = function($node) {
    this.$node = $node;
    this.$node.on('click', function() {
      $node.trigger('interaction');
    });
};

CountableDom.prototype.on = function() {
  this.$node.on.apply(Array.prototype.slice.call(arguments));
}

var Counter = function(counterDom, countableDom) {
  // ...

  countableDom.on('interaction', function() {
    // ...
  });
};

One more step

Aislar el modelo

Modelo: ¿POJsO?



var Count = function(initialValue) {
  this.count = initialValue;
};

Count.prototype.inc = function() {
  this.count += 1;
}

Count.prototype.value = function() {
  return this.count;
}

Usando el modelo


var Counter = function(count, counterDom, countableDom) {
  this.count = count;
  // ...

  countableDom.onInteraction(function() {
    that.count.increment();
    that.counterDom.setCount(that.count.value());
  });
};

$(function() {
  var count = new Count(0);
  var counterDom = new CounterDom($('[data-role~=counter]'));
  var countableDom = new CountableDom($('[data-role~=countable]'));
  new Counter(count, counterDom, countableDom);
});

Count
XXXDom
Counter
MODEL
VIEW
CONTROLLER

Bus de eventos

WARNING: handle with care

window.eventBus = $({});

El modelo propaga por el bus sus cambios




Count.prototype.inc = function() {
  this.count += 1;
  eventBus.trigger('count.inc', [ this.value() ]);
};

eventBus.on('count.inc', function(event, count) {
  console.log(count);
};

WARNING: handle with care

Observar el modelo

get / set

Object.observe (ECMAScript 6)

Parametrización

pasar datos del markup al JS

data-xxx y JSON

data-confirm-message

$.fn.confirmable = function() {
  this.each(function() {
    var $el = $(this);
    $el.on('click', function(event) {
      var message = $el.data('confirm-message');
      if (!confirm(message)) { /* .. */ }
    });
  });
};

$(function() {
  $('[data-role~=confirmable]').confirmable()
});


<a data-role="confirmable"
   data-confirm-message="Are you sure?"
   href="/delete">Delete everything</a>

Valor inicial del contador



<p data-role="counter" data-initial-count="10">0</p>



CounterDom.prototype.getInitialCount = function() {
  this.$node.data('initial-count');
}

var Counter = function(counterDom, countableDom) {
  this.count = counterDom.getInitialCount();

  // ...
}

No escribir HTML en el JS

Usar plantillas

HTML "a piñon"





$.get('/data.json').done(function(data) {
  $placeHolder.html('<div><b>' + data.value + '</b></div>');
});

Plantillas (Handlebars, por ejemplo)




<script id="my-template" type="text/x-handlebars-template">
  <div><b>{{ value }}</b></div>
</script>




$.get('/data.json').done(function(data) {
  var source = $('#my-template').html(),
      template = Handlebars.compile(source);

  $placeHolder.html(template({value: data.value}));
});

JS: del espaguetia la lasaña,paso a paso

http://ir.gl/jsesalas

Técnicas paraestructurar código JS

(con ejemplos ad hoc)

Ideas básicas

JS no es DOM

jQuery no es JS

Los comienzos

Primeros pasos

Segundos pasos

Infinitos pasos,todos mal (o regular)

Browser wars (DOM APIs' hell)

Polución del espacio global (modularidad cero)

¿Rendimiento? ¿eso qué es?

Librerías to the rescue

Prototype

Dojo

MooTools

YUI

pero sobre todo jQuery

The way of the jQuery

JS y jQuery correcto, pero...

No es eficiente

No es modular

Acoplado al DOM(no resiste modificaciones)

Un pelín espagueti

Recetas para hacer lasaña

(añadir una capa más)

No usar el tag <script>con contenido

Choose the most convenient

Múltiples src(devel only y ojo a las dependencias)

Preprocesadores y empaquetado

Gestores de dependencias(carga dínamica)

IIFEs y Module pattern

No polucionar el espacio global

Encapsular estado y publicar APIs

IIFE + Module Pattern

No usar callbacks inline

(dentro de un orden ;)

Espagueti (anonymous) callbacks

Callback functions

Usar promesas

(no solo para llamadas AJAX)

Promesa AJAX

No veo la diferencia

Hay diferencias

el evento es un suceso

la promesa es un proceso

Independencia del momento

el evento no la tiene

la promesa sí

llamada vs whatsapp

¿seudocódigo? de inicialización + evento

¿seudocódigo? de inicialización + promesa

Más diferencias

las promesas (procesos) pueden encadenarse y paralelizarse

Peticiones paralelas: the shitty way

Peticiones paralelas: the cool way

Delegación de eventos

Los eventos del DOMfluyen jerárquicamente

Handlers and callbacks

Desacoplarnosdel DOM

(desacoplarse del markup)

Un ejemplo

Componente que cuenta clicks(¡qué original!)

El HTML

The fast way: funciona, pero...

Seleccionar el nodo adecuado

(adecuadamente)

En busca del selector perdido

El HTML usando data-xxx

JS usando data-xxx

Separemos la lógicaen un componente

No nos aisla del DOM,pero nos ayudará luego :)

Y hará nuestro código reusable :D

Un componente

Seguimos un pocopegados al DOM

añadamos otra capa

Un wrapper para encapsular la manipulación DOM

Usando el wrapper

JS: del espagueti
a la lasaña,
paso a paso

Técnicas para
estructurar código JS

Infinitos pasos,
todos mal (o regular)

Acoplado al DOM
(no resiste modificaciones)

No usar el tag <script>
con contenido

Múltiples src
(devel only y ojo a las dependencias)

Gestores de dependencias
(carga dínamica)

Los eventos del DOM
fluyen jerárquicamente

Desacoplarnos
del DOM

Componente que cuenta clicks
(¡qué original!)

Separemos la lógica
en un componente

No nos aisla del DOM,
pero nos ayudará luego :)

Seguimos un poco
pegados al DOM

Alternativa para
desacoplarse de los eventos

Mejor no tener las
plantillas en el HTML

El detalle lo dejamos
para el próximo capítulo