Request for Feedback: Avoid Thinking Too Far in the Future

[Gamez0]

Hey there. I’m Dobin, a Developer Advocate for Radix 👋

Recently, I’ve been reflecting on the principle Avoid thinking too far in the future particularly while working on a mobile hamburger menu. The menu needed to display different sub-menu items depending on the user's authentication state. Initially, I opted for a dynamic, flexible solution (getSubMenuWithOnClick) that allowed for future expansion with minimal changes. However, this approach introduced additional complexity and extended the development time.

This discussion aims to explore how we can understand and apply the "Avoid thinking too far in the future" principle when contributing to Radix, and even further, how we can incorporate this approach into our own projects, balancing immediate needs with potential future requirements.

I’d appreciate any feedback on the approaches discussed, including perspectives on potential pitfalls we may have overlooked or any questions you might have.

Key Concepts

• Dynamic Approach: Flexible but potentially complex.
• Hard-Coded Approach: Simple and direct, but less flexible.

Summary

Key Takeaways:

• Flexibility vs. Simplicity: The dynamic approach allowed for easier future updates but added complexity. A hard-coded approach would have been faster for immediate needs.

Dynamic Code Example:

<div className="absolute bottom-[58px] flex flex-col w-full typo-poppins-regular-16">
  {SUB_MENU.map((menu, index) => (
    <button
      key={index}
      className={`h-[36px] text-left pl-[30px] ${
        menu.key === 'logout' ? 'text-newGray-400' : ''
      }`}
      onClick={menu.onClick}  // Attach the appropriate event handler for each menu item
    >
      {menu.text}
    </button>
    {menu.key === 'promotionCode' && <LineBreaker />}  // Insert a line break between menu sections
  ))}
</div>

Hard-Coded Code Example:

<div className="absolute bottom-[58px] flex flex-col w-full typo-poppins-regular-16">
  {userInfo ? (
    <>
      <button onClick={handleClickAccount}>Account</button>
      <button onClick={handleClickMyToken}>My Token</button>
      <button onClick={handleClickLicense}>License</button>
      <button onClick={handleClickPromotionCode}>Promotion Code</button>
      <LineBreaker />  // Insert a line break between menu sections
      <button onClick={handleClickLogout} className="text-newGray-400">Logout</button>
    </>
  ) : (
    <>
      <button onClick={handleClickLogin}>Login</button>
      <button onClick={handleClickSignup}>Sign Up</button>
    </>
  )}
</div>

While the dynamic code example isn’t perfectly dynamic, I’m open to suggestions and improvements—even though the focus is on the broader trade-offs rather than perfecting the dynamic implementation.

Request for Feedback

I’m curious to learn how others in the Radix community approach similar trade-offs. Specifically:

• Are there areas in Radix where this "Avoid thinking too far in the future" principle has been applied, and how did it influence the design decisions?
• For developers using Radix, how do you balance immediate needs with potential future requirements? Do you have examples where you opted for simplicity over flexibility, or vice versa?

I’m eager to hear your thoughts and experiences on navigating these trade-offs.

Looking forward to your insights!