Forem: Crypto Geek

Lazy Loading Collections in JavaScript

Crypto Geek — Thu, 12 Jan 2023 15:54:55 +0000

Lazy loading is a design pattern where a collection of items is only loaded when it is needed, rather than all at once. This can be useful for improving the performance and efficiency of a JavaScript application, particularly when working with large collections of data.

There are several libraries and techniques available for implementing lazy loading in JavaScript, such as the lazy.js library and the IntersectionObserver API.

Lazy Loading Collections Example

Here is an example of how to implement lazy loading using the lazy.js library:

const lazy = require('lazy.js');
const largeCollection = lazy.range(1, 1000000);
const lazyLoadedCollection = largeCollection.lazy();
console.log(lazyLoadedCollection.take(10).toArray());

In this example, the largeCollection variable contains a range of 1 million numbers, but it is wrapped in the lazy() function provided by the lazy.js library, creating a lazy-loaded collection. The take(10) method is used to retrieve the first 10 elements of the collection, and the toArray() method is used to convert them into an array.

Another example is using the IntersectionObserver.

const images = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});
images.forEach((image) => {
  observer.observe(image);
});

In this example, the querySelectorAll method is used to select all img elements with a data-src attribute. An IntersectionObserver is then created to watch for when each image comes into view. As soon as an image comes into view, the src attribute is set to the value of the data-src attribute, loading the image and unobserving it.

You can also implement lazy loading collections with filters in Javascript.

Pros of Lazy Loading

There are several advantages to using lazy loading in JavaScript:

Improved performance: Lazy loading allows you to only load the data that is currently needed, which can significantly improve the performance of your application, especially when working with large collections of data.
Reduced memory usage: By only loading the data that is needed, lazy loading can also help to reduce the amount of memory used by your application, which can lead to better overall performance.
Better user experience: Lazy loading can also improve the user experience by reducing the amount of time it takes for the page to load, and by only loading the content that is currently visible to the user.
Reduced network traffic: If your application retrieves data from a remote server, lazy loading can also help to reduce the amount of network traffic and improve the responsiveness of the application.
Better code organization: Lazy loading can also make your code more organized by loading data and components only when they are needed, which can make it easier to maintain and understand the code.

Cons of Lazy Loading

While lazy loading can offer many benefits, there are also some potential downsides to consider:

Increased complexity: Implementing lazy loading can add complexity to your code, which can make it more difficult to understand and maintain. This can be especially true if you are using a third-party library or API to implement lazy loading, as it may require additional setup and configuration.
Increased development time: Implementing lazy loading can also take more time to develop, as you will need to ensure that your data is loaded correctly and at the right time.
Limited browser support: Some of the JavaScript libraries or APIs used for implementing lazy loading may not be supported by all browsers, which can make it difficult to ensure that your application works correctly across all platforms.
User confusion: Lazy loading can cause confusion for some users, as the page may not appear to be fully loaded or may not have all the information they need at first glance.
Additional server load: Lazy loading can cause more requests to be sent to the server, as the data is loaded in chunks, which can increase the server load and cause some additional latency.

Updating Record in Salesforce With Mulesoft

Crypto Geek — Mon, 09 Jan 2023 05:09:35 +0000

In this tutorial, we are going to build a simple mulesoft api that updates an account record in salesforce.

This article is written with an assumption that you have a basic knowledge of Mulesoft, Salesforce and also the required access to these applications.

We will follow the below steps to create a Mulesoft API that updates record in salesforce.

Create a Mule API
Configure salesforce connector
Create Mule Flow
Test the API

Create a Mule API

The first step is to create a new mule project in the Anypoint Studio tool. Follow the below steps to create a new mule project.

Download and install the Anypoint studio on your PC.
Open the the studio
On the toolbar, click File -> New -> Mule Project.
Enter the project name as sfdc-update

Configure Salesforce Connector

Lets add the salesforce connector to this mule project. Open the pom.xml file and add the following dependency.

<dependency>
  <groupId>com.mulesoft.connectors</groupId>
  <artifactId>mule-salesforce-connector</artifactId>
  <version>10.13.0</version>
  <classifier>mule-plugin</classifier>
</dependency>

Once you save the pom file, Anypoint studio will connect to the maven/mule exchange and downloads the required jar files.

