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.
![](https://jarrambide.com/wp-content/uploads/2019/05/salesforce_diferencias_entre_controller_y_helper.png)
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.