Now the question comes is how we can leverage its advantages and what are the things we must consider to move the implementation to Lightning frameworks. One of the major problem while moving to Lightning is we have already functional Visualforce pages and those are completely different in architecture than Lighting framework. So lets find out some important things we should consider when taking decision of moving to Lightning framework or developing a new Lightning component.
How to begin
The very obvious answer is Salesforce Trailhead. To start, the recommended Trailhead module is “Lightning Components Basics“. This will provide basic idea of developing application using Aura Lightning framework, its structure and essential code syntaxes.
In Lightning component_name.js file is client-side and Apex controller is our Server.
Note: Each call to apex class though component is Asynchronous. In other words, it follows callback mechanism.
It is Case-Sensitive
Apex is case-insensitive which gives us freedom to write code without taking care of alphabet case. Lighting controller have just opposite to it. It is case-sensitive. A variable defined with name “motorVehicle” is different from “MotorVehicle”. So, care should be taken while writing Lighting controller code.
Make sure we code considering The Locker Service
This is recently introduced security layer to prevent un-authenticated changes to Lightning component. Because Lightning design is component based and there can be multiple components from different vendors so, a security layer must be available so, components don’t hack into other components and inject code.
To prevent un-authenticated code injection, locker-service is introduced. It forces the Lightning component to work in its scope. Attempt to modify any element outside of component boundary will result into “Access Denied” exception.
Lightning application are set of multiple components and those components can interact with registered events and their handlers. Set of components create a Lightning application. We can say it like a Visualforce page created from several Visualforce components. But Lightning is client side where Visualforce is server side.
Understand the SLDS (Salesforce Lightning Design System) CSS
SLDS is a CSS library to help us getting consistent user interface same as Salesforce Lightning view. This recommended CSS to use when we are developing code in Salesforce even in case of Visualforce. It can be downloaded from SLDS website.
Note that Lightning components don’t need to import this CSS. It is available by default. Here is Trailhead module named “Lighting Design System” to understand of SLDS system.
SLDS is one of the way to convert the Visualforce page in SLDS look alike. Instead of inventing own CSS, use SLDS css. However, it is a huge challenge in converting Visualforce tags into SLDS compatible HTML elements specially, <apex:pageblock/> and <apex:PageBlockTable/>.
Right now Salesforce has not given any standard tool to perform unit testing on client-side controllers. However, there is a built-in unit testing framework for Aura, the technology on which Lightning components are based but not exposed yet. So, we have to make sure that:-
Variables and methods are used is in same case as it was declared.
If there is unexpected condition don’t hesitate to throw errors using
throw Error(' Message');
Block of code to try
Block of code to handle errors
It is asynchronous so make sure declared variables don’t go out of scope in code and result in undefined errors which are hard to debug.
“aura” folder contains all components which further sub-divided based on component name.
Resource for the new Lightning experience
1. Get started with: https://www.linkedin.com/pulse/lightning-experience-create-pixel-perfect-visualforce-ashwani-soni?trk=mp-reader-card
2. Design Guide: http://www.lightningdesignsystem.com
3. Lightning Experience FAQs: https://developer.salesforce.com/page/Lightning_Experience_FAQ
4. Twitter: @SalesforceUX Stay tuned!