Commerce JS

Demo | Blog Post

A next-generation JavaScript ecosystem that modernized how Sovrn Commerce builds client-side applications. This monorepo architecture powers high-value products including AI Shopping Galleries and Choice Page, directly impacting user experience and revenue generation across the platform.

Role: Lead Architect and Primary Developer

The Challenge

Commerce-focused publishers need tools that integrate seamlessly into their existing websites without disrupting page performance or conflicting with their established styling. Building distributed JavaScript that runs on third-party sites presents unique constraints: strict bundle size limits, CSS isolation requirements, privacy compliance across multiple regulatory frameworks, and accessibility standards that serve all users.

The legacy approach to building these tools had become a bottleneck. Each new product required rebuilding common functionality, and inconsistent patterns across projects slowed iteration and increased maintenance burden.

Architecture

I designed a monorepo architecture using npm workspaces that fundamentally changed how the team builds JavaScript applications. The architecture enables multiple products to share a common foundation while maintaining independent deployment cycles.

Shared Package Ecosystem

The ecosystem includes eight internal packages organized by domain:

• Privacy and Consent: Unified handling for GDPR, CCPA, and GPP compliance with cross-frame communication support for iframe-embedded scenarios
• Error Handling: Functional programming primitives for railway-oriented error handling, replacing scattered try-catch blocks with composable, type-safe patterns
• Validation: Schema definitions for runtime validation at all system boundaries, ensuring data integrity from API responses to configuration parsing
• Logging: Service-scoped logging with environment-aware verbosity control
• Theming: Design tokens and compile-time CSS generation with component-scoped styles
• Utilities: Shared formatting, lazy loading, and responsive breakpoint helpers

Multi-Format Distribution

Each package builds to multiple output formats—ES modules, CommonJS, and IIFE bundles—enabling consumption across different integration patterns. Environment-aware builds handle development tooling, staging validation, and production optimization with appropriate sourcemaps and identifier hashing.

Technical Decisions

Functional Programming Patterns

I introduced functional programming paradigms that are now adopted across teams:

Result Type Pattern: Railway-oriented error handling that makes success and failure paths explicit. Instead of exceptions bubbling unpredictably, functions return typed results that must be handled. This eliminated entire categories of runtime errors and made error handling logic visible in the type system.

Exhaustive Pattern Matching: Using ts-pattern for conditional logic ensures all cases are handled at compile time. When the data model changes, the compiler identifies every location that needs updating—no more forgotten edge cases discovered in production.

Loadable State Pattern: A standardized representation for async data that eliminates null-checking ambiguity. Components can reliably distinguish between “hasn’t started loading,” “currently loading,” “loaded successfully,” and “failed with error” states.

State Management Strategy

The state layer uses Zustand with carefully composed middleware:

• Selective Subscriptions: Components subscribe only to the specific state slices they need, preventing unnecessary re-renders when unrelated state changes
• Immutable Updates: Immer integration provides ergonomic mutable syntax while guaranteeing immutability under the hood
• Consent Persistence: Privacy preferences persist across sessions while respecting user choices about data storage
• Development Tooling: DevTools integration in non-production environments for debugging without impacting production bundles

UI Isolation

Distributed JavaScript running on publisher sites cannot assume anything about the host page’s CSS. I implemented Shadow DOM isolation to encapsulate component styles completely, preventing conflicts with publisher stylesheets while maintaining full styling control within the boundary.

The design system uses Vanilla Extract for compile-time CSS generation with type-safe tokens. This approach produces zero-runtime CSS overhead while catching styling errors during the build process rather than in production.

Runtime Validation

All data crossing system boundaries passes through schema validation. API responses, configuration objects, and query parameters are validated and typed at runtime, with graceful degradation when data doesn’t match expectations. Types are derived from schemas, ensuring the TypeScript compiler and runtime validation stay synchronized.

Tech Stack

Decision	Rationale
Preact over React	~3KB vs ~40KB for equivalent functionality in a distributed library where every kilobyte impacts publisher page load
Zustand over Redux	Simpler API with better TypeScript inference and smaller bundle footprint
Vanilla Extract	Zero-runtime CSS with type-safe design tokens, compatible with Shadow DOM isolation
Vite over Webpack	Faster development builds, native ESM support, and simpler configuration
ts-pattern	Exhaustive pattern matching that eliminates runtime errors from unhandled cases
Zod	Runtime validation with excellent developer experience and strong TypeScript integration
Immer	Ergonomic immutable state updates without the verbosity of manual spreading

Compliance and Accessibility

Privacy Standards

I proactively implemented comprehensive privacy compliance without being asked:

• GDPR (TCF 2.0): Full Transparency and Consent Framework support for European users
• CCPA (USP v1): US Privacy String handling for California Consumer Privacy Act
• GPP: Global Privacy Platform support for emerging privacy frameworks
• Cross-CMP Compatibility: Integration with multiple Consent Management Platforms including Cookieyes

The consent system handles cross-frame communication for iframe-embedded scenarios, ensuring privacy preferences propagate correctly regardless of integration method.

Accessibility

WCAG compliance built into the architecture from day one:

• Semantic HTML with proper ARIA attributes for screen reader support
• Keyboard navigation with managed focus states
• Alt text fallback chains for product images
• Appropriate color contrast and text sizing

Role and Impact

As Lead Architect, I owned the technical direction for this ecosystem while collaborating closely with product and design teams. Beyond implementation, I focused on creating leverage:

Force Multiplier Effect: The patterns and packages I established are now adopted by other teams and projects. When engineers can build on proven foundations rather than reinventing solutions, the entire organization moves faster.

Mentorship Through Architecture: Well-documented patterns and clear abstractions teach architectural thinking implicitly. Junior engineers working in this codebase absorb functional programming concepts and state management best practices through the code itself.

Quality Standards: I established 80% test coverage thresholds enforced across all packages, 50KB production bundle limits with automated enforcement, and structured code review practices that maintain consistency as the team scales.

Revenue Impact: The architecture powers two distinct revenue streams for Sovrn Commerce. AI Shopping Galleries automatically recommend affiliated products based on page content, driving clicks and conversions for publishers. Choice Page (click interstitial) captures user intent at the moment of purchase consideration. Both products depend on the shared foundation I architected, enabling rapid iteration on revenue-generating features while maintaining the performance and compliance standards that publisher partnerships require.