मध्य-पृथ्वी का फ़्रंट-एंड

मल्टी-डिवाइस डेवलपमेंट के बारे में जानकारी

Daniel Isaksson

Einar Öberg

Chrome एक्सपेरिमेंट मध्य-पृथ्वी की यात्रा के डेवलपमेंट के बारे में हमारे पहले लेख में, हमने मोबाइल डिवाइसों के लिए WebGL डेवलपमेंट पर फ़ोकस किया था. इस लेख में, हम बाकी HTML5 फ़्रंट-एंड बनाते समय आने वाली चुनौतियों, समस्याओं, और उनके समाधानों के बारे में बता रहे हैं.

एक ही साइट के तीन वर्शन

सबसे पहले, इस एक्सपेरिमेंट को डेस्कटॉप कंप्यूटर और मोबाइल डिवाइस, दोनों पर काम करने के लिए अडैप्ट करने के बारे में थोड़ी बात करते हैं. इसमें स्क्रीन साइज़ और डिवाइस की क्षमताओं का ध्यान रखा गया है.

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

लैंडिंग पेज को उदाहरण के तौर पर लेते हुए, हम बता सकते हैं कि हम डिज़ाइन को अलग-अलग साइज़ के हिसाब से कैसे अडैप्ट करते हैं.

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

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

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

हम हेड टैग में मौजूदा मोड के साथ एक क्लास भी जोड़ते हैं, ताकि हम अपनी स्टाइल में उस जानकारी का इस्तेमाल कर सकें. जैसे, इस उदाहरण में (SCSS में):

.loc-hobbit-logo {

  // Default values here.

  .desktop & {
     // Applies only in desktop mode.
  }

 .tablet &, .mobile & {
   
   // Different asset for mobile and tablets perhaps.

   @media screen and (max-height: 760px), (max-width: 760px) {
     // Breakpoint-specific styles.
   }

   @media screen and (max-height: 570px), (max-width: 400px) {
     // Breakpoint-specific styles.
   }
 }
}

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

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

हमने डेवलपमेंट के दौरान, DevTools में एम्युलेटर टूल का अक्सर इस्तेमाल किया. खास तौर पर, Chrome Canary में, जिसमें नई और बेहतर सुविधाएं और कई प्रीसेट हैं. यह डिज़ाइन की तुरंत पुष्टि करने का एक अच्छा तरीका है. हालांकि, हमें अब भी असल डिवाइसों पर नियमित तौर पर टेस्ट करना होगा. इसकी एक वजह यह थी कि साइट फ़ुलस्क्रीन मोड में बदल रही थी. ज़्यादातर मामलों में, वर्टिकल स्क्रोल वाले पेजों को स्क्रोल करने पर ब्राउज़र का यूज़र इंटरफ़ेस (यूआई) छिप जाता है. फ़िलहाल, iOS7 पर Safari में इसकी समस्याएं आ रही हैं. हालांकि, हमें इस बात से अलग सब कुछ फ़िट करना था. हमने एमुलेटर में प्रीसेट का भी इस्तेमाल किया और स्क्रीन साइज़ की सेटिंग बदली, ताकि उपलब्ध जगह की कमी का अनुमान लगाया जा सके. असल डिवाइसों पर टेस्टिंग करना, मेमोरी खर्च और परफ़ॉर्मेंस पर नज़र रखने के लिए भी ज़रूरी है

स्टेट को मैनेज करना

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

साइट का हर सेक्शन, एक ऑब्जेक्ट होता है. इसमें DOM-एलिमेंट, ट्रांज़िशन, ऐसेट लोड करना, डिस्पोज़ करना वगैरह जैसी सुविधाओं का बोइलरप्लेट शामिल होता है. साइट के अलग-अलग हिस्सों को एक्सप्लोर करने पर, सेक्शन शुरू हो जाते हैं. साथ ही, एलिमेंट को DOM में जोड़ा और हटाया जाता है. साथ ही, मौजूदा सेक्शन के लिए ऐसेट लोड की जाती हैं.

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

जगहों की जानकारी दिखाना

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

टाइमलाइन

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

मॉड्यूल और व्यवहार के कॉम्पोनेंट

हमने इमेज-सीक्वेंस, स्टिल इमेज, पैरलॅक्स सीन, फ़ोकस-शिफ़्ट सीन, और टेक्स्ट के लिए अलग-अलग मॉड्यूल जोड़े हैं.

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

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

टेक्स्ट मॉड्यूल में मौजूद कॉन्टेंट को TweenMax प्लग इन Draggable की मदद से खींचा और छोड़ा जा सकता है. वर्टिकल स्क्रोल करने के लिए, स्क्रोलव्हील या दो उंगलियों से स्वाइप करने की सुविधा का भी इस्तेमाल किया जा सकता है. throw-props-plugin पर ध्यान दें. यह स्वाइप करने और रिलीज़ करने पर, फ़्लिंग स्टाइल फ़िज़िक्स जोड़ता है.

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

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

