Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Lightning web components

•Download as PPTX, PDF•
•
A
Amit Chaudhary

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 of 13
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
Who am I ? Amit Chaudhary • Active on Salesforce Developer Community • Blogging at http://amitsalesforce.blogspot.in/ • Co-Organizer of :- FarmingtonHillsSFDCDug
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
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
Why Lightning Web Components
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
Four Pillars of HTML Web Components 1.Import 2.Template 3.Custom Element 4.Shadow DOM
Demos
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
Handle Event when Components not in Same DOM ▶ Use Pub Sub Model ▶ Source code here
Resources ▶ Salesforce Documentation ▶ Trailhead ▶ Amit Blogspot ▶ SFDX Commands - Jitendra’s Blog ▶ LWC Code Recipes
Q&A
Thank You

More Related Content

Lightning web components

  • 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
  • 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