Jonathan Lalou's Blog

Posts Tagged ‘React’

Any sufficiently advanced technology is indistinguishable from magic—or so Arthur C. Clarke conjured—yet ES Proxies embody this enigma, transfiguring mundane objects into oracles of orchestration. Christophe Porteneuve, frontend lead at Doctolib and Prototype.js alumnus, conjured this conjury at dotJS 2025, from Rails’ metaprogramming to JS’s proxy prowess. A 1995 web warlock, Christophe chronicled proxies’ palette: traps transmuting traps, revocable realms, Immer’s immutable incantations.

Christophe’s chronicle commenced with OOP’s ontology: proxies as intercessors, wrappers weaving whims—get’s gaze, set’s scribe, apply’s invocation. Revocable’s rite: realms retractable, realms revocable—Proxy.revocable(target, handler) yielding revocable proxies, revoke’s rupture rending references. Christophe cavorted with conundrums: negative indices navigated (proxy[-1]), symbols’ summons (proxy[Symbol.iterator]()), even functions’ facades—proxied predicates, applicables as arguments.

Immer’s immutability: drafts’ dominion, mutations’ mirage—produce(base, draft => {draft.foo = 'bar'}) birthing branches sans sprawl. Christophe commended: Redux Toolkit’s reliance, React’s reducer rapport—deep derivations distilled, verbosity vanquished. Proxies’ pedigree: performance’s parity (descriptors’ drag dwarfed), ubiquity’s umbrella (ES6’s endowment, polyfills passé).

This thaumaturgy tantalizes: metaprogramming’s muse, DX’s deity—proxies as pandora’s portal.

Proxies’ Prismatic Patterns

Christophe cataloged traps: get’s glean, set’s seal—revocable’s recall, negative’s nuance. Functions’ finesse: predicates proxied, iterators invoked—magic’s mantle.

Immer’s Immutable Incantations

Drafts’ dominion: mutations’ masquerade, branches’ bloom—Redux’s reliance, React’s rapport. Christophe’s creed: verbosity’s vanquish, performance’s parity.

Links:

• Christophe Porteneuve on LinkedIn
• Doctolib

Backend’s bedrock—state’s stewardship, asynchrony’s aegis—once consigned coders to queues’ quagmires, yet React’s reactive rite reimagines this realm. Charly Poly, developer marketer at Inngest, advocated durable executions at dotJS 2025, transmuting frontend’s fluency into fault-tolerant flows. A frontend aficionado attuned to async’s arcana, Charly posited workflows as web’s warp: events’ echoes, states’ sagas—sans system’s scutwork.

Charly’s chronicle commenced with React’s renaissance: beyond templates’ tapestry, a triad taming temporality—events’ ingress, data’s domicile, UI’s unison. Backend’s ballad parallels: requests’ reception, persistence’s peril, orchestration’s odyssey. Inngest’s insight: functions as filaments, durable by decree—stepwise sagas, state salved, failures finessed. TypeScript’s temperance: inngest.createFunction({steps: ['ship', 'email']}), waits weaving webhooks—shipment’s vigil, seven-day sentinel.

This tapestry tempers toil: throttling’s thrum, rate’s restraint—web’s whims writ large. Charly contrasted: Temporal’s toils versus Inngest’s intimacy—events’ essence, JS’s jocularity. AI’s affinity: RAG’s relays, agents’ arcs—workflows as warp and weft.

Durable’s dividend: devs’ deliverance—frontend’s flair fortifying backends, sans queues’ quandary.

React’s Reactive Roots

Charly canvassed React’s remit: events’ embrace, fetches’ flux, states’ serenity—templating’s triumph. Backend’s burden: ingress’ influx, persistence’s pang—orchestration’s odyssey.

Inngest’s Immutable Flows

Functions’ filaments: steps’ sequence, waits’ watch—webhooks’ whisper, shipment’s sojourn. TypeScript’s tether: throttling’s tie, AI’s arc—RAG’s relay, agents’ agency.

Links:

• Charly Poly on LinkedIn
• Inngest

In today’s multi-device world, providing a consistent and high-quality user experience across various platforms is a significant challenge for software companies. For online gaming and betting platforms like Winamax, reaching users on desktop, web, and mobile devices is paramount. Anthony Maffert and Florian Yger from Winamax shared their insightful experience report detailing the company’s ambitious journey to unify their frontend applications onto a single cross-platform engine. Their presentation explored the technical challenges, the architectural decisions, and the concrete lessons learned during this migration, showcasing how they leveraged modern web technologies like JavaScript, React, and WebGL to achieve a unified codebase for their desktop and mobile applications.

