Lightning Experience is new Salesforce user interface. As a developer, to explore Lightning Experience, all you need is a free Salesforce developer instance. You can sign up for a developer instance at https://developer.Salesforce.com/signup.

If you already have one of these instances, you can switch to Lightning Experience. To see how to switch to Lightning Experience from Classic, please check out the following screenshot:

Lightning Experience, like Salesforce Classic, consists of applications (Apps), Tabs, List views, and Detail Record View pages. Additionally, beyond all these, the Lightning UI provides the following additions:

• App Builder for Salesforce administrators to drag and drop Lightning Components 
• Lightning Utility Bar (located at the footer)
• The ability to create Kanban views 
• The ability to calendar custom objects

Let's examine each of these views with some screenshots and further explore the various ways a Salesforce administrator can customize them with Lightning Components.

The App Launcher allows you to switch between different Salesforce applications.

The following screenshot shows the App Launcher. All of the applications are represented by cards:

The setup  link for Lightning Experience takes you to the standard Setup page for Salesforce administrators to execute admin-related tasks. The following screenshot shows the Setup menu:

Once in the Setup menu, find App Manager from the search box. A new Lightning app can be created using the New Lightning App button, and if the application is Classic, you can upgrade it to a Lightning Application.

To create a Lightning Application, follow the steps from the App Launcher:

1. Click on the New Lightning App button.
2. Follow the prompt and enter the name of the application (note that the developer name gets auto-populated once you click on the Developer Name field), description, and configure App Branding:

3. Choose between a console app and a standard app. 

4. Optionally, select Utility Bar items. Utility bars are used to carry quick functionalities that need to be accessed quickly, such as taking notes during sales calls, or quickly finding contact details when a service representative is on a call with a customer.
5. Select the Navigation tab:

6. Select the profiles that the application will have access to:

The creation of a Lightning tab can be achieved by searching for Tabs in the Setup menu. The navigation path for the creation of a tab is Setup | User Interface | Tabs.

The following screenshot shows the tab creation screen:

A custom Lightning Component can be assigned as a Lightning Component tab. The component must implement a force:appHostable interface for it to appear as a Lightning Component tab.

Lightning page tabs are created from a Lightning page using the App Builder.

From the Setup menu, navigate to User Interface | Lightning App Builder. The screenshot that follows shortly shows the navigation path for finding the Lightning App Builder.

There are three different types of Lightning pages, explained in the following table:

The following screenshot shows the selection options when choosing the type of Lightning page:

A Lightning page comprises multiple Lightning Components. You can use a combination of standard Lightning Components, custom-built Lightning Components, and components installed from Salesforce AppExchange.

There are also multiple options to choose the type of layout for a Lightning page. The following screenshot shows the various options:

Lightning App Builder allows administrators to drag and drop various standard and custom components to create a Lightning page.

The following screenshot shows the Lightning App Builder screen that administrators use to create a Lightning page:

Once a Lightning page is saved, the activation screen provides options to configure the profile for the page.

On the Record Page, the assignment configuration can be understood with the help of the following screenshot:

Clearly, one overrides the other. ORG DEFAULT is the top level, followed by APP DEFAULT, and then by APP, RECORD TYPE, AND PROFILE.

In a Lightning Application, you can add Lightning Components to the horizontal footer. This can be very useful for adding productive tools such as a simple calculator, reports, recent items, a Computer Telephony Interface (CTI) softphone, and any other quick access tools that your sales or support representatives might find useful.

To make a Lightning Components available as a utility, the component must implement the flexipage:availableForAllPageTypes interface.

The following screenshot shows how you can edit a Lightning Application from the App Manager and add a Utility Bar to a Lightning Application:

The horizontal footer is where Components added to the Utility Bars are displayed. You can control the height and width of utility components, and their ability to load in the background.

The following screenshot shows a utility Component added to a sales application:

List views in Lightning Components are similar to those in Salesforce Classic, but with some additional capabilities, such as creating a Kanban view, using quick charts to display data in graph format, inline editing, adding filters, sorting, and the ability to take mass actions.

The following screenshot shows functionalities present on the List view that can help end users to visualize data and perform actions on it:

Note that the New Edit and View buttons can also be overridden with a custom Lightning Component. To override these standard buttons and views, the navigation path is Setup | Object Manager | <select object> | Button, Links, and Actions. The following screenshot shows how you can override the New button (a similar screen appears for other overrides):

Lightning Experience provides end users with the ability to calendar any object. The following screenshot shows how you can use the Calendar tab to calendar data across objects. The user can follow the prompts and select Field for Start and Field Name to Display to create a calendar:

