Connectic

Problem Statement

Microfrontend architectures split an app across independently-deployed bundles — often in different frameworks (React shell, Vue widget, Angular module). The moment they need to talk (navigation events, shared user/cart state, request/response between teams), you hit the wall: window globals are fragile, postMessage is untyped and verbose, and framework-specific state libraries don't cross the boundary. There's no clean, type-safe, framework-neutral communication layer.

Proposed Solution

Connectic is a framework-agnostic, event-driven communication library. It unifies three patterns behind one typed API: pub/sub events, request/response (with timeouts + caching), and reactive shared state — all framework-neutral, Module-Federation-friendly, and fully typed with TypeScript generics.

Full Solution Details

• Typed bus — createBus<Events, Requests>() gives compile-time safety on every event name and payload, and on request/response shapes.
• Pub/Sub — bus.on() / bus.emit() with automatic cleanup and memory-leak prevention.
• Request/Response — bus.respond().handler() + await bus.request(), with timeout handling and built-in caching (TTL + pattern-based invalidation).
• Reactive shared state — bus.createState() with subscriptions that synchronize across components and across applications; experimental createComputed() with dependency tracking.
• Singleton discovery — getBus('global') returns the same instance across MFEs, so a React MFE and a Vue MFE share one bus.
• Extensibility — middleware (logging/validation/custom), request/response interceptors for data transformation, a plugin architecture, namespace isolation, and runtime memory statistics.

Technical Documentation

Written in TypeScript and published to npm with a dedicated documentation site (connectic.devferanmi.xyz). The core abstraction is the bus: a single object that owns the event registry, the responder registry, the shared-state store, and the cache. Cross-framework sharing works because the bus is a plain singleton resolvable by name (getBus), which is Module-Federation-compatible (singleton dependency management). Heavy use of TS generics makes events and requests strongly typed at the call site, eliminating the stringly-typed fragility of raw event buses.

Tech Stack

TypeScript (library core, generics-heavy), npm distribution, microfrontend / Module Federation patterns, event-bus + reactive-state design.

System Design

            ┌─────────────── createBus<Events, Requests> ───────────────┐
            │  Event registry · Responder registry · State store · Cache │
            └───────────────────────────┬────────────────────────────────┘
            getBus('global') ── same singleton instance across bundles
                                         │
     ┌───────────────┬───────────────────┼────────────────┬──────────────┐
     ▼               ▼                   ▼                ▼              ▼
  React MFE       Vue MFE           pub/sub          request/resp     shared state
  emit/on         emit/on        (auto cleanup)   (timeout+cache)   (sync + computed)
            middleware · interceptors · plugins · namespace isolation

Smart Architectural Decisions

• One bus, three patterns. Instead of three libraries (event emitter + RPC + state store), Connectic folds pub/sub, request/response, and reactive state into a single typed surface — less to learn, one mental model, one cleanup story.
• Type-safety via generics turns the classic untyped event-bus footgun into compile-time checked contracts (createBus<Events, Requests>).
• Singleton-by-name is the key MFE insight: getBus('global') resolves the same instance regardless of which framework or bundle calls it, making cross-framework sharing trivial and Module-Federation-safe.
• Built-in memory hygiene — automatic cleanup, leak prevention, and live statistics — because long-lived MFE buses are a notorious leak source.
• Caching with TTL + pattern invalidation on request/response avoids redundant cross-MFE calls.

Impacts

3,000+ npm downloads; used in production microfrontend architectures to let React/Vue/Angular surfaces communicate through one typed, framework-neutral API — with a published docs site lowering adoption friction.

Demonstrated Skills

Library/API design (ergonomic, generics-driven, framework-agnostic); deep understanding of microfrontend architecture and Module Federation; event-driven + reactive-state systems; caching strategy (TTL, pattern invalidation); memory-leak prevention; OSS packaging, semver, and documentation.