Lightning App Basics

Two web architectures

When the Salesforce CRM application was originally developed, Visualforce was the primary (and only) user interface web architecture powering the system. It still is important today, and a lot of customers on the platform use it every day.

Visualforce works this way: the HTML for the DOM is built on the server using Visualforce markup, and no JavaScript is required. So, the server is doing the hard work of rendering the UI. Most user interaction results in a request to the server and requires the server to return all or part of a page.

With Lightning—which is based on the open-source Aura framework, the DOM is built and modified directly on the client using JavaScript. With Aura, the user interaction processed by JavaScript only requests the data it needs from the server (if any), which is much more efficient, as it reduces the load on the server and consumes much less data.

One of the cool things about Lightning is that you need to use JavaScript in order to go beyond trivial applications, which is something that most modern full stack and frontend developers appreciate, whereas with Visualforce, no JavaScript is required (although it can still be used).

As the Lightning Experience is definitely the way Salesforce and Force.com apps are going, this is what we’ll be exploring. So, let’s see how we can create a very basic Lightning App manually.

Hello World in Lightning

In order to understand the basics of Lightning, it’s best to create a small and simple Hello World example. In order to do that, we’ll need to open the Developer Console.

To open this up, click the Gear icon at the top of the Lightning UI. This will display a pop-up menu with Setup and Developer Console options.

Figure 5-a: The Developer Console Option

Click the Developer Console option in order to open it up. By default, it opens as a new pop-up browser window. However, I recommend you open it as a new browser tab instead, which is a bit handier to work with.

Once opened, the Developer Console looks like Figure 5-b. As you can see, it resembles a small development or debugging environment, although it is running in the browser.

Figure 5-b: The Developer Console

To create our Hello World application, click File > New > Lightning Application.

Figure 5-c: The Developer Console Menu

Once you have done that, an in-browser pop-up window will appear, which looks like Figure 5-d.

Figure 5-d: Creating the New Lightning Sample App

Enter the Name and Description, then click Submit to get started. Once that has been done, you will see the following Aura application tags on the Developer Console.

Figure 5-e: The Newly Created Lightning Sample App

Let’s create a handler tag that will wait for the init event, which occurs when a page is fully initialized. When that event occurs, we’ll call the controller’s doInit method.

Code Listing 5-a: The Aura Handler for the Init Event

Let’s paste this code within the Aura application tags. Then under the File menu, click Save.

Figure 5-f: The Aura Handler Tag

Next, we need to edit the controller. In order to do that, go to the right side of the Developer Console screen and click the CONTROLLER tab, as seen in Figure 5-g.

Figure 5-g: The HelloWorldController.js File

This creates a controller JavaScript file with a default myAction function. For now, just replace the myAction function name with doInit. Also, we do not need the event and helper parameters, so they can be removed from the function.

Inside the body of the doInit function, add a console.log statement, and then click the File menu, and then Save. You should have something like Figure 5-h.

Figure 5-h: The Modified HelloWorldController.js File

In order to view what we have just done, click on the Preview tab seen on the right side of the screen, just above the CONTROLLER tab.

Figure 5-i: Previewing the HelloWorld Lightning App

Oops! What happened here? When previewing our app, we have received a message saying that Lightning components require My Domain. What does this mean?

Well, My Domain is a setting that is available within the Lightning Experience, under Company Settings, and it is accessible by typing in the words My Domain on the Quick Find search box.

In my case, I entered my domain name (edfreitas) and submitted it. Force.com also checks for the domain’s availability—i.e. that it has not been taken by someone else. It looks like Figure 5-j.

Figure 5-j: My Domain Settings

Notice that domains can take several minutes to get registered. Once the domain is ready, you will receive an email stating that it is available to be used.

Before we can preview our Hello World Lightning app again, we’ll need to log in with our new domain. We can do this if we refresh the My Domain settings page and click Log in.

Figure 5-k: My Domain Settings with the Log in Button

Once you click Log in, a pop-up message will appear asking if you want to navigate to that domain’s specific URL.

Figure 5-l: Navigate to the Domain’s URL

By clicking on the Open button, you’ll be redirected to the Force.com login page, where you’ll be asked to sign in with your username and password. Then click Log in.

Once logged in, you’ll be redirected to the My Domain page again, where you’ll be requested to deploy the domain to users. This is done by clicking Deploy to Users.

Figure 5-m: Deploying the Domain to Users

When you have clicked Deploy to Users, your domain will be deployed, and we are finally ready to preview our Hello World application.

That’s quite a lot of steps in order to preview a simple sample application. However, this is a one-time setup process that all Lightning applications must go through. Instead of highlighting this way back in the beginning of the book or previous chapters, I thought it would make more sense to do it now.

If we go back to the Developer Console browser tab or window and click the Preview tab, we’ll now see the result of what we have done.

Figure 5-n: Our HelloWorld App Running

The app has executed the console.log statement. Notice how it runs under the domain I registered, which is why we went through all those previous steps.

Summary

In this chapter, we’ve explored how to create a Hello World Lightning app manually by using the Developer Console. We’ve also registered the domain that will host any of the further Lightning developments we’ll be doing.

We have yet to dive deeper to understand how Lightning components work, and how they interact with Apex controllers and custom objects. This is what we’ll do next.