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

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

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

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

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

बनावट

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

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

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

ज़्यादा कॉन्टेंट से निपटने के लिए, एक एलिमेंट core-list है.

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

ट्रांज़िशन

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

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

हालांकि, ऐनिमेशन भी कम ज़रूरी है. किसी ऐप्लिकेशन को अपने यूआरएल को सही तरीके से मैनेज करने के लिए, उन ऐनिमेशन को राऊटर के साथ जोड़ना होगा.

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

ज़रूरी राऊटर (जैसे, फ़्लैटिरॉन का निर्देशक) मिलते-जुलते रास्ते को सुन सकता है और फिर 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 जैसे टूल की मदद से अपने सभी HTML इंपोर्ट चलाने से भी आपको नेटवर्क का काफ़ी फ़ायदा मिल सकता है.

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

ऑफ़लाइन

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

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

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

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

वर्कर के इंस्टॉल हैंडलर में, संसाधनों के एक बोटलोड को कैश मेमोरी में सेव किया जाता है. इसमें ऐप्लिकेशन को चलाने वाला डेटा भी शामिल है.

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

आगे बढ़ें!

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