How do Lightning Components Communicate?

I don't know about you but learning about the Lightning Component Framework, Salesforce's new UI framework, is a long and steep learning curve for me. There is a lot of excellent material such as the Trailhead modules and the Developer's Guide, but I often find this kind of material lacks simple explanations of the basic concepts (simple enough for a bloke like me anyway), and often jumps into code before I have constructed a mental model to refer to.  To help me learn I often draw diagrams and infographics to summarise the concepts and act as a reference I can return to.  There is example here where I did an overview of the Lightning Component framework.

This week I was looking at how components communicate with each other in the framework, using events.  For example, how does one component update another?  

An Example

Let's look a really simple example that doesn’t require too much knowledge of other Lightning Components concepts.  I'm assuming the reader understands some basic concepts such as what components are and what resources are found within a component such as the markup and controller.  (Let me know if a post explaining these concepts would also be useful).

So, let’s see how clicking a button on one component updates some text on another with some important text such as an alert.

For this scenario there are 3 Lightning objects involved:

AlertGenerator Component

A Lightning component that consists of nothing more than a button that says ‘Generate Alert!’  Clicking the button causes the text on the second component to be updated.

AlertDisplayer Component

In response to the AlertGenerator component’s button being clicked, the text on this Lightning component is updated.

AlertMessage Event

For this scenario to work we need an event type, to define the message that is sent between the components.  An instance of the event is fired by the AlertGenerator, and received by the AlertDisplayer.  It contains an 'AlertText' attribute to contain the text sent

The Sequence of Events

So, how are these three objects arranged and orchestrated so that one communicates with the other?  It turns out there are a few moving parts so here is a diagram that shows the sequence of events: 

1. When the button is clicked, the controller action function that it’s wired to is invoked

2. The action function instantiates an AlertMessage event, sets the value of the AlertText, and fires the event

3. A handler tag on the AlertDisplayer component's markup receives the event

4. The handler invokes the controller action function that it’s wired to, passing the event

5. The controller updates the text on the component with the alert text, by setting the value of an attribute of the component and using the databinding mechanism provided by the framework

The Nitty Gritty

What does the code look like?  Well, that's the beyond the scope of this article where I hoped to explain the concepts only.  The code itself is not so complex once you understand the flow and the patterns.  There are some really good code examples in the Trailhead modules and some other people have done some other great posts, including Jeff Douglas here and here, Christophe Coenraets and Reid Carlberg's comprehensive Newbie Notes.

I hope that this has given you at least a high level understanding of the way that Lightning components communicate.  And please let me know if there are any other topics that you would like to see covered in this way.