Point of Sale performance

These guidelines apply to POS UI extensions.

Testing your POS UI extension across different devices and scenarios is crucial for delivering a reliable, high-quality experience to all merchants. By following these best practices, you can ensure your extension performs well in diverse retail environments, regardless of the hardware choices merchants make for their business.

This guide describes how to test and optimize your extensions for maximum performance and compatibility.

Anchor to Best practices for performance testingBest practices for performance testing

Anchor to Test across multiple device typesTest across multiple device types

To ensure that your extension works well for all merchants, test on a variety of devices:

• Tablets: Test on iOS and Android tablets, of different screen sizes.

• Mobile phones: Test on various models, including both high-end and entry-level devices.

• Different hardware generations: Test on older devices when possible.

  This approach ensures your extension provides a consistent experience, regardless of the hardware a merchant chooses for their business needs.

Anchor to Test with realistic data volumesTest with realistic data volumes

Extensions that perform well with small test stores may encounter issues in production environments with larger data sets. So, it's important to test realistic scenarios. For example:

• Set up test stores with realistic product catalogs.
• Include a substantial number of orders and inventory items.
• Test with complex product configurations (variants, options, etc.).
• Simulate operational workflows at ideal speed (aim for < 2 second response times even when processing complex operations).

Anchor to Test alongside other extensionsTest alongside other extensions

Merchants often use multiple extensions simultaneously. Your extension should perform well even when sharing resources with others. To test this, do the following things:

• Install other POS extensions alongside yours during testing.
• Test various combinations of extensions running simultaneously.
• Verify that your extension maintains performance when others are active.

Anchor to Monitor resource usageMonitor resource usage

To monitor your extension's resource consumption, use the development tools for the platform your testing.

Anchor to iOS testingiOS testing

• Use Xcode's Instruments to monitor memory usage and performance.
• Pay attention to Memory Graph and Leaks instruments.
• Monitor CPU usage during different operations.

Anchor to Android testingAndroid testing

• Use Android Studio's Profiler to monitor memory, CPU, and network usage.

• Check for memory leaks using the Memory Profiler.

• Monitor performance during different user interactions.

  One way to determine if your extension is approaching a device's memory limit is by opening the chrome://inspect and monitoring the Memory tab. When this tab is open, the DevTools will automatically pause extensions that approach the memory limit. If you encounter this pause, refactor your extension to lower its memory usage.

  Note: When monitoring memory usage in Chrome DevTools, watch for automatic pauses in your extension's execution, which indicate you're approaching memory limits. Look for memory-related warnings in the console and memory graph trends in the Memory tab.

Anchor to Optimizing for all devicesOptimizing for all devices

POS UI extensions need to perform well across various devices with different capabilities, from high-end tablets to entry-level mobile phones. The following optimization strategies will help ensure your extension delivers a smooth, responsive experience regardless of the hardware it runs on.

Anchor to Efficient resource managementEfficient resource management

Managing device resources efficiently is critical for ensuring your POS UI extension remains responsive and stable, especially on devices with limited capabilities. Implement these strategies to optimize resource usage:

• Lazy load components that aren't immediately visible.
• Release resources when they're no longer needed.
• Minimize recurring operations like intervals, subscriptions, and effect hooks that consume CPU and memory.
• Optimize images for size and resolution.

Anchor to Choose the right components for the jobChoose the right components for the job

Selecting appropriate components and implementation strategies can significantly impact your extension's performance, particularly on resource-constrained devices. Use these techniques to ensure optimal performance:

• The List component is significantly more memory-efficient than ScrollView for long lists on all platforms.

• ScrollView renders all items at once, while List only renders items currently visible.

• This difference is especially important on devices with limited memory.

  Optimize expensive calculations:

• Cache or memoize functions that perform complex calculations on data.

• Move expensive operations out of rendering logic.

Anchor to Responsive UI designResponsive UI design

Creating a responsive UI that adapts to different screen sizes and device types ensures your extension provides a consistent and optimized experience across the diverse hardware used in retail environments. Follow these guidelines for responsive design:

• Use the Figma UI kit to design your extension: Figma UI kit.
• Design for different screen sizes from the start.
• Use relative measurements rather than fixed pixel values.
• Test layouts on both small and large screens.
• Ensure touch targets are appropriately sized on smaller screens.
  • Use a minimum size of 44×44 pixels for all interactive elements.
  • Maintain at least 8 pixels of space between touch targets.
  • Use the Button component for critical actions.

Anchor to Memory considerationsMemory considerations

