Escreva menos código

O Hype no Svelte após o recente lançamento da versão 3 da estrutura ainda tem um lugar para estar, como evidenciado pelo aumento da comunidade e um grande número de perguntas, tanto no bate-papo oficial quanto no canal de telegrama em russo. Cada vez mais desenvolvedores estão olhando furtivamente ou seriamente para essa tecnologia e pensando em sua aplicação em seus novos projetos. Para esses desenvolvedores e todos os outros interessados ​​no tópico de escrever código da maneira mais eficiente possível, Rich Harris , autor e ideólogo da estrutura, publicou um artigo sobre como o Svelte ajuda o desenvolvedor a minimizar os esforços na criação de aplicativos Web reativos modernos, cuja tradução eu ofereço a seguir.

Pode haver erros em qualquer código. Assim, o número de possíveis erros no aplicativo aumenta com a quantidade de código que você escreve.

Obviamente, quanto mais código tivermos que escrever, mais leva tempo. Logo, deixa de ser suficiente para coisas necessárias, como otimização, adicionando novos recursos ao aplicativo ou para caminhar ao ar livre, em vez de pegar em um laptop.

De fato, é sabido que, com um aumento na base de código do aplicativo, o tempo de desenvolvimento do projeto e o número de bugs crescem nem mesmo com uma dependência linear, mas com uma dependência quadrática . Isso pode explicar nosso comportamento subconsciente quando prestamos atenção facilmente a uma solicitação pull de 10 linhas, cujo nível de atenção raramente é dado ao código com mais de 100 linhas. E assim que o código fica muito longo e deixa de caber em uma tela, o esforço cognitivo necessário para entendê-lo aumenta significativamente. Estamos tentando corrigir a situação refatorando e adicionando comentários - ações que quase certamente levam a ainda mais código. Este é um ciclo vicioso.

Estamos todos um pouco obcecados, certo? Monitoramos o desempenho do aplicativo, o tamanho do pacote configurável e tudo o mais que podemos medir pelo menos de alguma forma, mas raramente prestamos atenção à quantidade de código que escrevemos.

A legibilidade do código é importante

Obviamente, não estou dizendo que devemos usar truques complicados para tornar nosso código o mais compacto possível, em detrimento da legibilidade. Além disso, não estou dizendo que reduzir linhas de código é um fim em si mesmo, pois pode ajudar a transformar código legível normal como este ...

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