The Challenge of a Fragmented Frontend

Winamax initially faced a fragmented frontend landscape, with separate native applications for desktop (Windows, macOS) and mobile (iOS, Android), alongside their web platform. Maintaining and developing features across these disparate codebases was inefficient, leading to duplicated efforts, inconsistencies in user experience, and slower delivery of new features. The technical debt associated with supporting multiple platforms became a significant hurdle. Anthony and Florian highlighted the clear business and technical need to consolidate their frontend development onto a single platform that could target all the required devices while maintaining performance and a rich user experience, especially crucial for a real-time application like online poker.

Choosing a Cross-Platform Engine

After evaluating various options, Winamax made the strategic decision to adopt a cross-platform approach based on web technologies. They chose to leverage JavaScript, specifically within the React framework, for building their user interfaces. For rendering the complex and dynamic visuals required for a poker client, they opted for WebGL, a web standard for rendering 2D and 3D graphics within a browser, which can also be utilized in cross-platform frameworks. Their previous experience with JavaScript on their web platform played a role in this decision. The core idea was to build a single application logic and UI layer using these web technologies and then deploy it across desktop and mobile using wrapper technologies (like Electron for desktop and potentially variations for mobile, although the primary focus of this talk seemed to be the desktop migration).

The Migration Process and Lessons Learned

Anthony and Florian shared their experience with the migration process, which was a phased approach given the complexity of a live gaming platform. They discussed the technical challenges encountered, such as integrating native device functionalities (like file system access for desktop) within the web technology stack, optimizing WebGL rendering performance for different hardware, and ensuring a smooth transition for existing users. They touched upon the architectural changes required to support a unified codebase, potentially involving a clear separation between the cross-platform UI logic and any platform-specific native modules or integrations. Key lessons learned included the importance of careful planning, thorough testing on all target platforms, investing in performance optimization, and managing the technical debt during the transition. They also highlighted the benefits reaped from this migration, including faster feature development, reduced maintenance overhead, improved consistency across platforms, and the ability to leverage a larger pool of web developers. The presentation offered a valuable case study for other organizations considering a similar move towards cross-platform development using web technologies.

Links:

• Anthony Maffert: https://www.linkedin.com/in/anthonymaffert/
• Florian Yger: https://www.linkedin.com/in/florianyger/
• Winamax: https://www.winamax.fr/
• Devoxx France LinkedIn: https://www.linkedin.com/company/devoxx-france/
• Devoxx France Bluesky: https://bsky.app/profile/devoxx.fr
• Devoxx France Website: https://www.devoxx.fr/

Fullstack webcraft’s tumult—acronym avalanches, praxis pivots—evokes a helical descent, yet upward spiral. James Q. Quick, a JS evangelist, speaker, and BigCommerce developer experience lead, traversed this inferno at dotJS 2024, channeling Dante’s nine circles via Dan Brown’s lens. A Rubik’s aficionado (sub-two minutes) and Da Vinci Code devotee (Paris-site pilgrim), Quick, born 1991—the web’s inaugural site’s year—wove personal yarns into a scorecard saga, rating eras on SEO, performance, build times, dynamism. His verdict: chaos conceals progress; contextualize to conquer.

Quick decried distraction’s vortex: HTML/CSS/JS/gGit/npm, framework frenzy—Vue, React, Svelte, et al.—framework-hopping’s siren song. His jest: “GrokweJS,” halting churn. Web genesis: 1989 Berners-Lee, 1991 inaugural site (HTML how-to), 1996 Space Jam’s static splendor. Circle one: static HTML—SEO stellar, perf pristine, builds nil, dynamism dead. LAMP stacks (two: PHP/MySQL) injected server dynamism—SEO middling, perf client-hobbled, builds absent, dynamism robust.

Client-side JS (three: jQuery/Angular) flipped: SEO tanked (crawlers blind), perf ballooned bundles, builds concatenated, dynamism client-rich. Jamstack’s static resurgence (four: Gatsby/Netlify)—SEO revived, perf CDN-fast, builds protracted, dynamism API-propped—reigned till content deluges. SSR revival (five: Next.js/Nuxt)—SEO solid, perf hybrid, builds lengthy, dynamism server-fresh—bridged gaps.

