Lightning Component Bundle

All these components together make up the lightning component bundle. Now , these components are wired up with each other so you don’t have to worry about referencing one of them in the other. So lets discuss each of them in brief.

Component (.cmp file)– This is where your markup resides. you can think of it as the component which makes up the design or basic structure of the component. If you are coming from .Net then think of this as the .aspx  or .cshtml file where you put all your markup information.

Controller (.js file)– This is a javascript file which acts as a controller and can be referenced from the markup. This file is usually used to store the functions that you would call from the markup.

Helper (.js file) – This again is a javascript file which ‘helps’ the controller. You can think of it as a utility file which stores helper functions those are referenced from the controller. The functions here can’t be called directly from the markup but have to be called via the controller.

These 3 are the main components which you are gonna use most of the times. now the remaining ones.

Style (.css file) – This is where you write down all your css for the component bundle. By default you don’t need to worry too much about UI or look and feel of the component because SLDS (Salesforce Lightning Design System) does most of the heavy lifting for you. I am gonna talk about it later.

Documentation – This is pretty self-explanatory. Any documentation you wanna write for your component can be written here.

Renderer(.js file) – This is again a javascript file and is mostly used to control and customise the rendering of the component. If you want to change how your component or its sub-components are rendered on the browser, then this  is where you write your code.

Design – This is similar to an XML file where you can expose some of the attributes of the component so that an admin can supply values while dragging this component on a lightning page. Think of this as a way to give an admin some customisable options for the component. Like he/she can set a predefined value while including that component on the page.

SVG – This is where you keep your static image resources. You wanna use some static image you can store it here and reference in your markup. We will see how we can do that in later posts.

So I hope now you have a pretty decent idea of the basic structure of a lightning component bundle.

Next, I am gonna talk about the Apex Controller.