Start tracking your progress
Trailhead Home
Trailhead Home

Review Fundamental Skills

Lightning bolt icon used to indicate that the content is for Lightning Experience

Attention, Trailblazer!

Salesforce has two different desktop user interfaces: Lightning Experience and Salesforce Classic. This module is designed for Lightning Experience.

You can learn about switching between interfaces, enabling Lightning Experience, and more in the Lightning Experience Basics module here on Trailhead.

Learning Objectives

After completing this unit, you’ll be able to:
  • Evaluate if you’re really ready for Aura components.
  • Describe what Aura components are.
  • Identify where and why to use Aura components.

Aura Components for the Visualforce Developer

This module, and the others in this trail, are for folks who are experienced with Visualforce and want to use their Lightning Platform expertise to accelerate learning about Aura components. Maybe you looked at the (nine unit!) Aura Components Basics module and said “I’ve got a job to do, and it’s not Trailhead. Isn’t there something faster?”

This module, and this trail, is designed for you.

Before we start, a heads-up. The Aura Component programming model is larger, more sophisticated, and more complex than Visualforce. That means there’s more to learn, and your Visualforce background doesn’t always give you an advantage.

Note

Note

As of the Spring ‘19 release (API version 45.0), you can build Lightning components using two programming models: the Lightning Web Components model and the original Aura Components model. Lightning web components and Aura components can coexist and interoperate on a page. This content covers Aura components. For more information about Lightning web components, see Introducing Lightning Web Components.

Let’s make this visual. Did you ever play the game Chutes and Ladders (originally known as Snakes and Ladders) as a kid? The goal is to make it to the top of a zig-zag board. As you move along, you can land on ladders, which advance you forward, toward the top; or chutes, which send you backward, toward the bottom. To get to the top quickly, you want to land on ladders and avoid the chutes.

So, let’s pretend that learning Aura components is played on a similar board. The ladders up are your Lightning Platform and Visualforce expertise, and the chutes down are things you don’t know yet, or are areas where your Visualforce skills aren’t transferable. Because you already know Lightning Platform, you’d probably expect that the board is filled with ladders to help you up.

What You Might Think Learning Lightning Components Is Like

Alas, many of the things you know about Visualforce aren’t ladders. Aura components are quite different. If you make assumptions based on Visualforce, the things you already know can turn into chutes. It makes the board a little more challenging in terms of finding your way to the top.

What Learning Lightning Components Is Really Like

The goal of this and the other modules in this trail is to help you avoid some of those chutes. To be specific, 22 of them, marked by this icon: Chute!.

Keep in mind, though, that the Aura Components Basics module will help you avoid many more. If you find yourself getting stuck on seemingly small things—sliding down chutes—maybe your time would be better spent doing the longer module? Just a thought. (We’ve got an icon for 26 more tips like that one: Ladder!.)

Fundamentals: What Are Aura Components?

When people ask us what Aura components are, we usually say something like the following:

The Aura Component programming model is a UI framework for developing web apps for mobile and desktop devices. It’s a modern framework for building single-page applications with dynamic, responsive user interfaces for Lightning Platform apps. It uses JavaScript on the client side and Apex on the server side.

Let’s take a moment and marvel at the buzz-wordy awesomeness of that description…

OK, over it. What does this mean in words that actually make sense to Visualforce developers? The key takeaway is that you write client-side JavaScript code, and user interface processing takes place on the client side as much as possible, until you need to get data from or save data to Salesforce.

We’ll dive into the deep end of the pool about this in the Aura Components Core Concepts module, the next on this trail. And if you’re interested in some of the underlying motivations for why we designed Aura components the way we did, see “User Interface Development Considerations” in the Lightning Experience Development module (links in the Resources section).

Fundamentals: JavaScript

With Visualforce, JavaScript was optional. That’s not true with Aura components. The Aura Component programming model was specifically designed for you to do more work on the client side, in JavaScript. In this regard, it’s deliberately and emphatically different from Visualforce. (We’re saving the details of how for the next module in this trail.)

