Forem: Akshay Sharma

Building High-Performance Infinite Lists in React

Akshay Sharma — Tue, 04 Jun 2019 03:55:38 +0000

Internet is filled with products using infinite scrolling. Infinite scroll makes the consumption of information very easy and highly addictive. Products with timelines or feeds like Twitter, Instagram, etc. are best suited for infinite scrolls.

Implementing the infinite scrolling in JavaScript can be challenging. Especially, when your feed has thousands of items, the problem gets more complex. Let's look at some of the problems.

Problems

Slow rendering as the browser has to repaint all the elements in case of resizing
Laggy scrolling
Finally, thousands of DOM elements on your page can crash the browser

Most devices refresh their screens 60 times a second. Each of those frames has a budget of just over 16ms (1 second / 60 = 16.66ms). When you fail to meet this budget the frame rate drops, and the content shakes on screen. You can check the refresh rate for your webpage using FPS meter available in Chrome. FPS is definitely going to be lower than 60 when you scroll on a page with so many DOM elements.

What can we do?

We'll have to reduce the elements and handle the scroll issues. These are some basic ideas to resolve these issues:

DOM Recycling: The idea is to render only the visible elements. We can reuse them to render the new items rather than creating new ones.
Scroll Anchoring: As there will be only 10 elements in DOM, we need to fake the scroll to give the illusion of infinite scroll.

These require a lot of calculations and corner conditions to be managed to implement it efficiently. While reading about the problems I came across react-virtualized package which has built solutions for all these and was recommended by Dan Abramov.

How does react-virtualized work?

React virtualized implements virtual rendering with a set of components that does the same thing:

They calculate which items are visible inside the area where the list is displayed.
They use a container with relative position and absolute position the children elements inside of it by changing its width, height, top and left properties.

We are going to use the following components to render a list with dynamic width and items of dynamic width and height:

List: This component renders a list of elements. It takes care of virtualizing the list and rendering only visible items.
CellMeasurer: It automatically measures a cell's contents by temporarily rendering it in a way that is not visible to the user. Specify a fixed width to measure the dynamic height (or vice versa).
CellMeasurerCache: It stores CellMeasurer measurements and shares them with the parent (List).
AutoSizer: It is a high-order component that automatically adjusts the width and height of a single child.
InfiniteLoader: It manages just-in-time fetching of data as a user scrolls up or down in a list. It also caches the list data to avoid fetching it again while the user is scrolling.

Let's use them to build a real list.

You can go through the docs to understand the working of these components and the meaning of the different props available.

Caching Issues

If you are re-rendering the list based on some state changes, you might face issues because of the caching done by CellMeasurerCache and InfiniteLoader. The cache can be cleared using in-built methods.

// Reset cached measurements for all cells.
this.cellMeasurerCache.clearAll();

// Reset any cached data about already-loaded rows
this.infiniteLoaderRef.resetLoadMoreRowsCache();

Conclusion

I hope this helped you in understanding the problems with implementing large lists and how to deal with them. It provides a basic understanding of react-virtualized package. The package provides lots of other components to solve problems of large and dynamic tables, grids, etc. Brian Vaughn also recommends react-window as a possible light-weight alternative.

Share your use cases and issues you have faced with infinite lists in the comments. Thanks!

Progressive Web Apps: Custom Splash Screen

Akshay Sharma — Mon, 22 Oct 2018 17:12:34 +0000

The splash screen appears instantly when your app starts up. If your app is heavy, it might take a few seconds to load the app depending on the device's configurations. By default, both Android and iOS show a plain white screen as the splash screen for web apps. It is always better to customize the splash screen to provide a complete app experience.

In order to change the splash screen of your progressive web app, you must use the configure few properties for your app to provide complete native look and feel.

Android

Chrome for Android automatically shows your custom splash screen as long as you meet the following requirements in your web app manifest:

The name property is set to the name of your PWA.
The background_color property is set to a valid CSS colour value.
The icons array specifies an icon that has 512px by 512px size icon.
The icon exists and is a PNG.

It will also show the app name below the icon using the name property. The text colour cannot be customized. It is contrast based according to this post.

iOS

iOS does not support a similar method of automatically generating a splash screen. Instead, you need to provide splash screens tailored for each iOS device using the apple-touch-startup-image HTML meta tag. We can use the media attribute and media queries to load device specific images.

<link rel="apple-touch-startup-image" href="assets/splashscreens/iphone5_splash.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" />
<link rel="apple-touch-startup-image" href="assets/splashscreens/iphone6_splash.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" />
<link rel="apple-touch-startup-image" href="assets/splashscreens/iphoneplus_splash.png" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)" />
<link rel="apple-touch-startup-image" href="assets/splashscreens/iphonex_splash.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" />
<link rel="apple-touch-startup-image" href="assets/splashscreens/ipad_splash.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" />
<link rel="apple-touch-startup-image" href="assets/splashscreens/ipadpro1_splash.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" />
<link rel="apple-touch-startup-image" href="assets/splashscreens/ipadpro2_splash.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" />

You can generate images for all the resolutions using this tool by Appsco. They also have an option where you can use only your logo and a background colour to generate these images.

Keep your app's splash screen updated with the different sizes of iOS devices available here.

Live Demo

Open the app and click on "Add to Home Screen" - Headlines App

References

Android: Custom Splash Screen

Safari: Specifying a Launch Screen Image

Progressive Web Apps: Configure Status Bar

Akshay Sharma — Sun, 21 Oct 2018 10:21:15 +0000

Progressive Web Apps (PWA) are starting to pick up a lot of momentum and are getting adopted by major tech companies including Uber, Twitter, Instagram and many others. While developing my first PWA, supporting cross-platform custom status bar proved to be a bigger challenge than expected. This is a quick post to help others quickly customize PWA status bar that works across both Android and iOS devices, including devices with the notch.

In order to change the status bar at the top of the screen (which usually displays the time and battery status) of your progressive web app, you must use the configure few properties for your app to provide complete native look and feel.

Android

Chrome, Firefox and Opera allow you to define the colour of the status bar using the meta tags.

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#014473">

Example:

iOS

Unfortunately, the number of ways to customize the status bar for iOS devices are fairly limited, but Apple offers the apple-mobile-web-app-status-bar-style meta tag to customize status bar. There are three distinct settings available: default, black, and black-translucent. The default value is default.

This meta tag has no effect unless you add apple-apple-mobile-web-app-capable meta tag.

<meta name="apple-mobile-web-app-capable" content="yes">

Default

The default setting has a white background with black text and symbols.

<meta name="apple-mobile-web-app-status-bar-style" content="default">

Example:

Black

The black setting has a black background and black text and symbols, making it appear completely black.

<meta name="apple-mobile-web-app-status-bar-style" content="black">

Example:

Black-translucent

The black-translucent setting has white text and symbols. It will take the same background colour as the body of your web app.

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

body {
    background-color: #014473;
}

Example:

Live Demo

Headlines App

References:

Android Support

Safari HTML Reference

Safari Web Content Guide

Demo App - Github