Technical Choices Rationale: Why Svelte & SvelteKit?

Platform: Digital Workspace Ecosystem
Created: 2025-10-27
Last Updated: 2025-10-27

🎯 Executive Summary

Platform ini menggunakan SvelteKit sebagai fullstack framework dengan Svelte 5 sebagai client-side rendering. Dokumentasi ini menjelaskan mengapa pilihan ini dibuat dan bagaimana ini mendukung visi platform: Transparansi, Integritas, Kedaulatan, dan Kesederhanaan.

Core Principles of This Platform

1. Transparansi (Transparency) - Open source, auditable code
2. Integritas (Integrity) - Honest, accountable, no hidden agendas
3. Kedaulatan Data (Data Sovereignty) - User owns their data
4. Keep It Simple - Minimal, intuitive, no bloat
5. Not Bloated - Lean, fast, efficient

📊 Framework Comparison

Quick Comparison Table

🏆 Why Svelte for Client-Side Rendering?

1. Zero-Runtime Overhead

Svelte adalah compiler, bukan framework runtime.

// Svelte: What you write
<script>
  let count = 0;
  function increment() {
    count += 1;
  }
</script>

<button onclick={increment}>{count}</button>

Compiled output:

// Pure JavaScript - no framework overhead
let count = 0;
function increment() { count += 1; updateButton(); }
function updateButton() {
  document.querySelector('button').textContent = count;
}

React equivalent (needs runtime):

import React, { useState } from 'react'; // ~42KB framework

