ABSYZ ABSYZ

  • Home

    Home

  • About us

    Who We Are

  • Our Expertise

    What we Do

  • Our Approach

    How We Do It

  • Products

    What We Made

  • Industries

    Who We Do It For

  • Clients

    Whom We Did It For.

  • Article & Blogs

    What Experts Think

  • Careers

    Join The Team

  • Get In Touch

    Let’s Get Started

ABSYZ

Introducing: Lightning Web Components

Home / Article & Blogs / Salesforce / Lightning / Introducing: Lightning Web Components
By Team ABSYZ inLightning, Lightning Web Components, Salesforce, Salesforce Releases

Hello there Trailblazers!! You are all set to read and develop something beyond exciting get hold of your enthusiasm and start right on!!

Lightning Web Components is a new programming model for building Lightning components.

Lightning Web Components(LWC) are custom HTML elements built using HTML and modern JavaScript. It leverages the web standards and can coexist and interoperate with the original Aura programming model, and delivers unparalleled performance.

Lightning Web Components(LWC) is built on web standards for almost all of the code involved, with a minimal amount of “custom code” that represents the core Aura runtime that underlies both technologies. This means they are more secure and faster.

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.

Differences Between Lightning Components and LWC: Why to Use LWC?

Lightning components utilize Aura framework for development and execution of Lightning components. Aura framework can be placed in same stack as Angular, React, as it provides the nuts and bolts to run your lightning components.

Lightning web components, on other hand utilize browser provided features for general component scaffolding along with Salesforce Lightning web components framework (which provides features related to security, service integration and base lightning components). As a large portion of this is now native within browser, there is an obvious cost saving in terms of processing overhead.

LWC is fast, memory efficient and easy to learn, and cost-effective.

Usage of LWC with Lightning Components:

Similar to custom lightning components, lightning web components can be utilized to create standalone components which can be embedded within

  • Lightning Applications
  • Custom lightning components
  • Visualforce page (using lightning out) and all custom developed applications on the platform.

Yay!! You learnt a lot about LWC. Now let’s dive in and develop custom components using LWC, and also using the Lightning aura frame work, which will help us understand more and also look into the code differences.

Developing custom component using Aura Lightning Framework:

Screenshot 2018-12-28 at 12.53.07 PM

Source Code:

<aura:component implements="force:appHostable, flexipage:availableForAllPageTypes, flexipage:availableForRecordHome, force:hasRecordId, forceCommunity:availableForAllPageTypes, force:lightningQuickAction" access="global">
<lightning:card title="Lightning Components">
<lightning:icon iconName="utility:connected_apps" alternativeText="Connected" />
<p> Hello ABSYZ!!</p>
</lightning:card>
</aura:component>

Don’t worry if you are not aware of the lightning aura framework and development structures a basic knowledge of HTML, and JavaScript will help you achieve the same that’s where LWC comes in!! Let’s see how!!

Developing custom component using the LWC framework:

Screenshot 2018-12-28 at 12.59.13 PM

HTML file: 

<template>

<lightning-cardtitle="Lightning Web Components"icon-name="custom:custom14">

Hello ABSYZ!

</lightning-card> </template>
Write the statement “Hello ABSYZ!” within <p> …. </p>

JS file:

[sourcecode]

import { LightningElement } from ‘lwc’;

export default class HelloWorld extends LightningElement {

}

[/sourcecode]

Xml file:

In the Xml file we define the targets(where the component can be used eg: Record page, Home page etc) along with the metadata soap api(which is used while pushing the source to the org.)
<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">

<apiVersion>45.0</apiVersion>

<isExposed>true</isExposed>

<targets>

<target>lightning__AppPage</target>

<target>lightning__RecordPage</target>

<target>lightning__HomePage</target>

</targets>

</LightningComponentBundle>

The image below gives an overview of the LWC stack and improvised framework.

e22c2045-6f6a-4c11-aec5-5e7a94af68cf

Lightning Web Components provides a layer of specialized Salesforce services on top of the core stack, including:

  • The Base Lightning Components, a set of over 70 UI components all built as custom elements.
  • The Lightning Data Service which provides declarative access to Salesforce data and metadata, data caching, and data synchronization.
  • The User Interface API, the underlying service that makes Base Lightning Components and the Lightning Data Service metadata aware, leading to substantial productivity gains.

You might have noticed the Lightning experience UI rendering speed has gradually increased over years, and that’s partly because the UI is now mostly LWC, and the all/most standard Lightning part of the Lightning Component library is LWC under the covers, which has contributed to faster Aura performance.

Creating a Lightning Web Component:

Lightning Web Components are available from the Spring’19 Release. In order to create an LWC make sure you register for a preview Spring’19 org and start the development.

To create and develop Lightning Web Components and leverage their powerful features and performance benefits, you need to set up Salesforce DX.

what is Salesforce DX(SFDX)??

The Salesforce Developer Experience (DX) is a set of tools that streamlines the entire development lifecycle. It improves team development and collaboration, facilitates automated testing and continuous integration, and makes the release cycle more efficient and agile.

Set Up the Development Environment:

In order to create a LWC, Salesforce suggests that we use Visual Studio Code,  as the development environment. Salesforce standard extensions are easily available for VS code which is integrated with the SFDX CLI.

Download the Salesforce DX CLI for your system and setup the requirements. Once installed you can check whether it is installed correctly or not.

Goto CLI –> Type sfdx plugin –> it will display the version number if installed correctly.

