🏇🏾 🤶 🤫 写更少的代码 🍶 🌚 👩🏾

在最近发布的框架第3版之后，对Svelte的炒作仍然有待解决的地方，这一点已得到证明，在官方聊天室和我们的俄语电报频道中，社区的数量大大增加，并且存在大量问题。越来越多的开发人员正在偷偷或认真地研究这项技术，并考虑在其新项目中的应用。对于这些开发人员以及所有对尽可能高效地编写代码的主题感兴趣的其他人员，该框架的作者兼思想家Rich Harris发表了一篇文章，内容涉及Svelte如何帮助开发人员最大程度地减少创建现代响应式Web应用程序的工作量，我在下面提供其翻译。

任何代码中都可能存在错误。因此，应用程序中可能存在的错误的数量会随着您编写的代码量的增加而增加。

显然，我们必须编写的代码越多，花费的时间也就越多。很快，对于诸如优化，为应用程序添加新功能之类的必要事情，或者对于在户外散步而不是在笔记本电脑上捡拾东西来说，它已不再足够。

实际上，众所周知，随着应用程序代码库的增加，项目开发时间和错误数量的增长甚至不是线性的而是二次依赖的。当我们轻松注意10行的拉取请求时，这很少能引起注意，而对于100行以上的代码很少注意。并且，一旦代码变得太长而无法在一个屏幕上显示，理解它所需的认知努力就会大大增加。我们正在尝试通过重构和添加注释来解决这种情况-这些操作几乎可以肯定会导致更多代码。这是一个恶性循环。

我们都有点痴迷吧？我们监视应用程序的性能，包的大小以及至少可以以某种方式衡量的其他所有内容，但是我们很少关注所编写的代码量。

代码的可读性很重要

当然，我并不是说我们应该使用任何棘手的技巧使我们的代码尽可能的紧凑，从而损害可读性。另外，我并不是说减少代码行本身就是目的，因为它可以帮助转换像这样的普通可读代码...

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

写更少的代码

代码的可读性很重要

, Svelte

More articles: