Lightning Components Overview

One of the great things I love about Salesforce is it’s ability to make things easy for the user and powerful for the developer and Lightning Components are no different. The Lightning Component framework is a UI framework for developing single page applications for mobile and desktop devices.

You can build Lightning components using two different programming models: the Lightning Web Components model and the original Aura Components model. Basically, Lightning Web Components are just custom HTML elements that are built using HTML, JavaScript and CSS on the front end with the ability to connect to Apex on the backend as a controller. The great thing is that both Lightning Web Components and Aura Components can coexist on the same page.

The below code shows a simple hello world output using HTML, Javascript and CSS.

HTML

<template>
   {TestOutput}
</template>

Javascript

import { LightningElement } from 'lwc';
export default class App extends LightningElement {
  TestOutput = 'Hello World';
}

CSS

p {
   color: green;
}

You really only need the HTML and Javascript files, but the CSS allows you to add style to how your code will display to the user.

You can try this yourself by heading over to the Lightning Web Components Playground:

1. Go to https://developer.salesforce.com/docs/component-library/tools/playground. You will see an example there you can review and explore. We aren’t too worried about this right now.
2. In the playground click “NEW”
3. Copy the above HTML, Javascript and CSS and pasted them into the app.html, app.js and app.css templates using the navigation under the “Project Files” section.
4. Then just click Run! You’ve created a component!