प्यारा और स्मार्ट होना बंद करो

यह पाठ कुख्यात (कम से कम पायथन समुदाय में) अर्मिन रोनकर के लेख 'स्टॉप बीइंग क्यूट एंड क्लीवर' का अनुवाद है।

अपने खाली समय में अंतिम दिन मैं एक अनुसूचक बना रहा था। यह विचार सरल था: AngularJS और कुछ अन्य जावास्क्रिप्ट पुस्तकालयों का उपयोग करके विश्व-मित्र का एक क्लोन बनाएं।

और आपको पता है क्या? यह किसी भी तरह से मजेदार नहीं था। मैं किसी चीज़ पर काम करते हुए लंबे समय तक नाराज़ नहीं रहा, जिसका अर्थ कुछ है, क्योंकि आमतौर पर मैं जल्दी से असंतोष व्यक्त करता हूं (मैं ट्विटर पर अपने अनुयायियों से माफी मांगता हूं)।

मैं नियमित रूप से जावास्क्रिप्ट का उपयोग करता हूं, लेकिन मुझे शायद ही कभी अन्य लोगों के कोड से निपटना पड़ा। आमतौर पर मैं केवल jQuery, अंडरस्कोर और कभी-कभी AngularJS से जुड़ा हुआ हूं। हालांकि, इस बार मैं सभी में गया और विभिन्न तृतीय-पक्ष पुस्तकालयों का उपयोग करने का फैसला किया।

इस परियोजना के लिए, मैंने jQuery का उपयोग किया, जिसे आप (और क्यों?) के बिना नहीं कर सकते, और AngularJS कुछ UI घटकों (कोणीय-यूआई और jQuery UI बाइंडिंग) के साथ। समय क्षेत्र के साथ काम करने के लिए, क्षणों का उपयोग किया गया था।

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

हालाँकि, मैंने जावास्क्रिप्ट पुस्तकालयों (कम से कम मैं उपयोग करने वाले लोगों) में दिखाई देने के लिए भयानक गुणवत्ता कोड के लिए एक खतरनाक प्रवृत्ति पर ध्यान दिया, और सोचा कि ऐसा क्यों हो रहा है।

मुझे js पुस्तकालयों के साथ बहुत सारी समस्याएं थीं, और उनमें से सभी इस तथ्य का परिणाम थे कि हर कोई भाषा की विशेषताओं के बारे में एक लानत नहीं देता था।

कारण यह है कि मैंने तीसरे पक्ष के जावास्क्रिप्ट कोड का सक्रिय रूप से अध्ययन करना शुरू कर दिया था, क्योंकि टाइपबीहेड.जेएस ऑटोकंप्लीशन लाइब्रेरी में 3mb शहर के नाम भेजने की मेरी भोली कोशिश ने अविश्वसनीय रूप से धीमी यूआई का नेतृत्व किया। जाहिर है, अब कोई भी स्मार्ट व्यक्ति एक साथ ऑटो-पूरा करने के साथ क्षेत्र में इतना डेटा नहीं भेजेगा, लेकिन सबसे पहले उन्हें सर्वर साइड पर फ़िल्टर करेगा। लेकिन यह समस्या धीमे डेटा लोडिंग में नहीं, बल्कि धीमी गति से फ़िल्टरिंग में निहित है। जो मैं समझ नहीं सका, क्योंकि भले ही 26,000 तत्वों की एक रेखीय खोज हो, लेकिन यह इतना धीमा नहीं होना चाहिए।

प्रागितिहास

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

1. हम "सैन" टाइप करके सैन फ्रांसिस्को की तलाश कर रहे हैं। ~ 200 मी।
2. हम "फ्रैंक" लिखकर सैन फ्रांसिस्को की तलाश कर रहे हैं। ~ 200 मी।
3. हम सैन फ्रांसिस्को की तलाश कर रहे हैं "san fran" टाइप करके। दूसरा।
4. हम सैन फ्रांसिस्को की तलाश कर रहे हैं, फिर से "सान" टाइप कर रहे हैं। दूसरा।

क्या चल रहा है? यदि हम एक से अधिक बार कुछ खोजते हैं तो खोज कैसे टूट जाती है?

मैंने जो पहली चीज़ की, नए फ़ायरफ़ॉक्स प्रोफाइलर का उपयोग यह देखने के लिए किया गया था कि इसमें कितना समय लगता है। और बहुत जल्दी उसने टाइपियाहेड में चीजों का एक गुच्छा पाया जो बहुत अजीब था।

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

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

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

इसके आधार पर, मुझे अब विश्वास हो गया है कि जेएस एक तरह का वाइल्ड वेस्ट सॉफ्टवेयर डेवलपमेंट है। सबसे पहले, क्योंकि यह गुणवत्ता के मामले में वर्ष 2003 के PHP कोड के साथ प्रतिस्पर्धा करता है, लेकिन जाहिर है कि यह कम लोगों को चिंतित करता है, क्योंकि यह क्लाइंट की तरफ काम करता है, और सर्वर पर नहीं। आपको स्लो-रनिंग जावास्क्रिप्ट के लिए भुगतान करने की आवश्यकता नहीं है।

