English versionEN

Compiled Atomic JavaScript?

Can we apply the lessons of CSS to JavaScript?

While working on StyleX we use compilation and the technique Atomic CSS to create a more efficient system. Having small atomic CSS rules maximizes re-usability and dramatically reduces the size of the CSS at scale. A powerful compiler, makes the process automatic and frees from having to think custom DSLs.

Can we do the same for JavaScript? What would the trade-offs be? Can it result in unique benefits not possible with most other approaches?

This talk has been presented at React Summit 2025, check out the latest edition of this React Conference.

FAQ

StyleX is a CSS and JS styling solution that operates at compile time, producing a highly optimized atomic stylesheet without runtime style injection. It is similar to Tailwind but considered by its creator, Naman, as one of the best styling solutions available.

Atomic CSS is beneficial because it scales better by reducing the size of CSS as the number of components increases. It allows for a small bundle of CSS to be loaded upfront, eliminating the need for lazy loading, which can otherwise become a performance bottleneck.

Solenoid is a server-first atomic JavaScript framework created by Naman. It uses JSX on the server, with components and signals defined on the server but implemented in HTML, running in the browser without the need for hydration.

In Solenoid, you write code similar to React or SolidJS. The framework generates HTML that includes custom elements and functions, allowing for interactivity even as HTML streams in. This approach avoids the need for hydration and reduces double-data problems.

Solenoid is still in development and not feature complete. It generates larger HTML files, breaks some CSS selectors, and uses custom elements, which may not be the best implementation detail. Despite these trade-offs, it offers benefits like no hydration errors and interactive HTML streaming.

The main advantage of Solenoid is that it eliminates the need for hydration by making HTML the source of truth, thus avoiding hydration errors and making interactivity possible as soon as content streams in.

In Solenoid, components must be defined using function declarations, and all internal functions within a component must be arrow functions. This allows the compiler to properly handle and optimize the code.

Solenoid shares some similarities with Quick.js, particularly in its server-side rendering approach and use of HTML and JavaScript streams, but its implementation details differ significantly.

Solenoid was inspired by the idea of combining server-side rendering with atomic JavaScript principles, aiming to explore whether a new framework could offer unique benefits in terms of interactivity and performance.

stylex react

Naman Goel

22 min

13 Jun, 2025

Comments

Video Summary and Transcription

In 2008, the movie Vantage Point inspired the exploration of diverse perspectives in software development. The evolution from traditional CSS to atomic styles in StyleX and the scalability advantage of atomic JavaScript are significant areas of interest. Rethinking server-side rendering with React, Web Components, and the Hano framework introduces new possibilities for interactive components. Custom elements, Shadow DOM, and the Solenoid framework address challenges in CSS scoping and SSR for lighter-weight HTML. Signal functions in Solenoid offer a unique approach to data management and component development, enhancing app efficiency. Real-time interactive server setup, innovative server-side development, and the use of HTML as a source of truth contribute to project speed and efficiency. Debugging, component definition, HTML streaming, and component usage highlight the declarative nature and streaming capabilities of server-generated HTML.

Available in Español: ¿JavaScript Atómico Compilado?

Video transcription and chapters available for users with access.