docs: add images and code examples

deco-sites · Dec 5, 2023 · 58f0eef · 58f0eef
1 parent cff2f84
commit 58f0eef
Show file tree

Hide file tree

Showing 2 changed files with 225 additions and 2 deletions.
diff --git a/docs/performance/sending-only-necessary-data-to-client/en.md b/docs/performance/sending-only-necessary-data-to-client/en.md
@@ -5,6 +5,8 @@ since: 1.0.0
 
 In some situations, when using [loaders](http://localhost:8000/docs/en/concepts/loader) to fetch data, an excessive amount of information may be received, negatively impacting page performance. This is evidenced by the significant size of the JSON transmitted to the client.
 
+![287814343-44b8fc59-2c25-4a55-bbe3-16810d5501a6](https://github.com/deco-sites/starting/assets/76822093/ab2d2212-1e3e-487d-ad6a-3eb225f9b15b)
+
 To mitigate this issue, we propose implementing a client-side data preprocessing process, ensuring that only necessary information is transmitted and used in the markup/UI.
 
 ## Data Flow
@@ -17,8 +19,117 @@ To mitigate this issue, we propose implementing a client-side data preprocessing
 
 4. Delivery to Component: Transmit only the processed data to the JSX component, thus reducing unnecessary load on the client.
 
+## Example Code
+
+This is the implementation of the `storefront/loaders/Layouts/ProductCard.tsx`:
+
+```tsx
+import ProductCard, { Layout } from "$store/components/product/ProductCard.tsx";
+import { usePlatform } from "$store/sdk/usePlatform.tsx";
+
+interface Props {
+  /** @title Product Card layout props */
+  layout: Layout;
+}
+
+/** @title Product Card Layout */
+const loader = ({ layout }: Props): Layout => layout;
+
+export const Preview = (props: Props) => {
+  const { layout } = props;
+
+  return (
+    <div class="h-full w-full grid place-items-center">
+      <div class="max-w-xs">
+        <ProductCard
+          layout={layout}
+          platform={usePlatform()}
+          product={{
+            "@type": "Product",
+            "category": "Masculino>Camisetas Gola Lisa",
+            "productID": "165",
+            "url": "",
+            "name": "Product Test",
+            "description": "Product Description",
+            "brand": {
+              "@type": "Brand",
+              "@id": "2000000",
+              "name": "deco.cx",
+            },
+            "inProductGroupWithID": "33",
+            "sku": "165",
+            "gtin": "789456123003305",
+            "additionalProperty": [
+              {
+                "@type": "PropertyValue",
+                "name": "TAMANHO",
+                "value": "GG",
+                "valueReference": "SPECIFICATION",
+              },
+            ],
+            "isVariantOf": {
+              "@type": "ProductGroup",
+              "productGroupID": "33",
+              "hasVariant": [],
+              "name": "Camiseta Masculina Gola Lisa Olive",
+              "additionalProperty": [],
+            },
+            "image": [
+              {
+                "@type": "ImageObject",
+                "alternateName": "test",
+                "url":
+                  "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2291/b9e0a819-6a75-47af-84fe-90b44fecda5f",
+              },
+              {
+                "@type": "ImageObject",
+                "alternateName": "test",
+                "url":
+                  "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2291/b9e0a819-6a75-47af-84fe-90b44fecda5f",
+              },
+            ],
+            "offers": {
+              "@type": "AggregateOffer",
+              "priceCurrency": "BRL",
+              "highPrice": 69.3,
+              "lowPrice": 69.3,
+              "offerCount": 1,
+              "offers": [
+                {
+                  "@type": "Offer",
+                  "price": 69.3,
+                  "seller": "1",
+                  "priceValidUntil": "2024-09-04T13:03:31Z",
+                  "inventoryLevel": { "value": 10000 },
+                  "teasers": [],
+                  "priceSpecification": [
+                    {
+                      "@type": "UnitPriceSpecification",
+                      "priceType": "https://schema.org/ListPrice",
+                      "price": 179,
+                    },
+                    {
+                      "@type": "UnitPriceSpecification",
+                      "priceType": "https://schema.org/SalePrice",
+                      "price": 69.3,
+                    },
+                  ],
+                  "availability": "https://schema.org/InStock",
+                },
+              ],
+            },
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default loader;
+```
+
 ## Benefits
 - Significant reduction in the size of transmitted JSON.
 - Noticeable improvement in page performance, especially in terms of loading.
 
-By implementing this data preprocessing process, it is possible to optimize page performance, ensuring that only crucial information is sent and processed, providing a more streamlined performance for the user.
+By implementing this data preprocessing process, it is possible to optimize page performance, ensuring that only crucial information is sent and processed, providing a more streamlined performance for the user.
diff --git a/docs/performance/sending-only-necessary-data-to-client/pt.md b/docs/performance/sending-only-necessary-data-to-client/pt.md
@@ -5,6 +5,9 @@ since: 1.0.0
 
 Em algumas situações, ao utilizar [loaders](http://localhost:8000/docs/pt/concepts/loader) para obter dados, pode-se receber uma quantidade excessiva de informações, impactando negativamente o desempenho da página. Isso é evidenciado pelo tamanho significativo do JSON transmitido para o cliente.
 
+![287813945-9ccd40a6-f41f-486f-a2b6-3f1efca0bfd1](https://github.com/deco-sites/starting/assets/76822093/bff19a56-bc1d-475b-b25d-f45fd1af713a)
+
+
 Para mitigar esse problema, propomos a implementação de um processo de pré-processamento dos dados no lado do cliente, garantindo que apenas as informações necessárias sejam transmitidas e utilizadas no markup/UI.
 
 ## Fluxo de Dados
@@ -17,8 +20,117 @@ Para mitigar esse problema, propomos a implementação de um processo de pré-pr
 
 4. Entrega ao Componente: Transmita apenas os dados processados para o componente JSX, reduzindo assim a carga desnecessária no cliente.
 
+## Código de exemplo
+
+Esta é a implementação do Loader `storefront/loaders/Layouts/ProductCard.tsx`:
+
+```tsx
+import ProductCard, { Layout } from "$store/components/product/ProductCard.tsx";
+import { usePlatform } from "$store/sdk/usePlatform.tsx";
+
+interface Props {
+  /** @title Product Card layout props */
+  layout: Layout;
+}
+
+/** @title Product Card Layout */
+const loader = ({ layout }: Props): Layout => layout;
+
+export const Preview = (props: Props) => {
+  const { layout } = props;
+
+  return (
+    <div class="h-full w-full grid place-items-center">
+      <div class="max-w-xs">
+        <ProductCard
+          layout={layout}
+          platform={usePlatform()}
+          product={{
+            "@type": "Product",
+            "category": "Masculino>Camisetas Gola Lisa",
+            "productID": "165",
+            "url": "",
+            "name": "Product Test",
+            "description": "Product Description",
+            "brand": {
+              "@type": "Brand",
+              "@id": "2000000",
+              "name": "deco.cx",
+            },
+            "inProductGroupWithID": "33",
+            "sku": "165",
+            "gtin": "789456123003305",
+            "additionalProperty": [
+              {
+                "@type": "PropertyValue",
+                "name": "TAMANHO",
+                "value": "GG",
+                "valueReference": "SPECIFICATION",
+              },
+            ],
+            "isVariantOf": {
+              "@type": "ProductGroup",
+              "productGroupID": "33",
+              "hasVariant": [],
+              "name": "Camiseta Masculina Gola Lisa Olive",
+              "additionalProperty": [],
+            },
+            "image": [
+              {
+                "@type": "ImageObject",
+                "alternateName": "test",
+                "url":
+                  "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2291/b9e0a819-6a75-47af-84fe-90b44fecda5f",
+              },
+              {
+                "@type": "ImageObject",
+                "alternateName": "test",
+                "url":
+                  "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2291/b9e0a819-6a75-47af-84fe-90b44fecda5f",
+              },
+            ],
+            "offers": {
+              "@type": "AggregateOffer",
+              "priceCurrency": "BRL",
+              "highPrice": 69.3,
+              "lowPrice": 69.3,
+              "offerCount": 1,
+              "offers": [
+                {
+                  "@type": "Offer",
+                  "price": 69.3,
+                  "seller": "1",
+                  "priceValidUntil": "2024-09-04T13:03:31Z",
+                  "inventoryLevel": { "value": 10000 },
+                  "teasers": [],
+                  "priceSpecification": [
+                    {
+                      "@type": "UnitPriceSpecification",
+                      "priceType": "https://schema.org/ListPrice",
+                      "price": 179,
+                    },
+                    {
+                      "@type": "UnitPriceSpecification",
+                      "priceType": "https://schema.org/SalePrice",
+                      "price": 69.3,
+                    },
+                  ],
+                  "availability": "https://schema.org/InStock",
+                },
+              ],
+            },
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default loader;
+```
+
 ## Benefícios
 - Redução significativa no tamanho do JSON transmitido.
 - Melhoria perceptível no desempenho da página, especialmente em termos de carregamento.
 
-Ao implementar esse processo de pré-processamento de dados, é possível otimizar a performance da página, garantindo que apenas as informações cruciais sejam enviadas e processadas, proporcionando um desempenho mais otimizado para o usuário.
+Ao implementar esse processo de pré-processamento de dados, é possível otimizar a performance da página, garantindo que apenas as informações cruciais sejam enviadas e processadas, proporcionando um desempenho mais otimizado para o usuário.