Code By Code – Lightning Framework – Chapter 1 – Basic of Lightning Framework & Component Bundle

Code By Code – Lightning Framework – Chapter 1 – Basic of Lightning Framework & Component Bundle

Welcome to Code By Code guides of SFDCFacts. These guides will be focusing on explaining the topics in detail with an example and project implementation. What makes these guides unique is that there will be code involved in each and every step with a proper explanation along with video tutorials and quizes.

Chapter 1

In this chapter, we will start with the basics of Lightning Framework. First, we will see the meaning of all 8 files within in a Component bundle and in the end, we will develop our first ever Aura Component.

Lightning Framework

Lightning Framework is written on top of open-source Aura Framework which is a component based framework like Angular or React. With Visualforce, to create applications, you had to create multiple pages and the user was being redirected to all those different pages while interacting with the application, but with Lightning Framework, you can create single-page applications and create a better user experience.

You can create components which can be used within other components to increase code reusability. These components can fire events which can be handled by other components on the same page. It support responsive design which means your desktop, mobile and tablet will use the same codebase but will display the components based on screen size.

Where can you use your components?

You can run or deploy your Aura Components at multiple places within the Salesforce ecosystem or outside of it.

Component Bundle

Every Aura/Lightning Component that you will develop, will create a component bundle. A component bundle is a folder or set of different files which are being used by the component. These files can be markup file, javascript files, stylesheets or SVG files. There can be 8 files in an Aura Component Bundle which are:

1. Markup File – This is an XML based file with .cmp extension which contains the markup or visual of your component. This is the only required resource in the component bundle.

2. Controller File – This is the client-side controller file based on javascript. The main purpose of this file is to handle events raised by component markup. Functions defined within the controller file cannot be invoked by other functions of controller or helper files.

3. Helper File – This is another Javascript based file. Mainly being used code reusability. Functions defined within a helper file can be invoked by other functions from the helper, renderer or controller files.

4. Stylesheet File – This file is being used to write custom CSS styles for the component.

5. Document File – Contains description, sample code or reference to your component.

6. Renderer File – Another JavaScript based file to develop client-side rendering to override the default component rendering behavior or handle rendering events.

7. Design File – XML based file which enables you to design a form that enables business user to set value attributes in your component using Lightning App Builder. 

8. SVG File – Custom icon resource file.

Create Hello World Aura Component

To create a new lightning component, you can either use a Salesforce IDE like eclipse, VS Code or you can directly create it from Developer Console by selecting File -> New -> Lightning Component.  Give your component a name like “HelloWorld” and optionally you can select any component configuration(interfaces), we will discuss these in detail later on.

Write this code in component:

<aura:component>
        <div>Hello World</div>
</aura:component>

To see the output, you can create a standalone Lightning Application which will invoke this component. In developer console, click File -> New -> Lightning Application. Give your application a name and write below code:

<aura:application extends=”force:slds”>
        <c:HelloWorld />
</aura:application>

**In this guide, we will be developing Lightning Components from Developer Console.

Lightning Component Development Day1 - Basic of Lightning Framework, Component Bundle, App Builder

Test Your Knowledge

Lightning Framework Basics and Component Bundle

Next In This Guide

Manish Choudhari

I am a certified Salesforce Application & System Architect and Developer working on Salesforce Technology since 2014. Currently, I have 14 Salesforce certifications along with OCPJP (Oracle Certified Profession JavaSE6 Programmer) working in Salesforce.com Hyderabad as a Technical Engineer. Writing technical blogs, learning new technologies and frameworks and sharing knowledge is my hobby.

Leave a Reply

Close Menu