Demo of Flashm (Flash Middleware) - Making Almost Server Less Apex Calls

contact_search.html

<template>
    <div class="slds-p-horizontal_small" style="background: white;padding: 20px;">
        <div class="slds-table_edit_container slds-is-relative">

            <div class="slds-grid slds-gutters_direct-x-small" style="margin-top: 10px;margin-bottom: 10px;">
                <div class="slds-col slds-size_2-of-12 slds-grid">
                    <lightning-input type="text" label="Contact Name" class="contact-name" style="width: 100%;"></lightning-input>
                </div>

                <div class="slds-col slds-size_2-of-12 slds-grid">
                    <div class="slds-col_bump-left" style="margin-top: 23px;">
                        <lightning-button label="Search" onclick={doSearch}></lightning-button>
                    </div>
                </div>
                <div class="slds-col slds-size_2-of-12 slds-grid">
                    <div class="slds-col_bump-left" style="margin-top: 23px;">
                        <lightning-button label="Refresh & Search" onclick={doRefreshSearch} variant="brand"></lightning-button>
                    </div>
                </div>
                <div class="slds-col slds-size_2-of-12 slds-grid">
                    <div class="slds-col_bump-left" style="margin-top: 23px;">
                        <lightning-button label="Flush Cell" onclick={flushCell} variant="destructive"></lightning-button>
                    </div>
                </div>
                <div class="slds-col slds-size_2-of-12 slds-grid">
                    <div class="slds-col_bump-left" style="margin-top: 23px;">
                        <lightning-button label="Flush Block" onclick={flushBlock} variant="destructive"></lightning-button>
                    </div>
                </div>
                <div class="slds-col slds-size_2-of-12 slds-grid">
                    <div class="slds-col_bump-left" style="margin-top: 23px;">
                        <lightning-button label="Flush All" onclick={flushAll} variant="destructive"></lightning-button>
                    </div>
                </div>
            </div>

            <table aria-multiselectable="true"
              class="slds-table slds-no-cell-focus slds-table_bordered slds-table_edit slds-table_fixed-layout slds-table_resizable-cols"
              role="grid" style="width: 100%;">
                <thead>
                    <tr class="slds-line-height_reset">
                        <th class="slds-is-resizable slds-is-sortable">
                            <div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
                                <div class="slds-truncate slds-p-right_xx-small">Name</div>
                            </div>
                        </th>
                        <th class="slds-is-resizable slds-is-sortable">
                            <div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
                                <div class="slds-truncate slds-p-right_xx-small">Phone</div>
                            </div>
                        </th>
                        <th class="slds-is-resizable slds-is-sortable">
                            <div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
                                <div class="slds-truncate slds-p-right_xx-small">Email</div>
                            </div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <template for:each={contacts} for:item='con'>
                        <tr key={con.Id}>
                            <td role="gridcell" style="white-space: normal;word-break: break-all;">
                                {con.Name}
                            </td>
                            <td role="gridcell" style="white-space: normal;word-break: break-all;">
                                {con.Phone}
                            </td>
                            <td role="gridcell" style="white-space: normal;word-break: break-all;">
                                {con.Email}
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>

        </div>
    </div>
</template>

contact_search.js

import { LightningElement, track } from 'lwc';
import getContacts from '@salesforce/apex/ContactSearchController.getContacts';
import flashm from 'c/flashm';

export default class Contact_search extends LightningElement {
    @track contacts = [];
    
    doSearch(){
        let searchStr = this.template.querySelector('.contact-name').value;
        this.contacts = [];

        flashm.invoke( 'getUserFullInformation' , getContacts, {name: searchStr} )
        .then( (data) =>{
            this.contacts = data;
        }).
        catch( (error) =>{
            console.log('Error: '+JSON.stringify(error) );
        });
    }

    doRefreshSearch(){
        let searchStr = this.template.querySelector('.contact-name').value;
        this.contacts = [];

        flashm.invoke( 'getUserFullInformation' , getContacts, {name: searchStr}, true )
        .then( (data) =>{
            this.contacts = data;
        }).
        catch( (error) =>{
            console.log('Error: '+JSON.stringify(error) );
        });
    }

    flushCell(){
        let searchStr = this.template.querySelector('.contact-name').value;
        flashm.flushCell( 'getUserFullInformation' , {name: searchStr} );
    }

    flushBlock(){
        flashm.flushBlock( 'getUserFullInformation' );
    }

    flushAll(){
        flashm.flushAll();
    }
}

contact_search.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="contact_search">
    <apiVersion>46.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
      <target>lightning__AppPage</target>
      <target>lightning__UtilityBar</target>
    </targets>
</LightningComponentBundle>

ContactSearchController.cls

public with sharing class ContactSearchController {
    
    @AuraEnabled
    public static List<Contact> getContacts(string name){
        return [Select id,Name,phone,Email from Contact WHERE name like : '%'+name.trim()+'%' ];
    }
}