Estrella del Norte

Rate this content
Bookmark

Svelte 5 ha salido, y es radicalmente diferente pero íntimamente familiar.

This talk has been presented at JSNation US 2024, check out the latest edition of this JavaScript Conference.

Rich Harris
Rich Harris
29 min
18 Nov, 2024

Comments

Sign in or register to post your comment.
  • Ismail Zouaoui
    Ismail Zouaoui
    I'm a big fan of Svelte already, and this talk totally hooked me. Rich Harris is amazing at explaining things, and this talk is no exception. It makes me even more excited about using Svelte for future projects. I've made a bet on Svelte and this talk makes me feel really good about that decision.
Video Summary and Transcription
De niño, el orador estaba fascinado con el espacio y encontrar dirección. Svelte es un enfoque HTML-first para el desarrollo web que simplifica tareas y ofrece reactividad eficiente. El orador reflexiona sobre el crecimiento, los objetivos y la filosofía de diseño de Svelte. Svelte apunta a arreglar software roto y priorizar el enfoque en el usuario. La dirección futura incluye límites de error, mejor depuración y el papel de la IA. Construir software de código abierto es un desafío, y se discute el impacto de Rust. El orador valora la diversidad de frameworks y destaca los avances y desafíos enfrentados por el desarrollo web.
Available in English: North Star

1. Introducción al Espacio y Encontrar Dirección

Short description:

De niño, estaba obsesionado con el espacio y mi padre me enseñó a leer el cielo y encontrar la Estrella del Norte. He estado pensando en cómo este concepto se aplica a otras áreas de nuestras vidas. Me llamo Rich Harris, y esta es una charla sobre encontrar dirección y propósito en el código abierto.

De niño, estaba obsesionado con el espacio. Me encantaba venir a lugares como este. En noches despejadas, salía al jardín trasero con mi padre, él mismo un poco fanático del espacio, y él me enseñaba a leer el cielo. Me enseñó los nombres de las estrellas y las constelaciones. Me enseñó que las cosas que parecen más fijas no lo son, pero que a través de una cuidadosa observación puedes comenzar a predecir sus movimientos. Y me enseñó cómo encontrar la Estrella del Norte.

En una noche clara, si puedes encontrar la Osa Mayor, entonces puedes extender esta línea un poco más para encontrar Polaris, llamada así porque una línea trazada desde el Polo Sur hasta el Polo Norte y extendida al espacio casi la alcanzaría. Es el punto fijo alrededor del cual giran los cielos y siempre apunta hacia el norte. Los antiguos marineros usaban Polaris para cruzar los océanos. En los primeros Estados Unidos, los esclavos fugitivos la seguían hacia la libertad. Hoy en día no tendemos a depender de la navegación celestial, tenemos Google Maps. Pero he estado pensando mucho últimamente sobre este concepto de poder orientarnos en un entorno por lo demás incierto y cómo se aplica a otras áreas de nuestras vidas. ¿Qué significa estar apuntando en la dirección correcta?

Me llamo Rich Harris, puedes encontrarme en richharris.dev en Blue Sky, esta es una charla sobre encontrar dirección y propósito en el código abierto. Como muchos de ustedes, escribo software para ganarme la vida. Más específicamente, trabajo en una interfaz de usuario llamada Svelte. Comencé a trabajar en Svelte hace ocho años y tres días. Comenzó como un proyecto paralelo inocente y divertido que no tenía idea de que tomaría el control de mi vida. La gran idea era esta. ¿Qué pasaría si un framework, en lugar de ser código que se ejecuta en el navegador, fuera un compilador que transformara tu componente en JavaScript autónomo? Lo llamamos el framework mágico que desaparece y en comparación con React, producía paquetes asombrosamente eficientes. Porque movía el trabajo fuera del navegador y dentro de tu proceso de construcción, podíamos hacer que tus aplicaciones fueran realmente pequeñas y realmente rápidas.

2. Evolución de Svelte y el Enfoque HTML

Short description:

Svelte tres salió en 2019 y planteó una pregunta diferente. ¿Podemos usar el compilador para hacer que el desarrollo web en sí sea más rápido? Svelte por sí solo solo resuelve una pequeña parte del problema de construir una aplicación web. En 2020, comenzamos a trabajar en un proyecto complementario llamado SvelteKit. El mes pasado, lanzamos Svelte 5. A diferencia de React, Svelte es innegablemente HTML primero. Svelte toma un enfoque diferente, toma HTML como punto de partida.

