Lightning Component Bundle Concept

In my last post I showed how to use Nested Component in Lightning Component. In this post, I will be showing you some basic concept of Controller, Helper and Renderer oof Component Bundle.

bundle

Controller:

This is a client-side Controller. A client-side controller handles events within a component. It’s a JavaScript resource that defines the functions for all of the component’s actions.
Each action function takes in three parameters i.e. Component, Event, and Helper. A client-side controller is part of the component bundle.
It is auto-wired via the naming convention, <ComponentName>Controller.js like: DemoController.js here Demo is Component Name.

  • Component : component to which the controller belongs.
  •  Event : event that the action is handling.
  • Helper : helper if it’s used for calling helper method.

In the controller we can call function directly from action of component like: {!c.doSomething}. We can calls helper function from controller function with helper keyword.

Example :

Demo.cmp : This is Component of Demo Bundle

<aura:component >
    <ui:button label="Do Something" press="{!c.doSomething}"/>
</aura:component>

DemoController.js : This is Component Controller of Demo Component Bundle

({
    doSomething : function(component, event, helper) {
        alert("This is my Controller function");
    },
})

Note : we can’t call controller’s funtion or recursion funtion itself.

Helper:

Hepler is server-side Controller. It is usually use for firing server-side actions and process data or tasks. we can called Helper’s java-script function from a client-side controller or renderer. It is also part of the component bundle. A helper function can pass in any arguments required by the function, such as the component it belongs to, a callback, or any other objects.

It is auto-wired via the naming convention, <ComponentName>Helper.js like: DemoHelper.js here Demo is Component Name. The helper function calls an Apex controller method and queues the action. The Apex method is invoked and data is returned.
A JavaScript callback function is invoked when the Apex method completes. The JavaScript callback function evaluates logic and updates the component’s UI.

Example:
From above example we need to add some statement i.e.

DemoController.js : This is Component Controller of Demo Component Bundle

({
    doSomething : function(component, event, helper) {
        //Calling helper function
        helper.doSomethingHelper(component);
    },
})

DemoHepler.js : This is Component Helper of Demo Component Bundle

({
    doSomethingHelper : function(component, event, helper) {
        alert("This is my Helper function");
    },
})

If we want to reuse funtion in the component put it into helper. Hepler we can call helper’s funtion or recursion funtion itself.

Note : we cannot call Helper’s function directly from action of component like: {!c.doSomething}

Renderer :

Renderer is client-side Controller. It’s a JavaScript resource that defines the functions for all of the component’s actions.
Each action function takes in two parameters i.e. Component and Helper.It is auto-wired via the naming convention, ComponentName>Renderer.js like: DemoRenderer.js here Demo is Component Name.

The rendering lifecycle automatically handles rendering and rerendering of components whenever the underlying data changes. Here is an outline of the rendering lifecycle.

When an event is fired, it may trigger actions to change data and call rerender() on affected components. The rerender() function enables components to update themselves based on updates to other components since they were last rendered. This function doesn’t return a value. The framework automatically calls rerender() if you update data in a component. You only have to explicitly call rerender() if you haven’t updated the data but you still want to rerender the component. You generally want to extend default rerendering by calling superRerender() from your renderer() function before you add your custom rerendering code. Calling superRerender() chains the rerendering to the components in the body attribute.

Example:

DemoRenderer.js : This is Component Renderer of Demo Component Bundle

({
    render : function(component, helper) {
        var ret = this.superRender();
        //Calling Helper function
        helper.doSomethingHelper(component);
        return ret;
    },
})

Thanks!