Hybrid rendering (six: Astro/Next)—per-page static/SSR toggles—eased dynamism sans universal builds. ISR (seven: Next’s coinage)—subset builds, on-demand SSR, CDN-cache—slashed times, dynamism on-tap. Hydration’s bane (eight): JS deluges for interactivity, wasteful. Server components (nine: React/Next, Remix, Astro islands)—stream static shells, async data, cache surgically—optimize bites, interactivity islands.

Quick’s spiral: circles ascend, solving yesteryear’s woes innovatively. Pantheon’s 203 steps with napping tot evoked hope: endure inferno, behold stars.

Static Foundations to Dynamic Dawns

Quick’s scorecard chronicled: HTML’s purity (1991 site) to LAMP’s server pulse, client JS’s interactivity boon-cum-SEO curse. Jamstack’s static revival—Gatsby’s graphs—revitalized speed, API-fed dynamism; SSR’s return balanced freshness with crawlability.

Hybrid Horizons and Server Supremacy

Hybrids like Astro cherry-pick render modes; ISR on-demand builds dynamism sans staleness. Hydration’s excess yields to server components: React’s streams static + async payloads, islands (Astro/Remix) granularize JS—caching confluence for optimal perf.

Links:

• James Q Quick on LinkedIn
• BigCommerce

Enhancing user agency in labyrinthine applications hinges on forgiving interactions, where missteps dissolve with a keystroke. Bassel Ghandour, a senior software engineer at Contentsquare, distilled this essence into a brisk yet profound primer at dotJS 2024. From Paris’s vibrant tech scene—now his U.S. outpost—Ghandour lamented a botched virtual Tokyo greeting, swiftly invoking undo’s allure. His focus: retrofitting undo/redo into state-heavy web apps, sidestepping snapshot pitfalls for action-centric resilience.

Ghandour commenced with state management basics in a todo app: frontend mirrors app state, enter-press morphs it—additions, UI ripples. Naive undo? Timestamped snapshots, hopping between epochs. Reality intrudes: actions cascade side effects, backend ops interweave, concurrency clashes. Rapid todo barrages spawn interleaved sequences; snapshot reversion mid-thread invites chaos. Solution: encapsulate sequences under UUIDs, treating batches as atomic units. Parallel: forge inverses—add’s delete, toggle’s revert—mapping each to its antithesis.

This duality—do and undo in tandem—preserves fidelity. User crafts todo: UUID wraps creation, displays; inverse queues deletion. Subsequent show-toggle: nested UUID, inverse queued. Undo invokes the stack’s apex inverse, state reverts cleanly; redo replays forwards. Ghandour’s flow: capture actions, inverse-map, sequence-bundle, command-apply. Backend sync? Optimistic updates, rollbacks on failure. Contentsquare’s engineering blog details implementations, from Redux sagas to custom dispatchers.

Ghandour’s brevity belied depth: this pattern scales to e-commerce carts, design canvases, empowering serene navigation amid complexity. By prioritizing actions over states, developers liberate users, fostering trust in intricate digital environs.

Encapsulating Actions for Resilience

Ghandour advocated UUID-wrapped sequences, neutralizing concurrency: todo volleys become discrete do/undo pairs, applied reversibly. Inverse mapping—add-to-delete—ensures symmetry, backend integrations via optimistic commits. This sidesteps snapshot bloat, embracing flux with grace.

Implementing Undo/Redo Commands

Stacks manage history: push do with inverse, pop applies antithesis. Redo mirrors. Ghandour teased Contentsquare’s saga: Redux orchestration, UI hooks triggering cascades—scalable, testable, user-delighting.

Links:

• Bassel Ghandour on LinkedIn
• Contentsquare

The fusion of artificial intelligence and frontend development is reshaping how we conceive interactive experiences, placing JavaScript engineers at the vanguard of this transformation. Malte Ubl, CTO at Vercel, captivated audiences at dotJS 2024 with a compelling exploration of Generative UI, a pivotal advancement in Vercel’s AI SDK. Originally hailing from Germany and now entrenched in Silicon Valley’s innovation hub, Ubl reflected on the serendipitous echoes of past tech eras—from CGI uploads via FTP to his own contributions like Whiz at Google—before pivoting to AI’s seismic impact. His message was unequivocal: frontend expertise isn’t obsolete in the AI surge; it’s indispensable, empowering developers to craft dynamic, context-aware interfaces that transcend textual exchanges.

