Lightning Apps - Difference Between Controller And Helper?

In addition to what everyone else has said...

The helper is designed to have shared code in it. So, you could have code shared by your renderer and your controller or by multiple controller functions. That should go in the helper JS file.

I think that a good practice is to let the controller respond to events, possibly perform some amount of control flow, and delegate business logic to the helper as a separation of concerns. It also sets you up to be able to reuse your business logic in other parts of the component in the future.

Helper code can be shared among components when they are related through inheritance. If one component extends another it inherits its super component's helper and can override it.

Sub components can call super component controller methods, but that may be deprecated in the future according to the documentation in the Lightning Components Developer's Guide.

Components can communicate with each other via events to "share" code. For example, if you have a component that handles writing business logic errors in a uniform way in your app, and handles some sort of error related event, you could fire an event to trigger it to handle an error.

If you are more the visual type of person. Follow this link from Salesforce Developer's Blog: Understanding JavaScript Controllers Versus Helpers In Lightning Components
Here's what's under this link:

By Raja Rao DV | Published: June 15, 2015
JavaScript Controllers and Helpers play a key role in Lightning Components Framework. One of the first things people new to the framework wonder is: What exactly is the difference between JavaScript Controllers and JavaScript Helpers. So let’s go over the differences between them.

To understand it better, let’s say we have an Account list that shows two Account components (Account.cmp). It may look like this:

<c:AccountList>
   <c:AccountCmp id=”1” />
   <c:AccountCmp id=”2” />
</c:AccountList>

Visually, the Account list looks like the 1st picture below. But while running, it actually looks something like the 2nd picture:

Each Account Component component (bundle) is made up of a markup, JavaScript controller, a Helper, a Renderer and more.

But, while running, the framework creates an instance of the Controller, an instance of the Renderer for each component but creates only one copy of the Helper and passes the reference of the Helper into every Controller instance and every Renderer instance.

In our example with two Account components, the framework creates one copy of the Helper and passes the reference of this Helper into two controller and to two renderer instances.

Benefits:

• Since Helper is shared across everything, it allows us to share and keep logic across of Controllers and Renderers in one place.
• It also helps us keep logic within Controllers and Renderers lean.
  

So we should try to delegate business logic to Helpers whenever possible.

For example:
Instead of:

// 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); 
}

Do The Following:

// controller.js
callServer: function(cmp, helper) {
  helper.callServer();
}

//helper.js (shared across all instances of controllers and renderers)
callServer: function(cmp, helper) {
   var action = cmp.get("c.getAccounts");
   $A.enqueueAction(action);
}

// renderer.js
afterRender: function(cmp, helper) {
   this.superAfterRender();
   helper.callServer();
}

Note: If there are multiple types of components (say, AccountItem.cmp and AccountDetails.cmp), each component type will get a helper of their own.

When To Use Controllers v/s Helpers:

1. Use Controllers to listen to user events and other events like component, application events. But delegate business logic to helper.

2. Do similar delegation in all Renderer functions (render, rerender and so on).

3. Anytime you need to call one controller function from another controller function, move that logic to Helper.

Anti-Pattern(s):
Too many functions in the Helper: If you get into this situation, it’s time to refactor the component itself into smaller sub components.