Salesforce Lightning Tutorials with Sample Code

Salesforce Lightning Framework is the Customer-focused UI designed to build powerful dynamic apps for mobile, web, and desktop devices. The task of a Salesforce developer is building Lightning components and administrator assembles those pages to create a lightning page. Before we dive deep into the Salesforce Lightning Component framework with sample code, let us first discuss why we need the Salesforce Lightning components and what are the benefits?

Lightning Components are named as out-of-the-box components helps to improve app building experiences and they don’t need any optimization as taken care of themselves only.
They are responsible for enhanced performance because we are using stateless server and depends on JavaScript to deal with UI components, metadata, and the application data. In this case, the total number of server calls are reduced and they are made whenever necessary.
It is based on the event-driven architecture that promotes development work, compatibility across browsers, and this is a component rich ecosystem.

Let us discuss the Lightning component framework in detail below.

What is the Lightning Components Framework?

This is a UI framework designed to develop dynamic apps for both mobile and desktop devices. The framework utilizing JavaScript language at the client-side and the APEX language on the server-side as shown below in the diagram.

With the help of this Framework, developers can design more powerful and unique apps. This framework was initially launched for mobile devices but later modified for desktop devices too. The main objective of this framework is to develop a single page application. Here are some of the popular reasons why you need Lightning components.

Lightning components can be used in multiple ways like org customization, building standalone apps, event apps, etc. With the help of Lightning out, these apps can be quickly hosted to other platforms too.
With the help of a community builder or Lightning app builder, components are easy to design with drag and drop operations only.
This is easy to add components in a lightning page, standalone apps or event apps as a quick action.
The components allow app-building faster and there is no need for starting development work from scratch.
The browser events are easy to capture when you add components within a Lightning page.
The components are easy to share with other Lightning users.
With the help of JSON, data can be exchanged between the client and server quickly.
This UI framework supports the latest browser technologies like CSS, HTML, or touch events etc.

What is Aura open-source Framework?

The UI Lightning framework is based on Aura opensource framework. This is an opensource framework where something is available for free and it can be further customized quickly based on org needs. When building Lightning apps, the use of aura keyword is common everywhere and it is easily available online to download for free.

The sample code is given below using aura keyword:

We have used the word Lightning component a couple of time till now. So, you must be wondering what is a Lightning component actually? Further, we will discuss the components in details and how to create a Lightning Component in Salesforce.

What is Salesforce Lightning Component?

A component is a set of files written so nicely that they have the capability to accomplish a specific business goal. They are loosely coupled set of codes and taken as the building blocks for the Lightning Framework. Encapsulating a reusable and modular piece of UI, it may range from a single line to the complete application.

Components are saved with the suffix .cmp and it should start with an alphabet containing alphanumeric and one underscore character. This is generally unique in the namespace. Whitespaces are not allowed when naming components and it ends with one or two consecutive underscores. A component is a set of resources or files as discussed earlier. So, what are the other resources? Let us discuss in detail below –

Resource	Resource Name	Usage
Component or App	sample.cmp or sample.app	It contains all markup components and each bundle has only one component.
CSS Styles	Sample.css	It contains all components styles.
Design	Sample.design	It is needed by the component to be used with app builder or community builder.
Controller	Samplecontroller.js	It contains client-side controller methods to handle events.
Documentation	Sample.auradoc	It contains the component description, sample code, and other component references too.
Helper	amplehelper.js	It contains JS functions that can be called later during coding.
SVG	Sample.svg	This is a custom icon resource for components to be used with app builder or community builder.
Renderer	Samplerendered.js	This is required to override default rendering for a component.

How to create a Lightning Component?

To create a Lightning Component, you need to click on the Developer console tab then click the ‘Create Component’ tab. It will open a dialog box where you have to give the name of components as per the naming rules suggested earlier. For example, if the name of the component is HelloGlobe then it will be saved automatically with the name HelloGlobe.cmp and the basic sample code for this component can be written as –

The output of this component would be Hello Lightning! as written between markup tags.

Final Words:

With this tutorial guide, we have a clear idea of the framework, components, and its related resources, how to create a new Lightning Component in Salesforce. To know more about Salesforce Lightning framework and how to create complex components, you should join Salesforce certification program at JanBask Training for a depth understanding of the concept.