स्मार्ट कोड

पहला दर्द बिंदु वे लोग हैं जिन्हें जेएस एक प्यारा और 'स्मार्ट' भाषा लगता है। और यह मुझे हास्यास्पद लगता है जब कोड की समीक्षा करते हुए और बग ढूंढते हुए। यहां तक ​​कि अगर आप इस्तेमाल किए गए मुहावरों को जानते हैं, तो आप सुनिश्चित नहीं हो सकते हैं कि साइड इफेक्ट जानबूझकर हैं या अगर किसी ने सिर्फ गलती की है।

एक उदाहरण के लिए मैं typeahead.js का एक टुकड़ा दूंगा:

_transformDatum: function(datum) {
    var value = utils.isString(datum) ? datum : datum[this.valueKey],
        tokens = datum.tokens || utils.tokenizeText(value), 
        item = {
            value: value,
            tokens: tokens
        };
    if (utils.isString(datum)) {
        item.datum = {};
        item.datum[this.valueKey] = datum;
    } else {
        item.datum = datum;
    }
    item.tokens = utils.filter(item.tokens, function(token) {
        return !utils.isBlankString(token);
    });
    item.tokens = utils.map(item.tokens, function(token) {
        return token.toLowerCase();
    });
    return item;
}

, . , – c . ? - . , - . value- ( ) . – ( ) . , .

, :

{
    "value": "San Francisco",
    "tokens": ["san", "francisco"],
    "extra": {}
}

:

{
    "value": "San Francisco",
    "tokens": ["san", "francisco"],
    "datum": {
        "value": "San Francisco",
        "tokens": ["san", "francisco"],
        "extra": {}
    }
}

, , , , datum- , . : , . , , 10MB.

JavaScript, . , , . ''.

. : datum, ? . , – , - . , JS , - .

, , . , JS-, , map. map , ["1", "2", "3"].map(parseInt) [1, NaN, NaN].

. :

_processData: function(data) {
    var that = this, itemHash = {}, adjacencyList = {};
    utils.each(data, function(i, datum) {
        var item = that._transformDatum(datum), id = utils.getUniqueId(item.value);
        itemHash[id] = item;
        utils.each(item.tokens, function(i, token) {
            var character = token.charAt(0), adjacency =
                adjacencyList[character] || (adjacencyList[character] = [ id ]);
            !~utils.indexOf(adjacency, id) && adjacency.push(id);
        });
    });
    return {
        itemHash: itemHash,
        adjacencyList: adjacencyList
    };
}

: utils.indexOf – , utils.getUniqueId .

, - O(1), hashmap. . 100 000 , , .

:

utils.each(item.tokens, function(i, token) {
    var character = token.charAt(0), adjacency =
        adjacencyList[character] || (adjacencyList[character] = [ id ]);
    !~utils.indexOf(adjacency, id) && adjacency.push(id);
});

, . , ? !~utils.indexOf(...) && if (utils.indexOf(...) >= 0)? , hashmap adjacencyList… , ID , . - ‘’ .

– + ( , noop) . +value – , parseInt(value, 10).

, Ruby. Ruby , '': false nil. – ''. . JS . – .

, "" false. , . . jQuery each this. , this , , .

:

> !'';
true

> !new String('');
false

> '' == new String('');
true

Ruby, JavaScript. . , , . - , , .

~ indexOf , -1 , . , , « ».

«»

, , JS . , Python – , runtime . JavaScript . AngularJS.

, JS , . . . , , .

, Angular , , , , . , – , . , , , ' ' – .

, , . - . , , .

, Angular DOM . , , firing’ . .

, . JavaScript. API stateful-. , , . moment-. , , foo.add('minutes', 1) . , , API . , , , .

, JS API, ‘’ . , Python. Python , immutable- . , , first-, -.

« »

Angular, . UI JavaScript, . . , . fooBar, DOM foo-bar. ? , style DOM API, . , , . . Angular-, .

Angular JS- . AnguarJS, , . , JS: . . . Angular, .

?

Python JavaScript . , Angular URL . , . ? , - , .

Angular. JS HTML. DOM, , . - HTML :

function escapeHTML(string) {
    var el = document.createElement('span');
    el.appendChild(document.createTextNode(string));
    return el.innerHTML;
}

URL:

function getQueryString(url) {
    var el = document.createElement('a');
    el.href = url;
    return el.search;
}

, .

- , , , , . JS-.

« »

PHP , , . . , . : , , . , , PHP- mod-. - , . , register_globals, SQL, .

JS . , , . , , .

: , . PHP , JS « » , .

?

, JavaScript. , , , PHP: , , , , . , , , , .

Python-. , , , . Django , , .

, JavaScript- , .

Armin Ronacher,
09/12/2013