Skip to content

FAQ

Jump to bottom
Christopher Robison edited this page Dec 12, 2025 · 1 revision

Frequently Asked Questions

Quick reference for common questions about LARC.

Comparison Questions

How is this different from React/Vue/Svelte?

Short answer: LARC complements React/Vue rather than replacing them. Use React for complex UIs, LARC for cards, modals, tables, and shared components. Reduce framework overhead by 60%+.

Detailed answer:

  • React/Vue are full application frameworks with virtual DOM, JSX/templates, and complete state management
  • LARC is a lightweight layer on top of Web Components that solves the "coordination problem"
  • Use both together: Keep React for your complex product UI, use LARC for design system components that work everywhere
  • Key difference: LARC components work with zero build in development, and mix across frameworks via PAN messaging

Bundle size comparison:

  • React: ~140KB (React + ReactDOM + ecosystem)
  • Vue: ~90KB (core + ecosystem)
  • LARC Core Lite: 9KB minified (~3KB gzipped)
  • LARC Core (full): 40KB minified (12KB gzipped)
  • LARC Components: ~7KB per component minified

How does PAN compare to Redux/Zustand/other state management?

Short answer: PAN is a message bus, not a state store. Think MQTT for the browser. Components coordinate without coupling.

Detailed answer:

  • Redux/Zustand: Centralized state stores with reducers/actions
  • PAN: Decentralized messaging - components publish/subscribe to topics
  • When to use PAN: Cross-component coordination, micro-frontends, framework interop
  • When to use Redux: Complex app-wide state with strict rules and time-travel
  • Can use both: PAN for component communication, Redux inside React components

PAN is more like:

  • MQTT (pub/sub messaging)
  • Redis Pub/Sub
  • EventBus patterns

But native to the browser with zero dependencies.

Browser & Compatibility

What's the browser support?

Tested and supported:

  • Chrome 90+
  • Firefox 88+
  • Safari 14+
  • Edge 90+

Requirements:

  • ES Modules (import/export)
  • Custom Elements v1
  • Shadow DOM v1
  • IntersectionObserver

Mobile: Works great on iOS Safari 14+, Chrome Android 90+. Tested on real devices.

Does it work in Internet Explorer?

No. IE doesn't support Custom Elements or ES Modules. Use polyfills if you must support IE, but we recommend modern browsers only.

Production & Readiness

Is it production-ready?

Yes, with caveats:

Production-ready:

  • 261 tests passing (Chromium, Firefox, WebKit)
  • Zero security vulnerabilities (npm audit)
  • Published to npm (@larcjs/core@2.0.0)
  • Used in real applications
  • TypeScript support
  • Semantic versioning

Consider:

  • Young ecosystem (launched Nov 2024)
  • Small community (growing)
  • Component library still expanding
  • Best practices still emerging

Recommendation: Perfect for:

  • New projects willing to be early adopters
  • Design systems and component libraries
  • Micro-frontends
  • Progressive enhancement

Who's using this in production?

Currently used by:

  • Early adopters building design systems
  • Micro-frontend architectures
  • Progressive web apps

We're a young project. If you adopt LARC, you're an early pioneer!

Build & Tooling

Do I really not need a build step?

Development: Zero build required. Write .mjs files, refresh browser.

Production: Build is optional but recommended:

  • Minification (reduce size)
  • Tree-shaking (remove unused code)
  • Bundling (reduce HTTP requests)

The philosophy: Fast iteration in dev (no build), optimized delivery in prod (with build).

Use any bundler:

  • esbuild (recommended)
  • Rollup
  • Vite
  • webpack

What about TypeScript?

Full TypeScript support:

npm install @larcjs/core-types
npm install @larcjs/ui-types

Features:

  • Type definitions for all components
  • IDE autocomplete and IntelliSense
  • Type-safe PAN messaging
  • Works in both .ts and .js files (JSDoc)

You can use TypeScript, or not. Your choice.

Dependencies & Size

What are the dependencies?

Core: Zero runtime dependencies.

Dev dependencies:

  • Playwright (testing)
  • esbuild (optional build)

Total installed size:

  • @larcjs/core-lite: 9KB minified (~3KB gzipped) - Start here!
  • @larcjs/core: 40KB minified (~12KB gzipped) - includes routing & debug
  • @larcjs/ui: 396KB minified (~110KB gzipped) - 57 components

Why should I add another framework?

You're not adding a framework, you're reducing one.

Before LARC:

  • React app: 500KB bundle
  • Every component tightly coupled

With LARC:

  • React (complex UI): 350KB
  • LARC (core + 8 components): ~100KB minified
  • Total: 450KB (-10% from pure React approach)

Real savings come from:

  • Components work in Vue, Svelte, vanilla JS
  • No lock-in to React version
  • Easier to migrate frameworks later
  • Use only what you need

Learning Curve

How hard is it to learn?

If you know:

  • HTML
  • JavaScript
  • ES Modules