It’s virtually impossible to write an Aura component that doesn’t have some JavaScript, and most real world, non-trivial components have dozens or even hundreds of lines of JavaScript code. You must be proficient with JavaScript to write even a modestly featured Aura components app.

At first blush, JavaScript looks like a lot of languages you’re probably familiar with, including Apex. A ladder? No, it’s a Chute!. There are enough differences, including objects and inheritance, scope rules, quirks in what’s true and false, and so on, that you really do need to study it.

So what does “proficient” mean? We think you should be familiar with all of the concepts covered in the first chapter of Speaking JavaScript, which conveniently you can read online for free. In particular, we think you should fully understand the following:

  • Variable declaration and scope rules
  • Rules of comparison for equality, and evaluating truthiness and falsiness
  • What JavaScript means by “object” and “inheritance” (it’s not the same as Apex)
  • The difference between undefined and null, and how and when you need to check for them
  • How to treat functions like variables, including passing them as parameters to other functions (callbacks)
  • And, to truly master the framework, you’ll need to understand closures, at least enough to recognize and use the immediately invoked function expression (IIFE) pattern

Let’s cut to the chase. If working with JavaScript’s idioms and quirks doesn’t come fluidly—if you haven’t written a few hundred lines of JavaScript already—we humbly recommend further study.

Ladder! Specifically, we highly recommend Lightning Platform expert Dan Appleman’s excellent Getting Started with JavaScript in Salesforce video course at Pluralsight, and (after that) these books.

  • Speaking JavaScript by Axel Rauschmayer
  • Object-Oriented JavaScript by Stoyan Stefanov
  • The Principles of Object-Oriented JavaScript by Nicholas C. Zakas
  • Eloquent JavaScript by Marijn Haverbeke (available free)

Fundamentals: Modern HTML and CSS

The framework includes a number of built-in components, which we call the Base Lightning components. These components are modern, lightweight, and design-matched for Lightning Experience.

But, while the collection is growing rapidly, it’s not yet as complete as Visualforce, and you’ll write many components from scratch. Make sure your HTML and CSS skills are current. You should be confident with HTML5, CSS3, and building pages that are responsive, mobile-optimized, accessible, and cross-browser compatible. If you know what flexbox, media queries, ARIA, and REM units are, and how to use them, you’re in the game.

Fundamentals: Salesforce Lightning Design System

Ladder! One CSS tip. Try to write as little of it as possible for your components. Instead, use the Salesforce Lightning Design System (SLDS).

Using SLDS correctly is, at a high level, straightforward.

  • Wherever possible in your Lightning components markup, use built-in components from the lightning: namespace—the Base Lightning components mentioned previously. These components are built with SLDS, and use it automatically.
  • When you write HTML markup, style it by adding SLDS utility classes to the appropriate elements.
  • Better yet, copy the markup directly from the SLDS site, and then add JavaScript functionality.
  • Only as a last resort, or in limited special cases, should you write your own CSS styles for a component.

One thing to look out for. If you visit the SLDS site—an outstanding resource for learning to use the design system in detail—you’ll find that it uses the term “component” a lot. There’s a whole “component” library!

Chute! These are not Lightning components!

The SLDS site describes how to use SLDS in any web app context, whether with Salesforce, Ruby on Rails, PHP, or whatever. The “components” the site describes are idealized forms of web app user interface elements. They’re defined in static HTML and CSS only—there’s no executable aspect to any SLDS component.

And, most importantly—there are many more SLDS “components” than there are built-in Lightning components. SLDS describes the world of the future, a target we’re aiming for. For now, just because the SLDS site describes an Activity Timeline “component” doesn’t mean there’s a Lightning component that performs that function. And just because there’s an SLDS “component” for a badge, or a button, or a modal doesn’t mean that a Lightning component that provides a badge, button, or modal is the same. (It probably is. But it might not be. And it might change in the future.)

TL;DR: SLDS components are not Lightning components. If you don’t find what you need in a built-in Lightning component, use the SLDS site as your starting point for building it yourself.

retargeting