Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Lightning web components

4,654 views

Published on

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

Published in: Education
  • Login to see the comments

  • Be the first to like this

Lightning web components

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

×