Escribe menos código

Hype en Svelte después del lanzamiento reciente de la versión 3 del marco todavía tiene un lugar para estar, como lo demuestra la gran comunidad y una gran cantidad de preguntas tanto en el chat oficial como en nuestro canal de telegramas en ruso. Cada vez más desarrolladores miran esta tecnología sigilosa o seriamente y piensan en su aplicación en sus nuevos proyectos. Para estos desarrolladores y todos los demás que estén interesados ​​en el tema de escribir código de la manera más eficiente posible, Rich Harris , el autor e ideólogo del marco, publicó un artículo sobre cómo Svelte ayuda al desarrollador a minimizar los esfuerzos en la creación de aplicaciones web reactivas modernas, cuya traducción ofrezco a continuación.

Puede haber errores en cualquier código. En consecuencia, la cantidad de posibles errores en la aplicación aumenta con la cantidad de código que escribe.

Obviamente, cuanto más código tengamos que escribir, más tiempo llevará. Pronto, deja de ser suficiente para cosas tan necesarias como la optimización, agregar nuevas funciones a la aplicación, bien, o para caminar al aire libre en lugar de recoger en una computadora portátil.

De hecho, es ampliamente conocido que, con un aumento en la base del código de la aplicación, el tiempo de desarrollo del proyecto y el número de errores crecen ni siquiera con una dependencia lineal, sino con una dependencia cuadrática . Esto puede explicar nuestro comportamiento subconsciente cuando prestamos atención fácilmente a una solicitud de extracción de 10 líneas cuyo nivel de atención rara vez se da a códigos de más de 100 líneas. Y tan pronto como el código se hace demasiado largo y deja de caber en una pantalla, el esfuerzo cognitivo requerido para comprenderlo aumenta significativamente. Estamos tratando de arreglar la situación refactorizando y agregando comentarios, acciones que casi con certeza conducen a aún más código. Este es un círculo vicioso.

Todos estamos un poco obsesionados, ¿verdad? Supervisamos el rendimiento de la aplicación, el tamaño del paquete y todo lo demás que podemos medir al menos de alguna manera, pero rara vez prestamos atención a la cantidad de código que escribimos.

La legibilidad del código es importante

Por supuesto, no estoy diciendo que debamos usar ningún truco complicado para hacer que nuestro código sea lo más compacto posible en detrimento de la legibilidad. Además, no estoy diciendo que reducir las líneas de código sea un fin en sí mismo, ya que puede ayudar a transformar un código legible 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