Imanol Valero es freelance y lleva años experimentando con muchos lenguajes y tecnologías.

En esta masterclass nos contará cuáles son las grandes ventajas que ha descubierto en Svelte para crear sus aplicaciones web.

Svelte ha sido un tema de profundo interés para nosotros, desde entender sus intrínsecas características hasta implementar prácticas directas y, por supuesto, compartir estos conocimientos contigo.

Inicios y Comparativas

Nos embarcamos en este viaje con Svelte, abordando una comparativa amigable pero esencial con React para establecer un contexto sobre sus utilidades, oportunidades y diferencias clave, proporcionando un escenario sobre por qué y cómo Svelte se ha convertido en una herramienta valiosa para desarrolladores frontend.

Estructurando componentes en Svelte

Al trabajar con Svelte, rápidamente nos dimos cuenta de la simplicidad y eficacia que ofrece en términos de estructuración de componentes y manejo de estilos. Exploramos su naturaleza modular y la forma en que facilita la creación de componentes, utilizando una combinación de código, plantillas y estilos que facilitan un desarrollo frontend intuitivo.

Manejo de interacciones y eventos

Profundizando en interacciones y manejo de eventos, Svelte mostró su capacidad para gestionar datos y eventos entre componentes con facilidad. Discutimos cómo los dispatchers y la función bind son vitales para manejar eventos y asegurar que los datos se sincronicen adecuadamente entre variables y la interfaz de usuario.

APIs y datos

Al abordar la integración de API y gestión de datos externos, nos conectamos con la API de GeoNames, experimentando con la manipulación de datos y empleando diversas directivas y bucles en Svelte para gestionar los datos recibidos de una manera pragmática y eficiente.

Creando mapas con Leaflet

En nuestra sección sobre creación y uso de componentes de mapa dinámico, exploramos la creación de interfaces y componentes de mapa, definiendo props y añadiendo marcadores, mientras gestionábamos de manera efectiva las funciones de update y destroy y la comunicación entre componentes a través de setContext.

Manipulación de elementos en la UI

Nuestra exploración sobre manipulación de elementos nos llevó a utilizar la directiva ‘use’ en Svelte, habilitando el control eficiente de elementos HTML, como popups, y discutiendo estrategias sobre cómo pueden ser gestionados y vinculados efectivamente a otros elementos en la aplicación.

Gestión de Estados con Stores

Finalmente, en la gestión de estados con Stores en Svelte, compartimos insights sobre cómo los stores, siendo sitios específicos para mantener y gestionar estados, se pueden modificar y utilizar para simplificar la comunicación y gestión del estado entre componentes, promoviendo una arquitectura de aplicación limpia y mantenible.

Creando una webapp con mapa dinámico para aprender Svelte