function Counter() {
  const [count, setCount] = useState(0); // VDOM overhead
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Why it matters:

• ✅ Smaller bundles = Faster load times
• ✅ Less JavaScript = Better mobile performance
• ✅ Lower carbon footprint = Sustainable computing
• ✅ Edge-friendly = Cloudflare Workers compatible

2. Native HTML/JSS (Not Template Language)

Svelte feels like HTML:

<!-- Natural, readable, no learning curve -->
<div class="card">
  {#if isOpen}
    <p>{content}</p>
  {/if}
</div>

React (JSX):

// Requires learning JSX, feels abstracted
<div className="card">
  {isOpen && <p>{content}</p>}
</div>

Vue (Template syntax):

<!-- Requires learning template directives -->
<div v-if="isOpen" class="card">
  <p>{{ content }}</p>
</div>

Why it matters for this project:

• ✅ Lower barrier to entry for contributors
• ✅ Easier for Indonesian developers to contribute
• ✅ Less cognitive overhead = More productive
• ✅ Aligns with transparency (code is readable)

3. Reactive by Default

Svelte reactivity is automatic:

<script>
  let count = 0; // Automatically reactive
  
  function increment() {
    count += 1; // Change triggers UI update
  }
</script>

<button onclick={increment}>{count}</button>

No hooks, no abstractions, just JavaScript:

// Svelte 5 Runes (new!)
let count = $state(0); // Explicit state
let doubled = $derived(count * 2); // Computed value
let effect = $effect(() => console.log(count)); // Side effect

Compare to React:

// Need to import, use hooks, remember rules
import { useState, useEffect, useMemo } from 'react';

function Component() {
  const [count, setCount] = useState(0);
  const doubled = useMemo(() => count * 2, [count]);
  useEffect(() => console.log(count), [count]);
  // ... 3 more functions to learn
}

Why it matters:

• ✅ New contributors can start immediately
• ✅ Less "gotchas" = Fewer bugs
• ✅ No mental overhead for reactivity rules
• ✅ Predictable behavior

4. Type Safety Built-In

SvelteKit + TypeScript = Native Integration:

// Automatic type inference for props
<script lang="ts">
  import type { PageData } from './$types';
  
  // Types are inferred automatically
  let { data }: { data: PageData } = $props();
  
  // Full autocomplete and type checking
  let user = data.user; // TypeScript knows the structure!
</script>

No type manual setup needed!

Compare to other frameworks:

• React: Requires manual prop types or separate setup
• Vue: TypeScript support is add-on, not native
• Angular: Native but heavy and over-engineered

Why it matters:

• ✅ Fewer bugs before runtime
• ✅ Better IDE support
• ✅ Self-documenting code
• ✅ Refactoring safety

5. Performance: Compile-Time Optimization

Svelte compiles to optimized JavaScript:

Bundle size comparison (Hello World app):

• Svelte: 1.2 KB (pure JS)
• React: 43 KB (runtime required)
• Vue: 34 KB (runtime required)
• Angular: 250 KB+ (full framework)

Runtime performance:

Benchmark (1000 components update):
- Svelte:  2.8ms  (direct DOM updates)
- React:   15.3ms (VDOM diff + update)
- Vue:     12.7ms (VDOM diff + update)

Why it matters for this platform:

• ✅ Fast even on slow connections (Indonesia)
• ✅ Lower hosting costs (less bandwidth)
• ✅ Better mobile experience
• ✅ Aligns with "lightweight" platform vision

6. Open Source & Transparent

Svelte is MIT License (open source):

// You can see exactly what code is generated
// No hidden magic, no proprietary runtime
// Everything is transparent and auditable

Community-driven development:

• ✅ Growing community (especially in 2024-2025)
• ✅ Active maintainers and contributors
• ✅ No corporate control (unlike React/Facebook)
• ✅ Aligns with our "transparency" values

Why it matters:

• ✅ Platform philosophy: Transparent technology
• ✅ No vendor lock-in
• ✅ Community over corporation
• ✅ Build trust with users

7. Edge Computing Ready

SvelteKit works perfectly with Cloudflare Workers:

// Zero-config edge deployment
// Server functions run on edge
// Client code is pre-compiled
// No Node.js runtime needed

Cloudflare compatibility:

• ✅ Runs on Cloudflare Workers
• ✅ Small bundle = Fast cold starts
• ✅ Globally distributed
• ✅ Aligns with our "edge-first" architecture

🚀 Why SvelteKit for SSR?

1. Full-Stack in One Framework

SvelteKit handles everything:

// routes/docs/[slug]/+page.server.ts
export async function load({ params }) {
  // Server-side logic
  const data = await fetchFromDatabase(params.slug);
  return { data }; // Automatically serialized
}

<!-- routes/docs/[slug]/+page.svelte -->
<script lang="ts">
  let { data } = $props(); // Server data available!
</script>

<h1>{data.title}</h1>

No need to:

• ❌ Setup separate API layer
• ❌ Configure routing manually
• ❌ Handle data fetching logic
• ❌ Manage state synchronization

Why it matters:

• ✅ Faster development
• ✅ Less boilerplate = Less bugs
• ✅ Easier for new contributors
• ✅ Unified mental model

2. Static Generation by Default

SvelteKit prerenders by default:

// All pages are prerendered at build time
// HTML is generated statically
// SEO-friendly from day 1

Production build size:

.svelte-kit/cloudflare/
├── index.html (prerendered)
├── docs/VISION_AND_MANIFESTO.html (static)
└── index.js (edge worker - minimal)

Why it matters:

• ✅ SEO-friendly documentation
• ✅ Fast first contentful paint
• ✅ Better accessibility
• ✅ Work offline (with service worker)

3. Type-Safe End-to-End

Full TypeScript support across client & server:

// Server load function
export async function load({ params }) {
  return {
    slug: params.slug,
    html: "..."
  };
}

// Auto-generated types (no manual setup!)
import type { PageData } from './$types';

let { data }: { data: PageData } = $props();
// TypeScript knows data.slug and data.html exist!

Why it matters:

• ✅ Catch bugs at compile time
• ✅ Refactoring safety
• ✅ Self-documenting code
• ✅ Better IDE experience

4. File-Based Routing

Intuitive routing structure:

routes/
├── +page.svelte           → / (home)
├── about/
│   └── +page.svelte       → /about
├── docs/
│   ├── +page.svelte        → /docs (index)
│   └── [slug]/
│       ├── +page.server.ts → /docs/[slug] (dynamic)
│       └── +page.svelte

No routing config needed!

Compare to Next.js:

// Need to configure manually
export async function getStaticPaths() { ... }
export async function getStaticProps() { ... }

Why it matters:

• ✅ Easy to understand for new contributors
• ✅ Less configuration = Less errors
• ✅ Visual code organization
• ✅ Faster onboarding

5. Edge Deployment Support

Native Cloudflare Pages integration:

// svelte.config.js
import adapter from '@sveltejs/adapter-cloudflare';

export default {
  kit: { adapter: adapter() }
};

That's it! One line configuration.

Compare to Next.js:

• Need to configure next.config.js
• Need to handle edge runtime exceptions
• Need to bundle separations
• More configuration complexity

Why it matters:

• ✅ Simple deployment
• ✅ Edge-first architecture (our choice!)
• ✅ Global performance
• ✅ Lower latency

6. Middleware & Hooks System

Easy to add cross-cutting concerns:

// src/hooks.server.ts
export async function handle({ event, resolve }) {
  // Auth, logging, etc.
  const response = await resolve(event);
  return response;
}

No need for complex middleware systems!

🎯 Decision Matrix: Why SvelteKit Wins

For Digital Workspace Ecosystem

Winner: SvelteKit (Best overall score for our needs)

🤔 Alternatives Considered

1. React + Next.js (Not chosen)

Pros:

• ✅ Huge ecosystem
• ✅ Large community
• ✅ Many libraries

Cons:

• ❌ Larger bundle size
• ❌ Complex mental model
• ❌ More boilerplate
• ❌ Verbose syntax
• ❌ Not edge-native

Decision: Not chosen because bundle size and learning curve don't align with our "accessible" philosophy.

2. Vue + Nuxt (Not chosen)

Pros:

• ✅ Good performance
• ✅ Template syntax is familiar
• ✅ Good documentation

Cons:

• ❌ Still has runtime overhead
• ❌ Template directives learning curve
• ❌ Less edge-native than Svelte
• ❌ Growing slower than Svelte

Decision: Not chosen because Svelte offers better performance and simpler syntax.

3. Angular (Not considered)

Why not:

• ❌ Too heavy for this project
• ❌ Steep learning curve
• ❌ Over-engineered for our needs
• ❌ Enterprise-focused (we're community-focused)

Decision: Not considered - doesn't align with "lightweight" philosophy.

💡 Real-World Examples

Example 1: Our Documentation Pages

What we built:

<!-- Dynamic markdown rendering -->
<script lang="ts">
  let { data } = $props();
  let showSticky = $state(false);
  
  function checkScroll() {
    // Direct DOM manipulation
    const article = document.querySelector('article');
    showSticky = window.scrollY < article.offsetHeight;
  }
</script>

{#if showSticky}
<div class="fixed bottom-4">
  <a href="/docs">← Back</a>
</div>
{/if}

Why this works in Svelte:

• ✅ Direct DOM access (no abstraction)
• ✅ Automatic reactivity ($state)
• ✅ Conditional rendering is simple
• ✅ No hooks or lifecycle management needed

In React, this would be:

import { useState, useEffect } from 'react';

function Component({ data }) {
  const [showSticky, setShowSticky] = useState(false);
  
  useEffect(() => {
    const handleScroll = () => {
      const article = document.querySelector('article');
      setShowSticky(window.scrollY < article.offsetHeight);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);
  
  return showSticky ? <div>...</div> : null;
}

More verbose, more setup!

Example 2: Form Handling

Svelte form:

<script>
  let email = '';
  let error = '';
  
  async function handleSubmit() {
    const response = await fetch('/api/login', {
      method: 'POST',
      body: JSON.stringify({ email })
    });
    
    if (!response.ok) {
      error = 'Login failed';
    }
  }
</script>

<form onsubmit={handleSubmit}>
  <input bind:value={email} type="email" />
  {#if error}<p class="error">{error}</p>{/if}
  <button>Submit</button>
</form>

Simple, intuitive, no abstractions!

React equivalent:

import { useState, useCallback } from 'react';

function Form() {
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');
  
  const handleSubmit = useCallback(async (e) => {
    e.preventDefault();
    const response = await fetch('/api/login', {
      method: 'POST',
      body: JSON.stringify({ email })
    });
    
    if (!response.ok) {
      setError('Login failed');
    }
  }, [email]);
  
  return (
    <form onSubmit={handleSubmit}>
      <input value={email} onChange={(e) => setEmail(e.target.value)} />
      {error && <p className="error">{error}</p>}
      <button>Submit</button>
    </form>
  );
}

More hooks, more setup!

🌍 Alignment with Platform Values

1. Transparansi (Transparency)

• ✅ Code is readable (like HTML/JS)
• ✅ No hidden abstractions
• ✅ Community-driven
• ✅ MIT License
• ✅ Open source framework
• ✅ Full transparency of compiled code

2. Integritas (Integrity)

• ✅ Honest assessment of trade-offs
• ✅ No marketing hype
• ✅ Community over corporation
• ✅ Practical solutions over buzzwords
• ✅ Accountable development practices

3. Kedaulatan Data (Data Sovereignty)

• ✅ Open source framework
• ✅ No vendor lock-in
• ✅ Can self-host everything
• ✅ Full control over infrastructure

4. Keep It Simple

• ✅ Minimal boilerplate
• ✅ Intuitive syntax (like HTML)
• ✅ Lower learning curve
• ✅ Fewer concepts to master
• ✅ No need to learn "framework patterns"
• ✅ Better for new contributors

5. Not Bloated

• ✅ Small bundle size (1.2KB vs 43KB)
• ✅ Zero runtime overhead
• ✅ Fast load times
• ✅ Mobile-friendly
• ✅ Lightweight dependencies
• ✅ Edge-deployable

📚 Resources for Contributors

Getting Started with SvelteKit

1. Official Docs: https://kit.svelte.dev
2. Svelte Tutorial: https://svelte.dev/tutorial
3. Svelte 5 Runes: https://svelte.dev/docs/svelte-compiler#runes
4. Examples: https://github.com/sveltejs/kit/tree/master/examples

Learning Path for New Contributors

1. Day 1: Read Svelte tutorial (2-3 hours)
2. Day 2: Build a small component
3. Day 3: Understand SvelteKit routing
4. Day 4: Start contributing to this project!

Why This Stack is Sustainable

• ✅ Svelte is growing rapidly (2024-2025)
• ✅ SvelteKit is stable and production-ready
• ✅ Community is supportive
• ✅ Documentation is excellent
• ✅ Future-proof (compiler-based approach)

⚠️ Trade-offs & Challenges

Honest Assessment: What We Need to Anticipate

While SvelteKit is an excellent choice for this project, the team and contributors should be aware of these challenges:

1. Smaller Ecosystem vs React/Vue

Challenge:

npm search "react-*"     → 250,000+ packages
npm search "vue-*"       → 50,000+ packages
npm search "svelte-*"    → 5,000+ packages

What it means:

• ⚠️ Fewer pre-built components available
• ⚠️ Less Stack Overflow solutions
• ⚠️ Fewer tutorials and guides
• ⚠️ Less third-party integration ready-made

Impact on this project:

• Most UI components need to be built from scratch
• Need to adapt React/Vue components manually
• May take longer to find solutions for specific problems

Mitigation:

• ✅ Create reusable component library for this project
• ✅ Document common patterns and solutions
• ✅ Build design system early
• ✅ Use web standards (works across frameworks)

2. Smaller Community & Learning Resources

Challenge:

What it means:

• ⚠️ Harder to find answers to specific problems
• ⚠️ Fewer video tutorials in Indonesian
• ⚠️ Less Stack Overflow coverage
• ⚠️ Smaller job market (if contributors want career)

Impact on contributors:

• New contributors might struggle to find resources
• Indonesian speakers may have fewer localized materials
• Need more self-learning and experimentation

Mitigation:

• ✅ Maintain comprehensive project documentation
• ✅ Create "Common Problems & Solutions" guide
• ✅ Encourage contributors to document their learnings
• ✅ Build internal knowledge base
• ✅ Provide mentorship for new contributors

3. Less Enterprise Adoption

Challenge:

Companies using each framework:

• React: Facebook, Netflix, Airbnb, Twitter (millions of sites)
• Vue: Alibaba, Xiaomi, Nintendo
• Svelte: The New York Times, 1Password, Square (growing, but smaller)

What it means:

• ⚠️ Fewer "proven at scale" examples
• ⚠️ Less confidence from enterprise stakeholders
• ⚠️ Harder to convince clients/business of tech choice
• ⚠️ Fewer enterprise tools integration

Impact on this project:

• May need to justify tech choice to stakeholders
• Less "safe choice" perception
• Need to prove scalability ourselves

Mitigation:

• ✅ Emphasize the technical benefits (performance, bundle size)
• ✅ Show real-world usage (NYT, 1Password)
• ✅ Build and document scaling experiences
• ✅ Focus on outcomes, not framework popularity

4. Migration & Learning Curve

Challenge for Contributors with React/Vue Background:

Common confusions:

// They might expect:
import { useState, useEffect } from 'react'; // ❌ Not needed in Svelte

// React pattern:
const [count, setCount] = useState(0); // ❌ Verbose

// Svelte pattern (what they need to learn):
let count = 0; // ✅ Automatic reactivity

What it means:

• ⚠️ Contributors need to "unlearn" React patterns
• ⚠️ Different mental model
• ⚠️ Need training/support initially
• ⚠️ Slower onboarding for experienced developers

Impact on productivity:

• Contributors with React experience might be slower at first
• Code reviews need to catch "React-style" mistakes
• Need more documentation on "how we do things here"

Mitigation:

• ✅ Create migration guide: "Coming from React?"
• ✅ Pair programming with experienced Svelte developers
• ✅ Code review with focus on "Svelte way"
• ✅ Internal training sessions
• ✅ Start with small tasks to learn patterns

5. Less Mature Tooling

Challenge:

Development tools maturity:

• React DevTools: Mature, feature-rich
• Vue DevTools: Good
• Svelte DevTools: Growing, but less features

What it means:

• ⚠️ Debugging can be harder
• ⚠️ Fewer IDE extensions
• ⚠️ Less profiling tools
• ⚠️ Slower feature development in tooling

Impact on development:

• Debugging performance issues takes more effort
• Need to rely on browser DevTools more
• Less visibility into component state

Mitigation:

• ✅ Use browser DevTools effectively
• ✅ Add console logging strategically
• ✅ Create debugging guide
• ✅ Contribute to Svelte DevTools if needed
• ✅ Use Chrome DevTools performance profiling

6. Job Market & Career Impact

Challenge:

Job market in Indonesia (2024):

• React developers: High demand, 2000+ jobs
• Vue developers: Medium demand, 500+ jobs
• Svelte developers: Low demand, 50+ jobs

What it means:

• ⚠️ Harder to find Svelte jobs in Indonesia
• ⚠️ Contributors may need to learn React for career
• ⚠️ Fewer companies understand the tech
• ⚠️ Less "resume value" in traditional hiring

Impact on contributors:

• May limit career options in Indonesia
• Need to learn React anyway for market
• Less opportunity to use at other companies

Mitigation:

• ✅ Emphasize learning transferable skills
• ✅ Document that Svelte skills = better understanding of web fundamentals
• ✅ Svelte knowledge makes you better at React/Vue
• ✅ Focus on building portfolio, not just framework
• ✅ Be honest: "Learn Svelte here, but know React is still in demand"

7. Breaking Changes & Churn

Challenge:

Framework evolution:

• Svelte 3 → Svelte 4 → Svelte 5 (major changes in short time)
• Svelte 5 Runes is a significant paradigm shift

Recent major changes:

// Old way (Svelte 4):
let count = 0;
function increment() {
  count += 1; // Automatic reactivity
}

// New way (Svelte 5 Runes):
let count = $state(0); // Explicit state
function increment() {
  count += 1; // Still works
}

What it means:

• ⚠️ Code might need updates when framework changes
• ⚠️ Breaking changes more frequent than React
• ⚠️ Need to keep up with framework evolution
• ⚠️ More refactoring required over time

Impact on maintenance:

• Need to stay updated with Svelte changes
• Migration guides needed
• May break existing code
• Requires ongoing education

Mitigation:

• ✅ Pin Svelte version for stability
• ✅ Document breaking changes
• ✅ Create upgrade guides
• ✅ Test extensively after updates
• ✅ Stay informed about roadmap

8. Third-Party Integration Challenges

Challenge:

Integration with popular services:

// React has official libraries:
import { GoogleMapsReact } from 'google-maps-react'; // ✅ Official
import { StripeProvider } from 'react-stripe-js'; // ✅ Official

// Svelte equivalents may be missing or less mature:
// Most packages need manual integration
// Or need to create adapters

What it means:

• ⚠️ Popular services prioritize React
• ⚠️ Need to create our own wrappers
• ⚠️ Integration takes more time
• ⚠️ May need to use vanilla JavaScript instead

Impact on feature development:

• Adding Google Maps: Easy in React, harder in Svelte
• Payment integration: More setup needed
• Chart libraries: Fewer options
• Form builders: Need to build ourselves

Mitigation:

• ✅ Use vanilla JavaScript when possible
• ✅ Create reusable integration utilities
• ✅ Document integration patterns
• ✅ Build project-specific adapters
• ✅ Use Web Components (framework agnostic)

🎯 Honest Comparison: React vs Svelte for This Project

If We Chose React Instead:

Pros:

• ✅ Larger ecosystem (easier to find solutions)
• ✅ More developers available in Indonesia
• ✅ More learning resources in Indonesian
• ✅ Easier to hire contributors
• ✅ More third-party integrations
• ✅ Larger community support

Cons:

• ❌ Larger bundle size (43KB vs 1.2KB) - Bloated!
• ❌ More boilerplate - Not simple!
• ❌ More complex mental model - Not simple!
• ❌ Steeper learning curve - Not accessible!
• ❌ Less edge-friendly (Cloudflare)
• ❌ Doesn't align with "keep it simple, not bloated" philosophy

Why We Still Chose Svelte:

Despite these challenges, we chose Svelte because:

1. Keep It Simple: Minimal boilerplate, intuitive syntax
2. Not Bloated: Smallest bundle size, zero runtime overhead
3. Performance: Fast load times matter for our users
4. Edge deployment: Cloudflare is critical for our architecture
5. Open source values: Community over corporation
6. Transparency: Readable code, no hidden magic
7. We can mitigate ecosystem issues by building internal tools

🛡️ Risk Mitigation Strategy

How We Address These Challenges:

📝 When to Consider Alternatives

Re-evaluate SvelteKit choice if:

1. We can't find contributors (after 6 months)

   • → Consider React if community isn't growing

2. Performance gains don't matter (users on fast internet always)

   • → React is more convenient if speed isn't priority

3. We need specific integrations that only exist for React

   • → Weigh whether to change stack or build integration

4. Team expertise heavily favors React

   • → Consider if training cost > ecosystem benefit

None of these apply yet, so SvelteKit remains the right choice.

💡 Final Thoughts: Balanced Perspective

SvelteKit is not perfect, but it's the right choice for this project because:

Core Platform Values:

1. Transparansi (Transparency)

   • ✅ Open source, auditable code
   • ✅ No hidden abstractions
   • ✅ Community-driven development

2. Integritas (Integrity)

   • ✅ Honest about trade-offs (this document!)
   • ✅ No marketing hype
   • ✅ Practical solutions

3. Kedaulatan Data (Data Sovereignty)

   • ✅ User owns their data
   • ✅ Can self-host
   • ✅ No vendor lock-in

4. Keep It Simple

   • ✅ Minimal boilerplate
   • ✅ Intuitive syntax
   • ✅ Lower learning curve
   • ✅ No framework-specific patterns to memorize

5. Not Bloated

   • ✅ Smallest possible bundle (1.2KB)
   • ✅ Zero runtime overhead
   • ✅ Fast, efficient, lightweight
   • ✅ Mobile-friendly

We acknowledge the challenges and commit to:

• Building tools to mitigate ecosystem gaps
• Creating documentation to support contributors
• Being honest about trade-offs
• Keeping it simple and avoiding bloat
• Adapting if needed

This is not a "one-size-fits-all" choice.

For a project focused on:

• ✅ Transparency
• ✅ Integrity
• ✅ Data Sovereignty
• ✅ Keep It Simple
• ✅ Not Bloated
• ✅ Edge deployment
• ✅ Open source values

SvelteKit is the best fit.

✅ Conclusion

SvelteKit was chosen because:

1. Keep It Simple: Lowest learning curve, intuitive syntax, minimal boilerplate
2. Not Bloated: Smallest bundle size (1.2KB), zero runtime overhead, efficient
3. Performance: Fast load times, edge-ready, mobile-friendly
4. Developer UX: Most pleasant to use, feels like HTML/JS
5. Transparency: Readable code, no hidden abstractions, open source
6. Type Safety: Built-in, no manual setup needed
7. Full-Stack: Everything in one framework

This choice helps us:

• ✅ Attract more contributors (simpler to learn)
• ✅ Build faster (less boilerplate)
• ✅ Deploy easier (smaller bundles)
• ✅ Maintain better (code is readable)
• ✅ Scale globally (edge deployment)
• ✅ Stay true to "keep it simple, not bloated" principle

We acknowledge challenges:

• ⚠️ Smaller ecosystem
• ⚠️ Less resources in Indonesian
• ⚠️ Smaller job market
• ⚠️ Need to build more ourselves

And we commit to:

• ✅ Keep it simple - avoid unnecessary complexity
• ✅ Avoid bloat - keep dependencies minimal
• ✅ Mitigate challenges through documentation
• ✅ Build internal tools and libraries
• ✅ Support contributors learning curve
• ✅ Be honest about trade-offs

📝 References

• SvelteKit Documentation
• Svelte Tutorial
• Why Svelte (Official Blog)
• Svelte 5 Runes
• Cloudflare Pages Deployment

Created: 2025-10-27
Author: Sandikodev
Status: Active Technical Decision
Version: 1.0