Global Actions are available on all pages. The following screenshot shows Global Actions:

You can also create a new custom global action by using a custom Lightning Component. The navigation path from set up manager page is Setup | Global Actions.

The following screenshot shows how you can add a custom Global Action using a Lightning Component:

Publisher actions are available in Salesforce 1 and Lightning Experience, and these are object-specific and available on the Object Detail Lightning page.

To create a publisher action, you can use the Object Manager tab from the Setup menu. The navigation path is Setup | Object Manager | <select object>| Buttons, Links, and Actions.

The following screenshot shows how you can create a publisher action for an Account object using a custom Lightning Component:

The Publisher Action also needs to be configured based on the page layout. This can be achieved via Object Manager. The following screenshot shows how you can configure a custom publisher action:

Before we start building Lightning Components, let's understand the architectural differences between how Lightning Components and Salesforce Classic Visualforce work.

In a traditional Classic Salesforce UI, every time a user clicks a link, an HTML page is loaded from the server. Even for small interactions, the whole web page or tab needs to be reloaded.

Lightning Experience is based on the concept of a Single-Page Application (SPA). In SPAs, once the page is loaded, for any other subsequent request of data from the server, an Ajax callout is made and the page is re-rendered with new data. The aim is to avoid the whole page refreshing.

The following diagram helps to visualize the difference between a single-page architecture and a traditional web page rendering mechanism:

With web components, you can do almost anything that can be done with HTML, CSS, and JavaScript, and they 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, and CSS on top of Salesforce metadata to build a completely functional unit that can work on multiple Salesforce instances and multiple pages.

To understand how web components work, let's consider the following image. This shows how a page can have multiple components. It's also important to note that, since each of the components can consist of data from a third party, and if components from different namespaces can scrap data, it can diminish data security. Hence, Salesforce has a security mechanism known as Locker service to prevent data from being accessed.

It locks the DOM of the component and, hence, the JavaScript code from the component cannot access data from other components:

A Lightning page can have multiple components. They can be as small as a button component or can consist of components from different namespaces and different vendors. A component is a reusable unit and can be reused in Lightning Experience and Salesforce 1. To make these components interact with each other, the framework provides events. We will explore Lightning events in later chapters.

A Lightning Component bundle consists of four primary sections (there are also Renderer, Design, and SVG sections apart from these four, which we will cover in upcoming chapters):

• Lightning Component Markup file (.cmp) file: This is an XML component definition and consists of HTML markup.
• CSS file (.css): This consists of CSS for the component.

• JavaScript helper and controller (.js): This consists of JavaScript code. The helper file is used to keep all the reusable code for the component. 
• Apex controller (.cls): This is not a part of the bundle, but every component that uses Salesforce data uses a server-side controller to fetch and post data to the Salesforce servers.

In the last section of this chapter, we will create a Lightning Component using the Salesforce Developer Console. In Chapter 3, Working with Lightning Component Building Blocks, we will dig deeper into each of these files and explore how to build a functional component for Lightning Experience.

A basic understanding of the sequence of steps that takes place when a Lightning Component communicates with a client and a server will help a great deal before we dive deep into how to build a Lightning Component.

The following diagram shows how a Lightning Component works between the client and server:

The key things to note from the previous diagram are as follows:

• A user action instantiates the component and an init event is raised
• The JavaScript controller function calls the helper function to perform any server-side action
• The Apex controller method is invoked from the helper function, the data is returned, and JavaScript callback functions are invoked
• The JavaScript client-side logic can be written to manipulate the DOM, set attributes, and refresh the view

The Lightning Components framework follows the Model, View, Controller (MVC) paradigm. The component file provides the view layer, the JS controller and helper files provide the controller part, and the controller interacts with the Salesforce server via Apex. Apex connects to the Salesforce database, which acts as the Model.

The following diagram illustrates how the Lightning Component framework is based on the MVC paradigm:

Before we start building Lightning Components, there are some things that need to be done to your developer organization.

1. Enabling My domain is a necessary step, and if you have not enabled it, then it's not possible to test your Lightning Component. To enable My domain, the navigation path is Setup | Company Settings | My Domain. Register for a domain name, walk through the wizard, and make sure you deploy the new domain to all users. The following screenshot shows the navigation path and also the end result once My Domain is enabled:

2. Disabling caching for development purposes is very important. Lightning Experience performs caching to improve performance, and this may interfere with the testing of Lightning Components because your code changes might not immediately reflect upon page reload.
3. The navigation path to disable caching is Setup| Security | Session Settings. The following screenshot shows the checkbox that needs to be unchecked:

