In this post, we’ll delve into the fundamentals of Lightning components and explore how Lightning applications, components, controllers, helpers, and Apex controllers are interconnected. The Lightning components framework is a user interface framework used for creating web applications for both mobile and desktop devices. It’s a modern framework that enables the development of single-page applications with dynamic, responsive user interfaces for Lightning Platform apps. This framework leverages JavaScript on the client side and Apex on the server side.
In the image below, I’ll illustrate the connectivity between Lightning applications, components, controllers, helpers, and Apex controllers.
Lightning App
A Lightning application is an independent page that includes multiple other Lightning components. Its markup resembles HTML, as depicted in the image above.
A Lightning component
It can include “HTML + Aura components” that are compatible with Salesforce.
As depicted in the image above, a Lightning component comprises Controller (JS), Helper (JS), Style (CSS), Documentation, Rerenderer, design, and SVG. For this post, we’ll focus solely on the Controller and Helper.
JavaScript Controller
You can click on the “Controller” link located on the right side of the component (as shown in the image above). This link provides access to client-side controller methods that manage events within the component.
JavaScript Helper
Clicking on the “Helper” link found on the right side of the component (as seen in the image above) will generate a new JavaScript file that the component will utilize. This file primarily interacts with Apex methods defined in the @AuraEnabled static public method.