Schreiben Sie weniger Code

Der Hype um Svelte nach der jüngsten Veröffentlichung von Version 3 des Frameworks hat noch einen Platz zu bieten, wie die stark vergrößerte Community und eine Vielzahl von Fragen sowohl im offiziellen Chat als auch in unserem russischsprachigen Telegrammkanal belegen. Immer mehr Entwickler schauen sich diese Technologie heimlich oder ernsthaft an und denken über ihre Anwendung in ihren neuen Projekten nach. Für diese Entwickler und alle anderen, die sich für das Thema des möglichst effizienten Schreibens von Code interessieren, veröffentlichte Rich Harris , der Autor und Ideologe des Frameworks, einen Artikel darüber, wie Svelte dem Entwickler hilft, den Aufwand für die Erstellung moderner reaktiver Webanwendungen zu minimieren, dessen Übersetzung ich unten anbiete.

Es kann Fehler in jedem Code geben. Dementsprechend wächst die Anzahl möglicher Fehler in der Anwendung mit der Menge an Code, die Sie schreiben.

Je mehr Code wir schreiben müssen, desto mehr Zeit wird natürlich benötigt. Bald reicht es nicht mehr aus, um Dinge wie die Optimierung, das Hinzufügen neuer Funktionen zur Anwendung oder das Gehen im Freien zu erledigen, anstatt auf einem Laptop zu lernen.

Tatsächlich ist allgemein bekannt, dass mit zunehmender Anwendungscodebasis die Projektentwicklungszeit und die Anzahl der Fehler nicht einmal linear, sondern quadratisch zunehmen. Dies kann unser unbewusstes Verhalten erklären, wenn wir leicht auf eine Pull-Anforderung von 10 Zeilen achten, bei der Code mit mehr als 100 Zeilen selten beachtet wird. Und sobald der Code zu lang wird und nicht mehr auf einen Bildschirm passt, steigt der kognitive Aufwand, um ihn zu verstehen, erheblich an. Wir versuchen, die Situation durch Refactoring und Hinzufügen von Kommentaren zu korrigieren - Aktionen, die mit ziemlicher Sicherheit zu noch mehr Code führen. Dies ist ein Teufelskreis.

Wir sind alle ein bisschen besessen, oder? Wir überwachen die Leistung der Anwendung, die Größe des Bundles und alles andere, was wir zumindest irgendwie messen können, aber wir achten selten auf die Menge an Code, die wir schreiben.

Die Lesbarkeit des Codes ist wichtig

Natürlich sage ich nicht, dass wir irgendwelche kniffligen Tricks anwenden sollten, um unseren Code zum Nachteil der Lesbarkeit so kompakt wie möglich zu gestalten. Ich sage auch nicht, dass das Reduzieren von Codezeilen ein Selbstzweck ist, da es helfen kann, normal lesbaren Code wie diesen zu transformieren ...

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