Little-Known Ways to achieve responsiveness in LWC using JavaScript

Little-Known Ways to achieve responsiveness in LWC (using JavaScript)

There are different ways to achieve responsiveness in LWC. Among them, CSS is the most popular one. However, we can achieve the same functionality with enhanced security using the javascript approach. In this article, we will discuss the CSS approach and its drawbacks. After that, we will go through the javascript solution.

CSS approach to achieve responsiveness in LWC:

As part of the CSS approach, we have a predefined set of responsive visibility classes available as part of SLDS, hiding content on specific breakpoints.
 

Responsive visibility classes based on different form factors are as below:

Drawbacks of CSS approach:
 

Though the CSS approach is easy and convenient to use, below are some drawbacks of using the visibility classes.

• The HTML elements that we hide using the visibility classes will still be there in HTML-DOM.

• The elements, though not present on UI, can still be accessed by using some hacking tricks. 

• Impact the security when it has some sensitive data.

JavaScript approach to achieve responsiveness:

To enforce security and at the same time achieve responsiveness, we need to not only hide the HTML elements from the user interface but also remove them from the HTML DOM itself.

Hence, to remove the elements from HTML DOM, we will be using two significant components in this article.

• Pub-Sub event

• Window Resize event

Using JS to create our new form factor:

To create our new form-factor in LWC, we need to first add the event listener for the window resize event on a load of the LWC component. This can be accomplished using the connected callback method and can be done in the below-mentioned manner:

 connectedCallback() {                                
    window.addEventListener("resize", this.computeformfactor);
 }    

Once we register the window-resize event, we need to handle the event and make the related computation. We can make use of the window.innerWidth property to get the actual width of the application and process the computation likewise.
 

In the below-mentioned example, I have made computations for mobile, tablet and desktop applications by using the form-factor as SMALL, MEDIUM and LARGE, respectively.

    computeformfactor() {                                    
        var newFormFactorName = "";                            
        if (window.innerWidth > 1224) {                        
            newFormFactorName = "Large";                        
        } else if (window.innerWidth >= 768) {                    
            newFormFactorName = "Medium";                        
        } else {                                        
            newFormFactorName = "Small";                        
        }                                                
        //checking the old and new formfactor, just to make sure that we are firing the event only when its changed                
        if (this.formFactorName !== newFormFactorName) {            
            this.formFactorName = newFormFactorName;                
            pubsub.fire("windowResizeEvent", {                    
                message: newFormFactorName                    
            });                                        
        }                                            
    }    

Here, I am using the pubsub event to communicate between the components independent of their hierarchy. We can use any way of communication between the components based on our requirements and comfortability.
 

Once the event is thrown at one component, it can be handled anywhere, any number of times, inside the application, but just registering and handling the event.
 

We have to make these computations only once. Hence, it's suggested to use it in the component that can be there irrespective of our web application process. In my example, I have added my header component, which will be constant throughout the application.
 

We can handle the fired event in the below manner:

    connectedCallback() {                                
        pubsub.register("windowResizeEvent",                            
        this.handleWindowResizeEvent.bind(this));                
    }                                              


    handleWindowResizeEvent(messageFromEvt) {                                                                    
        this.isTablet = messageFromEvt.message == "Medium";            
        this.isMobile = messageFromEvt.message == "Small";            
        this.isDesktop = messageFromEvt.message == "Large";            
    }    

Based on these variables, we can render the elements on the HTML document using the template is: true or is: false.

         <template if:false={isTablet}>                    
                <img class="menuItemImageDiv" src={iconUrl} />        
                <span class="menuItemNameDiv"> {itemName} span>     
            template>                                    
            <template if:true={isTablet}>                        
                <div class="menuItemTabNameDiv">                
                    <div class="menuItemTabImageDiv">                
                        <img src={iconUrl} />                    
                    div>                                
                    <div>{itemName}div>                        
                div>                                    
            template>    

In a nutshell:
 

By using the javascript way to achieve responsiveness, we can enhance the security of our web application. Also, it behaves the same way as the CSS approach, so nothing hampers just adds up the benefits.

Some of the advantages of using Javascript over CSS are below:

• JavaScript is more challenging compared to CSS in this scenario.

• It is dependable for the interactivity of the webpage.

• Security benefit.