You're ready!

Learning path:

  1. 5 minutes: Include script, use components
  2. 30 minutes: Understand PAN messaging (publish/subscribe)
  3. 1 hour: Build custom component
  4. 1 day: Comfortable building apps

No new syntax, no new language, no JSX.

Where are the docs?

Architecture & Design

Why Web Components instead of framework components?

Web Components advantages:

  • Native browser API - No framework lock-in
  • True interoperability - Work in React, Vue, Angular, vanilla JS
  • Long-term stability - Browser standard, not framework churn
  • No compilation required - Direct browser execution
  • Style encapsulation - Shadow DOM prevents CSS conflicts

The 80/20 principle: Web Components give you 80% of what you need. LARC provides the missing 20% (coordination, auto-loading, state management).

What's the PAN bus actually doing?

PAN (Page Area Network) is a lightweight message bus for component coordination.

Without PAN:

// Components tightly coupled
<ThemeToggle onThemeChange={(theme) => {
  card.setTheme(theme);
  table.setTheme(theme);
  modal.setTheme(theme);
}} />

With PAN:

<!-- Theme toggle publishes -->
<pan-theme-toggle></pan-theme-toggle>

<!-- Components subscribe automatically -->
<pan-card></pan-card>
<pan-table></pan-table>
<pan-modal></pan-modal>

Features:

  • Pub/sub with topic wildcards
  • Retained messages (like MQTT)
  • Request/reply pattern
  • Message routing
  • No coupling between components

Security

What about security vulnerabilities?

Current status:

  • npm audit: 0 vulnerabilities
  • Zero runtime dependencies
  • Regular security updates

Best practices:

  • Keep packages updated
  • Review component code before use
  • Use Content Security Policy
  • Sanitize user input (standard web security)

Performance

How's the performance?

Metrics:

  • First load: <50ms (core)
  • Bundle size: 9KB core-lite minified (~3KB gzipped)
  • Per component: ~7KB each minified (~2KB gzipped)
  • Autoload time: <5ms per component

Compared to frameworks:

  • React: ~140KB initial bundle
  • Vue: ~90KB initial bundle
  • LARC Core Lite: 9KB + components used (94% smaller than React!)

Progressive loading: Components load as they enter viewport (IntersectionObserver). Only pay for what you use.

Common Concerns

What if the project gets abandoned?

Mitigation strategies:

  1. Web Standards: Built on Custom Elements (won't break)
  2. Zero dependencies: No dependency hell
  3. Simple codebase: Easy to fork and maintain
  4. MIT License: Free to fork and continue

Even if LARC stops:

  • Your components keep working (they're just Web Components)
  • You can maintain your own fork
  • Easy to migrate to vanilla Web Components

Can I use this with X framework?

Yes! LARC works with:

  • React (via React 19's Web Component support)
  • Vue (native Web Component support)
  • Angular (native Web Component support)
  • Svelte (compile target)
  • Vanilla JavaScript
  • Any framework that supports Custom Elements

Integration:

// React, Vue, Svelte - all the same!
<pan-card title="Hello">Content</pan-card>

It's just HTML elements!

Why not use Lit or Stencil instead?

Great question! LARC is complementary:

Lit/Stencil:

  • Component authoring libraries
  • Help you build Web Components
  • Provide templating, reactivity, decorators

LARC:

  • Component coordination system
  • Helps components communicate
  • Provides auto-loading, messaging bus

Use together:

// Build components with Lit
@customElement('my-card')
class MyCard extends LitElement { ... }

// Coordinate with LARC
// Components auto-load and communicate via PAN

LARC's unique features:

  • Zero-build dev workflow
  • PAN messaging bus
  • Auto-loading system
  • Config management

Contact & Community

How do I get help?

How can I contribute?

We welcome contributions!

  1. Code: PRs to any repository
  2. Components: Submit to component registry
  3. Docs: Improve documentation
  4. Examples: Share your projects
  5. Feedback: Tell us what works/doesn't work

Quick Answers

"Yet another framework?"

LARC isn't a framework replacement—it's framework reduction. Keep React for complex UIs, use LARC for components that work everywhere. Reduce bundle by 60%+ and eliminate vendor lock-in.

"Why Web Components?"

Web Components are the only way to build truly framework-agnostic components. LARC solves the coordination problem that makes them practical for real applications.

"Production ready?"

Yes: 261+ tests passing, 0 vulnerabilities, v2.0 on npm. Young ecosystem (Nov 2024), but stable core. Perfect for new projects and early adopters.

"Performance?"

9KB core-lite (~3KB gzipped) vs 140KB React - that's 94% smaller! Progressive loading—only pay for what you use.

"Learning curve?"

If you know HTML + vanilla JS, you're ready. No JSX, no new syntax. 5 min to use components, 1 hour to build custom ones.

LARC Wiki

Home

Getting Started

Core Documentation

Guides

Contributing

Resources

Clone this wiki locally