The lazy-loaded data grid has been a key feature of desktop applications, and is slowly making its way into web applications. Lazy-loading enables clients to view large amounts of data by initially loading only a small portion of the results. As the client scrolls toward the bottom of the screen, the next set of data is automatically loaded from the server.
While similar to paging (the numbered pages at the bottom of search results, such as those from Google), lazy loading is easier and more straightforward to use. The lazy loading technique also helps reduce load on the server, by not requiring as much data to be processed at a time. This is especially relevant if the client is often only concerned with the first few results, and the large amount of supplemental data is ignored.
Since enterprise applications are often processing hundreds of thousands to billions of records, lazy-loading is absolutely essential for application performance. Unfortunately, the lazy-loading technique is not inherently built into any browser or HTML specification.
Many of the frameworks also lack built-in support for lazy loading. PHP is void of most front-end tools, and although ASP.NET can theoretically support it, the implementation requires significant customization. Rails has gems that may or may not work, and Django has similar hacked solutions. This type of task often requires front-end AJAX coding outside of a comprehensive framework.
Two libraries that make this job significantly easier are the client-side templating tools Mustache.js and its cousin Handlebars.js. Both libraries allow the user to attach AJAX JSON datasets to HTML elements. Once the user navigates to the end of the table, the library can automatically query the server for additional rows, and add those to the bottom of the table. Although both Mustache and Handlebars can do the job, Handlebars is the more flexible and adept of the two templating frameworks. Since they are both front-end libraries, the tools can be integrated with any of the other major web platform back-ends.
Although lazy-loaded components take a little extra work, the resulting application often provides a much more compelling interface. Join us in the next part of this series, where we investigate solutions for integrated user authentication.
Written by Andrew Palczewski
About the Author
Andrew Palczewski is CEO of apHarmony, a Chicago software development company. He holds a Master's degree in Computer Engineering from the University of Illinois at Urbana-Champaign and has over ten years' experience in managing development of software projects.
Google+
