Lightning is a rich client side framework for developing device agnostic and responsive user experiences as well as supporting mobile, tablet and desktop. Unlike Visualforce it was built from the ground up with today's multi-device rich client demands in mind. It is used by Salesforce themselves and is also available to developers to build their own standalone or platform integrated UIs. Using Lightning Out developers can also integrate UIs built with Lightning into external sites and applications. An emphasis on componentization is at the heart of its architecture, and plays a key part in providing a means to implement reuse, separation of concerns and extensibility.
This chapter provides an architectural overview of the Lightning component architecture, while contrasting it with its predecessor Visualforce. New Lightning Components called Race Calendar, Race Results, Race Standings and Race Setup will allow us to explore and development process and styling using Lightning Design System.
Using the new components, we will explore the options and benefits of integrating components into Lightning Experience, Salesforce1 Mobile, Lightning Communities, as well as an existing Visualforce pages. Lightning Out for Visualforce allows existing solutions to continue to support Salesforce Classic while moving towards Lightning.
We will cover the following topics in this chapter:
- Overview of the Lightning component framework
- Understanding of the various component containers
- Building components your end users can customize
- Using components to extend Lightning Experience and Salesforce1 Mobile
- Understanding how to write secure JavaScript code
- Styling your Lightning UIs
Before we dive into the more complex components included in the sample code for the FormulaForce application, let's first create a simple Lightning Application to better understand the architecture of Lightning. Think of a Lightning Application as a container for your UI, essentially your HTML markup. Containers are effectively things you can navigate to in the browser, they get their own URL based on the name you give them.
If you want to follow along with the next few steps, ensure you have installed the Force.com IDE with support for Lightning Components. We will be taking a closer look at the Force.com IDE features around Lightning later in this chapter.
Follow these steps to create your first Lightning Application:
- Ensure that you are using a Developer Edition org with My Domain enabled. This can be enabled under the Setup menu by searching for My Domain. Ensure that you have completed all the My Domain steps.
- Create Force.com IDE project for your org from the New menu by selecting Force.com Project.
- Once the project is created, right click on the project in the Package Explorer and select the Force.com sub-menu then Work Online. This ensures when saving a file it gets automatically uploaded to Salesforce.
- From the File menu, select Lightning Bundle from the New sub-menu.
- In the Create new Lightning Component dialog, select Lightning Application from the Type field.
- Give your application the name
myappand click Finish. - A Lightning Bundle in source form is a folder that contains one or more files depending on the type. In this case you will have a
.appfile,.cssfile and three.jsfiles. Open themyapp.appfile and enter the markup below, then save the file.<aura:application> <h2>Success your first Lightning App</h2> </aura:application>
- As described in the preceding code, containers are essentially pages you can navigate to with your browser. These work outside of the standard UIs from Salesforce but still require you to login. Login to your Developer Edition org and enable Lightning Experience from under the Setup menu (if it is not already enabled).
- Switch to Lightning Experience and take note of the URL in the browser. This might be something like the following for the Lightning Experience container (
https://yourdomain.lightning.force.com/one/one.app). - To launch your first Lightning Application, modify the URL as follows, substituting
yourdomainfor your orgs domain (https://yourdomain.lightning.force.com/c/myapp.app).
You should see in your browser the following message:
Success your first Lightning App
This type of Lightning Application is known formally as a Standalone Lightning App in the Lightning Components Developer Guide (you can refer to https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/intro_framework.htm).
Lightning brings with it a rich and sophisticated CSS library for styling the look and feel of your HTML. This has been previously referenced as Salesforce Lightning Design System (LDS). While you can include its CSS as a static resource in your application, for native Lightning UIs such the ones featured in this chapter that is not required.
By using the extends attribute in the following code, we can ask the framework to always include the latest platform version and start using its CSS classes to brighten up our output:
<aura:application extends= force:slds">
<div class="slds-notify_container">
<div class="slds-notify slds-notify--alert slds-theme--success slds-theme--alert-texture" role="alert">
<span class="slds-assistive-text">Success</span>
<h2>Success! Your first Lightning App</h2>
</div>
</div>
</aura:application>Tip
Note the use of the role attribute and the slds-assistive-text class in the preceding code. While these are not a required technically, they are present to ensure compatibility with users that require assistance in reading the screen. Lightning includes and encourages support for HTML5 standards around Accessibility. We will discuss this further later in the chapter.
If you refresh your browser, you will now see what is shown in the following screenshot. The preceding HTML code was based on that provided on the LDS website:
The Lightning Design System (https://www.lightningdesignsystem.com) website is full of great sample HTML markup allowing you to explore, design, and test statically what you want your UIs to look like. Using a simple Lightning Application like the previous one, you can continue to copy and paste examples to try different combinations out.
Tip
Keep in mind however to be productive as a developer. What you really need is a component library with components that encapsulate the preceding HTML code, so that, you can define once and reuse, rather than copy and pasting HTML over and over. You can build your own components as we will see later and leverage SLDS within them as well. Fortunately, for the simpler and more basic component requirements, the platform provides a growing number of basic components already styled with SLDS for you, known as the Lightning Base Components. We will explore these later in the chapter (https://developer.salesforce.com/blogs/developer-relations/2017/01/base-lightning-components.html).
Finally, let us create a Lightning Component to encapsulate our success message, a component that could, for example, be the basis of a more reusable one for general informational messages:
- Within the Force.com IDE, navigate to File | New | Lightning Bundle.
- In the Create new Lightning Component dialog, select Lightning Component from the Type field.
- Give your component the name
mycomponentand click Finish. - Take the markup contained with
aura:applicationtag in themyapp.appfile and paste the contents to your newaura:componenttag shown as follows, in the newmycomponent.cmpfile, while also modifying the message:<aura:component> <div class="slds-notify_container"> <div class="slds-notify slds-notify--alert slds-theme--success slds-theme--alert-texture" role="alert"> <span class="slds-assistive-text">Success</span> <h2>Success your first Lightning Component</h2> </div> </div> </aura:component> - Finally modify the
myapp.appfile to use your new component:<aura:applicationextends="force:slds"> <c:mycomponent/> </aura:application>
Refresh the browser and you will see the following:
The preceding code is the basic introduction to Lightning development, intended to help you understand the high level architecture of Lightning and how it fits into the standard HTML page model used by the internet, as well as providing introduction to the styling and design framework known as Salesforce Lightning Design System.
So far things might feel quite familiar if you have developed in other UI frameworks such as Salesforce's own Visualforce or others such as Java Server Pages (JSP) or ASP .NET. We have defined some markup, used CSS, and seen how we can encapsulate reusable portions of HTML. When the user navigates to the URL, the Lightning platform server side code served up the appropriate HTML to launch the specified application and render referenced components. If you are a Visualforce developer, you might be thinking that this is not all that different from the use of Visualforce Pages and Visualforce Components.
While there are other similarities to other frameworks, such as the use of expressions for example, the biggest departure from those technologies is the lifecycle of the page itself. A server-side architecture often requires that the whole page be refreshed when the user performs an action. The information on the page, the state of the page, is transmitted back and forth between the client and the server each time the user performs an action. Server side controller code controls validations, loading of data and conditional display of the UI.
Increasingly, user interface designs result in HTML pages that represent a single application or workspace users open and keep open. They access different modules and perform various operations within. This is typically known as Single-Page Application (SPA) architecture. The traditional server side page refresh model is not responsive enough to meet these needs, for example when only a portion of the page needs updating. Even when the traditional Asynchronous JavaScript and XML (AJAX) approach is deployed, often the entire state of the page needs transmitting back to the server side controller. Server-side UI frameworks are also not well-suited to developing user experiences that tolerate lack of connectivity in temporary offline scenarios.
In contrast, Lightning applications are long lived in the browser and depend on JavaScript code to manipulate the DOM of the page to load new content and functionality. The state of the operation the user is performing is stored in the browser and only transmitted when needed by the server to retrieve and update the database.