Learning Lightning Component – Trailhead way

In Previous article, I have introduced what is Trailhead and why employer should start using it to train Salesforce developers and Admins. At the time of writing this article, there are already 16 modules to be learned from it.

Recently Salesforce has added some more awesome tutorial and  In this article, I will walk-through “Lightning Component” module of Trailhead.

1. Getting started with Lightning Component (+100 points)

In this module, you will learn that what exactly is lightning component, Aura Framework and how it is different than visualforce?

This is UI framework to develope dynamic web pages for mobile and desktop devices in Salesforce. Its used mostly for SPA (Single Page Applications). It focuses on component based developement and reusing it. You can compare Lihtning component (by Salesforce) with React (by Facebook) and Polymer (by Google).

2. Creating Lightning Component (+500 points)

This module emphasizes on how to create Lightning Component using Developer console and styling it.

Lightning component can be created either by Developer console or sublime extension by Dave Carroll.

Component bundle contains following item types :

Resource	Resource Name	Usage
Component or Application	sample.cmp or sample.app	The only required resource in a bundle. Contains markup for the component or app. Each bundle contains only one component or app resource.
CSS Styles	sample.css	Styles for the component.
Controller	sampleController.js	Client-side controller methods to handle events in the component.
Design	sample.design	Required for components used in the Lightning App Builder or Lightning Pages.
Helper	sampleHelper.js	JavaScript functions that can be called from any JavaScript code in a component’s bundle.
Documentation	sample.auradoc	A description, sample code, and one or multiple references to example components.
Renderer	sampleRenderer.js	Client-side renderer to override default rendering for a component.
SVG	sample.svg	Custom icon resource for components used in the Lightning App Builder.

How to use External Stylesheet in Lightning Component :

To reference an external CSS resource that you’ve uploaded as a static resource, use a <ltng:require> tag in your .cmp or .app markup.
Here’s an example of using <ltng:require>:

<ltng:require styles="/resource/resourceName">

resourceName is the Name of the static resource. Note that the framework doesn’t currently support the $Resource global variable available in Visualforce.

3. Defining attributes on lightning components (+500 points)

This is very important and basic module of lightning. Here you will learn what are attributes, their different types and how to pass it in between different lightning components.

Attributes can be used for components, applications, events and interfaces. attributes are accessed using syntax {!v.attributeName}.

Attributes can be defined using <aura:attribute> tag.

Example :

<aura:component>
    <aura:attribute name="num1" type="Integer" default="1"/>
    <aura:attribute name="num2" type="Integer" default="2"/>
    <aura:attribute name="sum" type="Integer"/>
    {!v.num1} + {!v.num2} = {!v.sum}

    <!--Press button to add numbers and display sum-->
    <ui:button label="Add Numbers" press="{!c.add}"/>
</aura:component>

Attribute in client side can be accessed using : component.get(“v.num1”);

({
    /** Called when button is pressed to add numbers **/
    add : function(component) {
        var sum = component.get("v.num1")
                + component.get("v.num2");
        component.set("v.sum", sum);
    }
})

Component Body :

You can access component body using notation {! v.body } and in javascript same can be achieved using component.get(“v.body”).

 4. How to use expressions in Lightning Component (+500 points)

How to use expressions to dynamically render values and making decisions and global value provider $browser, $Locale.

Anything inside the {! } delimiters is evaluated and dynamically replaced when the component is rendered or when the value is used by the component. Whitespace is ignored.

The resulting value can be a primitive, such as an integer, string, or boolean. It can also be a JavaScript object, a component or collection, a controller method such as an action method, and other useful results.

If you want to escape {! , use this syntax:

<aura:text value="{!"/>

This renders {! in plain text because the aura:text component never interprets {! as the start of an expression.

$Browser
The $Browser global value provider provides information about the hardware and operating system of the browser accessing the application.

$Locale
The $Locale global value provider gives you information about the browser’s locale.

 5. How to use standard and force.com components (+500 points)

This module highlights some standard out of box Lightning components provided by Salesforce and their usage like Button, check-box, Message, Spinner etc.

Use Standard existing salesforce components to speedup developement of lightning application.

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

6. How to handle events in Lightning Components (+500 points)

You will learn here how to create client side events, difference between application event and component events. Communicate between different components using events, example, Best practices and some standard and system Salesforce1 Events.

7. Using JavaScript controller in Lightning components – Client Side Controller(+500 points)

It teaches, How we can create components dynamically, using JavaScript API to work with components, handling field validation errors and system errors.

8. Using Apex with Lightning Component – Server side Controller (+500 points)

How Apex methods can be called through JavaScript Controller and Queueing of server-side actions with examples.

9. Debugging Lightning components (+100 points)

When I was presenting Lightning week in Boston and Hartford, this was the interesting question asked and most of developers are facing issue on how to debug lightning components, and this part is good news for them, it unveils all the secret of Lightning component debugging.