Svelte: The Compiler-First Frontend Framework

Svelte adalah radical approach to building user interfaces, developed by Rich Harris. Unlike React/Vue (runtime frameworks), Svelte is compiler, converts components to highly efficient vanilla JavaScript at build time. No virtual DOM, truly reactive, less code, better performance. Why Svelte: write less code (components more concise), no virtual DOM (direct DOM manipulation, faster), truly reactive (assignments trigger updates, no useState/setState), small bundle size (no framework runtime), gentle learning curve. Basic syntax: .svelte files contain HTML, CSS, JavaScript; script tag untuk logic, style tag scoped by default, reactive declarations ($:), event handlers (on:click). Reactivity: assignments trigger updates, reactive statements ($: doubled = count * 2), reactive blocks ($: { console.log(count) }). Components: import/export components, props (export let name), slots untuk content projection, named slots, slot props. Logic: {#if condition}, {#each items as item}, {@html rawHTML}, {#await promise}. Bindings: bind:value untuk two-way binding, bind:this untuk DOM references, bind:group untuk radio/checkbox groups, component bindings. Lifecycle: onMount, beforeUpdate, afterUpdate, onDestroy. Stores: writable, readable, derived stores untuk shared state, $ prefix untuk auto-subscription. Events: createEventDispatcher untuk custom events, event forwarding, event modifiers (preventDefault, stopPropagation). Transitions/Animations: built-in transitions (fade, slide, fly), custom transitions, animate directive untuk list reordering, motion tweens/springs. SvelteKit: full-stack framework (like Next.js untuk React), file-based routing, server-side rendering (SSR), static site generation (SSG), API routes (+server.js), layouts, error pages, hooks untuk middleware. Data loading: load functions fetch data before rendering, runs on server dan client, form actions untuk mutations. Deployment: adapters untuk different platforms (Vercel, Netlify, Node, static), edge deployment support. State management: Svelte stores sufficient untuk most cases, context API untuk dependency injection, external stores (Redux integration possible). Styling: scoped CSS by default, global styles, CSS variables, Tailwind integration, component libraries (Svelte Material UI, Carbon, DaisyUI). TypeScript: excellent support, .ts files, lang='ts' in script tags. Testing: @testing-library/svelte, Vitest, Playwright untuk E2E. Ecosystem: growing rapidly, npm packages compatible, adapters untuk popular backends. Real-world usage: NYTimes graphics, Apple Music, Spotify, 1Password, Brave browser. Performance: benchmarks show Svelte fastest framework, smallest bundle sizes, excellent Lighthouse scores. Svelte Native: build mobile apps dengan NativeScript. Developer experience: write less boilerplate, intuitive syntax, compile-time errors, fast HMR. Challenges: smaller ecosystem vs React/Vue, fewer job opportunities (growing), SSR can be tricky. Learning resources: interactive tutorial (svelte.dev/tutorial), Svelte Society, YouTube (Fireship, Huntabyte). Future: Svelte 4 released 2023, Svelte 5 dengan runes (new reactivity system) in development. Career: Svelte adoption accelerating, early adopters gain competitive advantage. Svelte rethinks web development, compiler approach eliminates framework overhead, results in faster, smaller, more maintainable applications. Highly recommended untuk new projects valuing performance dan developer experience.