Discover the List component in NativeScript

The List UI component is one of the most important components you will work with when implementing a mobile application. It is the central piece of every application which deals with data. This naturally makes it an important part of every application framework like NativeScript. A good List component will save you a lot of development time!

In the last years, when UX became an important factor in the design and implementation of applications (mobile in particular), the ListView component got several features that are now expected to be available out of the box.

I’ve spent a good deal of time implementing several Listview components myself with different teams inside Telerik and I’m glad we applied the tons of experience to the native iOS/Android list components in NativeScript.

You can see the result of our work in the cross-platform native ListView for NativeScript, which is part of the completely free UI for NativeScript package. To see it in action on your own device, simply install this app.

I will use this blog post to highlight the most important features you should expect from a list component that is a part of a robust cross-platform development application framework. A good list component can make the difference between a good framework and a runner-up one.

We can separate these features in two major sections - performance and usability.

Let's talk about performance first.

Performance: Lazy data load

“Lazy data load” also known as “load data on demand“ is a must-have feature for every respectable application framework.

Let’s say you have a list of 100,000 products in your backend that needs to be displayed on the mobile device. If you try to get all the records and display them at once you will most probably get a memory overflow exception or a very slow behavior in the best case. For each and every product a new object will be instantiated in device memory and then a new list cell will be instantiated and displayed in the ListView component.

If you do this, you probably already lost the user. Many UX tests show that there should be less than a second of time before the attention of the user is lost.

How does lazy loading data help? Instead of loading all the 100k records at once, you can instruct the list to load only the first say - 20 records and display them immediately on the screen. After that when the user scrolls the list down it will automatically request the next batch of 10 records and display them. All of this happens transparent to the user. You can choose which data exactly to show by performing filtering and sorting on the server.

See how you can use this feature in NativeScript!

Performance: Virtualization

In the above scenario if your user is scrolling a lot, there will still be a lot of data remained in memory - e.g. the old items that are already not displayed will still be kept into the device memory. To avoid this from happening, a feature called Item Virtualization should be present. At the core of this feature is the concept that only a small amount of listview rows should be ever instantiate and reside in memory. Usually this number is between 1.5 and 2 times the number of items displayed in a single view screen, or commonly 20. The exact number is of course dependent on screen size and height of every list item. When the listview component is scrolled and a particular listview item is no longer visible, the invisible item is recycled and held in a local memory cache. When a new ListView item needs to be created from a scrolling gesture, the previously cached item is used, and populated with the specific data for the new ListView item.

This allows for faster item visualization and keeps memory usage low.This topic is covered into much greater detail in the Android and iOS official documentations.

These are the major features that will make your data list scrolling fast and able to handle any amount of data.Let's see what are the User Experience features that our mobile users are already used to.

UX: Gestures

Gesture support is vital on the small mobile screen form factor.. A lot of innovation happened in the last years about how users interact with the UI.

There are several common gestures that are now de-facto standard in every native list component.

UX: Pull to Refresh

Pull to refresh is a concept that allows you to refresh the data in the listview. I believe it was first introduced in the Twitter app some years ago. After that, pull to refresh became a de-facto a standard. Pull to refresh is now available on many places in the native OS where time sensitive data is displayed.

See how to use pull to refresh in NativeScript here.

UX: Swipe left or right
A recent addition to the common gestures of ListViews in mobile applications is swipe left or right on a listview item to execute an action. It is very popular in mobile mail clients. Swiping left allows you to delete the item, swipe right marks the item as read. These are just examples of course. You can attach any custom action to the swipe gesture.

UX: Item Drag/Reorder
Another powerful gesture based concept is item reorder.

Layout options
Support for different Layout options is a must. ListView should be responsive and change its layout when viewed in portrait, landscape mode or in a larger scale factor like in a tablet.

Also depending on the data, there are more favorable options for laying out the items. For example, a wrap layout is probably the appropriate layout for a photo gallery application.

In Closing

As you can see, modern user expectations set a very high bar for User Experience in mobile applications. You can build amazing user experiences with NativeScript because you can directly use the native UI components and because we put a lot of effort to make common components lie the List very feature rich. Your applications won't need to compromise user experience for the sake of performance because NativeScript gives you direct access to the native capabilities of the device.

Enjoy full code/skills reuse and maximum native performance. This is how we think about NativeScript. This is what we deliver to you!

To see the NativeScript in action please install the app on your phone.

Like what you read? Please share it with your followers on twitter.