Svelte tres salió en 2019 y planteó una pregunta diferente. ¿Podemos usar el compilador para hacer que el desarrollo web en sí sea más rápido? Si no estamos limitados por las reglas de JavaScript, ¿podemos hacer que los componentes sean más fáciles de escribir con menos código repetitivo? Ese fue el punto en el que la gente realmente comenzó a prestar atención a Svelte.

Resulta que aunque la mayoría de los desarrolladores se preocupan profundamente por el rendimiento y el tamaño del paquete en teoría, en la práctica elegimos las herramientas que disfrutamos usar. Algunos líderes de opinión intentarán avergonzarte por esto. Pero creo que es bastante razonable que si vas a pasar 40 horas a la semana trabajando en algo, también podría ser divertido. Y con los compiladores, una mejor experiencia de desarrollador no tiene por qué venir a expensas de la experiencia del usuario. Y Svelte tiene una muy buena experiencia de desarrollador, al menos según encuestas como el estado de JavaScript. No sé cuánto tiempo podemos mantener esta racha, pero estoy emocionado de averiguarlo.

Svelte por sí solo solo resuelve una pequeña parte del problema de construir una aplicación web. A saber, mantener el DOM en sincronía con tu estado de aplicación. Y deja todo lo demás para ti, como configurar tus herramientas de construcción, organizar tu código, definir tus rutas, generar paquetes óptimos y desplegar en diferentes entornos y muchos, muchos otros problemas. En 2020, comenzamos a trabajar en un proyecto complementario llamado SvelteKit, que fue el primer gran framework construido sobre Vite. Está diseñado para resolver esos problemas por ti.

Todo lo cual es para decir que el proyecto ha tenido muchas identidades a lo largo de su vida. El mes pasado, lanzamos Svelte 5. En un nivel, es muy una continuación. Es una versión compatible hacia atrás, que puedes incorporar en un proyecto existente con mínima interrupción. Pero en otro, es el cambio más radical que el proyecto ha experimentado hasta ahora. Así que en este punto, permíteme tomar un momento para presentarte o reintroducirte al nuevo Svelte.

A diferencia de React, Svelte es innegablemente HTML primero. JavaScript es un lenguaje de propósito general decente. Pero como lenguaje para describir interfaces de usuario, es una mala combinación. Cuando escribes JavaScript, te preocupas principalmente por los cambios entre estados que resultan de la interacción del usuario. Pero cuando describes una interfaz de usuario, te preocupas principalmente por los estados mismos. Los frameworks colocan una capa declarativa sobre JavaScript que te permite fingir. Pero a menudo te encuentras trabajando en contra de la corriente del lenguaje.

Svelte toma un enfoque diferente. Toma HTML como punto de partida. Si tienes algún HTML válido, ya sea que lo escribiste tú mismo o co-pilot lo escribió por ti o lo encontraste en CodePen o StackOverflow o incluso en las DevTools de tu navegador, puedes colocar eso en un componente Svelte y funcionará. Lo mismo no es cierto para JSX, que superficialmente se asemeja a HTML, pero lo cambia de varias maneras sutiles y molestas.

QnA

Available in other languages:

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Documentación Full Stack
JSNation 2022JSNation 2022
28 min
Documentación Full Stack
Top Content
The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.
El Viento y las Olas: La formación de Olas de Framework desde el Epicentro
JSNation 2022JSNation 2022
19 min
El Viento y las Olas: La formación de Olas de Framework desde el Epicentro
Top Content
Our understanding of innovation is wrong. Innovations are not introduced by a single point of light. The story of who invented the computer is not linear. Many steps forward led to the development of the computer. Angular has shaped and influenced multiple JavaScript waves, and Angular v14 simplifies development with standalone components.
Mejora Progresiva: Qué es y qué no es, una introducción práctica con Svelte
JSNation 2023JSNation 2023
20 min
Mejora Progresiva: Qué es y qué no es, una introducción práctica con Svelte
Progressive enhancement is a strategy that provides a baseline experience for all users while enhancing it for those with modern browsers. Feature detection and graceful degradation are complementary approaches to achieve this. Polyfills can emulate new browser functionality in old browsers. Progressive enhancement is about meeting user needs while considering performance. Building apps in SvelteKit allows for easy development of progressively enhanced apps. Svelte components and DOM content provide a convenient way to structure and update the UI. Form submission and progressive enhancement can be achieved by enabling file upload and processing when JavaScript is disabled.

