Using a component-based architecture can have benefits, but it is not a silver bullet. Like most decisions, there are tradeoffs to be considered. 

Consider a simple html table. If you follow the advice of most Lightning tutorials, you might start thinking about a component for each cell, row, header, and one for the table itself. That will make the code more modularized, but it could also have a negative impact on performance — especially if you need to add hundreds or even thousands of rows to your table.

Each component adds event listeners to your page. As the number of listeners grows, just the simple act of scrolling your table can slow to a crawl. You could try skipping the multitude of components and just add elements to the DOM via your Javascript controller, but even adding that many raw DOM elements can also swell your resource usage and heavily impact the performance of your page, especially if the page is complex.

Developers can solve these challenges by creating a virtual scrolling list. This element has a scrollable list that appears to contain thousands of DOM elements, but in reality dynamically creates and destroys elements. That way, you only incur overhead for the elements the user can actually see.

You can write your own implementation, or you can leverage an existing solution like Virtual List, which is written in plain Javascript with no dependencies and is available under the very permissive MIT License.

It only takes a little work to integrate this library into your Lightning controller. Check out this simple example:

({
init: function (component, event, helper) {
helper.getTheThings(component, event, helper).then(function (things) {
 
var vlistParent = component.find("parent").getElement();
vlistParent.innerHTML = '';
var list = new VirtualList({
h: 350, //container height
itemHeight: 25,
totalRows: things.length,
generatorFn: function (row) {
var el = document.createElement("div");
el.innerHTML = row + " <a target=\"_blank\" href=\"/" + things[row].Id + "\" >" + things[row].Name + "</a>";
return el;
}
});
list.container.classList.add("container");
vlistParent.appendChild(list.container);
}).catch(function(errors){
console.log('there were some errors:', errors);
});
}
})

The bottom line is that a completely component-based architecture can be wonderful, but will not work for every use case, especially when your resources are constrained. If you need to present a lot of data for your users to peruse, consider virtualized scrolling to keep your performance as high as possible by limiting the amount of Lightning components and DOM elements created by your application. Happy scrolling!


Need help planning your app’s architecture? CodeScience is here. Learn more at www.codescience.com/services.