“Hello World!” with Lightning Web Components[Playground]

Hello Trailblazers!!

Are you guys ready to take a roller coaster ride with Lightning Web Components? Lightning Web Components is a brand new programming model by Salesforce, with which we can build components with custom Html and modern web technologies, and the good news is Lwc’s can coexist and interoperate with Lightning components. Moving to LWC is one of the steps towards Digital Transformation by Salesforce. With the help of  LWC, anybody who can write modern web application will be able to build components in salesforce. Unlike Lightning Components, LWC supports modern javascript versions:
  1. ES6 (ECMAScript 2015)
  2. ES7 (ECMAScript 2016)
  3. ES8 (ECMAScript 2017)—excluding Shared Memory and Atomics
  4. ES9 (ECMAScript 2018)—including only Object Spread Properties (not Object Rest Properties)
Supported Browsers:
  • Google Chrome™ 59+
  • Microsoft® Edge 15+
  • Mozilla® Firefox® 54+
  • Apple® Safari® 11.x+

For earlier versions of these browsers and for IE 11, Lightning Web Components uses compatibility mode.


Supported Salesforce Experience and Tools

These Salesforce experiences and tools are supported.

  1. Lightning Experience
  2. Salesforce App
  3. Lightning Communities
  4. Lightning App Builder
  5. Community Builder
  6. First-Generation Managed Packages
  7. Second-Generation Managed Packages
  8. Unlocked Packages
  9. Unmanaged Packages
  10. Change Sets
  11. Metadata API—LightningComponentBundle
  12. Tooling API—LightningComponentBundle, LightningComponentResource


Unsupported Experiences and Tools
Lightning Web Components doesn’t currently support these Salesforce experiences and tools. To use a Lightning web component with these experiences and tools, wrap the component in an Aura component.
  1. Lightning Out
  2. Lightning Components for Visualforce
  3. Standalone Apps
  4. Salesforce Console (Navigation Item API, Workspace API, UtilityBar API)
  5. Utility Bars
  6. URL Addressable Tabs
  7. Flows
  8. Snap-ins Chat
  9. Lightning for Gmail, Outlook Integration
  10. EMP API, Conversation Toolkit API, Omni Toolkit API, Quick Action API
  11. Standard Action Overrides, Custom Actions, Global Actions, List View Actions, Related List View Actions
  12. Chatter Extensions

Lightning Web Components doesn’t support Apex Continuations. Embedding a Lightning web component for Apex Continuations in an Aura component doesn’t work.

What is the Lightning Web Components Model (LWC)?

Lightning Web Components uses core Web Components standards and provides only what’s necessary to perform well in browsers supported by Salesforce. Because it’s built on code that runs natively in browsers, Lightning Web Components is lightweight and delivers exceptional performance. Most of the code you write is standard JavaScript and HTML.

Hands-On Time: Playground !!

To experiment with Lightning web components, Salesforce has created an interactive online code editor and it is called as ‘Playground‘. You can write javascript, HTML and CSS code and preview the apps as you develop. You can save the playground app and share with your fellow developers.
Playground Snapshot

The playground has 4 sections:

  1. Project Section(Left) – You can specify details about the project.
  2. Editor(Middle) – where you can edit your code.
  3. Output section(Right) – where you can see the output of the code you have written.
  4. App Menu(Top Right) – To create, run, share and download the apps.

So, without wasting any more time, let’s start building Lwc’s with Playground.

New Project
1. To create an app, click New. The playground replaces the welcome app component with an empty app component. The playground replaces the welcome app component with an empty app component. Every playground app also contains a main.js file. The main.js code appends the app component to the document body. To change the project’s title, description, and namespace, click the pencil icons in the Project pane. If your organization doesn’t have a namespace, use the default, c.
Change project name in Project Section
2. Edit and change the name of the app as you prefer.
3. To create new component first, create a new folder by clicking folder icon, see below image.
Click on the folder icon to create a new component
4. Create component files by clicking file icon next to your component folder name.
Click file icon to create files in the component.

Create files in folder: sampleComponent

1 sampleComponent.html
2 sampleComponent.js
3 sampleComponent.css
5. To add a component in app use below code, C is the namespace name. While adding components camel case names need to be converted to kebab case i.e. if component name is sampleComponent 
then kebab case will be sample-component.

<!-- app.html -->
  <c-sample-component person-name="Planet!!"></c-sample-component>
Line 3: Please note that camel case attribute name ‘personName’ is converted to kebab case i.e. person-name.

6.  Add below code to sampleCompoent.html.

<!-- sampleComponent.html -->
    Hello World! <br/>
        using merge field to access attribute value 
        Unlike lightning and vf '!' is not needed, just wrap variable in {}
    Hello, {personName}!

    <p>This is sample paragraph. CSS is set from the .css file</p>
    Message: {message}

Where {personName}, {message} are the merge fields.

7. Add below code to sampleComponent.js

// sampleComponent.js
import { LightningElement, api } from 'lwc';

export default class App extends LightningElement {
    @api name; // this is same as aura attribute attribute
    message = 'This is the message from controller'

Line 2: import LightningElement and api.
Line 5: bind person-Name property.

8. Add below code to sampleComponent.css

  app css is overridden by component's css.
p {
    color: green;


9. Save the app, and click ‘Run’ to run the app, see the output of the code in the output section. Please note if you have selected ‘Live compilation‘ from project section in compiler options, it will automatically run the code as you change it.
Final Output
10. If you are logged in to the playground with your org, you can share your app with the people who have access to your Org. How?? Just copy and share the URL for your project, and that’s it! If you want to share it with others who don’t have access to your org you can download and share zip file with them.
So that’s it now you have the basic idea of LWC and Playground you can workout more!! All the best!
The Playground has certain limitations.
  • The playground doesn’t provide Security with Lightning Locker.
  • The playground can’t access Salesforce organizations, so it doesn’t support features that require data from Salesforce.
  • The playground doesn’t support these components that import internal JavaScript libraries.
  • In the playground, components that display a date based on a user’s locale, such as lightning-formatted-date-time and lightning-formatted-time, use the ISO date format, for example, 2018-01-28

Stay tuned!!
Upcoming blog : Getting started with LWC in scratch org.

Introducing Lightning Web Components
Playground Doc
Wiki: Digital Transformation

Leave a Reply

Your email address will not be published. Required fields are marked *

Connect With Us

  • contact@cloufi.com
  • +1 (561) 220-0044
  • 2441 Bartlett St, Houston, TX 77098, USA

Copyright © 2018,  All Rights Reserved by Cloufi.com