Workshops on related topic

Construir con SvelteKit y GraphQL
GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Construir con SvelteKit y GraphQL
Top Content
Featured WorkshopFree
Scott Spence
Scott Spence
¿Alguna vez has pensado en construir algo que no requiera mucho código de plantilla con un tamaño de paquete pequeño? En esta masterclass, Scott Spence irá desde el hola mundo hasta cubrir el enrutamiento y el uso de endpoints en SvelteKit. Configurarás una API de GraphQL en el backend y luego usarás consultas de GraphQL con SvelteKit para mostrar los datos de la API de GraphQL. Construirás un proyecto rápido y seguro que utiliza las características de SvelteKit, y luego lo desplegarás como un sitio completamente estático. Este curso es para los curiosos de Svelte que no han tenido una experiencia extensa con SvelteKit y quieren una comprensión más profunda de cómo usarlo en aplicaciones prácticas.

Tabla de contenidos:
- Inicio e introducción a Svelte
- Inicializar el proyecto frontend
- Recorrido por el proyecto esqueleto de SvelteKit
- Configurar el proyecto backend
- Consultar datos con GraphQL
- Recuperación de datos en el frontend con GraphQL
- Estilización
- Directivas de Svelte
- Enrutamiento en SvelteKit
- Endpoints en SvelteKit
- Despliegue en Netlify
- Navegación
- Mutaciones en GraphCMS
- Envío de mutaciones GraphQL a través de SvelteKit
- Preguntas y respuestas
Desarrollando Blogs Dinámicos con SvelteKit & Storyblok: Una Masterclass Práctica
JSNation 2023JSNation 2023
174 min
Desarrollando Blogs Dinámicos con SvelteKit & Storyblok: Una Masterclass Práctica
Top Content
Featured WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
Esta masterclass de SvelteKit explora la integración de servicios de terceros, como Storyblok, en un proyecto SvelteKit. Los participantes aprenderán cómo crear un proyecto SvelteKit, aprovechar los componentes de Svelte y conectarse a APIs externas. La masterclass cubre conceptos importantes incluyendo SSR, CSR, generación de sitios estáticos y despliegue de la aplicación usando adaptadores. Al final de la masterclass, los asistentes tendrán una sólida comprensión de la construcción de aplicaciones SvelteKit con integraciones de API y estarán preparados para el despliegue.
Construyendo con SvelteKit y GraphQL
JSNation 2022JSNation 2022
170 min
Construyendo con SvelteKit y GraphQL
Workshop
Scott Spence
Scott Spence
¿Quieres familiarizarte con el marco de trabajo que ocupó el primer lugar como el marco de trabajo más querido en la encuesta de desarrolladores de Stack Overflow en 2021?Svelte es un marco de trabajo súper versátil sin virtual DOM, a diferencia de React y Vue. Es un compilador que convierte tus proyectos en HTML, CSS y JavaScript puro.Este masterclass cubrirá los conceptos básicos de la configuración con SvelteKit y la consulta de datos desde una API de GraphQL, utilizando esos datos en SvelteKit para obtener datos para su uso en el cliente (navegador).Aprendizajes clave:Cómo utilizar SvelteKit para construir un proyecto simple, obtener datos desde una API de GraphQL y mostrarlos en el cliente. Se cubrirán muchos de los conceptos fundamentales de Svelte y SvelteKit en este masterclass.
Construye una aplicación frontend completa con Svelte
React Summit 2020React Summit 2020
192 min
Construye una aplicación frontend completa con Svelte
Workshop
Mikhail Kuznetsov
Mikhail Kuznetsov
Svelte es un nuevo y prominente framework de JS que expone la filosofía de "escribir menos, hacer más". Durante este masterclass, adquirirás habilidades como desarrollador de Svelte.Estaremos construyendo una aplicación que imita al famoso sitio web de preguntas y respuestas stackoverflow.com. Comenzaremos desarrollando componentes simples de frontend, luego los conectaremos a un backend en funcionamiento real y finalmente los probaremos y optimizaremos para producción.Asistir a un masterclass es la forma más rápida de adquirir un conjunto de conocimientos sobre la construcción de aplicaciones web con Svelte.