Introduction to SFDC LWC Training:
SFDC Lightning Web Components is a methodology that salesforce introduced and developed. With lightning web components, we can use modern web standards like ECMAScript 6 plus. We can create our own elements and have the ability to use the modules. This is a user-friendly application where you can use it on any device like mobile, desktop and tablets. The user interface gets adjusted to it. Using lightning web components enhances the performance and it is easy to develop. Ides trainings provides the best SFDC Lightning Web Components (LWC) training. We have the best trainers who have more than ten years of experience in this course. We at Ides trainings strive to give you the satisfied learning experience. We provide Online, Corporate and Virtual Job Support. We provide Classroom training at client premises like Hyderabad, Noida, Mumbai, Pune, Chennai, Bangalore, Delhi, etc.
Prerequisites for SFDC Lightning Web Components (LWC) Training:
Having basic knowledge on
Salesforce platform
HTML
CSS
Java
SFDC Lightning Web Components (LWC) Training Course Outline Details:
Course Name: SFDC Lightning Web Components (LWC) Training
Mode of Training: We provide Online, Corporate and Classroom Training. We provide Virtual Job Support as well.
Duration of Course: 30Hrs (Can be customized as per the requirement)
Do you provide materials: Yes, if you register with Ides Trainings, the SFDC Lightning Web Components (LWC) training materials will be provided.
Course fee: After registering with Ides Trainings, our coordinator will contact you.
Trainer Experience: 15+ years of experience
Timings: According to one’s feasibility
Batch Type: We provide training for all type of batches like Regular, Weekends and Fasttrack.
Backup Session: If the student misses the session, we provide backup session.
Basic Requirement: A PC with Windows/Linux/Mac, Headset, good internet.
SFDC Lightning Web Components (LWC) Training Course Content:
Module 1 – Introduction
1.1 Introduction to LWC
1.2 LWC future/Open Source
1.3 ECMA Script 7 Intro (ES6, ES7)
1.4 LWC Programming Model
1.5 Custom Elements
1.6 Shadow DOM
1.7 HTML templates
1.8 LWC vs Aura Programming Model
1.9 Salesforce LWC History
1.10 Aura Coexistence
Module 2 – LWC Tool/Infrastructure
2.1 Setting MS Visual Code
2.2 SFDX – CLI
2.3 Dev Hub (Create, Authorize, Open, Access, Push, Pull)
Module 3 – SFDC CLI for LWC & Scratch Org
3.1 Installing SFDX CLI
3.2 SFDX CLI Commands
3.3 Scratch Org – Introduction, Creation, Limit, Configuration
3.4 org:create – create a scratch org
3.5 org:delete – scratch org for deletion
3.6 org:display – List of scratch org
3.7 org:list – List of scratch orgs created or authenticated
3.8 org:open – Open a scratch org project
3.9 project:create – Create a scratch org project
3.10 source:open – Open Devhub
3.11 source:pull – pull source from the scratch org to the project
3.12 source:push-push source to an org from the project
3.13 class:create – create an apex class
Module 4 – LWC Creation
4.1 Creating Basic LWC (.Html, .JS, JS-Meta.xml)
4.2 LWC Button : Button ,Button Group, Button-Icon ,Button-Menu, Button Stateful
4.3 LWC Card : Card, Layout, Layout-Items Div
4.4 LWC Fields – Input, Output
4.5 LWC Tab – Tab, Tabset , Tabarea
4.6 LWC Formatted : Date,number,phone,Text, time,address,email,url
Module 5 – LWC Action (Client Actions)
5.1 Creating LWC actions (On Click , On change, On Focus Etc,,)
5.2 @Wire , @Track @Api
5.3 Events Targets
5.4 Custom Actions with Java Script
Module 6 – LWC with Apex Class & Methods
6.1 Creating LWC Methods to Access SFDC Data
6.2 @ Auraenabled class Methods
6.3 Methods with Params
6.4 Wire Apex Method to a Function
6.5 Import APEX Methods
6.6 Import Objects and Fields from SFDC Schema
6.7 RefreshApex
6.8 Continuation
6.9 Continuation Limits
Module 7 – LWC Events
7.1 LWC Events
7.2 Create and Dispatch Events
7.3 Passing Data in LWC Events
7.4 Event Handlers
7.5 addEventListener
7.6 Event Propagation (Bubbles and Composed)
7.7 Event Propagation (Bubbles and Composed)
Module 8 – LWC DATA (LWCDS)
8.1 Introduction to LWC Data System
8.2 LWCDS load, edit, create
8.3 LWC Data Tables
8.4 LWC Data with Wire
8.5 LWC Data Error Handling
8.6 LWC Data (General)
8.7 LWC Data Sobject
8.8 LWC Data without Params
8.9 LWC Data with Params
8.10 LWC DS with Server-Side Controllers
Module 9 – LWC Styles (CSS)
9.1 Introduction to LWC Styles
9.2 Defining LWC Custom Styles
9.3 Defining LDS (Lightning Design System) Styles
9.4 Creating Custom CSS Component
9.5 Calling Custom CSS Component in LWC
Module 10 – LWC Development
10.1 LWC Push/Deployment to Org
10.2 LWC Targets
10.3 LWC Usage in App, Tab, Record, Home
Overview
LWC is a new programming model levering the recent web standards rather than being a totally custom and development-wise rigid framework, it is quite flexible. It is mostly the common web standards and a thin layer of specialized services to make a perfect fit for the modern rich UI implementation in salesforce. This thin layer of specialized services that contain the base lightning components, lightning data services and user interface API which work behind the curtain for LWC.
What is Salesforce?
Salesforce is a cloud-based software as a service provider which means it maintains an online application that customers can use. It is based on a subscription-based pay-as-you-go business model.
What is LWC?
LWC is a brand-new framework via salesforce. The aura framework is adopted externally by salesforce which is running on the propriety technology. This is where LWC comes into picture. LWC is a native browser which runs everything inside the browser by using its own services so it is much faster than aura framework.
How Salesforce began?
Cloud computing technologies has exploded in popularity in recent years. Salesforce is one technology that had a significant impact on the computer world. Customer Relationship Management CRM solutions used to be housed on a company’s own server before salesforce.
Can you imagine how much money and effort is required for business to develop their own CRM systems?
It used to take months if not years to set up and the cost might easily reach millions of dollars. They were difficult to use even when they were set up. Creating the affordable CRM software and delivering it as a service totally online is the solution for that problem.
Salesforce has founded on this principle. Salesforce began as a software as a service company and has since evolved to become the four world’s fifth largest cost software company.
How does Salesforce work?
Customer 360 is the world’s number one CRM enabling digital processes for the new way of working by simplifying communications and information exchange between customers, teams and partners. It provides tools that brings all teams together around a single shared view of client data on an integrated platform including marketing, sales, commerce, service and IoT. Companies fix customer issues faster because they have a holistic perspective of each consumer. It also reduces communication redundancy and enables highly tailored interactions.
Benefits of Salesforce:
1.Salesforce allows you to go from idea to app in the shortest amount of time.
2.Salesforce customers generally say that it’s unique for three major reasons: fast, easy and effective.
3.Salesforce is hosted in the cloud your staff may access it from any computer with an internet connection.
4.Salesforce is also cost effective especially when you consider its extensive feature set.
5.Salesforce is suitable for both startups and small businesses.
Benefits of LWC:
The core benefits of adopting LWC is it is based on the core web standards. It also increases the interoperability in case you want to surface your LWC components externally.
It is lightweight since it is running natively inside the browser. Browser itself becomes a service that is supporting LWC. At component level we don’t need to manage much so it is much lightweight.
It is following the web development standards. It is all based on JavaScript and HTML.
It is easy to locate web resources type of framework. LWC is easy to find solutions in common places on the web.
It is easy to build development team. We can easily find developers with necessary skills and experience.
LWC co-existence with Aura
1.Aura components and Lightning web components can coexist on the same page.
2.Aura components can include Lightning web components but not vice-versa.
3.They share the same base Lightning components.
4.They have the same underlying services like LDS.
5.Web components can easily interact with the Aura component and can handle the events of one another.
Difference between Aura and LWC
Aura lightning component is a custom component model where as LWC is a web component model. Aura uses the custom templates whereas LWC has standard templates. Aura has custom components whereas LWC has custom elements. There is rendering optimization for Aura where as LWC has shadow DOM. The modules of Aura are custom made whereas LWC is standard. The events of Aura are custom and LWC has standard events. Aura uses ECMAScript 5 whereas LWC uses ECMAScript 7.
What is LWC build for?
LWC is a new programming model built on modern web standards. It is built for the following reasons:
Enhanced productivity – Since we are betting on modern standards like ES6, ES7, custom elements, modules and templates. We are completely betting on the modern standards and that is why you would see the productivity will be enhanced.
Built for performance – It is also built for performance because now you are offloading all the work to the browser and the JavaScript engine of the browser.
Compatible and easy to use – It should have perfect interoperability with aura. Aura LWC is called a perfect match as they talk to each other, events flow seamless and they are living in the single page perfectly so it is very compatible.
Lightning Web Component Anatomy
The HTML template element contains components markup. This contains component code in a JavaScript class. This also contains the metadata values for the component configuration. It supports the CSS file and can also add your own elements.
Decorators and Properties in LWC:
Decorators in LWC
1.@api – For making properties or method public.
2.@track – For making properties private.
3.@wire – To read salesforce data.
LWC Properties
1.Reactive Properties:
If the value of a reactive property changes, the component re-renders.
a. Public Properties
– Decorated with @api.
– Parent component can set the values for these properties on child components.
b. Private Properties
– Decorated with @track.
– Only accessible within the component itself.
2.Non-Reactive properties in JavaScript.
3.Declaring functions in JavaScript.
4.Parent-Child Components.
Conclusion
SFDC Lightning Web Components are custom HTML elements built using HTML and modern JavaScript. The web component uses core web standards and provides only what’s necessary to perform well in the browser supported by Salesforce. Since it is built on the code that runs natively on browser lightning, that component is lightweight and exceptionally delivers the performance. Most of the code is written on standard HTML and JavaScript. Ides trainings provides training for different sectors of the workforce. We provide online and corporate training for companies and also classroom training for individuals who want to learn new skills. Ides trainings provides a range of training courses to help people succeed in their careers. We focus on providing quality training that can be accessed from anywhere with internet access.
Frequently Asked Questions (FAQs)
1.What are the different Certifications for salesforce?
Salesforce has different certifications like salesforce administrator, salesforce app builder, salesforce developer, salesforce platform developer.
2.How do you use LWC inside a VF Page?
1.Add the Lightning Web Components for Visualforce JavaScript library to your Visualforce page using the <apex:includeLightning/> component.
2.Create and reference a standalone Aura app that declares your component dependencies.
3.Write a JavaScript function that creates the component on the page using $Lightning.createComponent().
3.Can we use HTML tags in LWC?
An LWC that renders a user interface (UI) must have an HTML file, JavaScript file and metadata configuration file.
4.Who can learn this course?
Anyone who wanted to build a career in salesforce and who are willing to learn this skill can join.
5.When was LWC introduced?
LWC is a new programming model introduced by salesforce in December 2018 for building Lightning web components.