single-spa-svelte-app

Part of Demo Microfrontends - A comprehensive Single-SPA microfrontend architecture demonstration

A Svelte microfrontend for Single-SPA demonstrating compile-time optimization, reactive programming, and minimal runtime overhead.

🏗️ Microfrontend Architecture

This application is one of 12 microfrontends in the demo-microfrontends project:

Microfrontend	Framework	Port	Route	Repository
🔐 Auth App	Vue.js	4201	/login	single-spa-auth-app
🎨 Layout App	Vue.js	4202	All routes	single-spa-layout-app
🏠 Home App	AngularJS	4203	/	single-spa-home-app
🅰️ Angular App	Angular 8	4204	/angular/*	single-spa-angular-app
💚 Vue App	Vue.js 2	4205	/vue/*	single-spa-vue-app
⚛️ React App	React 16	4206	/react/*	single-spa-react-app
🍦 Vanilla App	ES2020+	4207	/vanilla/*	single-spa-vanilla-app
🧩 Web Components	Lit	4208	/webcomponents/*	single-spa-webcomponents-app
📘 TypeScript App	TypeScript	4209	/typescript/*	single-spa-typescript-app
💎 jQuery App	jQuery 3.6	4210	/jquery/*	single-spa-jquery-app
🔥 Svelte App	Svelte 3	4211	/svelte/*	This repo
🎯 Root App	Single-SPA	8080	Orchestrator	single-spa-root

Main Repository: demo-microfrontends

Features

• Svelte 3: Compile-time optimized framework
• Reactive Programming: Automatic UI updates with reactive statements
• No Virtual DOM: Direct DOM manipulation for better performance
• Small Bundle Size: Minimal runtime overhead (~10KB)
• Built-in State Management: No external state libraries needed

Technology Stack

• Framework: Svelte 3.59.2
• Build Tool: Webpack 4 with svelte-loader
• Language: JavaScript with Svelte syntax
• Integration: Single-SPA lifecycle with Svelte components

Development

Prerequisites

• Node.js (v18.0.0 or higher)
• npm (v8.0.0 or higher)

Installation

npm install

Development Server

npm start
# Runs on http://localhost:4211

Build

npm run build
# Outputs to dist/single-spa-svelte-app.js

Svelte Features Demonstrated

Reactive Statements

// Automatic recalculation when dependencies change
$: doubleCount = count * 2;
$: countMessage = count === 0 ? 'Zero' : count === 1 ? 'One' : `${count} items`;

Component State

let count = 0;
let items = [];
let loading = false;

// Reactive updates automatically trigger re-renders

Event Handling

<button on:click={increment}>+</button>
<input bind:value={name} on:keypress={(e) => e.key === 'Enter' && addItem()}>

Conditional Rendering

{#if loading}
  <div class="loading">Loading...</div>
{:else if items.length === 0}
  <div class="empty">No items yet!</div>
{:else}
  {#each items as item (item.id)}
    <div class="item">{item.name}</div>
  {/each}
{/if}

Single-SPA Integration

This microfrontend exports the required Single-SPA lifecycle functions:

export const bootstrap = () => Promise.resolve();
export const mount = (props) => svelteApp.mount(props);
export const unmount = () => svelteApp.unmount();

Mount Point

The application mounts to the DOM element with ID svelte-app:

<div id="svelte-app"></div>

Route Configuration

Configured to activate on routes starting with /svelte:

singleSpa.registerApplication(
  'svelte',
  () => loadApp('single-spa-svelte-app'),
  showWhenPrefix(['/svelte'])
);

Svelte Advantages

Compile-time Optimization

• No runtime framework overhead
• Optimal JavaScript output
• Tree-shaking friendly
• Small bundle sizes

Reactive Programming

• Automatic dependency tracking
• Efficient updates
• No manual state management
• Declarative syntax

Developer Experience

• Simple syntax
• Less boilerplate
• Built-in animations
• Great tooling

Interactive Features

Reactive Counter

• Increment/decrement buttons
• Automatic double calculation
• Dynamic message updates
• Reset functionality

Dynamic Items List

• Add custom items
• Load sample data
• Toggle item states
• Remove items
• Real-time counters

Reactive Statements

• Automatic recalculation
• Dependency tracking
• Efficient updates
• No manual subscriptions

Performance Benefits

• Bundle Size: ~10KB (including Svelte runtime)
• Runtime: No virtual DOM overhead
• Updates: Surgical DOM updates
• Memory: Minimal memory footprint
• Startup: Fast initial render

Component Architecture

App.svelte

<script>
  // Component logic
  let state = 'reactive';
  
  // Reactive statements
  $: derivedValue = computeFromState(state);
  
  // Event handlers
  function handleClick() {
    state = 'updated';
  }
</script>

<!-- Template -->
<div class="component">
  <button on:click={handleClick}>
    {state}
  </button>
</div>

<style>
  /* Scoped styles */
  .component {
    /* Component-specific styles */
  }
</style>

File Structure

single-spa-svelte-app/
├── src/
│   ├── App.svelte                        # Main Svelte component
│   └── single-spa-svelte-app.js          # Single-SPA integration
├── dist/                                 # Build output directory
├── package.json                          # Dependencies and scripts
├── webpack.config.js                     # Build configuration
├── .gitignore                           # Git ignore rules
└── README.md                            # This file

Svelte Concepts

Reactivity

• Assignments trigger updates
• Reactive statements ($:)
• Reactive blocks
• Store subscriptions

Component Communication

• Props for parent-to-child
• Events for child-to-parent
• Context for deep passing
• Stores for global state

Lifecycle

• onMount for initialization
• onDestroy for cleanup
• beforeUpdate/afterUpdate
• tick for DOM updates

Browser Support

• Modern browsers (ES2015+)
• Chrome 51+, Firefox 54+, Safari 10+, Edge 15+
• Polyfills available for older browsers
• Mobile browser support

Migration from Other Frameworks

From React

• Similar component concepts
• Less boilerplate code
• No JSX, uses templates
• Built-in state management

From Vue

• Similar template syntax
• Reactive programming model
• Scoped styles
• Simpler setup

Contributing

1. Fork the repository
2. Create a feature branch
3. Follow Svelte best practices
4. Test component reactivity
5. Ensure proper cleanup
6. Submit a pull request

License

MIT License - see LICENSE file for details.

Related Projects

• Svelte - Cybernetically enhanced web apps
• SvelteKit - Full-stack Svelte framework
• Demo Microfrontends - Complete microfrontend demo

🚀 Quick Start

Run the complete microfrontend system:

# Clone main repository
git clone https://github.com/cesarchamal/demo-microfrontends.git
cd demo-microfrontends

# Start all microfrontends
./run.sh local dev

Run this microfrontend individually:

npm install
npm start
# Visit http://localhost:4211

Author

Cesar Francisco Chavez Maldonado - Svelte Microfrontend Example