HN
Today

Building a framework-agnostic Ruby gem (and making sure it doesn't break)

Joe Masilotti shares insights on developing a Ruby gem, Ruby Native, that seamlessly integrates with ERB, React, and Vue by using framework-agnostic HTML 'signal elements'. He details the crucial architectural decisions and the robust XCUITest strategy employed to prevent regressions across these diverse front-end environments. This deep dive into multi-framework compatibility and rigorous testing offers valuable lessons for library authors aiming for broad adoption and stability.

5
Score
0
Comments
#10
Highest Rank
7h
on Front Page
First Seen
Apr 9, 2:00 PM
Last Seen
Apr 9, 8:00 PM
Rank Over Time
15101421252727

The Lowdown

Joe Masilotti, the creator of Ruby Native, outlines the intricate process of building a Ruby gem designed to function flawlessly across multiple front-end frameworks like ERB, React, and Vue. The core challenge lies in maintaining a consistent user experience and API behavior while ensuring new features don't introduce regressions in any environment. Masilotti details the architectural decisions and testing methodologies that have made this ambitious project viable.

  • The foundational decision was to make the native application framework-agnostic by having it detect 'signal elements'—hidden HTML elements with data-native-* attributes—via a MutationObserver.
  • This strategy meant that supporting new frameworks like React and Vue only required developing framework-specific APIs that produced the same underlying HTML signal elements, rather than modifying the native app.
  • Framework-specific components, such as those for React, are intentionally kept thin and stateless, primarily converting props into data attributes to minimize framework-specific logic and potential issues.
  • Masilotti emphasizes the invaluable role of feedback from daily users of specific frameworks, ensuring the API 'feels right' within each ecosystem, not just 'technically works'.
  • To manage regressions across different frameworks, a comprehensive XCUITest suite was implemented, testing native UI behavior across distinct demo applications (ERB/Hotwire, React/Inertia, Vue/Inertia).
  • These tests are framework-agnostic, validating what the user sees in the native UI rather than inspecting specific HTML or JavaScript, effectively catching issues regardless of their origin.
  • The chosen abstraction layer, based on data attributes, has proven so effective that it may enable Ruby Native's use with non-Rails Ruby web frameworks like Sinatra.

The story ultimately underscores the power of a well-conceived, framework-agnostic core combined with meticulous, user-centric API design and rigorous native UI testing to achieve broad compatibility and stability in complex software projects.