User Interfaces with Lightning Framework

Lightning is a rich client-side framework for developing device-agnostic and responsive user experiences (UXs) as well as for 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...

Building a basic Lightning UI

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 that you give them.

As we will explore later in the chapter, Lightning Experience, Salesforce Mobile, Lightning Communities, and Lightning Flow are also containers built by Salesforce in the same way as the example that follows.

If you want to follow along with the next few steps, ensure that you have installed Visual Studio Code and have the extension for Lightning Web Components installed. We will be taking a closer look...

Lightning architecture

In this section, we will discuss key layers of the Lightning architecture, which will allow you to have a better framework of understanding as we go deeper.

A key aspect that took me by surprise at first is the need to write client-side controllers in JavaScript. This can be particularly puzzling at first if you are a Visualforce developer, but it is a vital part of being a Lightning developer and is a reflection of its client-side architecture. As we saw in the previous chapter, Apex server-side controllers still play a part, but are mainly used for accessing your backend Apex Services and Selectors.

In general, Lightning development is much more componentized. In terms of how the UI is designed and how the code is factored, the two are much more aligned, making it easier to maintain and navigate code. This also gives a much greater emphasis on the separation...

FormulaForce Lightning components

In designing the Lightning components for the FormulaForce sample application contained in this book, I wanted to try to demonstrate some key integration points within the Salesforce UIs, while also ensuring that the use cases fit with the application domain.

I focused on Lightning Experience and Salesforce Mobile. It is also good practice to think platform-first before embarking on any extensive development. I started with the following use cases and then devised a set of components to deliver the functionality:

• Race Overview: While the standalone Lightning application we looked at earlier was a good means to get started with the components, it's not a Salesforce-integrated solution. What I wanted to do was integrate the Lightning Experience home page, through the Lightning App Builder customization tool. I wanted to do this not only to...

Making components customizable

The components included in this chapter will appear in Lightning App Builder and are thus available for the developer and consumers of the package to drag and drop onto pages. The following screenshot shows how the components in this chapter appear in Lightning App Builder:

Although only Lightning Web Components are featured in this chapter, this book's sample code contains example components built using both Lightning Aura components and Lightning Web Components, hence both being shown in the previous screenshot. Unless otherwise stated in the component's description, components are Lightning Web Components.

To further expose components and properties to Lightning tools such as Lightning App Builder, Lightning Community Builder, and Lightning Flow, you must reference them and their properties in your component metadata...

Integrating with Lightning Experience

The screenshots in this section highlight the various points at which the components have now been integrated with Lightning Experience. These components are still available to the Race Overview standalone app we started this chapter with. Through additional metadata configurations, they now support more advanced container features.

This screenshot shows the Race Results and Race Standing components on the home page, with the Race Calendar component accessible via the utility bar. The race results are updated as the user selects races from the Race Calendar:

Lightning Web Components do not currently support the utility bar at the time of writing. As with the Race Setup approach described in an earlier section, an Aura wrapper was used to expose the Race Calendar component. 

This screenshot shows the Race Setup component appearing as...

Integrating with Lightning Flow

Lightning Flow is a tool that users can use to build interactive wizard-style user experiences. The tool, much like Lightning App Builder, is a drag and drop declarative tool that does not require coding skills. However, it has its limitations, as you can imagine, in terms of the sophistication of the user interface elements it supports.

In order to solve this problem, Salesforce has enhanced this tool to support using Lightning components. In the following screenshot, we can see how the Race Results component is being used as part of a Flow to capture Race Feedback. The Flow contains a variable containing the record ID that is passed to the component, as shown on the right:

At the time of writing, only Lightning Aura components are supported. Until Salesforce supports Lightning Web Components, you can use the wrapper pattern described earlier...

Integrating with Lightning Communities

Lightning Community is another container for your Lightning components that allows you or your customers to use components to build consumer-facing websites; as such, the components featured in this chapter are already close to being able to exist within it and the Lightning Community Builder tool. The same considerations for specifying a component metadata file as described in the previous section also apply so that the components appear correctly in the Lightning Community Builder tool, notably making sure that the component's targets include lightningCommunity__Page, as shown here:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="raceCalendar">
    <apiVersion>45.0</apiVersion>
    <isExposed...

Exposing components with Lightning Out

Lightning Out is a JavaScript library that can be imported into regular HTML pages, such as Visualforce pages, and other websites or other containers, such as Google Apps. Once imported, it exposes an API that allows the page developer to instantiate a Lightning component and inject it into a given HTML element on that page. The host page must provide a Salesforce session or OAuth token to allow this to happen in a secure way.

At the time of writing, Lightning Out does not support Lightning Web Components. In the meantime, you can wrap them in Aura-based components to work around this. Check the documentation for the latest on this here: https://developer.salesforce.com/docs/component-library/documentation/lwc/migrate_bundles.

The process of using Lightning Out for Visualforce pages is simplified through the use of...

Updating the FormulaForce package

As in the previous chapters, feel free to update your package and try out an installation of the package in your test org.

Summary

In this chapter, you have learned about the high-level architecture of the Lightning Web Component framework, in terms of a standalone page as well as when it comes to integrating Lightning components within Lightning Experience, Lightning Community, Salesforce Mobile, and Lightning Flow.

Lightning Experience is now much more extensible than the original Salesforce Classic user interface. There are more options to consider before deciding whether your only option is to start building entirely new, from-the-ground-up, page-level experiences. Thinking about these integration capabilities as you consider your user experience requirements, along with aligning component thinking between developers and UX designers, is key to embracing this new way of building applications on Salesforce.

The need for separation of concerns and good coding practices is now as important at the...