Efficient memory management is crucial for POS extensions, as excessive memory usage can lead to crashes, freezes, and poor performance on devices with limited RAM. Implement these strategies to optimize memory usage:

• Implement pagination for large data sets.
• Clear cached data when it's no longer needed.
• Monitor memory usage during development and testing.

Anchor to Best practices for POS Extension navigationBest practices for POS Extension navigation

Proper navigation implementation is essential for maintaining performance and preventing memory issues in your POS UI extension. Follow these navigation best practices:

• Use the Navigation API efficiently

  • Leverage the POS UI extension's Navigation API for predictable screen management.
  • Understand the navigation lifecycle to prevent memory issues with screens that remain in memory.

• Manage navigation state carefully

  • Use the appropriate navigation method based on your use case.
  • Be mindful that each screen pushed to the stack consumes additional memory.
  • Consider component-based approaches for simple UI changes instead of new screens.

Anchor to Optimize API calls and data fetchingOptimize API calls and data fetching

Efficient network operations are critical for maintaining responsive performance in POS environments where connectivity may vary. Implement these strategies to optimize your API interactions:

Anchor to Batch operations when possibleBatch operations when possible

Combining multiple operations into a single request reduces network overhead and improves response times. Consider these approaches:

• Instead of making multiple sequential API calls, batch operations together.
• Use bulk operations APIs when available (e.g., bulkSetLineItemDiscounts instead of individual updates).
• Avoid chains of dependent network requests that block each other.
• Consider implementing a queue system for operations that must happen in sequence.

Anchor to Implement efficient data fetching patternsImplement efficient data fetching patterns

Smart data fetching strategies can significantly improve perceived performance. Implement these patterns:

• Cache responses when appropriate to avoid redundant network requests.
• Use pagination when fetching large datasets.
• Consider implementing a stale-while-revalidate pattern for data that changes infrequently.

Anchor to Handle network operations gracefullyHandle network operations gracefully

Robust error handling and user feedback are essential for a good experience in fluctuating network conditions:

• Implement proper loading states to provide feedback to users.
• Add comprehensive error handling for all network requests.
• Set appropriate timeouts to prevent hanging operations.
• Include fallback mechanisms when network operations fail.

Anchor to Optimize component lifecycleOptimize component lifecycle

Proper component lifecycle management prevents performance degradation over time and ensures consistent behavior:

Anchor to Manage subscriptions carefullyManage subscriptions carefully

Data subscriptions can cause performance issues if not managed properly:

• Be cautious with data subscriptions that may trigger frequent UI updates.
• Consider implementing debouncing or throttling for subscription updates.
• Use appropriate caching techniques to prevent unnecessary recalculations.

Anchor to Minimize effect dependenciesMinimize effect dependencies

Side effects can cascade and cause unexpected performance problems:

• Keep side effects tightly scoped to prevent cascade updates.
• Avoid complex state management patterns that trigger cascading effects.
• Consider using an appropriate state management approach for your framework.

Anchor to Prevent race conditionsPrevent race conditions

Asynchronous operations can lead to race conditions that cause unexpected behavior and performance issues:

• Avoid using multiple state variables to track related asynchronous operations.
• Implement proper cancellation for asynchronous operations when components unmount.

Anchor to Common performance issues and solutionsCommon performance issues and solutions

Even with careful optimization, you may encounter specific performance challenges. Here are some common issues and their solutions:

Anchor to Slow initial loadSlow initial load

If your extension takes too long to initialize:

• Defer non-essential initialization.
• Implement progressive loading.
• Minimize dependencies.

Anchor to UI lag during interactionUI lag during interaction

If your extension's UI feels sluggish:

• Move heavy processing off the main thread where possible.
• Optimize render cycles.
• Reduce unnecessary UI updates.
• Simplify complex UI elements.

Anchor to High memory usageHigh memory usage

If your extension consumes excessive memory:

• Release unused resources.
• Use more efficient data structures.
• Consider implementing pagination.

Anchor to Testing on entry-level devicesTesting on entry-level devices

Some retailers rely on entry-level devices or previous generation hardware. Testing on these devices ensures your extension is accessible to all merchants. For example:

• Performance expectations: Understand that processing speeds and memory may be more limited.

• Resource efficiency: Optimize your extension to use minimal resources.

• Graceful degradation: Ensure core functionality works well, even if some enhanced features are simplified.

• Response time: Pay special attention to maintaining responsive interactions.

  By testing on various device types you ensure your extension is accessible to the widest possible merchant base.