Svelte 3: repensando la reactividad

Justo el otro día, ocurrió un gran evento para la comunidad SvelteJS, y de hecho, me parece, para toda la interfaz moderna: ¡el lanzamiento tan esperado de Svelte 3! Por lo tanto, debajo del corte hay una traducción del artículo de Svelte y un excelente video de su informe en YGLF 2019.

Finalmente el esta aqui

Después de varios meses que han pasado como un par de días, estamos en el séptimo cielo porque podemos anunciar el lanzamiento estable de Svelte 3. Este lanzamiento realmente enorme es el resultado de cientos de horas de trabajo para muchas personas en la comunidad Svelte, incluidos los probadores beta cuyos Las valiosas revisiones ayudaron a perfeccionar el diseño del marco en cada etapa de este viaje.

Creemos que te gustará.

¿Qué es esvelte?

Svelte es un marco de componentes similar a React o Vue, pero con una diferencia importante. Los marcos tradicionales le permiten escribir código declarativo controlado por el estado, pero no sin castigo: el navegador necesita hacer un trabajo adicional para transformar estas estructuras declarativas en manipulaciones DOM utilizando técnicas como la diferenciación virtual DOM , que consume el presupuesto existente para representar marcos y agrega responsabilidades al recopilador basura

En cambio, Svelte trabaja en tiempo de construcción , convirtiendo sus componentes en un código imperativo de alto rendimiento que actualiza el DOM con precisión quirúrgica. Como resultado, puede escribir aplicaciones ambiciosas con excelentes características de rendimiento.

La primera versión de Svelte se dedicó a probar la hipótesis de que un compilador especialmente diseñado puede generar código confiable y proporcionar una excelente experiencia de usuario. La segunda versión se dedicó a pequeñas mejoras que ordenaron varias cosas.

Svelte 3 ya es una revisión significativa. En los últimos cinco o seis meses, hemos estado prestando especial atención a la experiencia del usuario de los desarrolladores . Ahora puede escribir componentes con la cantidad de código repetitivo significativamente menor que en cualquier otro lugar. Pruebe nuestro nuevo tutorial y vea lo que queremos decir: si ya está familiarizado con otros marcos, creemos que se sorprenderá gratamente.

Para hacer realidad esta oportunidad, primero teníamos que repensar el concepto subyacente a los marcos de interfaz de usuario modernos: la reactividad.


Redefiniendo el informe de reactividad en You Gotta Love Frontend Code Camp 2019

Mueve la reactividad al lenguaje

En versiones anteriores de Svelte, tenía que decirle a la computadora que alguna parte del estado había cambiado llamando al método this.set :

const { count } = this.get();
this.set({
  count: count + 1
});

. , this.set this.setState, ( ) React:

const { count } = this.state;
this.setState({
  count: count + 1
});

( — React ), .

React, -. , , , . , . , embedded-, , .

, API … , API — API. . count , , :

count += 1;

, , :

count += 1; $$invalidate('count', count);

, . .

. Svelte Achim Vedam, -, svelte.technology svelte.dev.

« UI » « web-». Svelte — , , , , , , , . .

2

Svelte 2, , . svelte-upgrade, , . , .

: , , Svelte 3, , .

, . , , . Sapper, Next.js, Svelte 3. Svelte Native, Android iOS Svelte, .

, , , devtools . ., , . TypeScript.

, , Svelte 3 — -. , , . , Discord , Telegram GitHub — , .

P/S —

Svelte 3.
Svelte 3.
Svelte 3.

AlexxNB! - !