Home / guides / HN_FAQ

Hacker News Launch - FAQ Answers

Quick reference for responding to common questions during the HN launch.

🆚 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
Missing features in older browsers: No polyfills included by default, but you can add them. Most modern devices (2020+) support everything natively. 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@3.0.1)
  • ✅ Used in real applications
  • ✅ TypeScript support
  • ✅ Semantic versioning
Consider:
  • 🟡 Young ecosystem (v3.0.1, launched 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
Evaluate carefully for:
  • Large enterprise apps with long lifespans
  • Projects requiring extensive third-party components

"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 (v3.0.1). If you adopt LARC, you're an early pioneer. We'd love to feature your project!

🛠️ 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
  • Your choice

"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 (57 components available, load on demand)

🎯 Learning Curve

"How hard is it to learn?"

If you know:
  • HTML ✅
  • JavaScript ✅
  • ES Modules ✅
You're ready! Learning path:
  • 5 minutes: Include script, use components
  • 30 minutes: Understand PAN messaging (publish/subscribe)
  • 1 hour: Build custom component
  • 1 day: Comfortable building apps
    • Concepts to learn:
    • Custom Elements (2 methods: connectedCallback, disconnectedCallback)
    • Shadow DOM (optional, for style encapsulation)
    • PAN publish/subscribe
    No new syntax, no new language, no JSX.

    "Where are the docs?"

    • 📚 Main docs: https://larcjs.com/
    • 🎮 Interactive playground: https://larcjs.com/playground/
    • 📖 Guides: https://github.com/larcjs/larc/tree/main/docs
    • 💬 Discussions: https://github.com/larcjs/core/discussions
    • 📹 Tutorial: (Coming soon - video walkthrough)

    🏗️ 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
    Framework components:
    • ❌ Locked to one framework
    • ❌ Version coupling headaches
    • ❌ Require compilation
    • ❌ Framework churn (React 15, 16, 17, 18...)
    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
    • ✅ Security policy: SECURITY.md
    Reporting vulnerabilities: Email: (use GitHub Security Advisories) 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. Test yourself: Run Lighthouse on our playground: https://larcjs.com/playground/

    🤔 Common Concerns

    "What if the project gets abandoned?"

    Mitigation strategies:
  • Web Standards: Built on Custom Elements (won't break)
  • Zero dependencies: No dependency hell
  • Simple codebase: Easy to fork and maintain
  • 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
<pan-card title="Hello">Content</pan-card>

// Vue
<pan-card title="Hello">Content</pan-card>

// Svelte
<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?"

    • 🗣️ Discord: https://discord.gg/zjUPsWTu
    • 💬 GitHub Discussions: https://github.com/larcjs/core/discussions
    • 🐛 Issues: https://github.com/larcjs/core/issues
    • 📧 Email: (use GitHub issues for now)

    "How can I contribute?"

    We welcome contributions!

  • Code: PRs to any repository
  • Components: Submit to component registry
  • Docs: Improve documentation
  • Examples: Share your projects
  • Feedback: Tell us what works/doesn't work

    • See CONTRIBUTING.md for guidelines.

    🎯 Quick Copy-Paste Responses

    For "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.

    For "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.

    For "Production ready?"

    Yes: 261 tests passing, 0 vulnerabilities, v3.0.1 on npm. Young ecosystem (2024), but stable core. Perfect for new projects and early adopters. We'd love your feedback!

    For "Performance?"

    9KB core-lite (~3KB gzipped) vs 140KB React - that's 94% smaller! Progressive loading—only pay for what you use. Test it: https://larcjs.com/playground/

    For "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.
    Remember: Be humble, helpful, and responsive. Good luck! 🚀