A Practical Exploration of Lightning Web Components and Component Bundles

In the ever-evolving landscape of web development, Salesforce's Lightning Web Components (LWC) have emerged as a game-changer. With their modular architecture and efficient rendering, LWC offer a fresh approach to building dynamic and interactive user interfaces. At the heart of LWC's development structure are component bundles, which encapsulate everything needed for creating robust, reusable, and feature-rich components. In this article, we'll dive into LWC and its component bundles, accompanied by a real-world example to illustrate their power and versatility.

Understanding Lightning Web Components (LWC)

Lightning Web Components are a cutting-edge framework designed to leverage modern web standards while seamlessly integrating with the Salesforce ecosystem. The core tenets of LWC include enhanced performance, better developer experience, and compatibility with industry standards.

Benefits of LWC:

LWC Component Bundles: A Closer Look

A component bundle in LWC is a directory containing all resources necessary for a component to function similar to aura component bundle. It encapsulates the HTML, JavaScript, CSS, metadata, and other files required for a component's complete definition.

Key Components of a Component Bundle:

1. HTML File (.html): Defines the component's structure and layout, rendering elements in the browser. It is also known as the template.
2. JavaScript File (.js): Houses the component's logic, handling events, data manipulation, and interactions. It is also known as module.
3. CSS File (.css): Contains the styles and appearance rules for the component.
4. Metadata Files (.js-meta.xml): Store vital information about the component, including its name, description, and configuration. It also defines the target location where the component has to be displayed.

Real-World Example: Building a Weather Card Component

Let's illustrate the power of LWC component bundles with a practical example: building a weather card component that displays weather information for a specific location.

1. Create a New Component Bundle: Using Salesforce CLI, create a new LWC component bundle named WeatherCard.
2. Enhance the Component: Open the created WeatherCard directory (force-app/main/default/lwc/WeatherCard). Modify the files as follows:

• WeatherCard.html:

<template>
  <div class="weather-card">
? ? ? ? <lightning-input label="Enter Location" onchange={handlechange}></lightning-input>
? ? ? ? <lightning-button label="Weather" variant="brand" onclick={handleclick}></lightning-button>
? ? ? ? <p>Temperature: {temperature}°C</p>
? </div>
</template>        

• WeatherCard.js:

import { LightningElement, api } from 'lwc';
import getTemp from '@salesforce/apex/weatherclass.getTemp';

export default class WeatherCard extends LightningElement {
 ?  city;
? ? temperature;
? ?
? ? handlechange(event)
? ? {
? ? ? ? this.city=event.target.value;
? ? }
? ? @wire(getTemp, {city:'$city'}) weatherInfo;


? ? handleclick()
? ? {
? ? ? ? if(this.weatherInfo.data)
? ? ? ? {
? ? ? ? ? ? this.temperature = this.weatherInfo.data;
? ? ? ? }
? ? ? ? console.log(this.weatherInfo.data);
? ? }
}        

WeatherCard.css:

.weather-card 
{
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px;
  border-radius: 4px;
  background-color: #f8f8f8;
}        

3. Create a class to call API for generate temperature dynamically:

public with sharing class weatherclass
{
? ? @AuraEnabled(Cacheable=true)
? ? public static Decimal getTemp(string city) 
? ? {
? ? ? ? Http http = new Http();
? ? ? ? HttpRequest request = new HttpRequest();
? ? ? ? request.setEndpoint('https://api.weatherapi.com/v1/current.json?key=e990a0ac66ac4f608e364952232108&q='+city+'&aqi=no');
? ? ? ? request.setMethod('GET');
? ? ? ? HttpResponse response = http.send(request);
? ? ? ? response.getStatusCode();
? ? ? ? if(response.getStatusCode()==200)
? ? ? ? {
? ? ? ? ? ? Map<String, Object> jsonResponse = (Map<String, Object>) JSON.deserializeUntyped(response.getBody());
? ? ? ? ? ? if (jsonResponse.containsKey('current')) {
? ? ? ? ? ? ? ? Map<String, Object> currentData = (Map<String, Object>) jsonResponse.get('current');
? ? ? ? ? ? ? ? if (currentData.containsKey('temp_c')) {
? ? ? ? ? ? ? ? ? ? Decimal tempCelsius = (Decimal) currentData.get('temp_c');
? ? ? ? ? ? ? ? ? ? system.debug(city);
? ? ? ? ? ? ? ? ? ? system.debug('Temperature in Celsius: ' + tempCelsius);
? ? ? ? ? ? ? ? ? ? return tempCelsius;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? return null;
? ? }
? ? 
}         

Conclusion

Lightning Web Components and component bundles provide a powerful foundation for building dynamic and interactive user interfaces on the Salesforce platform. By encapsulating HTML, JavaScript, CSS, and metadata within a single directory, component bundles promote reusability and modular development. The real-world example of a weather card component showcases how LWC's architecture simplifies the creation of complex components while maintaining high performance and scalability. As you explore the world of LWC further, you'll discover endless possibilities for creating compelling user experiences within Salesforce and beyond.