Skip to content

stereobooster/guide-to-async-components

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

13 Commits
Β 
Β 
Β 
Β 

Repository files navigation

Guide To Async Components

JavaScript async components

Also known as code splitting, dynamic import (TC39 proposal), "chunks" (which are loaded on demand), "layers", "rollups", or "fragments".

Async component (in React) is a technique (typically implemented as a Higher Order Component) for loading components with dynamic import.

See also: Redux modules and code-splitting, lazy loading guidance

Solutions

Strategies

  • Routes to chunks - separate into "chunks" based on routes, possible to do automatically. Example: Next.js.
  • Components to chunks - separate components as "chunks". Example: react-loadable.
  • πŸ¦„ UI tip (components to chunks): show spinner if content not loaded, but do not start spinner earlier then 200ms
  • πŸ¦„ UI tip (routes to chunks): do not show spinner in the center of your page between the content switch, use progress line in the top, like YouTube does. Example: PACE.
  • ⚑ Speed tip: prefer component placeholder over spinner if possible
  • ⚑ Speed tip (routes to chunks): you can preload chunk (e.g. next page) on link hover
  • πŸ’£ Caveat (components to chunks): make sure you wait till all components loaded in case of prerendered pages (SSR or snapshots)
  • 🎱 Trick (components to chunks): some components can be skipped in case of SSR, for example, Mapbox map

Placeholders

See also:

Media: images, video

Strategies

  • Lazy load - load images only when they appear on the screen. Use Intersection Observer API or react-waypoint
  • Load on demand. Useful for slow networks or big files, like video or gif.
  • πŸ¦„ UI tip (load on demand): Use download ⬇️ icon for images and play ▢️ icon for animations.
  • πŸ¦„ UI tip: Show error state when image load failed, so the user can click to retry load. Use error ⚠️ or repeat πŸ” icons
  • πŸ¦„ UI tip: Do not try to download the image if the device is offline and image not in the cache. Use cloud off 🚫 icon
  • πŸ’£ UI caveat: make sure that icon and background are in good contrast, especially if you use not constant placeholders. For example, in case of solid color placeholder, you can make sure you pickup contrast color (this what Twitter does) or use a semitransparent gray overlay for bright backgrounds.
  • ⚑ Speed tip: always use width and height. Use image-size, probe-image-size
  • ⚑ Speed tip: use small placeholders (plus width and height)
  • ⚑ Speed tip: optimize images. See essential image optimization
  • ⚑ Speed tip: use MP4 without sound instead of GIF images
  • ⚑ Speed tip: provide WebP images instead of JPG images

See also:

Placeholders

  • Constant placeholder - do not use it
  • Solid color or dominant color - fastest and simplest placeholders. Use color-thief to get color info. Used by Twitter, Google, Pinterest
  • LQIP or Low Quality Image Placeholder or Progressive image loading or "Blur-up" - better for perceptual speed than dominant color, but also have a bigger weight. Use lqip or sqip. Used by Facebook and Medium.
  • SVG traced images. There is plugin for Gatsby.

See also:

Responsive (resize) strategies

See also:

Solutions

Resizing images on the fly

Examples from real world

AWS Lambda + S3

Golang + FaaS

Go is the perfect fit for this kind of task. AWS Lambda now supports Go. Also you can use Go with Google Cloud functions.

Infinite scroll

A special case of async components. Example: react-virtualized