Écrivez moins de code

Le battage médiatique sur Svelte après la sortie récente de la version 3 du framework a encore sa place, comme en témoigne la communauté considérablement accrue et un grand nombre de questions à la fois dans le chat officiel et dans notre chaîne de télégramme en russe. De plus en plus de développeurs regardent furtivement ou sérieusement cette technologie et réfléchissent à son application dans leurs nouveaux projets. Pour ces développeurs et tous ceux qui s'intéressent au sujet de l'écriture de code aussi efficacement que possible, Rich Harris , l'auteur et idéologue du framework, a publié un article sur la façon dont Svelte aide le développeur à minimiser les efforts pour créer des applications Web réactives modernes, dont je propose la traduction ci-dessous.

Il peut y avoir des bogues dans n'importe quel code. Par conséquent, le nombre de bogues possibles dans l'application augmente avec la quantité de code que vous écrivez.

De toute évidence, plus nous devons écrire de code, plus cela prend du temps. Bientôt, cela cesse d'être suffisant pour des choses nécessaires telles que l'optimisation, l'ajout de nouvelles fonctionnalités à l'application, enfin, ou pour marcher à l'extérieur au lieu de ramasser sur un ordinateur portable.

En fait, il est bien connu qu'avec une augmentation de la base de code de l'application, le temps de développement du projet et le nombre de bugs ne croissent même pas avec une dépendance linéaire, mais avec une dépendance quadratique . Cela peut expliquer notre comportement subconscient lorsque nous prêtons facilement attention à une demande de tirage de 10 lignes, ce niveau d'attention qui va rarement au code supérieur à 100 lignes. Et dès que le code devient trop long et cesse de tenir sur un seul écran, l'effort cognitif requis pour le comprendre augmente considérablement. Nous essayons de corriger la situation en refactorisant et en ajoutant des commentaires - des actions qui conduisent presque certainement à encore plus de code. Il s'agit d'un cercle vicieux.

Nous sommes tous un peu obsédés, non? Nous surveillons les performances de l'application, la taille du bundle et tout ce que nous pouvons mesurer au moins d'une manière ou d'une autre, mais nous prêtons rarement attention à la quantité de code que nous écrivons.

La lisibilité du code est importante

Bien sûr, je ne dis pas que nous devrions utiliser des astuces pour rendre notre code aussi compact que possible au détriment de la lisibilité. De plus, je ne dis pas que la réduction des lignes de code est une fin en soi, car elle peut aider à transformer un code lisible normal comme celui-ci ...

for (let i = 0; i <= 100; i += 1) {
    if (i % 2 === 0) {
        console.log(`${i} — `);
    }
}

… - :

for (let i = 0; i <= 100; i += 1) if (i % 2 === 0) console.log(`${i} — `);

, , .

, Svelte

, , Svelte. , , React, Vue Svelte. Svelte:

<script>
    let a = 1;
    let b = 2;
</script>

<input type="number" bind:value={a}>
<input type="number" bind:value={b}>

<p>{a} + {b} = {a + b}</p>

React? , :

import React, { useState } from 'react';

export default () => {
    const [a, setA] = useState(1);
    const [b, setB] = useState(2);

    function handleChangeA(event) {
        setA(+event.target.value);
    }

    function handleChangeB(event) {
        setB(+event.target.value);
    }

    return (
        <div>
            <input type="number" value={a} onChange={handleChangeA}/>
            <input type="number" value={b} onChange={handleChangeB}/>

            <p>{a} + {b} = {a + b}</p>
        </div>
    );
};

, , Vue:

<template>
    <div>
        <input type="number" v-model.number="a">
        <input type="number" v-model.number="b">

        <p>{{a}} + {{b}} = {{a + b}}</p>
    </div>
</template>

<script>
    export default {
        data: function() {
            return {
                a: 1,
                b: 2
            };
        }
    };
</script>

, 442 React 263 Vue, -, Svelte 145 . React !

pbpaste | wc -c

— , React 40% , Svelte. Svelte, .

Svelte , . React Vue — React . — <> — <div>, .

Vue <template>, , , .

React <input>:

function handleChangeA(event) {
    setA(+event.target.value);
}

, , , . , a , — , ( value={a}). , , +, 2 + 2 22 4.

Svelte, Vue — v-model, v-model.number, , <input type="number">.

Svelte :

let count = 0;

function increment() {
    count += 1;
}

React useState:

const [count, setCount] = useState(0);

function increment() {
    setCount(count + 1);
}

— , 60% . , , , .

Vue , data, , . , Vue , , '', .

Svelte, UI . — , , useMemo,useCallback useEffect React ( ).

? , . Svelte — , JavaScript: , . , . , , , .

Svelte 3
Svelte 3
Svelte 3
Telegram