Choosing HTMX vs React at EcoTree

Context

• Company: EcoTree (e-commerce website)
• Backend Stack: PHP with Symfony framework
• Customer Area: Manage purchases and create gifts; requires intricate interactions and polished user experience.
• Current Tool: React for UI development in authentication gated area.

Key Considerations

• SEO Requirements:
  • Need fast loading times for public-facing pages (server-side rendering with Symfony's Twig).
  • User interactions (e.g., basket updates) must be responsive without affecting SEO.
• Issues with Current Setup:
  • Reliance on outdated jQuery library (SimpleCart) for basket management, leading to:
    • Inability to detect users' activities related to basket items (e.g., sold out notifications).

Proposed Solutions Explored

1. Server-Side Rendering (SSR):

   • Requesting new pages on item addition/removal.
   • Con: Causes white page flashes, poor user experience.

2. React with Server-side API:

   • Allows interaction and updates via React components.
   • Cons:
     • Potential for bloated app size due to dependencies, harming page speed.
     • Complexity in managing UI components across pages (popup, counter badge, dropdown updates).

Decision to Use HTMX

• Advantages of HTMX:
  • Connects different UI elements based on server-side logic without reloading the page.
  • Simplifies the integration of static page elements with server state.
• Specific Use Cases for HTMX:
  • Managing interface updates based on significant server-side state.
  • Connecting diverse UI elements spread across static pages.

Limitations of HTMX

• Not suited for managing transient or pure UI state.
• Complex interfaces requiring immediate feedback may be challenging in pure HTMX contexts.

Conclusion

• Overall Approach: Hybrid model using both HTMX and React based on specific use cases.
• Next Steps:
  • Interested in learning more about either technology? Video resources available.