Optimal event architecture design pattern

Adding a high number of component events and application events can not only add more files to your project but can also make debugging your application more difficult.

Keep it simple by using the following patterns:

1. Use only one component file throughout the application. The component event has the attribute name, where can define different names. This will enable us to distinguish them without creating a separate file for each component event. To further understand this, let's take a look at the following code snippet, as an example that defines a component event. Let's name the event file genericEvt:

<aura:event type="COMPONENT" description="Generic Component Event" >
 <aura:attribute name="cmpData" type="Object"/>
</aura:event>

2. Let's create a parent component, as follows:

<aura:component>
 <aura:handler name="cmp1" event="c:genericEvt" action="{!c.handlecmp1}"/>
 <aura:handler name="cmp2" event="c:genericEvt" action="{!c.handlecmp2}"/>
 <c:childCmpOne/>
 <c:childCompTwo/>
</aura:component>

3. The child component's code that registers these events is as follows, in the childCmpOne code snippet:

<aura:component>
 <aura:registerEvent name="cmp1" type="c:genericEvt"/>
</aura:component>

The childCmpTwo code snippet is as follows:

<aura:component>
 <aura:registerEvent name="cmp2" type="c:genericEvt"/>
</aura:component>

4. Use only one application event throughout the Lightning Application. Let's create an application event named genericAppEvt, as follows:

<aura:event type="APPLICATION" description="Generic Component Event" >
 <aura:attribute name="appData" type="Object"/>
</aura:event>

5. Now, you can use a key named type to define its various types. An example code snippet to fire an event with different types is as follows:

<!--c:aeNotifier-->
<aura:component>
 <aura:registerEvent name="appEvent" type="c:genericAppEvt"/>

 <h1>Simple Application Event Sample</h1>
 <p><Lightning:button
  label="Search"
  onclick="{!c.search}" />
 </p>
<p><Lightning:button
  label="Filter"
  onclick="{!c.filter}" />
 </p>

</aura:component>

6. The controller fire event is as follows:

/* aeNotifierController.js */
{
 search : function(cmp, event) {
  var searchEvent = $A.get("e.c:genericAppEvt");
  var appData = {
   "type" : "search"
  }
  searchEvent.setParams({
   "appData" : appData
  });
  searchEvent.fire();
 },

 filter : function(cmp, event) {
  var filterEvent = $A.get("e.c:genericAppEvt");
  var appData = {
   "type" : "filter"
  } 
  filterEvent.setParams({
   "appData" : appData 
  });
  filterEvent.fire();
 }

}

7. You can implement a generic handler. The following code snippet illustrates how to handle and distinguish various types in the event:

<aura:handler event="c:genericAppEvt" action="{!c.handleApplicationEvent}"/>

8. The controller method uses switch statements from JavaScript to write the logic to branch and call different methods, based on the type parameters:

handleApplicationEvent : function handleApplicationEvent(component, event, helper){
 var params = event.getParam("appData");
 if (params && params.type) {
  switch(params.type){
  case 'search':
   helper.search();
   break;
  case 'filter':
   helper.filter();
   break;
  default:
   break; 
  }
 }
}

• To pass parameters from the parent component to the child component, leverage aura:methods, and not events.
• Prefer component events over application events. A component event can be used to pass data from the child component to the parent component.
• Application events should be used only if you have decoupled components. Application events consume more resources, and may degrade the performance of the application. 
• The following diagram shows how you can communicate from the parent to the child, and vice versa, using aura:methods and component events, respectively: