आइए, पॉलीमर की मदद से कुछ ऐप्लिकेशन बनाएं!

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

जैसे-जैसे डेवलपर अपने एलिमेंट बनाने के बारे में ज़्यादा जानने लगते हैं और ऐप्लिकेशन बनाने के बारे में सोचते हैं, वैसे-वैसे कई सवाल खुलते हैं:

• आपको अपने ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) को किस तरह बनाना चाहिए?
• अलग-अलग राज्यों में ट्रांसफ़र के लिए क्या करना पड़ता है?
• परफ़ॉर्मेंस को बेहतर बनाने के लिए कुछ रणनीतियां क्या हैं?
• ऑफ़लाइन अनुभव कैसे देना चाहिए?

Chrome Dev समिट के लिए, मैंने इन सवालों के जवाब देने की कोशिश की. इसके लिए, मैंने एक छोटा संपर्क ऐप्लिकेशन बनाया और उसे बनाने की प्रोसेस का विश्लेषण किया. मैंने यह सोचा है कि:

बनावट

एक ऐप्लिकेशन को मॉड्यूलर टुकड़ों में तोड़ना, जिसे आपस में जोड़ा जा सके और फिर से इस्तेमाल किया जा सके, वेब कॉम्पोनेंट का एक मुख्य काम है. पॉलिमर के कोर-* और पेपर-* एलिमेंट, कोर- टूलबार और पेपर-आइकॉन-बटन जैसे छोटे टुकड़ों से शुरू करना आसान बनाते हैं...

...और कंपोज़िशन की शक्ति के ज़रिए, किसी ऐप्लिकेशन का स्कैफ़ोल्ड बनाने के लिए उनकी संख्या को जितने चाहें उतने एलिमेंट के साथ जोड़ें.

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

core-list, एक ऐसा एलिमेंट है जो ढेर सारा कॉन्टेंट मैनेज करने के लिए सबसे सही है.

core-list को किसी डेटा सोर्स (बुनियादी तौर पर ऑब्जेक्ट के कलेक्शन) से कनेक्ट किया जा सकता है. साथ ही, अरे में मौजूद हर आइटम के लिए, यह टेंप्लेट इंस्टेंस को स्टैंप करेगा. टेंप्लेट में, पॉलीमर के डेटा बाइंडिंग सिस्टम का इस्तेमाल करके, कॉन्टेंट को फटाफट वायर अप किया जा सकता है.

ट्रांज़िशन

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

हालांकि, यह अब भी प्रयोग के तौर पर शुरू किया गया एलिमेंट है, लेकिन core-animated-pages प्लग किया जा सकने वाला ऐनिमेशन सिस्टम उपलब्ध कराता है. इसका इस्तेमाल, आपके ऐप्लिकेशन की अलग-अलग स्थितियों के बीच ट्रांज़िशन के लिए किया जा सकता है.

हालांकि, ऐनिमेशन पहेली का सिर्फ़ आधा हिस्सा है. ऐप्लिकेशन के यूआरएल को ठीक से मैनेज करने के लिए, ऐप्लिकेशन में राऊटर के साथ उन ऐनिमेशन का इस्तेमाल करना होता है.

वेब कॉम्पोनेंट के लिए, रूटिंग के दो अलग-अलग वर्शन उपलब्ध हैं: इंपेरेटिव और डिक्लेरेटिव. core-animated-pages को किसी भी तरीके से जोड़ा जा सकता है. यह आपके प्रोजेक्ट की ज़रूरतों के हिसाब से सही होता है.

ज़रूरी राऊटर (जैसे कि Flatiron's Director), मिलते-जुलते रास्ते का पता लगा सकता है. इसके बाद, core-animated-pages को अपने चुने गए आइटम को अपडेट करने का निर्देश दे सकता है.

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

दूसरी ओर, डिक्लेरेटिव राऊटर (जैसे कि ऐप्लिकेशन-रूटर) असल में रूटिंग और core-animated-pages को एक एलिमेंट में जोड़ सकता है. इससे, दोनों को मैनेज करना ज़्यादा आसान हो जाता है.

अगर आपको और बेहतर कंट्रोल चाहिए, तो ज़्यादा रूटिंग जैसी लाइब्रेरी पर जाएं. इसे डेटा बाइंडिंग का इस्तेमाल करके core-animated-pages के साथ जोड़ा जा सकता है. इससे आपको दोनों पर बेहतरीन सुविधाएं मिल सकती हैं.

परफ़ॉर्मेंस

जैसे-जैसे आपका ऐप्लिकेशन बेहतर होता जा रहा है, आपको परफ़ॉर्मेंस में आने वाली रुकावटों, खास तौर पर नेटवर्क से जुड़ी चीज़ों पर नज़र रखनी होगी, क्योंकि अक्सर यह मोबाइल वेब ऐप्लिकेशन का सबसे धीमा का हिस्सा होता है.

वेब कॉम्पोनेंट की पॉलीफ़िल को शर्तों के साथ लोड करने से, परफ़ॉर्मेंस को आसान बनाने में मदद मिलती है.

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

<script>
  if ('import' in document.createElement('link')) {
    // HTML Imports are supported
  } else {
    document.write(
      '<script src=“bower_components/webcomponentsjs/HTMLImports.min.js"><\/script>'
    );
  }
</script>

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

Vulkanize आपके इंपोर्ट को एक बंडल में जोड़ देगा. इससे आपके ऐप्लिकेशन के एचटीटीपी अनुरोधों की संख्या बहुत ज़्यादा कम हो जाएगी.

ऑफ़लाइन

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

जेक आर्चिबाल्ड ने हाल ही में सर्विस वर्कर पैटर्न की एक शानदार कुकबुक पब्लिश की है. मैं तुरंत इसकी शुरुआत करूंगी:

सर्विस वर्कर को इंस्टॉल करना बहुत आसान है. कोई worker.js फ़ाइल बनाएं और आपका ऐप्लिकेशन चालू होने पर इसे रजिस्टर करें.

यह ज़रूरी है कि आप अपने ऐप्लिकेशन के रूट में worker.js का पता लगाएं. इससे यह आपके ऐप्लिकेशन के किसी भी पाथ से मिलने वाले अनुरोधों को बीच में रोक सकता है.

वर्कर के इंस्टॉल हैंडलर में, मैं रिसॉर्स के बोटलोड को कैश करता/करती हूं (इसमें ऐप्लिकेशन को चलाने वाला डेटा भी शामिल है).

अगर वे इसे ऑफ़लाइन ऐक्सेस कर रहे हैं, तो मेरे ऐप्लिकेशन को उपयोगकर्ता को कम से कम एक फ़ॉलबैक अनुभव देने में मदद मिलती है.

आगे बढ़ो!

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