اكتب كودًا أقل

لا يزال Hype on Svelte بعد الإصدار الأخير من الإصدار 3 من الإطار مكانًا له ، كما يتضح من المجتمع المتزايد بشكل كبير وعدد كبير من الأسئلة سواء في الدردشة الرسمية أو في قناة البرقية باللغة الروسية. يبحث المزيد والمزيد من المطورين بشكل خفي أو جاد في هذه التكنولوجيا ويفكرون في تطبيقها في مشاريعهم الجديدة. بالنسبة لهؤلاء المطورين وجميع المهتمين بموضوع كتابة التعليمات البرمجية بأكبر قدر ممكن من الكفاءة ، نشر ريتش هاريس ، مؤلف وعالم الأطر في الإطار ، مقالًا حول كيفية مساعدة Svelte للمطور في تقليل الجهود المبذولة في إنشاء تطبيقات ويب تفاعلية حديثة ، أترجم عنها الترجمة أدناه.

قد يكون هناك أخطاء في أي رمز. وفقًا لذلك ، يزداد عدد الأخطاء المحتملة في التطبيق مع مقدار التعليمات البرمجية التي تكتبها.

من الواضح أنه كلما زاد عدد الشفرات التي يجب أن نكتبها ، كلما زاد الوقت الذي يستغرقه الأمر. قريباً ، يتوقف عن أن يكون كافيًا لأشياء ضرورية مثل التحسين ، أو إضافة ميزات جديدة إلى التطبيق ، حسناً ، أو للمشي في الهواء الطلق بدلاً من التقاطها على جهاز كمبيوتر محمول.

في الواقع ، من المعروف على نطاق واسع أنه مع زيادة قاعدة كود التطبيق ، فإن وقت تطوير المشروع وعدد الأخطاء لا ينموان حتى مع وجود خطية ، ولكن مع اعتماد من الدرجة الثانية . يمكن أن يفسر ذلك سلوكنا اللاشعوري عندما ننتبه بسهولة إلى طلب سحب يتكون من 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