Guía de Inicio Rápido de Svelte: Desde la Configuración del Proyecto hasta la Interacción de Componentes y Configuración de Rutas

Este artículo detalla cómo configurar un proyecto Svelte + TypeScript usando Vite, cubriendo la interacción de componentes (componentes padre e hijo, transmisión de datos y eventos entre componentes), varias formas de usar Stores y la configuración de rutas.

¿Qué es Svelte?

Svelte es un marco de frontend moderno que, a diferencia de los marcos tradicionales (como React y Vue), compila los componentes en código JavaScript nativo eficiente en tiempo de construcción en lugar de interpretarlos en tiempo de ejecución. Esto reduce la sobrecarga del marco, mejora el rendimiento y simplifica la estructura del código.

¿Qué puede hacer Svelte?

Svelte se puede usar para construir aplicaciones frontend modernas y reactivas. Soporta desarrollo basado en componentes, gestión de estado, enrutamiento y otras funcionalidades necesarias para el desarrollo frontend moderno. Algunos escenarios de aplicación comunes son:

• Aplicaciones de una sola página (SPA)
• Formularios complejos y procesamiento de datos
• Tableros de actualización de datos en tiempo real
• Interfaces de usuario altamente interactivas

Ventajas de Svelte

1. Alto rendimiento: Dado que Svelte compila el código en JavaScript nativo en tiempo de construcción, reduce la sobrecarga en tiempo de ejecución y mejora el rendimiento.
2. Sintaxis sencilla: La sintaxis de Svelte es simple y fácil de entender, reduciendo el código boilerplate y haciendo el desarrollo más eficiente.
3. Sin DOM virtual: Svelte opera directamente en el DOM en lugar de usar un DOM virtual, lo que hace que las actualizaciones sean más eficientes.
4. Ligero: El tamaño del código generado es pequeño, lo que acelera la carga.

Comparación de Svelte con Vue y React

Tiempo de compilación vs Tiempo de ejecución

• Svelte: Compila el código en JavaScript nativo eficiente en tiempo de construcción.
• React y Vue: Interpretan el código en tiempo de ejecución y actualizan a través del DOM virtual.

Sintaxis y experiencia de desarrollo

• Svelte: Sintaxis sencilla, reduce el código boilerplate, fácil de aprender.
• React: Usa sintaxis JSX, flexible pero relativamente compleja.
• Vue: Usa sintaxis de plantillas, intermedia entre Svelte y React, fácil de entender.

Rendimiento

• Svelte: Debido a la optimización en tiempo de compilación, el rendimiento generalmente es mejor que React y Vue.
• React y Vue: Proporcionan buen rendimiento a través del DOM virtual, pero en casos extremos pueden no ser tan eficientes como Svelte.

Inicialización del Proyecto

Primero, use Vite para crear un nuevo proyecto Svelte e inicialícelo:

1
npm create vite@latest svelte-ts-app -- --template svelte-ts
2
cd svelte-ts-app
3
npm install

Estructura del Proyecto

La estructura del proyecto es la siguiente:

1
svelte-ts-app/
2
├── node_modules/
3
├── public/
4
│   └── favicon.ico
5
├── src/
6
│   ├── assets/
7
│   ├── components/
8
│   │   ├── ChildComponent.svelte
9
│   │   ├── ParentComponent.svelte
10
│   │   └── SiblingComponent.svelte
11
│   ├── routes/
12
│   │   ├── Home.svelte
13
│   │   └── About.svelte
14
│   ├── stores/
15
│   │   └── counter.ts
16
│   ├── App.svelte
17
│   ├── main.ts
18
│   └── index.css
19
├── .gitignore
20
├── index.html
21
├── package.json
22
├── tsconfig.json
23
├── vite.config.ts
24
└── README.md

Configuración de TailwindCSS (este paso no es obligatorio)

Instale TailwindCSS:

1
npm install -D tailwindcss postcss autoprefixer
2
npx tailwindcss init -p

Configure TailwindCSS en tailwind.config.cjs:

1
/** @type {import('tailwindcss').Config} */
2
module.exports = {
3
  content: ["./src/**/*.{html,js,svelte,ts}"],
4
  theme: {
5
    extend: {},
6
  },
7
  plugins: [],
8
};

