Trailhead is one of my favourite approach to learn new stuffs from Salesforce in an interactive way. I highly recommend employers to encourage all it’s developers and administrators to check trailhead and learn new stuffs.

Trailhead brings a new module “Lightning Components” which will help developers to understand lightning concepts. In today’s post, I will review this new module “Lightning Components”.

This module comes with 9 different sub modules. All the sub modules are organised so well that at the end of 9th sub module, you will feel really comfortable and at the same time feel the power of lightning which will definitely inspire you to explore the unexplored world.

Let’s start discussing each sub module.

Sub Module 1: Getting Started with Lightning Components –
This is the first sub module which will give you an overview of Lightning Components. By the end of this module you will understand below important concepts –

  • What is all about Lightning Component Framework?
  • Difference between Lightning and Visualforce
  • What are the different places where you can use the Lightning Component framework?
This sub module mainly tells you how you can go for component based development. Google is having Polymer, Facebook is having React and now Salesforce is also having Lightning Framework – Component based development.
After completing the challenge, you can earn 100 points.
Sub Module 2: Creating Components –
This is the module where you will get familiar with creating lightning components, adding style to that and finally making the lightning component available in Salesforce1. Another important thing you will get to know the list of resources in a component bundle.

This module documented the concept of component bundle by the the following table –

In this module, you will also get to know how to refer elements in CSS to add styles. I have prepared the below document for my reference which I am sharing here –

Below is the CSS to add styles –

Now here is the resulting page –

After completing the challenge, you can earn 500 points.
Sub Module 3: Defining Component Attributes –
This is the module where you can make yourself familiar with passing attributes to components, creating multiple instances of the same component and setting attribute values on a component reference. I really enjoyed going through this module and after completing this module, I have prepared a small demo –
StudentComponent.cmp

<aura:component >
<aura:attribute name="studentName" type="String"/>
<aura:attribute name="score" type="Integer" />
<aura:attribute name="passedOrNot" type="String"/>

<div class="studentDetails">
<div class="name">Student Name: {!v.studentName}</div>
<div class="score">Student Score: {!v.score}</div>
<div class="passed">Passed: {!v.passedOrNot}</div>
</div>
<div>
<ui:button label="Check whether passed or not" press="{!c.check}"/>
</div>
</aura:component>

StudentComponent.css

.THIS {
}
.THIS.studentDetails{
background-color: yellow;
padding: 30px;
}
.THIS .name{
color: red;
}
.THIS .score{
color: green;
}
.THIS .passed{
color: black;
}

StudentComponentController.js

({
check : function(component) {
if(component.get("v.score")>80){
component.set("v.passedOrNot","YES");
}else{
component.set("v.passedOrNot","NO");
}
}
})

Now it’s time for StudentApp.app

<aura:application >
<h1>STUDENT 1</h1>
<c:StudentComponent studentName="Peter" score="98"/>
<h1>STUDENT 2</h1>
<c:StudentComponent studentName="John" score="75"/>
</aura:application>


Below is the screenshot –

After completing the challenge, you can earn 500 points.

Sub Module 4: Using Expressions –
This is the section where you can understand how to use expressions to make your components dynamic, how to pass conditional expressions. If you are comfortable with VisualForce, then for your this sub module will be very easy. But the important section of this sub module comes where you can learn how to refer/get browser and locale information both from component and controller.

After completing the challenge, you can earn 500 points.
Sub Module 5: Using Standard and Force.com components –
In this section, you will get to understand how you can make your GUI more attractive by using Standard and Force.com components. You will get to know all the events available to that particular components. At the end of the section, you will get an exercise which is really good for you to check your understanding.

For all available component attributes and events, see the component reference @ https://<mySalesforceInstance>.lightning.force.com/auradocs/reference.app, where<mySalesforceInstance> is the name of the instance hosting your org; for example, na1 .

After completing the challenge, you can earn 500 points.
Sub Module 6: Handling Events with Client-Side Controllers –
This is the section where you can understand how to write client side controller to handle events, create events to communicate between different components. In this module you will know the differences between application event and component event and different types of Salesforce1 events also.

After going through this module, I have developed a small application to make myself comfortable with inter component communication.
SendName event

<!-- SendName event -->
<aura:event type="APPLICATION" description="Send Name Event" >
<aura:attribute name="firstName" type="String" />
<aura:attribute name="lastName" type="String" />
</aura:event>

SendNameSender component

<!-- SendNameSender component -->
<aura:component >
<aura:registerEvent name="SendNameEvent" type="c:SendName"/>
<ui:button label="First Student" press="{!c.send}"/>
<ui:button label="Second Student" press="{!c.send}"/>
</aura:component>

SendNameSender controller

({
send : function(component, event, helper) {
var whichButtonClicked = event.source.get("v.label");
if(whichButtonClicked=="First Student"){
firstName = "Peter";
lastName = "Sasse";
}else{
firstName = "James";
lastName = "Hau";
}
$A.get("e.c:SendName").setParams({
firstName: firstName,
lastName: lastName
}).fire();
}
})

SendNameReceiver component

<aura:component >
<aura:attribute name="fullName" type="String" default="none" />
<aura:handler event="c:SendName" action="{!c.prepareFullName}" />
Full Name: {!v.fullName}
</aura:component>

SendNameReceiver controller

({
prepareFullName : function(component, event, helper) {
var firstName = event.getParam("firstName");
var lastName = event.getParam("lastName");
component.set("v.fullName", firstName + " " + lastName);
//component.set("v.fullName", firstName );
}
})

Finally the application

<aura:application >
<c:SendNameSender />
<br />
<c:SendNameReceiver />
</aura:application>

Below is what you will receive –
    & 
After completing the challenge, you can earn 500 points.
Sub Module 7: Using Javascript Controllers with Components –
In this section, you will get to understand how to use JavaScript API to work with components, get user input and validate that in client side, how to create components dynamically, how to show error messages by creating dynamic error message window. In this section, you will know how to handle exceptions.

After completing the challenge, you can earn 500 points.
Sub Module 8: Using Apex in Components –
This is the section where you can understand how to load record data and display it in a component. This module will teach you how to call an Apex controller to fetch/edit/save the data.

After completing the challenge, you can earn 500 points.
Sub Module 9: Debugging your Components –
In this section, you will get to understand how to debug your lightning code using $A.log and $A.warning.You will also get to know how to use Debugger statement to examine the code execution in the browser.

After completing the challenge, you can earn 50 points.

I really enjoyed going through each sub module and now I am feeling inspired to explore more Lightning.
I am feeling good that I am having 6 Trailhead badges now.