So, now it’s been a while lightning components are here while most of us are still going down the path of VF pages for custom development. I feel that it’s high time that we master ourselves with the art of building Lightning components in the Force.com platform as by now it’s more than obvious that Lightning is the way ahead for Salesforce.

I have been blogging about lightning components for a while now and thought of bringing them all under one umbrella so that one can get an end-to-end idea of building Lightning components and eventually master the art.

A lightning component bundle consists of several attributes. I will try explaining the most important ones among them below

  1. Controller – This is the javascript client side controller of the bundle which will basically control almost everything that the component is supposed to do. Most importantly, if the component needs to call an apex function, then the call is directed through this client side controller.
  2. Helper – This is again another javascript client side controller whose only purpose is to simply accomodate all the re-usable methods in the client side controller, hence aptly named as the “Helper”. The helper methods cannot be directly called from the component. Instead a call to the helper method is directed through the client side controller. Helper should only be used if you have a re-usable method that needs to be called several times in the controller.
  3. Style – The styling for the component can be controlled through this Style.
  4. Renderer – This attribute is only used when you have to change the DOM during the component rendering. The Renderer has several native methods defined within them like “BeforeRender”, “AfterRender”,”ReRender” etc. These methods can be overridden if you want to render something while the component loads.

The below list will give you the basics of everything you need to be aware of while building a lightning component.

Lightning Component Tutorial Part 1 – Build your first Lightning Component

This tutorial should give you an idea about lightning components and will walk you through a hands on example of building your first lightning component.


Lightning Component Tutorial Part 2 – Introduction to Lightning Events

Here I have tried my best to explain about lightning events. This is one of the most powerful tools of the lightning framework that will allow you to build your own custom lightning events and thereby connect all the lightning components in your application with each other. Events are the righteous way for lightning components to talk to each other.


Lightning Component Tutorial Part 3 – Lightning components talk to each other with Events

This post will give you a detailed example on lightning events and will help you understand how to build a custom lightning event that will allow the components to be navigated from one component to another. Though we now have a native lightning event to navigate the components, it’s important to understand this example as it will help you build your fundamentals in lightning events.

Lightning Component Tutorial Part 4 – Lightning component navigation redefined

In the Winter’17 release, Salesforce came up with a big surprise to all the lightning developers with an inbuilt event to navigate between components which made the life of Lightning developers a lot more easier. I have tried to explain how to use this event and how different it is from using a custom lightning event.

Lightning Component Tutorial Part 5 – Call the Apex server side action with Lightning Component

Apex classes has been the backbone of all applications  in Salesforce. Hence it becomes crucial to understand how a Lightning component will interact with Apex classes in Salesforce. I have tried to keep this example simple by eliminating all the styling from the component and by concentrating more on the flow of the control when an Apex class method is called from a Lightning component.

Lightning Component Tutorial Part 6 – Incorporate the Lightning Design System into your Lightning Component

Lightning components are never complete without incorporating the Lighting Design System into your Lightning component. They are native style sheets build within the component and you just have to use the right tags and style classes in your component so that the look and feel of your component matches with that of the Standard Salesforce Lightning Experience.