Lazy loading is a technique for lowering memory consumption and, possibly, processing time. This technique delays the loading of data until the moment when it's actually needed in the UI. For example, if you have a Grid component with, say 10,000 rows, only a bunch of them are visible at a given time. Loading the full set of 10,000 rows might be a waste of resources. The idea behind lazy loading is the same as the behavior of a lazy person: if you delay doing something until the last moment, you will end up saving time if, for some reason, it turns out that you don't have to do the task anymore. It's the same in a web application. For example, if a user leaves certain views without scrolling through the data, the application won't need to load anything other than a few visible items, saving it from having to load potentially thousands or millions of items from the data source; something that could become a serious problem when many users are on the same view at the same time.

In this chapter, we will discuss how to implement lazy loading with the Grid component. However, the same principles apply to any other kind of UI components that show data from large datasets.

This chapter covers the following topics:

• Adding lazy loading capabilities to backend services
• Implementing a DataProvider with lambda expressions
• Filtering
• Ordering
• Infinite lazy loading