The demand for Lightning Component development has continued to grow and will eventually overtake the demand for new Visualforce development. Development being done in new orgs, orgs that have made the switch to or that want a path to switch to the Lightning Experience will most likely be making use of Lightning Components. I have spent years developing Visualforce pages and the past couple of years experimenting with the newest Lightning Component features as they come out. This post contains some tips for Visualforce developers who want to become proficient Lightning Component developers.
Tip #1: Know the documentation
Good programmers can learn any programming language and pick up on new programming paradigms. Concepts like Don’t repeat yourself, You aren’t gonna need it, modularization, and other best practices are universal. It’s getting to know the API and how to compose the different features for the desired functionality that is the main learning curve. Knowing how to use the documentation is helpful for that.
- Lightning Component Trailhead modules are a good place to start learning, but also a good place to find quick information about a topic or subtopic.
- The Lightning Component Developer’s Guide is a great resource.
- The aura docs in an org are also a good place: http//yourinstance.lightning.force.com/auradocs. They also contains documentation on any non-standard components in the org as well.
Tip #2: Understand JavaScript
In standard-looking Visualforce pages, JavaScript was mainly used as glue to fill in small gaps in Visualforce pages. The actual JavaScript was abstracted behind standard components such as actionFunction. In Lightning Component development JavaScript is at the core of custom development. The good news is that there are tons of tutorials for coming up to speed on JavaScript and many developers already have JavaScript experience from non-Salesforce development work. Additionally, because JavaScript is so widely used, assistance and common errors that occur are easily found on the internet.
#3: Make use of Salesforce tools
Salesforce has provided custom tools for developers to aide in Lightning development.
- Salesforce Lightning CLI – This can be used to run a custom JSLint implementation that will find errors in component JavaScript.
- Use the Force.com IDE – The latest Force.com IDE supports the development of Lightning Components. While the Salesforce Developer Console is not bad, for larger projects a proper IDE is a must and now the Force.com IDE has support for Lightning Components.
- Salesforce Lightning Inspector – This is a comprehensive Chrome extension that gives developers an insight into how the Lightning Components on the page are structured and working. It gives information about the generated component tree, performance, local storage, and more tools for monitoring and interacting with the server.
#4: Know your browser tools
Browsers have their own built in developer tools. Chrome DevTools has support for emulating different devices and screen resolutions. Most notably, there is a built in interactive debugger. The debugger is very useful for development as breakpoints can be set, debugger statements can be added to code, and the code can be stepped through.
#5: Use the Base Lightning Components
Base Lightning Components were added with the Winter ’17 release. They provide functionality and encapsulate the underlying markup and styling needed to support the component. They are much like the Visualforce standard components (i.e., “apex: tags”) and can be used similarly.
Bonus Tip
Use the community. The Salesforce Stack Exchange and Developer Forums are a great place to ask questions about Lightning Components. We’re here to help.
This post was originally created by Peter Knolle.