Cree un archivo index.css en el directorio src y agregue el siguiente contenido:

1
@tailwind base;
2
@tailwind components;
3
@tailwind utilities;

Importe este archivo CSS en main.ts:

1
import "./index.css";
2
import App from "./App.svelte";
3

4
const app = new App({
5
  target: document.body,
6
});
7

8
export default app;

Creación de Componentes

ChildComponent.svelte

1
<script lang="ts">
2
  import { createEventDispatcher } from "svelte";
3

4
  export let message: string;
5
  const dispatch = createEventDispatcher();
6

7
  function handleClick() {
8
    dispatch("notify", { text: "Hello from ChildComponent!" });
9
  }
10
</script>
11

12
<div class="p-4 bg-blue-100 rounded">
13
  <p>{message}</p>
14
  <button
15
    on:click={handleClick}
16
    class="mt-2 bg-blue-500 text-white px-4 py-2 rounded">Notify Parent</button
17
  >
18
</div>

ParentComponent.svelte

1
<script lang="ts">
2
  import ChildComponent from "./ChildComponent.svelte";
3
  import SiblingComponent from "./SiblingComponent.svelte";
4

5
  let parentMessage = "Message from ParentComponent";
6
  let childMessage = "";
7

8
  function handleNotify(event) {
9
    childMessage = event.detail.text;
10
  }
11
</script>
12

13
<div class="p-4 bg-green-100 rounded">
14
  <p>{parentMessage}</p>
15
  <ChildComponent
16
    message="Message from ParentComponent to ChildComponent"
17
    on:notify={handleNotify}
18
  />
19
  <SiblingComponent message={childMessage} />
20
</div>

SiblingComponent.svelte

1
<script lang="ts">
2
  export let message: string;
3
</script>
4

5
<div class="p-4 bg-yellow-100 rounded">
6
  <p>{message}</p>
7
</div>

Uso de Store

En Svelte, un Store es un mecanismo para gestionar el estado de la aplicación, similar a Vuex (Vue) y Redux (React). Svelte proporciona varios tipos de Store como writable, readable y derived para satisfacer diferentes necesidades.

stores/counter.ts

1
import { writable } from "svelte/store";
2

3
export const counter = writable(0);

Uso de Store en Componentes

1
<script lang="ts">
2
  import { counter } from "../stores/counter";
3
</script>
4

5
<div class="p-4 bg-red-100 rounded">
6
  <button
7
    on:click={() => ($counter += 1)}
8
    class="bg-red-500 text-white px-4 py-2 rounded">Increment</button
9
  >
10
  <p>Counter: {$counter}</p>
11
</div>

Uso de Rutas

Instalación de Rutas de SvelteKit

1
npm install @sveltejs/kit

Configuración de Rutas

Cree componentes de ruta en el directorio src/routes:

Home.svelte

1
<script lang="ts">
2
  import ParentComponent from "../components/ParentComponent.svelte";
3
</script>
4

5
<div class="p-4">
6
  <h1 class="text-2xl">Home</h1>
7
  <ParentComponent />
8
</div>

About.svelte

1
<script lang="ts">
2
  import { counter } from "../stores/counter";
3
</script>
4

5
<div class="p-4">
6
  <h1 class="text-2xl">About</h1>
7
  <p>Counter: {$counter}</p>
8
</div>

Configuración de Rutas

Configure las rutas en src/App.svelte:

1
<script lang="ts">
2
  import { Router, Route } from "@sveltejs/kit";
3
  import Home from "./routes/Home.svelte";
4
  import About from "./routes/About.svelte";
5
</script>
6

7
<Router>
8
  <Route path="/" component={Home} />
9
  <Route path="/about" component={About} />
10
</Router>

Ejecución del Proyecto

Asegúrese de haber instalado todas las dependencias y ejecute el proyecto:

1
npm run dev

Conclusión

• Interacción de Componentes: Se mostró la transmisión de mensajes y eventos entre componentes padre e hijo, así como la transmisión de datos entre componentes hermanos.
• Uso de Store: Se mostró cómo usar el store writable de Svelte para gestionar el estado global.
• Uso de Rutas: Se mostró cómo configurar y usar rutas con SvelteKit.