Duct vs Other Frameworks

Understanding how Duct differs from popular frameworks helps you make informed architectural decisions. Here’s an honest comparison of approaches and trade-offs.

Component Library Comparison

This section compares Duct as a component library for building interactive UI components.

Feature	Duct	React	Vue	Svelte	Web Components
Architecture	Blueprint pattern with separation	Component with mixed concerns	SFC with sections	Compiled components	Custom elements with class
Virtual DOM	❌ No	✅ Yes	✅ Yes	❌ No	❌ No
State Management	External/Manual	useState/useReducer	Reactive data	Reactive stores	Manual/Properties
Learning Curve	Low	Medium-High	Medium	Low-Medium	Medium
Template Syntax	JSX	JSX	Template/JSX	Enhanced HTML	HTML/Template literals
Logic Location	Separate bind function	Mixed in component	Script section	Script section	Class methods
Reactivity	Event-driven	Re-render based	Proxy-based	Compile-time	Manual/Observers

Detailed Comparisons

Notice

Pay attention to how Duct code is direct, explicit, and easily understandable. What you see is what executes - no hidden abstractions, magic behaviors, or complex state management. This makes debugging straightforward and code behavior predictable.

Duct vs React

React popularized component-based UI development, but Duct takes a fundamentally different approach to organizing component logic.

React Component

function Button({ label, onClick }) {
  const [clicked, setClicked] = useState(false);

  return (
    <button
      className={clicked ? 'btn-clicked' : 'btn'}
      onClick={() => {
        setClicked(true);
        onClick();
      }}
    >
      {label}
    </button>
  );
}

Duct Component

// Render function
function render(props) {
  return (
    <button class="btn">
      {props.label}
    </button>
  );
}

// Bind function
function bind(el, eventEmitter) {
  let clicked = false;

  const handleClick = () => {
    clicked = true;
    el.className = 'btn-clicked';
    eventEmitter.emit('click');
  };

  el.addEventListener('click', handleClick);

  return {
    release: () => {
      el.removeEventListener('click', handleClick)
    }
  };
}

// Create and export component
const Button = createBlueprint(
  { id: "my/button" },
  render,
  { bind }
);

export default Button;

Duct Advantages

✓ No re-rendering overhead
✓ Direct DOM control
✓ Clear separation of concerns
✓ Explicit behavior
✓ No hooks complexity

React Advantages

• Large ecosystem
• Extensive tooling
• Huge community
• More job opportunities
• Mature libraries

Duct vs Vue

Vue offers a middle ground between React and traditional templating, while Duct goes further in separating concerns.

Vue Component

<template>
  <button
    :class="buttonClass"
    @click="handleClick"
  >
    {{ label }}
  </button>
</template>

<script>
export default {
  props: ['label'],
  data() {
    return { clicked: false };
  },
  computed: {
    buttonClass() {
      return this.clicked ? 'btn-clicked' : 'btn';
    }
  },
  methods: {
    handleClick() {
      this.clicked = true;
      this.$emit('click');
    }
  }
};
</script>

Duct Component

// Render function
function render(props) {
  return (
    <button class="btn">
      {props.label}
    </button>
  );
}

// Bind function
function bind(el, eventEmitter) {
  let clicked = false;

  const handleClick = () => {
    clicked = true;
    el.className = 'btn-clicked';
    eventEmitter.emit('click');
  };

  el.addEventListener('click', handleClick);

  return {
    release: () => {
      el.removeEventListener('click', handleClick)
    }
  };
}

// Create and export component
const Button = createBlueprint(
  { id: "my/button" },
  render,
  { bind }
);

export default Button;

Duct Advantages

✓ No reactivity magic to debug
✓ Explicit DOM control
✓ Clear separation of template/logic
✓ Standard JavaScript patterns
✓ Predictable performance

Vue Advantages

• Gentle learning curve
• Progressive enhancement
• Excellent documentation
• Built-in state management
• Single-file components

Duct vs Svelte

Both Duct and Svelte avoid virtual DOM, but they differ significantly in their compilation and component organization approaches.

Svelte Component

<script>
  export let label;
  let clicked = false;

  function handleClick() {
    clicked = true;
    dispatch('click');
  }
</script>

<button
  class={clicked ? 'btn-clicked' : 'btn'}
  on:click={handleClick}
>
  {label}
</button>

Duct Component

// Render function
function render(props) {
  return (
    <button class="btn">
      {props.label}
    </button>
  );
}

// Bind function
function bind(el, eventEmitter) {
  let clicked = false;

  const handleClick = () => {
    clicked = true;
    el.className = 'btn-clicked';
    eventEmitter.emit('click');
  };

  el.addEventListener('click', handleClick);

  return {
    release: () => {
      el.removeEventListener('click', handleClick)
    }
  };
}

// Create and export component
const Button = createBlueprint(
  { id: "my/button" },
  render,
  { bind }
);

export default Button;

Duct Advantages

✓ No compile step required
✓ Runtime transparency
✓ Standard build tools
✓ Explicit behavior
✓ Easy debugging

Svelte Advantages

• Tiny bundle sizes
• Compile-time optimizations
• Built-in animations
• Simple reactive syntax
• No runtime overhead

Duct vs Web Components

Both Duct and Web Components embrace direct DOM manipulation and standards-based approaches, but they differ in their component organization and abstraction levels.

Web Components

class ButtonElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <style>
        button { padding: 8px 16px; }
        .btn { /* base button styles */ }
        .btn-clicked { /* clicked button styles */ }
      </style>
      <button class="btn">${this.getAttribute('label')}</button>
    `;

    this.button = this.shadowRoot.querySelector('button');
    this.button.addEventListener('click', this.handleClick.bind(this));
  }

  handleClick() {
    this.button.className = 'btn-clicked';
    this.dispatchEvent(new CustomEvent('button-click'));
  }

  disconnectedCallback() {
    this.button?.removeEventListener('click', this.handleClick);
  }
}

customElements.define('my-button', ButtonElement);

Duct Component

// Render function
function render(props) {
  return (
    <button class="btn">
      {props.label}
    </button>
  );
}

// Bind function
function bind(el, eventEmitter) {
  let clicked = false;

  const handleClick = () => {
    clicked = true;
    el.className = 'btn-clicked';
    eventEmitter.emit('click');
  };

  el.addEventListener('click', handleClick);

  return {
    release: () => {
      el.removeEventListener('click', handleClick)
    }
  };
}

// Create and export component
const Button = createBlueprint(
  { id: "my/button" },
  render,
  { bind }
);

export default Button;

Duct Advantages

✓ Clear separation of render/logic concerns
✓ No Shadow DOM complexity
✓ Simpler component composition
✓ Framework-agnostic JSX templates
✓ Explicit lifecycle management
✓ Better TypeScript integration

Web Components Advantages

• Native browser standard
• True encapsulation with Shadow DOM
• Framework interoperability
• No build step required
• CSS isolation by default
• Custom element lifecycle

When to Choose Component Libraries

Choose Duct Components When

✓ You value explicit, debuggable code
✓ You need direct DOM control
✓ You want minimal abstractions

✓ You're building long-lived applications
✓ You work with AI code generation
✓ You prefer separation of concerns

✓ You need predictable performance
✓ You want clear debugging paths
✓ You prioritize maintainability

Choose React When

• You need the largest ecosystem
• You have React expertise
• You need enterprise support
• You're building complex SPAs
• You need extensive third-party libraries

Choose Vue When

• You want balanced complexity
• You like single-file components
• You need official router/state management
• You're migrating from jQuery
• You want good documentation

Choose Svelte When

• You want the smallest bundle sizes
• You like compile-time optimizations
• You want built-in animations
• You prefer simpler mental models
• You're building content sites

Choose Web Components When

• You need true framework interoperability
• You want standards-based components
• You need CSS encapsulation
• You're building design systems
• You want no build dependencies

Complete Framework Comparison

This section compares Duct as a complete framework for building full applications with SSG, routing, and content management.

Feature	Duct	Next.js	Nuxt	SvelteKit	Astro
SSG/SSR	✅ Built-in SSG	✅ Full SSG/SSR	✅ Full SSG/SSR	✅ Full SSG/SSR	✅ Content-focused SSG
File-based Routing	✅ Built-in	✅ Pages & app router	✅ Built-in	✅ Built-in	✅ Built-in
Content Management	✅ Markdown + assets	⚠️ Via plugins	⚠️ Via modules	⚠️ Manual setup	✅ Content collections
Asset Management	✅ Automatic copying	✅ Advanced optimization	✅ Built-in optimization	⚠️ Via adapters	✅ Built-in optimization
Learning Curve	Low	High	Medium-High	Medium	Low-Medium
Architecture	SSG with hydrated islands	Full-stack React	Full-stack Vue	Full-stack Svelte	Islands with framework choice
API Routes	❌ Static-only	✅ Full API support	✅ Full API support	✅ Full API support	⚠️ Via integrations
Template System	Nunjucks (static) + JSX (components)	JSX everywhere	Vue templates everywhere	Svelte templates everywhere	Astro templates + framework islands
Static/Dynamic Separation	✅ Clear separation	⚠️ Mixed concerns	⚠️ Mixed concerns	⚠️ Mixed concerns	✅ Islands pattern
Deployment Target	Static hosting (CDN)	Vercel/Node.js/Edge	Various platforms	Various adapters	Static hosting/Edge

When to Choose Complete Frameworks

Choose Duct Framework When

✓ You're building content-driven sites
✓ You want simple SSG without complexity
✓ You need automatic content management

✓ You prefer static-first architecture
✓ You want clear static/dynamic separation
✓ You like proven templating (Nunjucks)

✓ You want fast, SEO-friendly sites
✓ You prefer explicit over magic
✓ You value simplicity and maintainability

Choose Next.js When

• You need full-stack React applications
• You want advanced SSR/SSG features
• You need API routes and serverless
• You're building e-commerce sites
• You need enterprise React features

Choose Nuxt When

• You prefer Vue ecosystem
• You want opinionated structure
• You need full-stack capabilities
• You want automatic routing
• You need Vue-specific optimizations

Choose SvelteKit When

• You love Svelte's approach
• You want small bundle sizes
• You need full-stack capabilities
• You prefer compile-time optimizations
• You want simple mental models

Choose Astro When

• You want zero JS by default
• You need content-heavy sites
• You want islands architecture
• You need framework flexibility
• You prioritize maximum performance

Remember: Each framework solves different problems well. Choose based on your project needs, team expertise, and long-term maintenance goals rather than popularity alone.

Duct UI

Duct UI

Duct vs Other Frameworks

Component Library Comparison

Detailed Comparisons

Duct vs React

React Component

Duct Component

Duct Advantages

React Advantages

Duct vs Vue

Vue Component

Duct Component

Duct Advantages

Vue Advantages

Duct vs Svelte

Svelte Component

Duct Component

Duct Advantages

Svelte Advantages

Duct vs Web Components

Web Components

Duct Component

Duct Advantages

Web Components Advantages

When to Choose Component Libraries

Choose Duct Components When

Choose React When

Choose Vue When

Choose Svelte When

Choose Web Components When

Complete Framework Comparison

When to Choose Complete Frameworks

Choose Duct Framework When

Choose Next.js When

Choose Nuxt When

Choose SvelteKit When

Choose Astro When