Merge pull request #2286 from gluestack/feat/benchmarks-v2

feat/benchmarks v2

Author: ankit-tailor

example/storybook-nativewind/.storybook/preview.js

@@ -46,6 +46,8 @@ export const parameters = {
           ],
           'Core Concepts',
           ['Accessibility', 'Universal'],
+          'Performance',
+          ['Benchmarks'],
           'Theme Configuration',
           ['Default Tokens', 'Customizing Theme', 'Dark Mode'],
         ],

example/storybook-nativewind/src/extra-components/nativewind/Progress.tsx

@@ -0,0 +1,78 @@
+import { Text, HStack, VStack, Box } from '@gluestack-ui/themed';
+import React from 'react';
+
+export function Graph({ data }: { data: any }) {
+  const colorMap: any = {
+    'gluestack-ui v1': '#0077E6',
+    'React Native': '#61dafb',
+    'gluestack-ui v2': '#eab308',
+  };
+
+  const maxValue = Math.max(...Object.values(data).map((stat: any) => stat));
+
+  return (
+    <VStack
+      space="sm"
+      pl="$12"
+      pr="$4"
+      py="$12"
+      bg="#fbfbfb"
+      rounded="$md"
+      sx={{
+        _dark: {
+          bg: '$backgroundDark800',
+        },
+      }}
+      mb="$8"
+    >
+      {Object.keys(data).map((key) => {
+        const width = `${Math.round((data[key] / maxValue) * 100)}%`;
+
+        return (
+          <HStack w="$full" space="md" alignItems="center">
+            <VStack>
+              <Text
+                sx={{
+                  color: '$text900',
+                  _dark: {
+                    color: '$text50',
+                  },
+                  _web: { whiteSpace: 'nowrap' },
+                  w: 130,
+                  fontSize: '$sm',
+                  textAlign: 'right',
+                  fontWeight: key === 'gluestack-ui' ? '$semibold' : '$normal',
+                }}
+              >
+                {key}
+              </Text>
+            </VStack>
+            <HStack space="md" alignItems="center" flex={0.7}>
+              <Box
+                h={'$5'}
+                w={width}
+                borderRadius={'$sm'}
+                bgColor={colorMap[key] ?? '$primary500'}
+              />
+              <Text
+                fontSize="$xs"
+                flex={1}
+                sx={{
+                  color: '$text900',
+                  _dark: {
+                    color: '$text50',
+                  },
+                  _web: {
+                    whiteSpace: 'nowrap',
+                  },
+                }}
+              >
+                {data[key]} ms
+              </Text>
+            </HStack>
+          </HStack>
+        );
+      })}
+    </VStack>
+  );
+}

example/storybook-nativewind/src/home/performance/benchmarks/index.stories.mdx

@@ -0,0 +1,80 @@
+---
+title: Performance Benchmarks | gluestack-ui
+description: gluestack-ui harnesses the power of NativeWind, a universal and highly performant styling library, to style the components.
+---
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Graph } from '../../../extra-components/nativewind/Progress';
+
+<Meta title="ui/Home/Performance/Benchmarks" />
+
+# Performance Benchmarks
+
+`gluestack-ui` harnesses the power of [NativeWind](https://www.nativewind.dev/v4/overview), a universal and highly performant styling library, to style the components.
+
+# React Native
+
+We performed the [benchmarks](https://github.com/gluestack/gluestack-ui-benchmarks) with `React Native`, `gluestack-ui v1` and `gluestack-ui v2`.
+
+**In each case we have rendered 1000 components with styling of each library. Results are average of 5 mounts.**
+
+> **All the benchmarks were measured in production environment on iPhone 15.**
+
+## Simple Component
+
+The time it takes to render a simple themed component. We've developed a Box component using View with some default styles.
+
+<Graph
+  data={{
+    'React Native': 68,
+    'gluestack-ui v1': 132,
+    'gluestack-ui v2': 99,
+  }}
+/>
+
+## Component with variants
+
+The time needed to render a component with different variations. We've developed a Box component using View with default styles and multiple variants.
+
+<Graph
+  data={{
+    'React Native': 73,
+    'gluestack-ui v1': 146,
+    'gluestack-ui v2': 144,
+  }}
+/>
+
+> Styled Components doesn't have built-in support for variants. We've incorporated prop-based variants into Styled Components.
+
+## Component with default theme and inline styles
+
+A component with default themes, variations, inline styles, and state styles. We've designed a Button component using Pressable with default style, variations, state style, and inline styles.
+
+<Graph
+  data={{
+    'gluestack-ui v1': 360,
+    'gluestack-ui v2': 241,
+  }}
+/>
+
+> React Native doesn't provide out of the box support for state styling.
+
+## Layout using HStack, VStack, Image and Text
+
+Creating a layout with HStack, VStack, Image, and Text to display a list of 28 items. We've utilized components from the following libraries for this purpose.
+
+<Graph
+  data={{
+    'React Native': 58,
+    'gluestack-ui v1': 89,
+    'gluestack-ui v2': 76,
+  }}
+/>
+
+> Note: This test was taken from [Tamagui](https://github.com/tamagui/tamagui/tree/24ac758bbe5d6ff2f67f25071df4286e0594f578/starters/benchmark).
+
+# Web
+
+We are working on dedicated benchmarks for the web. Stay tuned for more updates!
+
+In the meantime, we've built the landing page for version 2 using `gluestack-ui v2`, achieving a Lighthouse score of 85+.