Lightning Component Best Practices

Hi All,

In this article, I will tell you the best practices for Lightning Components, Lightning component bundle and Events.

Lightning Component

Lightning is all about components. You can build applications by assembling components created by you and other developers. A component can contain other components, as well as HTML, CSS, JavaScript, or any other Web-enabled code. This enables you to build apps with sophisticated UIs. We should always keep in mind Lightning Component’s modular approach while creating a Lightning App. It is always a best practice to use component based developement approach. Following are the benifits of component based approach.

1. Increases
   a. Developer Productivity
   b. Feature availablity
   c. Application Scaliblity
2. Decreases
   a. Application Complexity
   b. Time to Delivery
   c. Overall Cost

Lightning Component Bundle

Each Lightning Component is made up of a markup, JavaScript controller, a Helper, a Renderer and more(Component Bundle).

Controller

1. Use Controllers to listen to user events and other events like Component Event, Appliction Event.
2. Delegate your business logic to helper methods.
3. Do not trigger DML operation on component initializaton. If you are doing DML in init(), you are creating a CSRF(Cross-Site Request Forgery).
4. Do not modify DOM in Controller. If you modify DOM in Controller it will call renderer method which will end in no result.

Helper

Always write your business logic in helper functions because

1. Helper functions may be called from any other javascript in the component bundle.
2. Whenever a component runs Lightning Framework creates an instance of the Controller, an instance of the Renderer for each component but creates only one copy of the Helper and passes the reference of the Helper into every Controller instance and every Renderer instance. Below picture will make you understand this well.

Since Helper is shared across everything, it allows us to share and keep logic across of Controllers and Renderers in one place. It also helps us keep logic within Controllers and Renderers lean. Anytime you need to call one controller function from another controller function, move that logic to Helper.

Renderer

1. Use Renderer whenever you want to customize default rendering, rerendering, afterrendering and unrendering behaviour for a component.
2. Do not fire an event in renderer, firing an event in a renderer can cause an infinite rendering loop.
3. If you need to directly manipulate DOM elements in your component, you should do it in the component’s renderer.

Events

1. Always use events to implement communication between components.
2. Always try to use a component event instead of an application event, if possible. Component events can only be handled by components above them in the containment hierarchy so their usage is more localized to the components that need to know about them. Below picture will make you understand better about component event.
3. Application events are best used for something that should be handled at the application level, such as          navigating to a specific record.
4. It’s a good practice to handle low-level events, such as a click, in your event handler and refire them as higher-level events, such as an approvalChange event or whatever is appropriate for your business logic.
5. If you have a large number of handler component instances listening for an event, it may be better to identify a dispatcher component to listen for the event. The dispatcher component can perform some logic to decide which component instances should receive further information and fire another component or application event targeted at those component instances.
6. Do not use onclick and ontouchend events in a component. The framework translates touch-tap events into clicks and activates any onclick handlers that are present.

That’s it for now I will come with more details in upcoming posts. 🙂