Introduction to Lightning Web Components (LWC) Why Lightning Web Component (LWC) Part 1 - Vanilla HTML5 Web Components Benefits of Web Component Pillars of Web Component Demo of Custom Element and Templating Part 2 - Lightning Web Component Hello World Demo of Lifecycle methods Call Apex Class Access Custom Label Lightning Data Services Communication between Lightning Component and LWC Third party Callout from LWC

1. Farmington Hills Salesforce Developer User Group
Lightning Web Components
#SalesforceApexHours #FarmingtonHillsSFDCDug
Speaker :- Jitendra Zaa & Amit Chaudhary
Date :- Saturday, Jan 11, 2018 10:00 AM EST
Venue/Link :- Online

2. Who am I ?
Amit Chaudhary
• Active on Salesforce Developer Community
• Blogging at http://amitsalesforce.blogspot.in/
• Co-Organizer of :- FarmingtonHillsSFDCDug

3. Speaker
Jitendra Zaa
Sr. Technical Architect
Bluewolf
23 Salesforce Certifications
Author - Apex Design Pattern
Salesforce MVP
10+ years in Salesforce
Blog - https://JitendraZaa.com
Follow - @JitendraZaa

4. Agenda
▶ Why Lightning Web Component (LWC)
▶ Part 1 - Vanilla HTML5 Web Components
▶ Benefits of Web Component
▶ Pillars of Web Component
▶ Demo of Custom Element and Templating
▶ Part 2 - Lightning Web Component
▶ Hello World
▶ Lifecycle methods
▶ Call Apex Class
▶ Lightning Data Services
▶ Communication between Lightning Component and LWC

5. Why Lightning Web Components

6. Why LWC ?
▶ 4 years back, in 2014, Lightning Components Launched
▶ At that time Web Standards had limited functionality and various framework came to fulfil the gaps like
ReactJs for virtual DOM, commonJS etc
▶ Aura framework was part of that initiative where they pushed web standards to build enterprise
applications
▶ Aura framework, Angular, React these all framework became languages
▶ Fast Forward few years later
▶ Web standard has rich set of functionalities, supported by Native Browsers
▶ Templating, Shadow DOM, Custom Element to name few
▶ More Standard and less framework

7. Four Pillars of HTML
Web Components
1.Import
2.Template
3.Custom Element
4.Shadow DOM

8. Demos

9. Life Cycle Methods
Method Name Description
constructor When Component Created
connectedCallback When Component inserted in DOM
disconnectedCallback When Component removed from DOM
render Called after ConnectedCallBack. For Complex rendering
Logic
renderedCallback() After render
errorCallback If any error in component lifecycle methods

10. Handle Event when Components not in Same DOM
▶ Use Pub Sub Model
▶ Source code here

11. Resources
▶ Salesforce Documentation
▶ Trailhead
▶ Amit Blogspot
▶ SFDX Commands - Jitendra’s Blog
▶ LWC Code Recipes

12. Q&A

13. Thank You