đź“Ł Attention Salesforce Certified Trailblazers! Link your Trailhead and Webassessor accounts and maintain your credentials by December 14th. Learn more.

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 Lightning components.
  • Describe what Lightning components are.
  • Identify where and why to use Lightning components.

Lightning 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 Lightning components. Maybe you looked at the (nine unit!) Lightning 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 Lightning Component framework 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.

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 Lightning 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. The Lightning Components framework is 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 Lightning 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 Lightning Components?

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

The Lightning Component framework 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 Lightning components is a client-side framework (where Visualforce is primarily server-side). 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 Lightning Component Core Concepts module, the next on this trail. And if you’re interested in some of the underlying motivations for why we designed Lightning 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 Lightning components. The Lightning Component framework 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 a Lightning 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 Lightning 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.