Le titre de l'article peut sembler un peu flashy, cependant, comme le cadre Svelte lui-même et les idées qui le sous-tendent. Si vous ne savez toujours rien de Svelte, attachez votre ceinture, maintenant nous allons nous précipiter vers la révolution.
Veuillez noter qu'il ne s'agit pas d'un tutoriel pour démarrer avec Svelte. Il existe déjà un excellent guide interactif étape par étape de l'équipe Svelte qui vous plongera dans le monde de la programmation réactive.
Avertissement: je ne suis pas une rock star en programmation et je ne sais pas tout dans le monde. Je suis tout simplement enthousiasmé par les nouvelles tendances qui se produisent quotidiennement et j'aime en parler quand je le peux - c'est ainsi que cet article est apparu. Soyez critique envers elle et assurez-vous de me faire savoir si j'ai écrit quelque chose de ridicule.
Ok, passons maintenant au sujet!
Mais d'abord, réagissez
Avant de dire pourquoi je pense que Svelte va déchirer tout le monde, jetons un coup d'œil à ce récent tweet d'un homme nommé Dan, et essayons de comprendre ce qu'il voulait dire:
Hmm, pourquoi ça s'appelle React alors?
Encore une mise en garde: cet article ne vise aucunement à critiquer React. J'ai décidé de l'utiliser comme exemple parce que la plupart des gens qui ont lu cet article ont eu affaire à React à un moment ou à un autre de leur vie. C’est juste maintenant que c’est le meilleur exemple de contraste de Svelte.
Que voulait dire Dan et comment cela a-t-il affecté la façon dont nous écrivons le code maintenant? Pour répondre à ces questions, permettez-moi de simplifier le fonctionnement de React sous le capot.
Lorsqu'une application React est rendue, une copie du DOM est placée dans une structure appelée Virtual DOM . Ce DOM virtuel sert de médiateur entre votre code React et ce que le navigateur affiche dans le 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