इमेज के क्रम

परफ़ॉर्मेंस और डाउनलोड साइज़ के मामले में, इमेज सीक्वेंस सबसे चुनौती भरा मॉड्यूल है. इस विषय के बारे में बहुत कुछ पढ़ा जा सकता है. मोबाइल और टैबलेट पर, हम इसे स्टिल इमेज से बदल देते हैं. अगर हमें मोबाइल पर अच्छी क्वालिटी चाहिए, तो यह डेटा डिकोड करने और मेमोरी में सेव करने के लिए बहुत ज़्यादा है. हमने कई अन्य तरीकों को आज़माया. सबसे पहले, बैकग्राउंड इमेज और स्प्राइटशीट का इस्तेमाल किया. हालांकि, इससे मेमोरी से जुड़ी समस्याएं हुईं और जब जीपीयू को स्प्राइटशीट के बीच स्विच करना पड़ा, तो गेम में रुकावट आई. इसके बाद, हमने img एलिमेंट को स्वैप करने की कोशिश की, लेकिन यह भी बहुत धीमा था. स्प्राइटशीट से कैनवस पर फ़्रेम बनाना सबसे ज़्यादा बेहतर परफ़ॉर्म करता था. इसलिए, हमने उसे ऑप्टिमाइज़ करना शुरू किया. हर फ़्रेम के लिए कैलकुलेशन में लगने वाले समय को बचाने के लिए, कैनवस में लिखने के लिए इमेज डेटा को एक अस्थायी कैनवस की मदद से पहले से प्रोसेस किया जाता है. इसके बाद, putImageData() की मदद से किसी ऐरे में सेव किया जाता है. इसके बाद, उसे डिकोड करके इस्तेमाल किया जा सकता है. इसके बाद, ओरिजनल स्प्राइटशीट को गै़रबेज इकट्ठा किया जा सकता है. साथ ही, हम मेमोरी में सिर्फ़ ज़रूरी डेटा सेव करते हैं. हो सकता है कि डिकोड नहीं की गई इमेज को स्टोर करने में ज़्यादा जगह न लगे, लेकिन इस तरह से सीक्वेंस को स्क्रोब करते समय हमें बेहतर परफ़ॉर्मेंस मिलती है. फ़्रेम बहुत छोटे होते हैं, सिर्फ़ 640x400. हालांकि, ये सिर्फ़ स्क्रेबिंग के दौरान दिखेंगे. रोकने पर, हाई रिज़ॉल्यूशन वाली इमेज लोड होती है और तेज़ी से फ़ेड इन होती है.

var canvas = document.createElement('canvas');
canvas.width = imageWidth;
canvas.height = imageHeight;

var ctx = canvas.getContext('2d');
ctx.drawImage(sheet, 0, 0);

var tilesX = imageWidth / tileWidth;
var tilesY = imageHeight / tileHeight;

var canvasPaste = canvas.cloneNode(false);
canvasPaste.width = tileWidth;
canvasPaste.height = tileHeight;

var i, j, canvasPasteTemp, imgData, 
var currentIndex = 0;
var startIndex = index * 16;
for (i = 0; i < tilesY; i++) {
  for (j = 0; j < tilesX; j++) {
    // Store the image data of each tile in the array.
    canvasPasteTemp = canvasPaste.cloneNode(false);
    imgData = ctx.getImageData(j * tileWidth, i * tileHeight, tileWidth, tileHeight);
    canvasPasteTemp.getContext('2d').putImageData(imgData, 0, 0);

    list[ startIndex + currentIndex ] = imgData;

    currentIndex++;
  }
}

स्प्राइट-शीट, Imagemagick की मदद से जनरेट की जाती हैं. यहां GitHub पर एक आसान उदाहरण दिया गया है. इसमें, किसी फ़ोल्डर में मौजूद सभी इमेज की स्प्राइटशीट बनाने का तरीका बताया गया है.

मॉड्यूल को ऐनिमेट करना

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

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

पेज की परफ़ॉर्मेंस

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

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

मुझे प्रॉपर्टी, ट्रांसफ़ॉर्म, और सीएसएस को ट्वीन करने के लिए, Greensock के TweenMax का इस्तेमाल करना पसंद है. कंटेनर के हिसाब से सोचें. नई लेयर जोड़ते समय, अपने स्ट्रक्चर को विज़ुअलाइज़ करें. ध्यान रखें कि मौजूदा ट्रांसफ़ॉर्म को नए ट्रांसफ़ॉर्म से बदला जा सकता है. अगर सिर्फ़ 2D वैल्यू को ट्वीन किया जाता है, तो आपकी सीएसएस क्लास में हार्डवेयर ऐक्सेलरेशन को फ़ोर्स करने वाले translateZ(0) को 2D मैट्रिक से बदल दिया जाता है. ऐसे मामलों में लेयर को ऐक्सेलरेशन मोड में रखने के लिए, ट्वीन में “force3D:true” प्रॉपर्टी का इस्तेमाल करें. इससे 2D मैट्रिक के बजाय 3D मैट्रिक बन जाएगी. स्टाइल सेट करने के लिए, सीएसएस और JavaScript ट्वीन को आपस में जोड़ने पर, यह आसानी से भूल जाता है.

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

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

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

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

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

