Lightning Web Components* — *Warning: Speeds May Vary

Everyone wants their components to be fast. But not everyone understands why they’re slow. Here are 4 things I learned designing a new timeline component

Photo by twinsfisch on Unsplash
Brush and zoom capabilities of D3.js

1 — Avoid Server Round-Trips

Database Operations

SELECT Account.Name,(SELECT Contact.Name FROM contacts), (SELECT Case.Subject FROM cases),(SELECT <Object>.<Field> FROM <RelationshipName>) FROM Account
<lightning-record-form
record-id="001XXXXXXXXXXXXXXX"
object-api-name="Account"
layout-type="Compact"
columns="2"
mode="readonly">

Filtering in Browser

Caching

Caching options and decisions

2 — Browsers have limits

Avoid Large Complex Layouts

Bad: This looks great but each shape adds to the complexity of the layout
Better: A compromise. It removes unnecessary shapes.
Bad: Plotting individual records will require a large complex layout for large numbers of records
Better: Aggregating records by week reduces complexity for large data volumes (one bar per week vs one circle per record)

Avoid Layout Thrashing and Forced Synchronous Layouts

function resizeParentDivsBasedOnTimeline() {

// Puts the browser into a read-write-read-write cycle causing layout thrashing.
for (var i = 0; i < parentDivs.length; i++) {
parentDiv[i].style.width = timeline.offsetWidth + 'px';
}
}
// Read timeline width first.
var timelineWidth = timeline.offsetWidth;

function resizeParentDivsBasedOnTimeline() {
for (var i = 0; i < parentDivs.length; i++) {
// Now write.
parentDiv[i].style.width = timelineWidth + 'px';
}
}

3 — Salesforce has limits

Governor limits and mitigation strategies. Make sure you’ve considered them in your designs.

4— Avoid blank screens

Stenciled timeline design shown when loading

Summary

Resources

Developer Advocate @ MuleSoft || Interested in solving unique challenges using different cloud service providers || All opinions are mine.