UI Performance Optimization

9/22/2022

This post details the development of iOS widgets for Shopify, focusing on technical challenges and solutions. It covers the decision to use native SwiftUI over React Native due to memory limitations and WidgetKit's architecture. It explains the strategy for fetching data independently from the main app, using a short-lived cache to avoid redundant network calls and session kick-outs, and implementing a flexible decoder strategy for handling various metric shapes. The post also discusses building a single UI view to support multiple widget sizes and the use of Reportify and ShopifyQL for querying business analytics data.

8/17/2022

Introduced FlashList, a performant React Native list component, as a drop-in replacement for FlatList. FlashList addresses performance issues like frame drops and blank cells by recycling views and optimizing memory utilization. It also adds new features such as `getItemType`, flexible column spans, and performance metrics for developers.

6/1/2022

This post introduces the use of the Polaris design system for building forms within the Shopify admin. It details how to leverage specific Polaris React components (Form, FormLayout, TextField, Page, Card) to construct a functional form with input fields and navigation. It also addresses the essential requirement of wrapping the application with the AppProvider component for Polaris to function correctly and provides insights into the generated HTML and React component structure.

3/15/2022

This post details the creation of the Polaris Viz React library to address inconsistencies in data visualization across Shopify's admin interfaces. It introduces a `theme` prop for chart components to apply default light/dark themes and a `PolarisVizProvider` that allows consumers to define custom themes. Helper functions `createTheme` and `createThemes` are provided to ensure complete theme objects and maintain default themes. The library also allows individual data series to override theme colors.

11/4/2021

This post introduces and explains Google's Core Web Vitals (LCP, FID, CLS) as critical metrics for user experience and search engine ranking. It details the definitions, measurement thresholds, and implications of each metric, and discusses the difference between lab and field data collection for performance analysis.

9/2/2020

Introduced the Restyle library, an open-source React Native styling system built with TypeScript. Detailed best practices for styling workflows including creating a design system (spacing, color, typography), defining a theme object, using React's Context API for dynamic theming, creating reusable Box and Text components that map properties to theme values, implementing responsive style properties based on breakpoints, and enforcing type safety with TypeScript.

9/20/2019

This post details specific techniques for improving UI performance in the Shopify admin's Marketing section. It introduces methods for assessing current performance using real devices and Chrome Developer Tools, including React-specific profiling. Key contributions include prioritizing essential components and data, memoizing date formatting utilities to reduce render times from ~64.7ms to ~0.5ms, deferring non-essential components like ImagePicker, and prefetching resources based on user interaction (e.g., hover). It also emphasizes improving the loading experience with skeleton content and adding headings to enhance stability and user perception.

10/17/2018

This post details the technical implementation of a responsive, readable, contextual, and accessible data table component in React. It addresses challenges with horizontal scrolling by introducing a scroll container, maintains context by fixing the first column using absolute positioning, and solves the resulting cell height misalignment by implementing state management for cell heights, using refs to access DOM elements, calculating maximum cell heights per row, and dynamically applying these heights. It also includes handling window resize events to ensure dynamic height adjustments.

5/24/2017

Introduced the use of the `<link rel="preload">` directive in the `<head>` element to instruct browsers to download critical resources, such as fonts, earlier in the page load process. This change reduced the time-to-text-paint by 1.2 seconds (50%) and eliminated the Flash of Invisible Text (FOIT) by allowing fonts to download concurrently with CSS, rather than waiting for the DOM and CSSOM to be generated. This approach was chosen over third-party libraries like Google Font Loader or the CSS Font Loading API due to its simplicity and lack of external dependencies.