The aim of the section is to demonstrate how to build a simple Lightning Component via the Salesforce Developer Console. We will also explore how to create a simple application to test our component.

The simplest way to create a Lightning Component is to use the Salesforce Developer Console. In later chapters, we will get familiar with source-driven development and the use of an Integrated Development Editor (IDE). For now, let's use the Salesforce Developer Console:

1. Open the Salesforce Developer Console:

2. Use the File menu to create a new Lightning Component:

3. Name the component. Let's name it HelloWorld for now.
4. Enter the following code in the component markup and save it (command + S):

<aura:component > 
    HelloWorld
</aura:component>

5. Let's test this on the browser. To test this, we will need to create a Lightning Application. Go to the File menu, as we did in step 2, to create a Lightning Application. Let's name the application HelloWorldApp, enter the following code, and save it (command + S). Notice we have used the HelloWorld component in the aura:application tag to reference the component.

<aura:application >
    <c:HelloWorld/>
</aura:application>

6. Click on Preview in the application and make sure the browser renders HelloWorld. The following screenshot shows the preview and the application:

7. You will see that there was a unique URL generated as Salesforce_domain/c/HelloWorldApp.app. Notice that c is the default namespace. For a managed package application, your organization may have a namespace and then the namespace is used in the URL generated instead of c. Also, note that Salesforce_domain is the domain name of your Salesforce instance. The following screenshot shows how the component markup is rendered on the browser:

A real-world application involves UI widgets such as lists, tables, cards, modal, and many more. For its Lightning Experience UI, Salesforce uses a common design pattern, which is an open source project known as the Lightning Design System. You can read more about the Lightning Design System, and the patterns and components provided from the official documentation located at https://www.Lightningdesignsystem.com.

Lightning Components can use the styles provided by the Lightning Design System. Let's modify our HelloWorld component to display HelloWorld in a card format, using the card components provided by the Salesforce Lightning Design System (SLDS).

Let's open the Helloworld application we have built so far again and modify it to include the SLDS:

1. To open the existing Lightning Component, in Developer Console, use File | Open Lightning Resource, search for the HelloWorld component, and select Open Selected.
2. Copy the code that is in the SLDS card component from SLDS (https://www.Lightningdesignsystem.com/components/cards/).
3. Paste the markup as it is on the HelloWorld component file. You will get an error, as shown in the following screenshot:

4. The error is because of the SVG tag (we will see how to use SVG tags in later chapters). Let's remove the highlighted portion for now to allow the save operation. The complete code for the component is as follows:

<aura:component >
  <article class="slds-card">
  <div class="slds-card__header slds-grid">
    <header class="slds-media slds-media_center slds-has-flexi-truncate">
      <div class="slds-media__figure">
      </div>
      <div class="slds-media__body">
        <h2>
          <a href="JavaScript:void(0);" class="slds-card__header-link slds-truncate" title="[object Object]">
            <span class="slds-text-heading_small">Card Header</span>
          </a>
        </h2>
      </div>
    </header>
    <div class="slds-no-flex">
      <button class="slds-button slds-button_neutral">New</button>
    </div>
  </div>
  <div class="slds-card__body slds-card__body_inner">Card Body (custom goes in here)</div>
  <footer class="slds-card__footer">Card Footer</footer>
</article>
</aura:component>

5. Also, to make sure SLDS is imported into the shell application for testing, we will need to extend the application to use the force:slds base component. Let's modify our HelloworldApp as follows:

<aura:application extends="force:slds">
    <c:HelloWorld />
</aura:application>

6. Let's preview the application and see the SLDS card in the browser. The following screenshot shows the results rendered on the browser:

The preceding is a simple demonstration of how to use the Salesforce SLDS in Lightning Component Framework. The Lightning Component framework is pretty powerful and provides many components and patterns. As a designer, you can build a complete application using the component set provided. Through this book, as we move ahead, we will use the SLDS extensively to build the UI for our components.

Now that we are familiar with Lightning Experience, the Lightning Component framework architecture, and the Lightning Design System, we are ready to dive deep and explore the Lightning Component framework further.

Let's also address the question of why we should invest time in learning this framework. The primary reason for learning this framework is that to customize Lightning Experience or Lightning pages, we will need to build custom Lightning Components. Also, as we will see later, the Lightning Component framework can be used to build Salesforce communities. It can also be used to build chatter extensions, Salesforce extensions for Outlook, and extensions in other Salesforce products.

In the next chapter, we will explore how to use Salesforce DX and an IDE to set up our development workflow for source-driven development.