पिछले साल से, Polymer टीम ने काफ़ी समय तक डेवलपर को, अपने एलिमेंट बनाने के तरीके सिखाए हैं. इसकी वजह से, तेज़ी से बढ़ता इकोसिस्टम तैयार हुआ है. इसमें पॉलीमर के कोर और पेपर एलिमेंट का काफ़ी बड़ा हिस्सा है. साथ ही, Mozilla के ब्राउज़र में काम करने वाले ब्रिक एलिमेंट में भी बढ़ोतरी हुई है.
जैसे-जैसे डेवलपर अपने खुद के एलिमेंट बनाना और ऐप्लिकेशन बनाने के बारे में सोचते जाते हैं, वैसे-वैसे उनके सामने कई सवाल उठते हैं:
- आपको अपने ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) को किस तरह बनाना चाहिए?
- अलग-अलग राज्यों में ट्रांज़िशन कैसे किया जाता है?
- परफ़ॉर्मेंस को बेहतर बनाने की कुछ रणनीतियां क्या हैं?
- साथ ही, आपको ऑफ़लाइन का अनुभव कैसे देना चाहिए?
Chrome Dev Summit के लिए, मैंने इन सवालों के जवाब देने की कोशिश की. इसके लिए, मैंने एक छोटा संपर्क ऐप्लिकेशन बनाया और इसे बनाने की प्रोसेस का विश्लेषण किया. मुझे यह जानकारी मिली:
बनावट
किसी ऐप्लिकेशन को मॉड्यूलर टुकड़ों में तोड़ना, जिन्हें संयुक्त और फिर से उपयोग किया जा सकता है, वेब कॉम्पोनेंट का एक सेंट्रल टेनेंट है. पॉलिमर के कोर-* और पेपर-* एलिमेंट, पेपर-टूलबार और पेपर-आइकॉन-बटन जैसे छोटे टुकड़ों से शुरू करना आसान बनाते हैं.
साथ ही, कंपोज़िशन की ताकत की मदद से, उन्हें किसी भी एलिमेंट के साथ मिलाकर एक ऐप्लिकेशन स्कैफ़ोल्ड बनाएं.
सामान्य मचान बना लेने के बाद, अपनी खुद की सीएसएस स्टाइल इस्तेमाल की जा सकती है, ताकि इसे अपने ब्रैंड के लिए एक खास अनुभव में बदला जा सके. कॉम्पोनेंट के साथ ऐसा करने की खासियत यह है कि यह आपको एक ही तरह के ऐप्लिकेशन बनाने के लिए इस्तेमाल किए जाने वाले अलग-अलग तरह के अनुभव देने में मदद करता है. मचान बनाने की सुविधा से, कॉन्टेंट के बारे में सोचने के लिए आगे बढ़ा जा सकता है.
ज़्यादा कॉन्टेंट से जुड़े कामों के लिए, core-list का इस्तेमाल करना खास तौर पर कारगर है.
core-list को किसी डेटा सोर्स (बुनियादी तौर पर ऑब्जेक्ट के कलेक्शन) से कनेक्ट किया जा सकता है और कलेक्शन में मौजूद हर आइटम के लिए, यह टेंप्लेट इंस्टेंस पर स्टैंप करेगा. टेंप्लेट में, पॉलीमर के डेटा बाइंडिंग सिस्टम की मदद से अपना कॉन्टेंट तुरंत जोड़ा जा सकता है.
ट्रांज़िशन
अपने ऐप्लिकेशन के अलग-अलग सेक्शन के डिज़ाइन और लागू करने के बाद, अगला टास्क यह पता लगाना है कि उनके बीच असल में कैसे नेविगेट करना है.
हालांकि, यह एलिमेंट अब भी प्रयोग के तौर पर उपलब्ध है, लेकिन core-animated-pages, प्लग करने लायक ऐनिमेशन सिस्टम उपलब्ध कराता है. इसका इस्तेमाल आपके ऐप्लिकेशन में अलग-अलग स्थितियों के बीच ट्रांज़िशन के लिए किया जा सकता है.
इसमें ऐनिमेशन से मिली आधी बात यह है कि ऐप्लिकेशन को अपने यूआरएल को ठीक से मैनेज करने के लिए उन ऐनिमेशन को राऊटर के साथ जोड़ना होगा.
वेब कॉम्पोनेंट से जुड़ी रूटिंग के दो तरीके हैं: इंपेरेटिव और डिक्लेरेटिव. आपके प्रोजेक्ट की ज़रूरतों के हिसाब से, core-animated-pages को इनमें से किसी भी तरीके के साथ जोड़ना मान्य हो सकता है.
एक ज़रूरी राऊटर (जैसे कि फ़्लैटिरॉन के डायरेक्टर) मिलते-जुलते रूट को सुन सकता है और फिर core-animated-pages को उसके चुने हुए आइटम को अपडेट करने का निर्देश दे सकता है.
यह तब उपयोगी हो सकता है, जब आपको रूट का मिलान होने के बाद और अगले सेक्शन के संक्रमित होने से पहले कुछ काम करना हो.
दूसरी ओर, डिक्लेरेटिव राऊटर (जैसे कि ऐप्लिकेशन-राउटर) असल में, रूटिंग और core-animated-pages को एक एलिमेंट में जोड़ सकता है. इससे, दोनों को मैनेज करना ज़्यादा आसान हो जाता है.
अगर आपको और बारीकी से कंट्रोल करना है, तो ज़्यादा रूटिंग जैसी लाइब्रेरी को देखा जा सकता है. इस लाइब्रेरी को डेटा बाइंडिंग का इस्तेमाल करके core-animated-pages के साथ जोड़ा जा सकता है और इससे आपको दोनों जगहों पर बेहतर अनुभव मिल सकता है.
परफ़ॉर्मेंस
जैसे-जैसे आपका ऐप्लिकेशन आकार ले रहा है, आपको परफ़ॉर्मेंस में रुकावट डालने वाली चीज़ों पर खास तौर से नज़र रखनी होगी, खास तौर पर नेटवर्क से जुड़ी किसी भी चीज़ पर, क्योंकि यह अक्सर मोबाइल वेब ऐप्लिकेशन का सबसे धीमा हिस्सा होता है.
वेब कॉम्पोनेंट के पॉलीफ़िल को शर्त के साथ लोड करने से, परफ़ॉर्मेंस में आसानी होती है.
अगर प्लैटफ़ॉर्म पर पहले से ही सहायता उपलब्ध है, तो इसके लिए कोई शुल्क नहीं देना होगा! नए webcomps.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 जैसे टूल की मदद से अपने सभी एचटीएमएल इंपोर्ट चलाने से भी नेटवर्क का काफ़ी फ़ायदा मिलता है.
Vulcanize से आपके इंपोर्ट किए गए डेटा को एक ही बंडल में शामिल कर दिया जाएगा. इससे आपके ऐप्लिकेशन से किए जाने वाले एचटीटीपी अनुरोधों की संख्या बहुत कम हो जाएगी.
ऑफ़लाइन
हालांकि, सिर्फ़ परफ़ॉर्म करने वाला ऐप्लिकेशन बनाने से उपयोगकर्ताओं की यह दुविधा हल नहीं होती कि उसके पास कनेक्टिविटी बहुत कम है या नहीं है. दूसरे शब्दों में, अगर आपका ऐप्लिकेशन ऑफ़लाइन काम नहीं करता है, तो इसका मतलब है कि यह कोई मोबाइल ऐप्लिकेशन नहीं है. आज-कल अपने संसाधनों को ऑफ़लाइन इस्तेमाल करने के लिए, बहुत नुकसान पहुंचाने वाले ऐप्लिकेशन कैश का इस्तेमाल किया जा सकता है. हालांकि, आने वाले समय की बात करें, तो सर्विस वर्कर जल्द ही ऑफ़लाइन डेवलपमेंट के अनुभव को ज़्यादा बेहतर बना देगा.
जेक आर्चिबाल्ड ने हाल ही में सर्विस वर्कर पैटर्न की एक शानदार कुकबुक पब्लिश की है. इसमें शामिल होने के बारे में आपको तुरंत जानकारी दी जाएगी:
सर्विस वर्कर को इंस्टॉल करना अब आसान हो गया है. कोई worker.js फ़ाइल बनाएं और आपका ऐप्लिकेशन चालू होने पर उसे रजिस्टर करें.
यह ज़रूरी है कि आप अपने ऐप्लिकेशन के रूट में अपने worker.js की जगह की जानकारी पाएं. इससे यह आपके ऐप्लिकेशन के किसी भी पाथ के अनुरोधों को बीच में रोक सकता है.
वर्कर के इंस्टॉल हैंडलर में, मैं संसाधनों के एक बोटलोड को कैश मेमोरी में सेव करता/करती हूं (इसमें वह डेटा भी शामिल है जिससे ऐप्लिकेशन को चलाया जाता है).
इससे मेरे ऐप्लिकेशन को उपयोगकर्ता को कम से कम फ़ॉलबैक अनुभव देने की मंज़ूरी मिलती है, अगर वे इसे ऑफ़लाइन ऐक्सेस कर रहे हैं.
आगे बढ़ें!
वेब कॉम्पोनेंट की वजह से वेब प्लैटफ़ॉर्म में बहुत मदद मिली है और अभी वे अपने शुरुआती दौर में हैं. जैसे-जैसे वे ज़्यादा ब्राउज़र का इस्तेमाल करेंगे, वैसे-वैसे हमारे ऐप्लिकेशन को बनाने के सबसे सही तरीकों का पता लगाने की ज़िम्मेदारी डेवलपर समुदाय की होगी. ऊपर दिए गए समाधानों से हमें एक शुरुआत मिलती है, लेकिन सीखने के लिए अभी भी बहुत कुछ है. हम बेहतर ऐप्लिकेशन बनाने की दिशा में आगे बढ़ रहे हैं!