कम कोड लिखें

हाल ही में फ्रेमवर्क के संस्करण 3 की रिलीज के बाद स्वेल पर प्रचार अभी भी एक जगह है, क्योंकि बहुत बढ़े हुए समुदाय और आधिकारिक चैट और हमारे रूसी भाषा के टेलीग्राम चैनल में दोनों सवालों की एक बड़ी संख्या से इसका सबूत है। अधिक से अधिक डेवलपर्स चुपके से या गंभीरता से इस तकनीक को देख रहे हैं और अपनी नई परियोजनाओं में इसके आवेदन के बारे में सोच रहे हैं। इन डेवलपर्स और अन्य सभी लोगों के लिए जो यथासंभव कुशलता से कोड लिखने के विषय में रुचि रखते हैं, रिच हैरिस , फ्रेमवर्क के लेखक और विचारक, ने एक लेख प्रकाशित किया कि कैसे स्वेल्ट डेवलपर को आधुनिक प्रतिक्रियाशील वेब एप्लिकेशन बनाने में प्रयासों को कम करने में मदद करता है, जिसका अनुवाद मैं नीचे प्रस्तुत करता हूं।

किसी भी कोड में कीड़े हो सकते हैं। तदनुसार, आवेदन में संभावित बगों की संख्या आपके द्वारा लिखे गए कोड की मात्रा के साथ बढ़ती है।

जाहिर है, हमें जितना अधिक कोड लिखना होगा, उतना ही अधिक समय लगेगा। जल्द ही, यह अनुकूलन के रूप में ऐसी आवश्यक चीजों के लिए पर्याप्त है, आवेदन में नई सुविधाओं को जोड़ना, अच्छी तरह से या लैपटॉप पर लेने के बजाय बाहर घूमने के लिए पर्याप्त है।

वास्तव में, यह व्यापक रूप से ज्ञात है कि, अनुप्रयोग कोड आधार में वृद्धि के साथ, परियोजना के विकास का समय और बग की संख्या एक रैखिक के साथ भी नहीं बढ़ती है, लेकिन एक द्विघात निर्भरता के साथ। यह हमारे अवचेतन व्यवहार की व्याख्या कर सकता है जब हम आसानी से 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