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.

Episode 16 - Introduction to LWC

580 views

Published on

Getting started with Lightning Web Components in Salesforce

Published in: Education
  • Be the first to comment

  • Be the first to like this

Episode 16 - Introduction to LWC

  1. 1. Path to Code Begin Your Salesforce Coding Adventure
  2. 2. Episode 16 Introduction to Lightning Web Components
  3. 3. • Enterprise Solutions Architect • Global Community Speaker Jigar Shah @jigarshah189
  4. 4. Agenda • Pillars of Modern Web Development • Why LWC? • Dev Tools for LWC development • Anatomy of a LWC • LWC Lifecycle • LWC Decorators • Q&A
  5. 5. Some Housekeeping Rules… • Mute your mic • Keep adding questions in Zoom Q&A Window • No questions are silly! • Questions will be answered in the last 15 mins of this session
  6. 6. Pillars of Modern Web Development
  7. 7. Why Lightning Web Components? • Limited Web Development Standards • Feature starved browsers • LWC Features • Reusability • Granularity • Encapsulation • Standardization
  8. 8. Dev Tools for LWC Development 1. Install Salesforce CLI 2. Install Visual Studio Code 3. Include the Salesforce Extensions Pack and Lightning Web Components Extension in VS Code
  9. 9. Demo 1 Creating a Lighting Web Component
  10. 10. Anatomy of Lightning Web Component Markup Controller (Javascript) Helper / Renderer (Javascript) Controller (Apex) Controller (Apex) Style (CSS) Markup Controller (Javascript) Style (CSS) Aura Component Lightning Web Component Client Server app.html app.css app.js
  11. 11. Lifecycle of a Lightning Web Component
  12. 12. Lifecycle of a Lightning Web Component Method Name Purpose constructor When Component is created connectedCallback When component is inserted in DOM DisconnectedCallback When component is removed from DOM render Called after connectedCallback.Used for complex rendering logic. renderedCalledback Called after render. errorCallback Called if any error in component lifecycle methods
  13. 13. Understanding Decorators • @api • @track • @wired
  14. 14. Demo 2 Building a Hello World Lightning Component
  15. 15. Comparing LWC and Aura Components
  16. 16. Resources  Lightning Web Components Dev Guide  Sample Gallery  Lightning Web Component Recipe  Lightning Web Component Playground
  17. 17. Trailhead Modules Modern Javascript Development Quick Start: Lightning Web Components Lightning Web Component Basics
  18. 18. Q & A
  19. 19. Thank You
  20. 20. Subscribe

×