Programação reativa real no Svelte 3.0

O título do artigo pode parecer um pouco chamativo, no entanto, como o próprio quadro Svelte e as idéias por trás dele. Se você ainda não sabe nada sobre Svelte, aperte o cinto, agora correremos para a revolução.

Observe que este não é um tutorial sobre como iniciar o Svelte. Já existe um excelente guia interativo passo a passo da equipe Svelte que o envolverá no mundo da programação reativa.

Disclaimer: Eu não sou uma estrela do rock na programação e não sei tudo no mundo. Estou simplesmente entusiasmado com as novas tendências que acontecem todos os dias e gosto de falar sobre elas quando posso - foi assim que este artigo apareceu. Seja crítico com ela e informe-me se eu escrevi algo ridículo.

Ok, agora vamos nos aprofundar no tópico!

Mas primeiro, Reaja

Antes de dizer por que acho que Svelte vai rasgar todo mundo, vamos dar uma olhada neste recente tweet de um homem chamado Dan e tentar entender o que ele quis dizer:

Hmm, por que se chama React então?

Mais uma ressalva: este artigo não pretende criticar o React. Decidi usá-lo como exemplo, porque a maioria das pessoas que lia este artigo estava lidando com o React em um ponto ou outro da vida. É só agora que este é o melhor exemplo para contrastar o Svelte.

O que Dan quis dizer e como isso afetou a maneira como escrevemos código agora? Para responder a essas perguntas, deixe-me simplificar como o React funciona sob o capô.

Quando um aplicativo React é renderizado, uma cópia do DOM é colocada em uma estrutura chamada Virtual DOM . Esse DOM virtual medeia entre o código do React e o que o navegador exibe no DOM.

, (, this.setState useState), React , , .

DOM , , . DOM, DOM, , DOM .

, DOM , , React DOM. .

, . React, ( this.setState ), DOM , React (-! ).

Dan, , React . React , . .

, Svelte

Svelte — - , - . DOM , .

, , , JavaScript ? — . .

1.

Svelte — . Svelte — . , Svelte — , JavaScript, DOM - .

-, ? ?  — . , , . , .

Rich Harris YGLF 2019:

Svelte 3.0 API .

? , , React ( ) API, , ( this.setState useState) DOM.

this.setState React ( UI ) , API, .

Svelte .

, Observable. , . , — .

1. (() => {
2.   let square = number => number * number;
3.
4.   let secondNumber = square(firstNumber);
5.   let firstNumber = 42;
6.
7.   console.log(secondNumber);
8. })();

, №4, secondNumber firstNumber, .

, . ? , ( , ).

, , :

1.     'square'    ?
     - ,  

2.     'secondNumber'    ?
     -    'square'  'firstNumber'.    'square',     'firstNumber',     .

3. ,   'firstNumber'.     'secondNumber'  'square'  'firstNumber'
     -      ,     'console.log'?
     - ,  .

, , , , .

№4, , firstNumber, , . , №5, №5, №4 .

: , A B, B .

, , Svelte ? JavaScript . : $: foo = bar. , , , $ foo = bar ( strict mode , foo ).

, Svelte $:, , . .

! API JavaScript API this.setState.

:

1. //  js
2. let foo = 10;
3. let bar = foo + 10; // bar   20
4. foo = bar // bar    20 ( )
5. bar = foo + 10 //  bar  30

6. // svelte js
7. let foo = 10;
8. $: bar = foo + 10; // bar  20
9. foo = 15 //  bar   25,      foo

, bar foo, , bar = foo + 10, API, this.setState ({bar = foo + 10}). .

, foo 15, bar 25, API, . Svelte .

Javascript , , :

1. //... 
2. function instance($$self, $$props, $$invalidate) {
3.   let foo = 10; // bar  20

4.   $$invalidate('foo', foo = 15) //  bar   25,      foo

5.   let bar;

6.   $$self.$$.update = ($$dirty = { foo: 1 }) => {
7.     if ($$dirty.foo) { $$invalidate('bar', bar = foo + 10); }
8.   };

9.   return { bar };
10. }
11. //...

, . .

, foo , bar ? , Svelte- , .

Svelte . , — .

: №4, bar , EventLoop .

, . , Svelte UI .

2.

, , Svelte , ? React Svelte, :

17 29

, , React.js —  Angular .

, Svelte , , . , —  .

, -. ? , , , ?

, , , . , , React-, .

, API Svelte , .

3.

, , Svelte - . ? , Svelte?

, React , , DOM , DOM , - ( ).

, , React , , . React API, shouldComponentUpdate, useMemo, React.PureComponent ..

DOM .

Svelte DOM, DOM ? , Rich Harris YGLF:

— . .

, -, , . , Svelte , .

, Svelte . Svelte Javascript, DOM. , Svelte DOM ?

, (, React) Svelte , - . , React API, , . Svelte =.

 — , foo  — =, Svelte, , , foo. Svelte DOM, foo.

, . , Rich Harris .

Svelte 3.0 — , - . , . Svelte , Javascript- .

, , . Svelte React, Angular UI ?

— . Svelte , , , , .

, React -, Svelte , .

!

Svelte: C Telegram