Ubl framed the narrative around a paradigm shift from Software 1.0’s laborious machine learning to Software 2.0’s accessible, API-driven intelligence. Where once PhD-level Python tinkering dominated, today’s landscape favors TypeScript applications invoking large language models (LLMs) as services. Models have ballooned in scale and savvy, rendering fine-tuning optional and prompting paramount. This velocity—shipping products in days rather than years—democratizes AI development, yet disrupts traditional roles. Ubl’s optimism stems from a clear positioning: frontend developers as architects of human-AI symbiosis, leveraging React components to ground abstract prompts in tangible interactions.

Central to his demonstration was a conversational airline booking interface, where users query seat changes via natural language. Conventional AI might bombard with options like 14C or 19D, overwhelming without context. Generative UI elevates this: the LLM invokes React server components as functions, streaming a interactive seat map pre-highlighting viable window seats. Users manipulate the UI directly—selecting, visualizing availability—bypassing verbose back-and-forth. Ubl showcased the underlying simplicity: a standard React project with TypeScript files for boarding passes and seat maps, hot-module-reloading enabled, running locally. The magic unfolds via AI functions—React server components that embed client-side state, synced back to the LLM through an “AI state” mechanism. Selecting 19C triggers a callback: “User selected seat 19C,” enabling seamless continuations like checkout flows yielding digital boarding passes.

This isn’t mere novelty; Ubl underscored practical ramifications. End-user chatbots gain depth, support teams wield company-specific components for real-time adjustments, and search engines like the open-source Wary (a Perplexity analog) integrate existing product renderers for enriched results. Accessibility leaps forward too: retrofitting legacy sites with AI state turns static pages into voice-navigable experiences, empowering non-traditional input modalities. Ubl likened AI to a potent backend—API calls fetching not raw data, but rendered intelligence—amplifying human-computer dialogue beyond text. As models from OpenAI, Google Gemini, Anthropic’s Claude, and Mistral proliferate, frontend differentiation via intuitive UIs becomes the competitive edge, uplifting the stack’s user-facing stratum.

Ubl’s closing exhortation: embrace this disruption by viewing React components as AI-native building blocks. Vercel’s AI SDK examples offer starter chatbots primed for customization, accelerating prototyping. In a world where AI smarts escalate, frontend artisans—adept at state orchestration and visual storytelling—emerge as the revolution’s fulcrum, forging empathetic, efficient digital realms.

The Dawn of AI-Infused Interfaces

Ubl vividly contrasted archaic AI chats with generative prowess, using an airline scenario to highlight contextual rendering’s superiority. Prompts yield not lists, but explorable maps—streamed via server components—where selections feed back into the AI loop. This bidirectional flow, powered by AI state, ensures coherence, transforming passive queries into collaborative sessions. Ubl’s live demo, from flight selection to boarding pass issuance, revealed the unobtrusive elegance: plain React, no arcane setups, just LLM-orchestrated functions bridging intent and action.

Empowering Developers in the AI Era

Beyond demos, Ubl advocated for strategic adoption, spotlighting use cases like e-commerce search enhancements and accessibility overlays. Existing components slot into AI workflows effortlessly, while diverse models foster toolkit pluralism. The SDK’s documentation and examples lower barriers, inviting experimentation. Ubl’s thesis: as AI commoditizes logic, frontend’s artistry—crafting modality-agnostic interactions—secures its primacy, heralding an inclusive future where developers orchestrate intelligence with familiar tools.

Links:

• Malte Ubl on LinkedIn
• Vercel

In the ever-evolving landscape of web development, frameworks like Angular and React have long stood as pillars of innovation, each carving out distinct philosophies while addressing the core challenge of synchronizing application state with the user interface. Minko Gechev, an engineering and product leader at Google with deep roots in Angular’s evolution, recently illuminated this dynamic during his presentation at dotJS 2024. Drawing from his extensive experience, including the convergence of Angular with Google’s internal Wiz framework, Gechev unpacked how these tools, once perceived as divergent paths, are now merging toward shared foundational principles. This shift not only streamlines developer workflows but also promises more efficient, performant applications that better serve modern web demands.

