मोबाइल वेब डेवलपमेंट की बुनियादी बातें

Chrome Dev Summit 2014 में कई तरह के विषय मौजूद थे और इस दौरान कई ब्रैंड ने नए एपीआई के बारे में बात की. हालांकि, यह नए और अलग विषयों पर नहीं था.

अगर आप एक नए वेब डेवलपर हैं या एक अनुभवी डेवलपर भी हैं, जो नए एपीआई के बारे में जानना चाहते हैं, तो इस बात की संभावना है कि आप इन तीन चरणों को अपनाएं: सीखें, बनाएं, और दोहराएं.

मैट गैंट में Chrome डेवलपर प्लैटफ़ॉर्म टीम की ओर से इन समस्याओं के समाधान के लिए की जा रही कोशिशों के बारे में बताया गया है.

जानें.

वेब की बुनियादी बातें, कई विषयों की जानकारी देने वाले इस्तेमाल के उदाहरण से जुड़े दस्तावेज़ों का एक सेट है. इसका मुख्य लक्ष्य है, डेवलपर को कम या बिलकुल जानकारी न होना, ताकि सबसे सही तरीकों को जल्द से जल्द लागू किया जा सके.

वेब की बुनियादी बातों में एक मुख्य मकसद यह पक्का करना है कि अगर आपने किसी विषय का पहली बार इस्तेमाल नहीं किया है, तो दिशा-निर्देश "विकल्प लकवा" को जितना हो सके उतना कम कर दे. ऐडी ओस्मान ने पेस्ट्री बॉक्स में इस अंदाज़ को बहुत अच्छे से दिखाया है.

अगर आपको साइट या इसके कॉन्टेंट में कोई समस्या दिखती है या आपको किसी खास विषय को शामिल करने के लिए वेब के बुनियादी सिद्धांतों की मदद चाहिए, तो कृपया GitHub पर सुझाव सबमिट करके हमें बताएं.

बिल्ड.

नया वेब प्रोजेक्ट शुरू करने में आपकी मदद करने के लिए, हमने Web Starter किट बनाया है. इसमें आपकी ज़रूरत की सारी चीज़ें मौजूद हैं:

• मज़बूत बिल्ड प्रोसेस
• बॉयलरप्लेट एचटीएमएल
• स्टाइल गाइड

बिल्ड प्रोसेस

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

Web Starter Kit में ये प्रोसेस शामिल हैं:

हम सीएसएस और JavaScript को छोटा करते हैं और जोड़ते हैं, ताकि ब्राउज़र फ़ाइल को जल्दी से फ़ेच कर सके. साथ ही, JavaScript को JSHint के ज़रिए भी चलाया जाता है, ताकि JavaScript के सबसे सही तरीकों और कोडिंग की सामान्य गलतियों की जांच की जा सके. इमेज को इमेजमिन से छोटा किया जाता है. साथ ही, इसका इस्तेमाल करके फ़ाइल के साइज़ को बड़े स्तर पर कम किया जा सकता है. हमारे पास स्टाइल गाइड सीएसएस बनाने की एक प्रोसेस भी है.

मल्टी-डिवाइस एचटीएमएल के लिए बॉयलरप्लेट

किसी नए पेज के लिए आपने जो एचटीएमएल का पहला सेट लिखा है वह काफ़ी सही है. यह भी संभव है कि आपके पास ऐसी स्टॉक एचटीएमएल फ़ाइल को जल्दी से पाने का तरीका होगा जो कई डिवाइस और स्क्रीन साइज़ में अच्छी तरह से काम करती है.

हम Web Starter Kit में, ऐसी सभी सुविधाओं के लिए सहायता जोड़ना चाहते थे जो प्लैटफ़ॉर्म और आपकी साइट के बीच की रेखा को धुंधला करती हैं. इसलिए, हमने Android, Windows Phone, iOS और Opera कोस्ट के लिए होम स्क्रीन पर जोड़ें और स्प्लैश स्क्रीन की सुविधा जोड़ी है.

स्टाइल गाइड

Web Starter Kit का आखिरी हिस्सा है स्टाइल गाइड.

इससे किसी भी नए प्रोजेक्ट को डिफ़ॉल्ट स्टाइल और कॉम्पोनेंट का बेहतरीन सेट मिलता है, जो स्टाइल की मदद से विकास करने को बढ़ावा देता है. मौजूदा स्टाइल को एलिमेंट में बदला जा सकता है और अपनी स्टाइल जोड़ी जा सकती है.

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

दोहराएं.

नई जानकारी का इस्तेमाल शुरू करने के बाद, आपको अपने काम को डीबग करने, बेहतर बनाने, और उसका रखरखाव करने के लिए DevTools का इस्तेमाल करना होगा.

DevTools में कुछ बड़ी नई सुविधाएं लॉन्च की गई हैं. मैट इन नई सुविधाओं पर गौर करते हैं.

डिवाइस मोड

डिवाइस मोड, DevTools में एक नया सेक्शन है. इसकी मदद से, सीएसएस में मीडिया क्वेरी देखते समय यह तुरंत देखा जा सकता है कि आपकी साइट अलग-अलग मोबाइल डिवाइसों पर कैसे काम करती है.

डिवाइस मोड की बेहतरीन सुविधाओं में से एक यह है कि नेटवर्क की रफ़्तार को थ्रॉटल किया जा सकता है. इससे जीपीआरएस, ईडीजीई, 3G, 3G, DSL या वाई-फ़ाई कनेक्शन इस्तेमाल करने वाले किसी उपयोगकर्ता के अनुभव को सिम्युलेट किया जा सकता है.

पेंट प्रोफ़ाइलर

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

पेंट प्रोफ़ाइलर नहीं, आपको इस बारे में ज़्यादा जानकारी देता है कि उस पेंट के दौरान, ब्राउज़र असल में क्या कर रहा है.

अमान्य करने की ट्रैकिंग

DevTools अब एक वजह देता है कि कभी भी पेंट या लेआउट क्यों हुआ. यह टाइमलाइन, ब्राउज़र के व्यवहार के बारे में जानने वाले किसी भी व्यक्ति के लिए काम का है. साथ ही, इसकी मदद से अपने कोड को ऑप्टिमाइज़ करके, परफ़ॉर्मेंस की समस्याओं से बचा जा सकता है.

फ़्लेम चार्ट व्यू

यह टाइमलाइन में उपलब्ध जानकारी को देखने का बिलकुल अलग तरीका है. इससे यह देखना आसान हो जाता है कि टास्क कैसे ओवरलैप होते हैं और अन्य टास्क की वजह से ब्राउज़र पर क्या होता है.

फ़्रेम व्यूअर

फ़्लेम चार्ट व्यू में, एक खास फ़्रेम चुना जा सकता है. इसके अंदर ही यह पता लगाया जा सकता है कि पेज के किन एलिमेंट को कंपोज़िट लेयर में प्रमोट किया गया है. साथ ही, यह भी पता लगाया जा सकता है कि उन्हें प्रमोट क्यों किया गया है.

जानें. बिल्ड. दोहराएं.

वेब डेवलपमेंट को तेज़ी से समझने में डेवलपर की मदद करने के लिए, Chrome टीम की ये कुछ कोशिशें हैं. इसलिए, वेब की बुनियादी बातें, वेब स्टार्टर किट, और Chrome DevTools में मौजूद नई सुविधाओं को ज़रूर देखें.