फ़ुलस्क्रीन

अगर Fullscreen API उपलब्ध है, तो आपके पास मेन्यू में जाकर, साइट को फ़ुलस्क्रीन मोड में डालने का विकल्प होता है. हालांकि, डिवाइसों पर ब्राउज़र यह तय करता है कि विज्ञापन को फ़ुलस्क्रीन में दिखाना है या नहीं. iOS पर Safari में पहले एक हैक था, जिसकी मदद से इस बात को कंट्रोल किया जा सकता था. हालांकि, यह अब उपलब्ध नहीं है. इसलिए, आपको बिना स्क्रोल वाले पेज बनाते समय, अपने डिज़ाइन को इस हैक के बिना काम करने के लिए तैयार करना होगा. आने वाले समय में, इस बारे में अपडेट मिल सकते हैं. इसकी वजह यह है कि इस समस्या की वजह से, कई वेब-ऐप्लिकेशन काम नहीं कर रहे हैं.

ऐसेट

हमारी साइट पर कई तरह की ऐसेट मौजूद हैं. हम इमेज (PNG और JPEG), SVG (इनलाइन और बैकग्राउंड), स्प्राइटशीट (PNG), कस्टम आइकॉन फ़ॉन्ट, और Adobe Edge ऐनिमेशन का इस्तेमाल करते हैं. हम ऐसेट और ऐनिमेशन (स्प्राइटशीट) के लिए PNG का इस्तेमाल करते हैं जहां एलिमेंट वेक्टर पर आधारित नहीं हो सकता. इसके अलावा, हम ज़्यादा से ज़्यादा SVG का इस्तेमाल करने की कोशिश करते हैं.

वेक्टर फ़ॉर्मैट का मतलब है कि स्केल करने पर भी क्वालिटी में कोई कमी नहीं आती. सभी डिवाइसों के लिए एक फ़ाइल.

• फ़ाइल का साइज़ छोटा होना चाहिए.
• हम हर हिस्से को अलग-अलग ऐनिमेट कर सकते हैं. यह बेहतर ऐनिमेशन के लिए सही है. उदाहरण के लिए, हम Hobbit के लोगो (Smaug की तबाही) को छोटा करने पर, उसके "सबटाइटल" को छिपा देते हैं.
• इसे एसवीजी एचटीएमएल टैग के तौर पर एम्बेड किया जा सकता है या बिना किसी अतिरिक्त लोडिंग के बैकग्राउंड-इमेज के तौर पर इस्तेमाल किया जा सकता है. यह एचटीएमएल पेज के साथ ही लोड होता है.

स्केलेबल होने के मामले में, आइकॉन टाइपफ़ेस के वही फ़ायदे हैं जो SVG के हैं. इनका इस्तेमाल, आइकॉन जैसे छोटे एलिमेंट के लिए SVG के बजाय किया जाता है. इन एलिमेंट के लिए, हमें सिर्फ़ रंग (हॉवर, ऐक्टिव वगैरह) बदलना होता है. आइकॉन का फिर से इस्तेमाल करना भी बहुत आसान है. इसके लिए, आपको किसी एलिमेंट की सीएसएस "content" प्रॉपर्टी सेट करनी होगी.

ऐनिमेशन

कुछ मामलों में, कोड की मदद से SVG एलिमेंट को ऐनिमेट करने में काफ़ी समय लग सकता है. खास तौर पर, जब डिज़ाइन की प्रोसेस के दौरान ऐनिमेशन में कई बदलाव करने होते हैं. डिज़ाइनर और डेवलपर के बीच वर्कफ़्लो को बेहतर बनाने के लिए, हम कुछ ऐनिमेशन (गेम से पहले दिए जाने वाले निर्देश) के लिए Adobe Edge का इस्तेमाल करते हैं. ऐनिमेशन वर्कफ़्लो, फ़्लैश से काफ़ी मिलता-जुलता है. इससे टीम को मदद मिली, लेकिन इसमें कुछ कमियां भी हैं. खास तौर पर, एसेट लोड करने की प्रोसेस में Edge ऐनिमेशन को इंटिग्रेट करने में, क्योंकि इसमें अपने लोडर और लागू करने के लॉजिक होते हैं.

मुझे अब भी लगता है कि वेब पर ऐसेट और हाथ से बनाए गए ऐनिमेशन को मैनेज करने के लिए, हमारे पास अभी तक बेहतर वर्कफ़्लो नहीं है. हमें यह देखने का इंतज़ार रहेगा कि Edge जैसे टूल कैसे बेहतर होंगे. टिप्पणियों में, ऐनिमेशन के दूसरे टूल और वर्कफ़्लो के बारे में सुझाव दें.

नतीजा

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