Gechev began by challenging a common misconception: despite their surface-level differences—Angular’s class-based templates versus React’s functional JSX components—these frameworks operate under remarkably similar mechanics. At their heart, both construct an abstract component tree, a hierarchical data structure encapsulating state that the framework must propagate to the DOM. This reactivity, as Gechev termed it, was historically managed through traversal algorithms in both ecosystems. For instance, updating a shopping cart’s item quantity in a nested component tree would trigger a full or optimized scan, starting from the root and pruning unaffected branches via Angular’s OnPush strategy or React’s memoization. Yet, as applications scale to thousands of components, these manual optimizations falter, demanding deeper introspection into runtime behaviors.

What emerges from Gechev’s analysis is a narrative of maturation. Benchmarks from the prior year revealed Angular and React grappling similarly with role-swapping scenarios, where entire subtrees require recomputation, while excelling in partial updates. Real-world apps, however, amplify these inefficiencies; traversing vast trees repeatedly erodes performance. Angular’s response? Embracing signals—a reactive primitive now uniting a constellation of frameworks including Ember, Solid, and Vue. Signals enable granular tracking of dependencies at compile time, distinguishing static from dynamic view elements. In Angular, assigning a signal to a property like title and reading it in a template flags precise update loci, minimizing unnecessary DOM touches. React, meanwhile, pursues a compiler-driven path yielding analogous outputs, underscoring a broader industry alignment on static analysis for reactivity.

This convergence extends beyond reactivity. Gechev highlighted dependency injection patterns, akin to React’s Context API, fostering modular state management. Looking ahead, he forecasted alignment on event replay for seamless hydration—capturing user interactions during server-side rendering gaps and replaying them post-JavaScript execution—and fine-grained code loading via partial hydration or island architectures. Angular’s defer views, for example, delineate interactivity islands, hydrating only triggered sections like a navigation bar upon user engagement, slashing initial JavaScript payloads. Coupled with libraries like JAction for event dispatch, this approach, battle-tested in Google Search, bridges the interactivity chasm without compromising user fidelity.

Gechev’s insights resonate profoundly in an era where framework selection feels paralyzing. With ecosystems like Angular boasting backward compatibility across 4,500 internal applications—each rigorously tested during upgrades—the emphasis tilts toward stability and inclusivity. Developers, he advised, should prioritize tools with robust longevity and vibrant communities, recognizing that syntactic variances mask converging implementations. As web apps demand finer control over performance and user experience, this unification equips builders to craft resilient, scalable solutions unencumbered by paradigm silos.

Signals as the Reactivity Keystone

Delving deeper into signals, Gechev positioned them as the linchpin of modern reactivity, transcending mere state updates to forge dependency graphs that anticipate change propagation. Unlike traditional observables, signals compile-time track reads, ensuring updates cascade only to affected nodes. This granularity shines in Angular’s implementation, where signals integrate seamlessly with zoneless change detection, obviating runtime polling. Gechev illustrated this with a user profile and shopping cart example: altering cart quantities ripples solely through relevant branches, sparing unrelated UI like profile displays. React’s compiler echoes this, optimizing JSX into signal-like structures for efficient re-renders. The result? Frameworks shedding legacy traversal overheads, aligning on a primitive that empowers developers to author intuitive, responsive interfaces without exhaustive profiling.

Horizons of Hydration and Modularity

Peering into future convergences, Gechev envisioned event replay and modular loading as transformative forces. Event replay, via tools like JAction now in Angular’s developer preview, mitigates hydration delays by queuing interactions during static markup rendering. Meanwhile, defer views pioneer island-based hydration, loading JavaScript incrementally based on viewport or interaction cues—much like Astro’s serverside islands or Remix’s partial strategies. Dependency injection further unifies this, providing scoped services that mirror React’s context while scaling enterprise needs. Gechev’s vision: a web where frameworks dissolve into interoperable primitives, letting developers focus on delighting users rather than wrangling abstractions.

Links:

• Minko Gechev on LinkedIn
• Angular

Orchestrating frontend sprawl for legions of coders while infusing modern stacks like Node.js and React demands architectural ingenuity. Ruben Casas, software engineer at American Express, chronicles their micro-frontend odyssey—a 2016 vanguard yielding seamless compositions for millions, sans monolithic morass.

Ruben’s tale unfurls with a CTO’s conundrum: ballooning teams clash against legacy behemoths, spawning coordination quagmires and sync lags. Microservices scaled backends; frontends craved analogs—autonomous squads wielding isolated codebases, horizontal velocity.

