If you want to be at the top of your game as a Salesforce developer, then you will want to become experienced with Lightning components. Building scalable solutions that are both powerful and user friendly has never been easier now that we, as developers, have the Lightning Component framework available to us.
As you may know you can build Lightning components using two programming models: Lightning Web Components, and the older original model, Aura Components. These components are built using custom HTML elements and modern JavaScript. Whether you use Lightning Web Components or Aura Components (or both on the same page) they both appear to end users and admins as Lightning components.
So, what tools are available for developing Lightning components? We are going to unpack 6 helpful tools and resources to help you become more familiar and become a better Lightning component developer.
Lightning Component Library
When you first get started with Lightning components you will want to head over to the Lightning Component Library. This is a great place to find examples of Lightning web components, aura components, documentation and specifications on each of the components available in your Lightning component development.
This reference library shows you how to use the Lightning components and also gives you a preview of the components in action. It’s a very powerful tool for developers to try out these components before ever placing them in your code.
One of the great things about the Lightning component library is that you can view this library through your org’s instance at http://<instance>.Lightning.force.com/docs/component-library. When you view the library through your own instance, you will see only the correct version for your org, and as you create custom Lightning components your own components appear in the library too!
Visual Studio Code
When you get started you will want to set up a code editor. You can use your favorite code editor or use Visual Studio Code. I recommend VS Code because of it’s Salesforce Extension Pack that provides powerful features for working with the Salesforce CLI, the Lightning Component framework, Apex and more.
If you do use VS Code, make sure to install the Salesforce Extension Pack.
Looking for an introduction to VS Code? Check out this guide.
Develop Locally
There is a Local Development Server which is a Salesforce CLI plug-in that you can setup and configure to run, test and preview Lightning Web Components locally on your computer. You can see and develop these components and see live changes without having to publish them to your org. Local development supports Lightning Web Components only and does not support Aura components. At the time of writing this article this is currently a beta feature.
NOTE: You can’t develop Lightning web components in the Salesforce Developer Console
Lightning Debug Mode
Salesforce has made an easier way to develop available with debug JavaScript code in your org by enabling debug mode.
When you enable debug mode, framework JavaScript code isn’t minified (which is the process of removing all unnecessary characters from JavaScript source code in order to reduce file size). This allows you, as the developer, to see more detailed output for JavaScript. Debug mode also allows you to have more detailed warnings and errors that happen in the org.
You will only want to enable debug mode for users who are actively developing or debugging JavaScript since it does make Salesforce slower for the users that have it enabled.
Steps to enable debug mode:
- In Salesforce, from Setup, enter Debug Mode in the Quick Find box, then select Debug Mode.
- In the user list, locate any users that need debug mode enabled. If necessary, use the standard list view controls to filter your org’s users.
- Enable the selection checkbox next to users for whom you want to enable debug mode.
- Click Enable.
Google Chrome Developer Tools
As a Lightning Web Components developer you will quickly find that JavaScript is very powerful and used quite a bit in your development. So, knowing how to program and debug your JavaScript code is a must for any LWC development.
Google Chrome Developer Tools provides a lot of different tools for different tasks, such as changing CSS, profiling page load performance, and monitoring network requests. In order to debug JavaScript, you use the Sources panel.
You can open DevTools in Chrome by pressing Command+Option+I (Mac) or Control+Shift+I (Windows, Linux). This is a shortcut that opens the Console panel.
A common method to debugging JavaScript is to insert a lot of console.log() statements into the code. This helps you inspect values as the script executes. This may help in your debugging, but breakpoints can get it done faster. You can set a breakpoint in your code to let you pause your code in the middle of the execution and then examine the values in real time.
You can then STEP through your code one line at a time and figure out exactly where it’s executing differently than what you expected. You step through your code using the “Step Into Next Function Call” .
There are many, many more powerful debugging tools and features in the Chrome DevTools for debugging JavaScript which ultimately helps you debug your Lightning web components, so you will definitely want to get familiar with them.
Additional Tools and Resources:
You will usually develop your Lightning components to be used in the Lightning App Builder. There are a few steps to take before you can use your custom Lightning web components on a Lightning page in the App Builder.
You will need to deploy My Domain in your org, Define Component Metadata in the Configuration file, and Add an SVG Resources to Your Component Bundle.
What other development tools or resources are you using for Lightning Web Components? Have I missed any that that should be added to this list?