After officially starting my first “work” Lightning component, here are some tips learned so far when developing a lightning component.
Disable Browser Caching In Dev Sandboxes
One thing I noticed immediately was that after saving changes to a component, you have to refresh the page at least twice for the latest changes to be seen. Given that Lightning takes, at least, 2-3 seconds per page load, this really slows down development time.
The answer is to disable the “enable secure and persistent browser caching to improve performance” Session Setting.
Classic Steps
- Open Setup in Salesforce Classic. I haven’t found this setting in Lightning Setup yet.
- Under Administer, Security Controls –> Session Settings.
- Uncheck “enable secure and persistent browser caching to improve performance” under caching.
- Save at the bottom of the page.
Lightning Steps
- Click the gear at the top right and click Setup.
- In the left nav, expand Security and click Session Settings.
- Uncheck “enable secure and persistent browser caching to improve performance” under caching.
- Save at the bottom of the page.
Many thanks to the Slackforce community, especially Matt Simonis and Craig Ceremuga, for sharing this information.
Debugger; & Breakpoints Are Your Friend
With much of the Lightning framework handled on the client side in the browser, one can leverage the browser’s debugging tools to troubleshoot and step through Javascript as needed.
I’ve returned to an old friend, the “debugger;” statement, to put in temporary programmatic breakpoints in my Javascript code so I can inspect the code as it runs. This has been especially helpful troubleshooting AJAX calls from the component controller and troubleshooting events.
Attach Browser Events To Container Elements
One problem I’ve ran into is that sometimes a Lightning base component, such as a lightning:card, doesn’t have an event handler that I need such as “onclick”. Also, the framework disallows adding custom event handler attributes to Lightning base components that don’t support them and you’ll get a compiler error if you try.
My solution is to wrap the Lightning base component in another HTML element, such as a div, and attach the desired event to it.
I’m not a big fan of this workaround but it’s easier than using one of the “aura” components and then styling it for Lightning. If you have a better way to do this, please share in the comments below.
Attach Data To Element Data Attributes For Later Use
To the best of my knowledge, you can’t pass parameters directly into a browser event method handler when it happens. For example, you can’t do this:
In order to access some contextual data in the event handler, I’ve resorted to adding “data-” custom attributes to HTML elements that can then be accessed by event handlers in the component’s controller. This has been particularly helpful for elements that are rendered from within an aura:iteration, usually when iterating over records. Here’s an example of this approach:
Markup
Component Controller
Leverage the Lightning Design System Styling
Use the Salesforce Lightning Design System (SLDS) to ensure your components will look like Lightning. Don’t forget you can add slds- classes to your elements to easily stylize them!
Leverage the Lightning Component Developer Guide
The Lightning Component Developer Guide provides an in-depth resource at developing Lightning components. It also acts as a good reference for the aura and Lightning base components.
What tips do you have for developing Lightning components?