Student List [editar]

Arthur Domingues Rios - 13731751

Ayrton da Costa Ganem Filho - 14560190

Bruno Basckeira Chinaglia - 14562233

Christyan Paniago Nantes - 15635906

Enzo Tonon Morente - 14568476
Felipe Volkweis - 14570041

João Pedro Alves Notari Godoy - 14582076

Letícia Barbosa Neves - 14588569

Miguel Rodrigues Tomazini - 14599300

Pedro Bizon Dania - 11812667

Pedro Henrique Ferreira Silva - 14677526

[editar]

Slides [editar]

GoogleSlides

Svelte [editar]

Svelte is a compiler-centric JavaScript UI framework that transforms declarative components into highly optimized imperative code at build time. It eschews the virtual DOM, in contrast to React or Vue, yielding leaner bundles and snappier runtime behavior.

Contents

• 1. Main Features
• 2. Advantages
• 3. Disadvantages
• 4. Application Niches
• 5. Future Perspectives
• 6. Framework Comparison
• React
• Vue

1. Main Features

1.1 Component-Driven Architecture

A Svelte component is a .svelte file combining:

• <script> – business logic and reactive state declarations
• Markup – HTML with templating directives ({#if}, {#each}, event handlers like on:click)
• <style> – CSS scoped at compile time

During build, the compiler emits minimal, framework-agnostic JavaScript that directly manipulates the DOM nodes corresponding to your component’s template.

1.2 Compile-Time Reactivity

Rather than using runtime proxies (Vue) or hooks and setState (React), Svelte’s reactivity is signaled via direct assignments and reactive labels:

<script>
 let count = 0;
 $: doubled = count * 2; 
</script>
<button on:click="{() => count++}">Increment</button>
<p>Doubled value: {doubled}</p>
 

The compiler analyzes these statements and emits granular update code, avoiding any virtual DOM diffing overhead.

1.3 Project Initialization

Scaffold a new project:

npx degit sveltejs/template my-app
cd my-app
npm install
npm run dev
 

The built-in development server provides hot module reloading and instant compilation feedback.

---

2. Advantages

• Performance: No virtual DOM means direct DOM updates and smaller runtime payload.
• Bundle Size: Only your code + tiny runtime helpers → often < 10 KB gzipped.
• Developer Ergonomics: Minimal boilerplate; syntax resembles plain HTML/JS rather than JSX.
• Scoped Styles & Animations: CSS is auto-scoped; built-in transition directives eliminate external libs.
• Lightweight State Management: Native stores API for cross-component reactive data.

3. Disadvantages

• Ecosystem: Fewer third-party libraries/plugins than React/Vue; some niche components missing.
• Tooling Maturity: DevTools and IDE integrations are evolving but not as extensive.
• Enterprise Adoption: Smaller job market; perceived risk in very large-scale projects.
• Reactivity Edge Cases: Deep mutation requires immutable patterns (vs. React’s setState or Vue proxies).

4. Main Application Niches

Svelte excels where performance and bundle size matter most:

• Mobile & Low-Bandwidth Environments: Lean deliverables for slow networks.
• Interactive Dashboards: Real-time charts & data viz without virtual-DOM churn.
• Embedded Widgets: Incremental upgrades on legacy pages, thanks to self-contained components.
• Rich Media Experiences: e.g., Spotify Wrapped, IKEA marketing templates – fluid animations and interactivity.

5. Future Perspectives

The upcoming Svelte 5 introduces a “signals-inspired” reactivity API ($state, $derived, $effect) for even more predictable dependency tracking, while retaining compile-time optimizations. Adoption is buoyed by SvelteKit (SSR/routing) and Svelte Native (mobile), and the project’s inclusion in surveys as a “most loved” framework suggests continued community momentum.

6. Framework Comparison

Aspect	Svelte	React	Vue
Rendering Strategy	Compile-time → direct DOM ops	Runtime virtual DOM diffing	Runtime virtual DOM + proxy reactivity
Reactivity API	Assignment + $: labels	setState/hooks (useState, useEffect)	Proxy-based reactive refs/computed
Bundle Overhead	Minimal (< 10 KB gzipped)	~30–50 KB gzipped	~20–30 KB gzipped
Styling	Scoped by default	CSS-in-JS or external	Scoped via <style scoped>
Learning Curve	Low (HTML/JS syntax)	Medium (JSX + state management)	Low-Medium (templates + reactivity nuances)

React

A ubiquitous UI library by Facebook. Uses JSX, a virtual DOM, and a hook-based state management model. Highly mature ecosystem with extensive third-party libraries and enterprise adoption. Boilerplate can be substantial, but flexibility is unmatched.

Vue

A progressive framework combining template syntax with a reactive proxy system. Offers a gradual adoption path (from CDN drop-in to full SPA via Vue CLI/Vite). Balances ease of use with performance, but still relies on runtime diffing and proxies.