Visualforce? You’ve got that down. Now it’s time to take on Lightning. The aim of this blog post is to give you some tips that will help you to become a fearless Lightning Developer.
1. Learn Javascript
The biggest change moving from Visualforce to the Lightning Component Framework is you need to have an understanding of the Javascript and its principles.The best way to start is by reading books to get familiar with concepts before getting hands-on.The key thing to remember is you are moving from a strongly typed language to a functional language. Some of my favorite resource books are below.
In a nutshell, follow these best practices for your Javascript file:
1. Using a variable, without declaring it, is not allowed.
2. Using an object, without declaring it, is not allowed.
3. Deleting a variable (or object) is not allowed. The below is not allowed.
"use strict"; var x = 5; delete x;
4. Deleting a function (or object) is not allowed.
"use strict";
function x(p1, p2) {};
delete x;
5. Duplicating a parameter name is not allowed.
"use strict";
function x(p1, p1) {};
6. Writing to a read-only property is not allowed.
"use strict";
var obj = {};
Object.defineProperty(obj, "x", {value:0, writable:false});
obj.x = 3;
7. Writing to a get-only property is not allowed.
"use strict";
var obj = {get x() {return 0} };
obj.x = 3;
8. Writing to a get-only property is not allowed.
"use strict";
var obj = {get x() {return 0} };
obj.x = 3;
9. Future reserved keywords are not allowed in strict mode. These are:
- implements
- interface
- let
- package
- private
- protected
- public
- static
- Yield
10. Avoid Eval.
11. Become familiar with Locker Services and avoid third party libraries.
12. If a third party library is adopted, regression test it. Some of the libraries like D3, HighCharts, and Lodash are working.
Check for the supported attributes and functions under Locker Services here.
13. Install the Lightning Chrome extension to debug the component tree and performance.
14. Do not name the Helper method and Apex methods with same name. This creates a recursion in the browser.
2. Understand the Concepts Of Web Components
With a Web Component, you can do almost anything that can be done with HTML, CSS and JavaScript, and it can be a portable component that can be re-used easily.
Lightning components are based on this idea where each individual component consists of one or multiple components that use Apex + Javascript + HTML + CSS on top of Salesforce metadata to build a complete functional unit that can work on multiple Salesforce instances and multiple pages.
3. Get Familiar with SLDS
Salesforce uses the SLDS pattern for UX design. Get familiar with the design system and follow the patterns mentioned in SLDS for consistency. Spend a day or two knowing the component sets supported and how to use SLDS for your component bundles.
4. Apex Best Practices for Your Components
Below are some of the best practices to follow.
1. Message Layer Pattern for all the Apex classes feeding the Lightning component for ISV apps to avoid namespace issues during packaging.
Write your own message layer classes with @aurEnabled properties and do not use salesforce __c fields directly feeding the response object to the Lightning Component. This is because for managed package apps the namespace is not added by platform during packaging. (Note that Visualforce does this automatically for us.)
A good example of simple message class is below.
public with sharing class TaskMsg {
public TaskMsg() {
this.isCompleted = false;
this.istaskDue = false;
}
@AuraEnabled
public String name {get;set;}
@AuraEnabled
public Date dueDate {get;set;}
@AuraEnabled
public String directions {get;set;}
@AuraEnabled
public String comments {get;set;}
@AuraEnabled
public Boolean isCompleted {get;set;}
@AuraEnabled
public String status {get;set;}
@AuraEnabled
public Integer noOfDaysSinceDue {get;set;}
@AuraEnabled
public Boolean istaskDue {get;set;}
@AuraEnabled
public String taskId {get;set;}
@AuraEnabled
public String sitePrefix {get;set;}
@AuraEnabled
public String URL {get;set;}
@AuraEnabled
public String templateId {get;set;}
}
2. Avoid Inner classes due to a bug in Lightning and instead split into its own class. See details here.
3. The returning method of the AuraEnabled for error handling should enclose in try and catch, and catch will always return an Auraenabled exception.
The pattern is as below.
@AuraEnabled
public static list<TaskMsg> feedComments()
try{
}catch(exception e){
throw new AuraHandledException(e.getmessage());
}
}
4.The auraEnabled methods do not accept the custom message class type and currently there is a bug. Send string instead and use JSON.deserialize to manually parse into custom Apex. See below for pattern.
@AuraEnabled
public static list<TaskMsg> shareTasks(String taskMsg){
List<TaskMsg> lstTaskMsg = (List<TaskMsg>)JSON.deserialize(taskMsg, List<TaskMsg>.class);
}
5. Server side Apex code Inheritance also has an issue. You can review the issue here.
If you use inheritance, then pass as a string and use JSON.parse() to parse the response in Javascript
5. Event Driven Programming
Events are the core of the Lightning Component Framework. As a Visualforce developer, this is a change for you. Explore component and application events. The Component Framework uses a publish subscribe model to create events and handle them.
The best resource to learn about them is the Developers Guide. The key is to understand how the framework handles system events, browser events, and custom events.
Gain confidence by building some components hands on. Use Trailhead to practice few sample exercises. Additional great resources are DF16 sessions and the TrailheadDX sessions.
These sessions should get you started:
Mastering Lightning Component Framework Part 1
Mastering Lightning Component Framework Part 2
Summary
At CodeScience, we’ve been on the leading edge of Lightning since its release. We know the work arounds and possibilities to get our clients Lightning Ready. By starting with the 5 tips outlined above, you are on your way to becoming a fearless Lightning Developer.
Looking for help with your app? Let’s talk!
CodeScience has deep expertise in building managed package solutions and Lightning components. We don’t have to rewrite your whole app – we can get you started. Leverage our insights gained from building 220+ apps for the AppExchange and helping smart SaaS businesses grow smarter.