Forging Modular Compositions

Amex’s OneApp framework—open-source beacon—espouses iframe-free integration: Webpack bundles modules to CDN artifacts, runtime loaders fetch per-route payloads. Ruben diagrams: root orchestrates, injecting via shadow DOM for scoped styles/scripts, mitigating clashes.

Prod hums via module maps—versioned manifests—pulling from CDNs; updates propagate sans restarts, hot-swapping in-memory. Development mirrors: Docker-spun OneApp proxies local clones amid prod stubs, isolating tweaks.

Deployment Dynamics and Cultural Catalysts

CIs per-repo trigger tests—units, integrations—publishing to CDNs; OneApp ingests, composing fluidly. Ruben lauds scalability: thousands collaborate frictionlessly, upgrades cascade independently.

Yet, patterns, not panaceas—tailor to contexts. OneApp’s GitHub invites forks, embodying Amex’s trailblazing ethos.

Links:

• Ruben Casas on LinkedIn
• American Express Website
• OneApp GitHub

Time series visualization poses unique demands, especially when datasets balloon into millions of points, requiring both performance and expressiveness. Zoe Steinkamp recounts the genesis of Giraffe, InfluxData’s open-source React-based library, designed to render such data fluidly within the InfluxDB UI and beyond. Her overview demystifies its architecture, showcasing how Flux query outputs translate into dynamic charts.

Giraffe ingests annotated CSV streams—enriched with metadata like group keys and data types—from InfluxQL or Flux, bypassing raw parsing overheads. This format, marked by hashed headers, facilitates layered rendering, where plots compose via React components. Zoe highlights its decoupling from InfluxDB, allowing integration into diverse apps, from solar monitoring dashboards to mobile analytics.

Core Mechanics: From Data Ingestion to Layered Rendering

Giraffe’s plot primitive accepts a config object housing CSV payloads and layer definitions, dictating visualization types—lines, bars, gauges, or histograms. Zoe dissects a line layer: specifying X/Y axes, color schemes, and themes yields customizable outputs, with algorithms downsampling dense series for smooth interpolation. A hardcoded example—plotting static coordinates—illustrates brevity: mere objects define series, rendering SVG or canvas elements reactively.

For InfluxDB synergy, the JS client fetches queried data via URL, token, and bucket parameters, piping annotated CSVs directly. Zoe notes server-side rendering limitations, favoring client hydration for interactivity, while the Storybook sandbox—launched via Yarn—exposes 30+ prototypes, including nascent maps and candlesticks, for tinkering.

Extending Giraffe: Samples and Ecosystem Integration

Zoe furnishes code snippets for HTML embeds or React apps, emphasizing modularity: swap Flux for custom sources, layer heatmaps atop gauges. This extensibility positions Giraffe as a versatile toolkit, empowering Node.js developers to embed time series prowess without bespoke engines, all while inviting community contributions via GitHub.

Links:

• Zoe Steinkamp on LinkedIn
• InfluxData Website
• Giraffe GitHub Repository
• Giraffe Documentation

Lecturer

Jakub Sowiński is a software architect at StepStone Services, specializing in frontend web development. He joined the company four years prior to his 2019 presentation as a software engineer, focusing on the maintenance and development of their core online job board platform. His work emphasizes architectural transformations from monolithic systems to service-oriented designs, particularly in frontend contexts.

Abstract

This article explores the adoption of micro frontends as an extension of service-oriented architecture to frontend development, drawing from practical experiences at StepStone Services. It examines the rationale, implementation challenges, and benefits of decomposing frontend applications into independent, deployable units. Key concepts such as independence in deployment, team ownership, and progressive refactoring are analyzed, alongside technical strategies for composition, communication, and standardization. The implications for organizational structure, development agility, and system resilience are discussed, highlighting how this approach addresses complexities in large-scale, distributed systems.

Context and Rationale for Micro Frontends

In the evolving landscape of software architecture, the shift from monolithic applications to service-oriented designs has become a cornerstone for managing complexity in backend systems. Jakub extends this paradigm to the frontend, introducing micro frontends as a means to handle the user interface in distributed environments. At StepStone Services, the core application—an online job board—initially presented as a sprawling monolith with millions of lines of code, lacking modularity and separation. This led to challenges in adding features without introducing bugs, slowed release cycles (once weekly), and difficulties in maintaining code quality.

