Getting started with Salesforce Lightning Development

Here at BugendaiTech, we’ve had the opportunity to be an early adopter of developing for Salesforce’s new lightning experience on the lightning framework. We built lightning demo apps that were featured at Dreamforce and took what we learned to launch our own component library — Lightning Strike. While working with the lightning framework has brought in exciting new design and architecture concepts, we found that, like anything bleeding edge, the initial learning curve was steep. Out of that experience, we came up with a guide to share what we’ve learned and help introduce what developing in lightning is like. This guide is for any developer that is brand new to lightning.

Intro to lightning components

The lightning component framework is a JavaScript front-end framework specifically designed for building custom functionality on Salesforce in the lightning experience. Components can be surfaced:

  • By drag & drop on the lightning app builder

 

  • By drag & drop on a lightning record home page

 

  • In code as subcomponents of a lightning component or app
<aura:component>
  <c:NestedComponent />
</aura:component>

It is event driven architecture along with oop baked in at its core. The idea behind it is to develop loosely coupled, fully encapsulated components that communicate with each other through events and work together in a larger ecosystem.

Each component contains its own HTML, CSS & js and because the details of a component’s implementation are encapsulated, the developer can innovate and make changes to the component in a contained environment. Development lifecycle is further streamlined by utilizing a set of prebuilt components. Components interact with their environment through events.

Setting up your development environment

We believe the best way to develop is with the latest version of the force.com ide.

The quickest way to get started is with the Salesforce Developer Console.

Other options include using sublime or atom as the text editor, and mavensmate plugin running in the background to sync up with Salesforce. Follow the steps below to install and configure your dev environment.

The following editors also work with an additional Salesforce integration app:

Atom:

  1. Install atom.io then download mavensmate application
  2. In atom, go to packages > setting view > install packages/themes and install the mavensmate plugin
  3. Open the mavensmate application → settings
  4. Setup your workspace
  5. Set Salesforce api version
  6. When you’re ready to get started, create a new project and connect to your salesforce org (password must be password+security token)
  7. For settings, we use spaces set to a length of 4 with soft wrap enabled

Sublime:

  1. Install sublime text 3
  2. Download the setup .dmg file
  3. Open the setup file and drag sublime to applications
  4. Install the package control manager
  5. Open sublime and open the console using control + ‘ or view > show console
  6. From the installation guide, copy/paste the python snippet into the console
  7. Restart sublime
  8. Install mavensmate plugin for sublime
  9. Open search by using ‘control + shift + p’ and type “install”
  10. Select “package control: install package”
  11. Then search for “mavensmate” then select to install
  12. Install Mavensmate Desktop Application
  13. The desktop application must be running together with sublime
  14. From the desktop application, click on the hamburger menu → settings
  15. Configure your workspaces (mm_workspace)
  16. [“/users/{user}/dropbox/workspace/atom”, “/users/{user}/dropbox/workspace/sublime”]

THE COMPONENT BUNDLE

When you create a new lightning component you create what Salesforce calls a Bundle. Below is an image of a bundle generated in the developer console and a brief explanation describing the purpose of each file.

({

handleSelectedSObject: function(component, event, helper) {

helper.processObjectHelper(component, event, helper);

},

handleCustomEvent: function(component, event, helper {

helper.processEventHelper(component, event, helper);

}

})

  • Helper: This contains functions that contain business logic and reusable code. It is best practice to pass in component, event and helper but it is not necessary.

({

processObjectHelper: function(component, event, helper) {

var customAttribute = component.get(‘v.customAttribute’);

},

processEventHelper: function(component, event, helper) {

component.set(‘v.customAttribute’, ‘new value’);

}

})

  • Style: This applies encapsulated CSS to the component

.THIS {

background-color: white;

}

.THIS.customClass {

background-color: red;

}

  • Documentation: This is an optional file containing additional information.
  • Renderer: This is an optional file used to customize the default rendering behavior of the framework.

({

render: function(component, helper, event) { },

rerender: function(component, helper, event) { },

afterRender: function(component, helper, event) { },

unrender: function(component, helper, event) { }

})

  • Documentation: This is an optional file containing additional information.
  • Renderer: This is an optional file used to customize the default rendering behavior of the framework.

 

<design:component label=”Example Component”>

<design:attribute name=”configurableAttribute” label=”Configurable Attribute” description=”Configurable Attribute” /></design:component>

SVG: used to store custom svg used for the component

The simplest components only need the component file. If you want to add custom js code, you’ll need a controller and helper.

Component file:

The component file contains template markup. In general, lightning Component Markup consists of html and additional custom xml specific to framework functionality. The example below shows the first line of markup every component needs.

<aura:component

1 comment

Hi, this is a comment.
To delete a comment, just log in and view the post's comments. There you will have the option to edit or delete them.

Leave a reply