Screenshot 2018-12-24 at 4.29.11 PM.png

Once done Configure your Visual Studio Code, and download the Salesforce Extension and LWC extension for it.

Goto your VS code, click on Extensions icon and search for Salesforce Extension Pack, and install it.

Screenshot 2018-12-24 at 4.46.31 PM

After installing the extension, now install the Lightning Web Component Extension Pack.

Screenshot 2018-12-24 at 4.48.20 PM

Once done, and after making sure your development environment is ready, open your Visual Studio (VS) Code and press Ctrl + shift + p (windows) and alternatively Command + shift + p (macOS).

Press Command + Shift + P (Use alternatively for windows), and type sfdx, then select “create a project”.

Screenshot 2018-12-24 at 4.53.38 PM.png

Enter a Project name and then select a folder to save the project locally. Once done, click on create project.

After creating a project, you need to authorize a Dev hub, eventually you will be creating your LWC in a Connected Scratch Org, which once after development you can push it to your Connected DE orgs and Preview Orgs.

Authorize a Dev hub by again typing sfdx and then select “authorize a dev hub”.  Log in with your pre release Dev Hub org Credentials and then click allow.

Once your dev hub is authorized, create a scratch org, press command + shift + p and then select “sfdx: create a default scratch org”. 

Press enter and accept the defaults, once created you will receive a response like this:

Screenshot 2018-12-24 at 5.16.39 PM

Once done, again on your VS Code press command + shift + p and then select Create a LWC. Press enter to accept the defaults, and then provide name for the component.

Press Enter and you can see the newly created files in VS Code. The image below gives an hierarchical overview of the files structure of LWC.

Screenshot 2018-12-24 at 5.21.52 PMCopy and paste the following sample code in the files, or you can write your own version!! Anything is a GO!!

helloWorld.html:

<template>
<lightning-card title="HelloWorld" icon-name="custom:custom14">
Hello, {greeting}!
</lightning-card>
</template>

Write the statement Hello, {greeting}! within <p> …… </p>

helloWorld.js : 

[sourcecode language = “javascript”]

import { LightningElement, track } from ‘lwc’;

export default class HelloWorld extends LightningElement {

@track greeting = ‘World’;

changeHandler(event) {

this.greeting = event.target.value;

}

}

[/sourcecode]

helloWorld.js-meta.xml:

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">

<apiVersion>45.0</apiVersion>

<isExposed>true</isExposed>

<targets>

<target>lightning__AppPage</target>

<target>lightning__RecordPage</target>

<target>lightning__HomePage</target>

</targets>

</LightningComponentBundle>

Make sure that the component names are same for all your source. Once done, save the source and push it to your Scratch Org. Press Command + Shift + p and then select “Push Source to default Scratch Org”.

Open your Scratch org by selecting “Open Default Org” and once your org opens up in browser from quick find type “Deployment Status” to check whether your component is Successfully deployed.

If the status  indicates success your component is deployed successfully.

Screenshot 2018-12-24 at 5.39.35 PM

Once deployed in your scratch org, open any lightning record/home page and click on edit then add the custom LWC. Assign it to your org, or to an app based on your criteria, activate it and save it.

Screenshot 2018-12-24 at 6.02.58 PM

Screenshot 2018-12-24 at 6.05.27 PM

There you go, you have just created a Lightning Web Component!! With the introduction of LWC Salesforce has opened up immense opportunities for Developers with any background to be able to build and develop on the Salesforce platform.

Pat your Shoulders, do more and blaze your trail!!

130
Like this post
26 Posts
Team ABSYZ

Search Posts

Archives

Categories

Recent posts

BioAsia 2023 in Hyderabad: An Annual International Event

BioAsia 2023 in Hyderabad: An Annual International Event

The Role Of Marketing in Small & Medium Enterprises

The Role Of Marketing in Small & Medium Enterprises

Salesforce For Retail: How Salesforce CRM Can Help Retailers

Salesforce For Retail: How Salesforce CRM Can Help Retailers

What is ChatGPT & How Does It Work?

What is ChatGPT & How Does It Work?

What Is Graphic Design? (Executive Summary 2023)

What Is Graphic Design? (Executive Summary 2023)

  • Previous PostChatter Feed Migration in salesforce
  • Next PostHow to use external Id to Upsert data in salesforce using Talend

Related Posts

Salesforce For Retail: How Salesforce CRM Can Help Retailers
Salesforce

Salesforce For Retail: How Salesforce CRM Can Help Retailers

Introduction To Copado Devops Tool
Salesforce

Introduction To Copado Devops Tool

What is Salesforce Code Builder?
Salesforce

What is Salesforce Code Builder?

Automation in Healthcare And Its Benefits
Health Cloud Salesforce

Automation in Healthcare And Its Benefits

Leave a Reply (Cancel reply)

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

*
*

ABSYZ Logo

INDIA | USA | UAE

  • About us
  • Article & Blogs
  • Careers
  • Get In Touch
  • Our Expertise
  • Our Approach
  • Products
  • Industries
  • Clients
  • White Papers

Copyright ©2022 Absyz Inc. All Rights Reserved.

youngsoft
Copy
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “ACCEPT ALL”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent. Privacy Policy
Cookie SettingsREJECT ALLACCEPT ALL
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled

Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.

CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

Functional

Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.

Performance

Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.

Analytics

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.

Advertisement

Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.

Others

Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.

SAVE & ACCEPT