lightning web components

Lightning Web Components

Welcome in Lightning Web component world. Lets under standard why Lightning Web components introduced by Salesforce and How to create first LWC component in sandbox or developer org (Non-scratch org). In addition we will talk about LWC best practices.

Why Lightning Web Component

  • 5 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
  • Web component
    • Web standard has rich set of functionalities, supported by Native Browsers
    • Templating, Shadow DOM, Custom Element to name few
  • More Standard and less framework

In other words, Lightning Web Components framework brings power and benefits of Web Components while being built on modern web standards. Lighting Web Components are comprised of 3 key pieces:

  • Base Lighting Components – a set of 80+ UI components built as custom elements
  • The Lightning Data Service– provides declarative access to Salesforce data and metadata, data caching, and data synchronization
  • The User Interface API– the underlying service that makes Base Lighting Components and the Lightning Data Service metadata-aware


Introduction to Lightning Web Components

We did two session in Apex Hours “Introduction to Lightning Web Components” and ” Lightning Web Components Best Practices“. In that session we covered the all below topics.

  1. Why Lightning Web Component (LWC)
  2. Part 1 – Vanilla HTML5 Web Components
    • Benefits of Web Component
    • Pillars of Web Component
    • Demo of Custom Element and Templating 
  3. 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

Here is recording of session :-

Lightning Web Components Best Practices

On 23 March 2019, We did another live session on Lightning Web Components (LWC) best practices with “René Winkelmeyer” in ApexHours. In that session we talk about how to build rich, efficient, and resilient Lightning Web Components. That webinar covered best practices around :-

  1. Using public, and private properties for effective component composition.
    1. When we should use @api or @track variable
  2. Event communication for child-to-parent as well as for sibling components (pubsub).
    1. Parent to Child Communication
    2. Child to Parent Communication
    3.  pubsub
  3. When, and when not, to use Apex with Lightning Web Components
    1. UI Record Api in LWC
    2. Lightning Data Service in LWC (Lightning record form)
  4. Aura interoperabilitys Recipes, Patterns and Best Practices
  5. How to debug Lightning Web Components
  6. How to test Lightning Web Component (Lightning Testing Service)
    1. Jest Tests for Lightning Web Components ( LTS ) 

Here is recording of session :-

.

Lightning Web Components ( LWC ) in Salesforce with Non-Scratch Org

In this post we talk about how to create LWC component in non-scratch org.
For Lightning Web Components development you need to setup SalesforceDX and VsCode as LWC components are currently not available in Developer console

Design attributes CSS and SVG Files in Lightning Web Components

We created one blog post on how to create Design Attribute in Lightning web components. Design Attribute is used to make lightning web components attribute available to System Admin to edit Lightning App Builder or Community

Here is recording of this

.

Invoke Apex Class from Lightning Web Component

We have three way to call Apex method

  1. Wire a property
  2. Wire a function
  3. Call a method imperatively.

Please check this post to know about all different way to Invoke Apex Class in LWC. Check this recording to one of way to call apex method.

Please check this post to learn about different way of Events in Lightning web components (LWC).

Converting Visualforce page to Lightning Web Components

In this session we talk about how to convert the VF page into LWC components. Salesforce Recently introduce the Lightning Message Service (LMS). Lightning Message Service (LMS) allow you to communicate between Visualforce and Lightning Components (Aura and LWC both) on any Lightning page

Further Reading :-

Please check below post on learn more about Lightning Web Components

  1. Lightning Web Components ( LWC ) in Salesforce with Non-Scratch Org
  2. Invoke Apex Controller from Lightning Web Component | Lightning Web Component inside Another LWC
  3. Design attributes in Lightning Web Components | CSS and SVG Files | Lightning Web Components | targetConfigs
  4. How to get current user id in lightning web component | Access logged in user ID in LWC
  5. Toast Notification in Lightning Web Components | ShowToastEvent | (LWC)
  6. LWC Best practices
  7. Events in Lightning web components (LWC) | Communicate with Events
  8. Lightning datatable In Lightning Web Components | lightning datatable inline edit
  9. Lightning Message Service (LMS) | MessageChannel
  10. Sorting in Lightning Datatable

Trailhead :- https://trailhead.salesforce.com/en/content/learn/projects/quick-start-lightning-web-components

Thanks

12,433 total views, 24 views today

1 thought on “Lightning Web Components”

Leave a Comment