Once the salesforce connector is added to your application, its time to create a connection to the salesforce.

Next, open the sfdc-update.xml file and go to the configuration XML tab. Add the following code between the xml tags.

<salesforce:sfdc-config name="Salesforce_Config" doc:name="Salesforce Config" doc:id="0e7bcc62-c0ba-4af1-8f3b-23fd83a2ee06" >
        <salesforce:basic-connection username="sfdcUser" password="sfdcPassword" securityToken="sfdcToken" url="sfdcURL" />
    </salesforce:sfdc-config>

Here replace sfdcUser, sfdcPassword, sfdcToken and sfdcURL with your salesforce credentials.

Create Mule Flow

Create a mule flow using the following components.

Flow
Http Listener
Transform Message
Salesforce update component

The below code shows the complete mule flow for updating record in salesforce.

<?xml version="1.0" encoding="UTF-8"?>

<mule xmlns:ee="http://www.mulesoft.org/schema/mule/ee/core" xmlns:http="http://www.mulesoft.org/schema/mule/http"
    xmlns:salesforce="http://www.mulesoft.org/schema/mule/salesforce"
    xmlns="http://www.mulesoft.org/schema/mule/core" xmlns:doc="http://www.mulesoft.org/schema/mule/documentation" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.mulesoft.org/schema/mule/core http://www.mulesoft.org/schema/mule/core/current/mule.xsd
http://www.mulesoft.org/schema/mule/salesforce http://www.mulesoft.org/schema/mule/salesforce/current/mule-salesforce.xsd
http://www.mulesoft.org/schema/mule/http http://www.mulesoft.org/schema/mule/http/current/mule-http.xsd
http://www.mulesoft.org/schema/mule/ee/core http://www.mulesoft.org/schema/mule/ee/core/current/mule-ee.xsd">
    <salesforce:sfdc-config name="Salesforce_Config" doc:name="Salesforce Config" doc:id="0e7bcc62-c0ba-4af1-8f3b-23fd83a2ee06" >
        <salesforce:basic-connection username="sfdcUser" password="sfdcPassword" securityToken="sfdcToken" url="sfdcURL" />
    </salesforce:sfdc-config>
    <http:listener-config name="HTTP_Listener_config" doc:name="HTTP Listener config" doc:id="59da75a4-21be-4dc2-88dc-33ef9b0f5bd4" >
        <http:listener-connection host="0.0.0.0" port="8081" />
    </http:listener-config>
    <flow name="sfdc-updateFlow" doc:id="c66b8839-0094-45d2-bf53-6842bf00a0c2" >
        <http:listener doc:name="Listener" doc:id="9f3abfa4-e288-4427-b7f7-0728886d8dec" config-ref="HTTP_Listener_config" path="/salesforce"/>
        <ee:transform doc:name="Transform Message" doc:id="359433a3-5998-47e6-9c6b-6d6355792300" >
            <ee:message >
                <ee:set-payload ><![CDATA[%dw 2.0
output application/java
---
[
    {
        "id" : payload.id,
        "name" : payload.name
    }
]]]></ee:set-payload>
            </ee:message>
        </ee:transform>
        <salesforce:update doc:name="Update" doc:id="109eb69f-46c4-4fcf-b6c7-81a07659e9b2" config-ref="Salesforce_Config" type="Account"/>
        <ee:transform doc:name="Transform Message" doc:id="64d5e74c-d78d-4d92-9d3f-70dcd1a74863" >
            <ee:message >
                <ee:set-payload ><![CDATA[%dw 2.0
output application/json
---
payload]]></ee:set-payload>
            </ee:message>
        </ee:transform>
    </flow>

</mule>

You can read more about other salesforce DML operations here.

Test the API

It is time to test the API to whether it is working or not. Deploy the Mule API in the anypoint studio. The API by default runs on 8081 port.

Run the below curl command to test this api

curl -X POST \
  http://localhost:8081/salesforce \
  -H 'cache-control: no-cache' \
  -H 'content-type: application/json' \
  -H 'postman-token: 24367e0a-2dc4-ea67-aa9d-bab35f246053' \
  -d '{
    "id" : "001000000000ABC",
    "name" : "Dev To"
}'