Theme Best Practices

Given below is a detailed checklist of best practices for Fynd Partners to follow while building a theme for Fynd Commerce using React:

1. Fynd Best Practices
2. React Best Practices
3. Javascript Best Practices
4. General Best Practices

---

Fynd Best Practices

• FPI (Fynd Platform Interface) Functions

  1. Write SSR-compatible code
     1. Assume all the code will be executed in the server
  2. Careful with window and document objects, always check if the context is browser before using them
  3. Have the fpi data fetch calls in two places.
     1. One for SSR case: when the page is loaded first time
     2. One for SPA case: when the page is loaded via UI navigation
  4. Image Optimization
     1. Images should be loaded based on the screen size Use the util fn here transformImage (Uses pixelbin resize).
  5. GraphQL: Get ALL the needed data in a single call and ONLY the ones needed
  6. Be careful while using the fpi events to avoid messing up the analytics related to it.
  7. Keep the SEO of the page in mind
  8. Avoid adding hacks to the system, it will come back to hurt you later
  9. Follow the common JS/React Debugging practices before reaching out
  10. NEVER use hardcoded URLs of storefront. Use action objects to ensure all the UTM parameters are retained.

• FDK-CLI (Fynd Developer Kit Command-Line Interface):

  1. Install FDK-CLI globally using npm.
     npm install -g @gofynd/fdk-cli
  2. Keep the FDL CLI updated to the latest version.
  3. Check logs using the --debug flag to resolve issues, before reaching out to us.
  4. Use FDK-CLI commands to generate or deploy the theme.
  5. Validate the theme locally before deployment.

---

React Best Practices

• Component Design

  1. Functional Components: Prefer functional components over class components.
  2. Reusability: Break down UI into reusable, smaller components to avoid duplication and increase readability (ideally < 300 lines).
  3. Folder Structure: Organize files logically, e.g., components/, pages/, hooks/, context/.

• State Management

  1. Use Hooks: Utilize useState, useReducer, and useContext for managing state locally.
  2. Avoid Prop Drilling: Use Context API or state libraries like Redux, Zustand, or Recoil when state needs to be shared deeply.

• Styling

  1. CSS-in-JS: Use libraries like styled-components or emotion for scoped styles.
  2. Modular CSS: If using CSS files, prefer CSS Modules for scoping styles (.module.css).

• Code Splitting

  1. Use React’s lazy and suspense for dynamic imports to reduce initial load time.
  2. Split large components or libraries using tools like Webpack or Vite for bundling.

• Error Boundaries: Wrap components in error boundaries to gracefully handle rendering errors.

• Accessibility

  1. Use semantic HTML tags (<button>, <form>, etc.).
  2. Include ARIA attributes where necessary (aria-label, aria-hidden).
  3. Test keyboard navigation and screen reader support.
  • Use tabIndex judiciously.
  4. Ensure sufficient contrast between text and background (minimum contrast ratio: 4:1)

---

JavaScript Best Practices

• Code Quality

  1. Linting: Use ESLint with a React-specific configuration.
  2. Formatting: Use Prettier for consistent code formatting.
  3. Type Safety: Use TypeScript or PropTypes for type checking.

• Common Pitfalls

  1. Avoid Mutating State: Always return a new state object in state updates (setState).
  2. Optimize Loops and Maps: Use functional methods like .map(), .filter() for array operations.
  3. Avoid Anonymous Functions in JSX: Avoid inline functions in JSX for performance reasons; use useCallback.

• Modern Syntax: Use ES6+ features like arrow functions, destructuring, let and const over var, template literals, and spread/rest operators.

• Async Code

  1. Use async/await for handling promises.
  2. Handle errors gracefully with try/catch.

• Performance

  1. Debounce/Throttle: Limit expensive operations (e.g., search inputs).
  2. Memoization: Use React.memo, useMemo, and useCallback to avoid unnecessary re-renders.
  3. Keys in Lists: Always use a unique key for list elements.

---

General Best Practices

• Version Control

  1. Follow branching strategies like Git Flow.
  2. Write descriptive commit messages.

• Testing

  1. Test theme configurations (e.g., settings, customizations) thoroughly.
  2. Use React Testing Library or Enzyme for unit testing components.
     1. Aim for at least 80% test coverage.
  3. Write snapshot tests for consistent UI.
  4. Use Jest for overall JavaScript testing.
  5. Use tools like Cypress or Playwright to test the entire flow.

• Documentation

  1. Comment your code effectively where necessary.
  2. Use tools like Storybook for documenting components.
  3. Use JSDoc for utility functions and APIs.

• Performance Monitoring

  1. Monitor performance with React DevTools.
  2. Profile your app and optimize for render times.
  3. Optimize images, minify code, and leverage browser caching to improve page load times.

• Security

  1. Sanitize inputs to avoid XSS.
  2. Avoid hardcoding sensitive data; use environment variables.
  3. Regularly audit dependencies for vulnerabilities.
  4. Use environment variables for sensitive data like API keys