The motivation stems from organizational and technical imperatives. Micro frontends allow for vertically decomposed applications, where each segment encapsulates a specific business logic subdomain, owned by autonomous teams. This fosters expertise within teams, enhances developer satisfaction, and aligns with agile principles by enabling rapid iterations and experiments. Jakub references industry adoption by companies like Facebook and Microsoft, underscoring the traction gained by this approach in recent years, particularly since 2015 when the term gained prominence.

Critically, this method addresses Dan Abramov’s critique, where he questioned the necessity of micro frontends, suggesting component models suffice. Jakub counters that while component models handle modularity, micro frontends tackle broader organizational structures, promoting small, focused teams that deliver end-to-end value. The architecture facilitates progressive refactoring, minimizing risks by isolating dependencies, a vital aspect for legacy systems like StepStone’s.

Implementation Strategies and Technical Solutions

Implementing micro frontends requires a composition layer, often termed a container application or templating engine, to assemble independent micro applications into a cohesive user experience. At StepStone, a modified version of Zalando’s Taylor library handles this, using configuration files to map routes to templates and fragments. Templates are collections of fragments, each with a unique ID linking to specific micro frontends. This server-side composition ensures the end-user perceives a unified website, while under the hood, each micro frontend maintains its own repository, pipeline, and version.

Inter-micro frontend communication poses another challenge. Jakub describes using PubSubJS for publisher-subscriber patterns, where components subscribe to messages (e.g., triggering a login modal). Alternatives like custom events via browser APIs or shared global states (e.g., Redux) are viable, though StepStone favors PubSubJS for simplicity. For development processes, standardization mitigates fragmentation risks. A project creation tool generates skeletons with standardized tech stacks (React, TypeScript, Webpack), build plans (Babel compilation, Jest testing), and deployment options (Node.js for server-side rendering or static assets).

Styling consistency is achieved via CSS-in-JS with styled-components, allowing theme variants for different websites, managed by UX teams. A component library in a monorepo, using tools like Storybook and Lerna, ensures reusability. Testing standardization includes unit tests in build plans and an automated test framework with Selenium, split by subdomains for efficient releases.

Code sample illustrating fragment composition in the templating engine:

// Example route-to-template mapping
const routes = {
  '/home': 'homeTemplate',
  '/search': 'searchTemplate'
};

// Exemplary template with fragments
const homeTemplate = `
  <header id="headerFragment"></header>
  <main id="contentFragment"></main>
  <footer id="footerFragment"></footer>
`;

// Fragment mapping
const fragments = {
  'headerFragment': { url: '/microfrontend/header', config: { /* options */ } },
  // Additional fragments...
};

Challenges and Mitigation Approaches

Adopting micro frontends introduces complexities, such as potential fragmentation in processes and technologies. Jakub acknowledges risks like decreased consistency but argues autonomy boosts responsibility and effectiveness. Balancing this requires automation and standards, as seen in StepStone’s tools for project setup and shared libraries (e.g., frontend vendor package for common dependencies like React, reducing bundle sizes).

Performance benefits arise from externalizing shared libraries, cached early in user sessions. For testing, baseline standards ensure coverage, with teams encouraged to experiment (e.g., Cypress). Ownership models, inspired by open-source practices, appoint custodians for shared tools, preventing neglect. Community meetings facilitate alignment, empowering developers to solve common issues collectively.

A key pain point is out-of-order processing resilience. Unlike CRUD systems, where sequential errors corrupt states, log-based approaches (though not directly used here) inspire fault tolerance. Micro frontends’ independence minimizes cascading failures, enabling quicker recoveries.

Implications and Future Directions

The implications extend beyond technical gains to organizational agility. StepStone reduced release times from a week to 30 minutes, enhancing speed without meetings or extensive testing. This supports continuous delivery in large-scale applications, with benefits like progressive refactoring allowing graceful replacements.

However, Jakub cautions that micro frontends suit specific contexts—large, complex applications—not all projects. Starting with monoliths is advisable for simplicity, as premature decomposition increases overhead. Future enhancements could integrate web components for greater tech autonomy, though StepStone prioritizes standardization for collaboration and performance.

In conclusion, micro frontends represent a strategic extension of service-oriented principles, fostering scalable, resilient frontends. StepStone’s journey illustrates practical viability, balancing autonomy with standards to drive innovation and efficiency.

Links:

• Lecture video
• Jakub Sowiński on Twitter/X
• StepStone Services website