Tulis lebih sedikit kode

Hype on Svelte setelah rilis baru-baru ini versi 3 kerangka masih memiliki tempat untuk menjadi, sebagaimana dibuktikan oleh komunitas yang sangat meningkat dan sejumlah besar pertanyaan baik dalam obrolan resmi dan di saluran telegram berbahasa Rusia kami. Semakin banyak pengembang diam-diam atau serius melihat teknologi ini dan memikirkan penerapannya dalam proyek baru mereka. Untuk para pengembang ini dan semua orang lain yang tertarik pada topik penulisan kode seefisien mungkin, Rich Harris , penulis dan ideolog dari kerangka kerja, menerbitkan sebuah artikel tentang bagaimana Svelte membantu pengembang untuk meminimalkan upaya dalam menciptakan aplikasi web reaktif modern, terjemahan yang saya tawarkan di bawah ini.

Mungkin ada bug dalam kode apa pun. Dengan demikian, jumlah bug yang mungkin dalam aplikasi tumbuh dengan jumlah kode yang Anda tulis.

Jelas, semakin banyak kode yang harus kita tulis, semakin banyak waktu yang dibutuhkan. Segera, itu berhenti menjadi cukup untuk hal-hal yang diperlukan seperti optimasi, menambahkan fitur baru ke aplikasi, atau untuk berjalan di luar daripada mengambil di laptop.

Bahkan, secara luas diketahui bahwa, dengan peningkatan basis kode aplikasi, waktu pengembangan proyek dan jumlah bug tumbuh bahkan tidak dengan linear, tetapi dengan ketergantungan kuadratik . Ini dapat menjelaskan perilaku bawah sadar kita ketika kita dengan mudah memperhatikan permintaan tarikan 10 baris yang tingkat perhatiannya jarang diberikan pada kode yang lebih besar dari 100 baris. Dan begitu kode menjadi terlalu panjang dan tidak lagi muat di satu layar, upaya kognitif yang diperlukan untuk memahaminya meningkat secara signifikan. Kami mencoba memperbaiki situasi dengan refactoring dan menambahkan komentar - tindakan yang hampir pasti mengarah pada lebih banyak kode. Ini adalah lingkaran setan.

Kita semua sedikit terobsesi, kan? Kami memantau kinerja aplikasi, ukuran bundel, dan segala sesuatu yang dapat kami ukur setidaknya, entah bagaimana, tetapi kami jarang memperhatikan jumlah kode yang kami tulis.

Pembacaan kode penting

Tentu saja, saya tidak mengatakan bahwa kita harus menggunakan trik rumit untuk membuat kode kita seringkas mungkin sehingga merugikan keterbacaan. Juga, saya tidak mengatakan bahwa mengurangi baris kode adalah tujuan itu sendiri, karena dapat membantu mengubah kode yang dapat dibaca normal seperti ini ...

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