En el mundo de los componentes lightning nos encontraremos con los archivos controller.js y helper.js, si quieres hacer el mejor uso o mejor dicho las mejores practicas, aquí te detallo brevemente cual es la diferencia entre uno y otro y en donde deberías colocar tus funciones.
Supongamos que contamos un componente AccountList, el cual contiene a su vez el componente AccountCmp dos veces.
<c:AccountList> <c:AccountCmp id="1" /> <c:AccountCmp id="2" /> </c:AccountList>
De manera visual el componente AccountList, se mostraría como en la imagen de la izquierda, pero mientras se ejecuta, se visualiza como en la imagen de la derecha.
Cada componente (paquete) esta compuesto por un marco (color amarillo), un archivo controller.js (verde), un helper.js (rojo), un renderer.js (morado) y otros.
Pero al momento de “estar corriendo”, el framework crea una instancia del controller, una instancia del renderer para cada componente, pero crea una sola copia del helper, y pasa la referencia del helper a cada instancia del controller y renderer.
Nota importante:
En caso de que tuviésemos diferentes componentes, por ejemplo, AccountItem.cmp y AccountDetails.cmp, cada tipo de componente tendrá su propio Helper, es decir, no se comparte como en el ejemplo anterior.
Ventajas
- Dado que en Helper es compartido a traves de todos los componentes, nos permite compartir y mantener la lógica de Controllers y Renderers en un solo lugar.
- También nos ayuda a mantener la lógica dentro de Controllers y Renderers “delgados”
Por lo tanto, debemos intentar delegar la lógica empresarial a los Helpers siempre que sea posible.
Por ejemplo, en lugar de tener lo siguiente:
// controller.js
callServer: function(cmp, helper) {
var action = cmp.get("c.getAccounts");
$A.enqueueAction(action);
}
// renderer.js
afterRender: function(cmp, helper) {
this.superAfterRender();
var action = cmp.get("c.getAccounts");
$A.enqueueAction(action);
}
Deberíamos hacer lo siguiente:
// controller.js
callServer: function(cmp, helper) {
helper.callServer();
}
//helper.js (compartido a traves de toda las instancias de controllers y renderers)
callServer: function(cmp, helper) {
var action = cmp.get("c.getAccounts");
$A.enqueueAction(action);
}
// renderer.js
afterRender: function(cmp, helper) {
this.superAfterRender();
helper.callServer();
}
¿Cuándo usar Controller vs Helper?
- Usa los Controllers para escuchar eventos de usuario y otros eventos como componentes, eventos de aplicaciones. Pero delega la lógica de negocio al Helper.
- Delegar de manera similar en todas las funciones de Renderer (render, rerender, etc.).
- Cuando necesites llamar a una función de controlador desde otra función de controlador, mueve esa lógica al Helper.
Anti-patrón
Demasiadas funciones en el Helper: si llegas a tener esta situación, lo más conveniente será refactorizar o descomponer el componente en subcomponentes más pequeños.