Adopting React at Lighthouse

#react #frontend #javascript #architecture

A decade with Ember.js

For over ten years, Ember.js has been the reliable engine behind Lighthouse's core platform. As a comprehensive, "batteries-included" framework, Ember provided the structural consistency and predictability necessary for a large enterprise application. This stability allowed the engineering team to focus intently on delivering product value with high productivity and minimal technical debt.

Lighthouse still considers Ember.js a quality framework built on solid principles, but a strategic decision was needed to ensure the long-term sustainability and competitiveness of the platform for the next decade. Now is the time to look forward. After extensive research and testing, a pivot is necessary to make sure we stay competitive and provide our engineers with the best possible experience.

Why we had to change

As the company scaled through significant growth, three critical, growing risks tied to continuing reliance on a smaller ecosystem were identified:

1. Declining market share

While Ember is a quality framework, its declining market share put Lighthouse at a disadvantage:

Talent pipeline: Lighthouse needs to ensure it could attract and retain engineers who want to work with the most in-demand skills. React's current unmatched market dominance and massive developer community solve this challenge, immediately expanding the talent pool and making the company more attractive to top engineers.
Ecosystem health: The team often struggled to find modern, maintained, off-the-shelf solutions for needs (like advanced table components or up-to-date tooling). They were increasingly forced to build and maintain fundamental tools themselves, diverting resources away from product innovation.

2. M&A integration and future growth

Lighthouse's growth strategy partly consists of successful mergers and acquisitions (M&A). The core framework must support a playbook for rapid integration.

React is the most prevalent frontend technology globally; standardising on it dramatically increases the probability that an acquired company's technology stack will be familiar or quickly convertible, reducing the cost and complexity of integrating new teams and codebases.

3. AI tooling and future productivity

Lighthouse is committed to integrating AI-assisted development into its workflow to boost engineering productivity. React's market dominance makes it the primary target for AI model training and tooling, ensuring teams have immediate access to the latest innovations in coding assistance and efficiency gains.

We are aware that a decision like this contributes to the very trend we are observing, making it a 'self-fulfilling prophecy' of declining market share. However, for a frontend engineering team of our size, the risk associated with being a smaller player in a shrinking field is immense. We simply do not have the internal capacity or intention to pivot resources toward the maintenance and enhancement of framework tooling. This would be a significant investment we can't make right now. Our strategic shift is therefore about mitigating that long-term business risk.

Why React over other frameworks

The decision followed an extensive evaluation, including rigorous Proofs of Concept (POCs) of both React and Angular.

Frameworks like Vue, Svelte, and others were ruled out as they presented similar, though lesser, risks concerning ecosystem size and long-term talent pool growth.

The 'batteries included' argument for Angular is a powerful one. However, the POC revealed that after its recent major upgrades Angular is currently in a period of flux. The introduction of new paradigms like Signals has created competing ways to solve problems, which can lead to a similar level of decision-making as React and a temporary inconsistency in best practices.

Lighthouse felt this made React's vastly larger, active, and more diverse ecosystem a much more compelling advantage.

The abundance of battle-tested, community-driven tools, such as the TanStack ecosystem (Query, Router, Forms), for everything from data fetching to UI components minimizes the risk of having to build or maintain their own specialized solutions.
This, paired with its focused, component-driven approach, offers superior flexibility for building complex enterprise features.

Our solution: a structured, enterprise-grade React

To ensure React apps do not become a "Wild West" of conflicting approaches, the platform team is dedicated to defining a highly opinionated set of rules and architectural standards designed specifically for Lighthouse's scale. This approach maintains the stability and consistency valued from Ember.

💡 Sneak peek at the Lighthouse React standards:

Architectural Decision	Lighthouse Standard	Rationale
Core Libraries	TanStack (Router, Query), Vite (Build Tool).	Provides enterprise-grade data handling, caching, and routing while maintaining high performance.
State Management	TanStack Query for server state; useState / Context API for local client state.	Clear rules here simplify application architecture and maintenance.
Architecture	Domain-Driven Design (DDD): We will adhere to DDD to make sure we have an easy to follow structure in all of our codebases.	Guarantees consistency, improves maintainability, and makes complex code easier to test and onboard new engineers onto.

What's next?

This transition will be strategic and phased. We are committing to a gradual approach. Each next phase is based on the previous phase's success. Lighthouse wants to be flexible, and if assumptions were wrong or expectations are not met, they can still reverse course or adapt the strategy.

Foundation Building: The platform team will finalise these architectural decisions and build the initial React design system library.
Product Pilot: Before making the plunge, one of the new applications will be built in React with the envisioned architecture decisions. This will be seen as a more in-depth trial run and is still easily reversible if the POC assumptions turn out to be wrong.
React adoption: Lighthouse will begin building all new products in React, starting with one of the acquired products already planned for a rewrite.
Future Consolidation: Once the new standard is stable and proven, a long-term plan will be developed for the gradual migration of the existing Ember applications.

This decision marks the start of an exciting new era for Lighthouse Engineering. The team is confident this move will not only secure their technical foundations but will empower teams to innovate faster than ever before.

In a next post, one of the lead engineers on this project will follow up with the detailed technical implementation of the new React architecture.