Svelte 3: Repensando a reatividade

Outro dia, um grande evento aconteceu para a comunidade SvelteJS e, de fato, me parece, para todo o front-end moderno - o tão esperado lançamento do Svelte 3! Portanto, abaixo do corte está uma tradução do artigo de Svelte e um excelente vídeo de seu relatório na YGLF 2019.

Finalmente ele está aqui

Depois de vários meses que duraram alguns dias, chegamos à lua porque podemos anunciar o lançamento estável do Svelte 3. Esse lançamento realmente enorme é o resultado de centenas de horas de trabalho para muitas pessoas na comunidade Svelte, incluindo testadores beta cujos revisões inestimáveis ​​ajudaram a aprimorar o design da estrutura em todas as etapas desta jornada.

Achamos que você vai gostar.

O que é o Svelte?

Svelte é uma estrutura de componente semelhante ao React ou Vue, mas com uma diferença importante. Estruturas tradicionais permitem que você escreva códigos declarados controlados pelo estado, mas não sem punição: o navegador precisa fazer um trabalho extra para transformar essas estruturas declarativas em manipulações DOM, usando técnicas como a difusão DOM virtual que consomem o orçamento existente para renderizar quadros e adicionam responsabilidades ao coletor lixo.

Em vez disso, o Svelte trabalha em tempo de construção , convertendo seus componentes em código imperativo de alto desempenho que atualiza o DOM com precisão cirúrgica. Como resultado, você pode escrever aplicativos ambiciosos com excelentes características de desempenho.

A primeira versão do Svelte foi dedicada a testar a hipótese de que um compilador especialmente projetado pode gerar código confiável e fornecer uma excelente experiência ao usuário. A segunda versão foi dedicada a pequenas melhorias que colocaram várias coisas em ordem.

O Svelte 3 já é uma revisão significativa. Nos últimos cinco ou seis meses, temos nos concentrado na experiência do usuário dos desenvolvedores . Agora você pode escrever componentes com a quantidade de código padrão significativamente menor do que em qualquer outro lugar. Experimente o nosso novo tutorial e veja o que queremos dizer - se você já conhece outras estruturas, achamos que ficará surpreso.

Para tornar essa oportunidade uma realidade, primeiro precisamos repensar o conceito subjacente às modernas estruturas de interface do usuário: reatividade.


Redefinindo o relatório de reatividade em You Gotta Love Frontend Code Camp 2019

Mover a reatividade para o idioma

Nas versões anteriores do Svelte, era necessário informar ao computador que alguma parte do estado havia mudado chamando o 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! - !