4 तरकीबें जो हमें सीमा को अनुकूलित करने में मदद करती हैं

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

एक आधुनिक फ्रंटेंड को अपने कोड का अनुकूलन करना चाहिए। यह उन उत्पादों के लिए विशेष रूप से सच है जिसमें अधिकांश दर्शक मोबाइल उपकरणों से साइट पर जाते हैं। शीर्ष कंप्यूटरों पर भी क्रोम में एनीमेशन के कुछ तरीके हैं, लेकिन औसत स्मार्टफोन पर आसानी से काम करना चाहिए।

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

1. SCSS पर एनीमेशन

साइट में बहुत सारे एनीमेशन हैं। हमें 60 एफपीएस की स्थिर फ्रेम दर के साथ इसे चलाने के लिए ब्राउज़र की आवश्यकता है। शुद्ध CSS में, यह करना मुश्किल है, इसलिए हम SCSS का उपयोग करते हैं।

स्लाइडर्स बनाने के लिए, हमने स्विपर लाइब्रेरी का इस्तेमाल किया। क्षैतिज स्लाइडर के लिए, इस लाइब्रेरी का उपयोग उचित है, क्योंकि हमें उपयोगकर्ता से svayp के लिए समर्थन प्रदान करने की आवश्यकता है। लेकिन एक ऊर्ध्वाधर अंतहीन हिंडोला के लिए, Swiper की आवश्यकता नहीं है, कोई उपयोगकर्ता सहभागिता नहीं है। इसलिए, हम केवल सीएसएस सुविधाओं का उपयोग करके समान कार्यक्षमता को दोहराना चाहते थे।

सीएसएस एनीमेशन के साथ काम करते समय पहली और सबसे महत्वपूर्ण शर्त केवल ट्रांसफॉर्मेशन और अपारदर्शिता गुणों का उपयोग करना है। ब्राउज़र इन गुणों के एनीमेशन को स्वतंत्र रूप से अनुकूलित करने और स्थिर 60 एफपीएस का उत्पादन करने में सक्षम हैं। हालांकि, अकेले @keyframes का उपयोग करना अलग-अलग तत्वों के लिए अलग-अलग एनिमेशन लिखना संभव नहीं है, और प्रत्येक तत्व को व्यक्तिगत रूप से शुद्ध CSS में एनिमेट करना बहुत अधिक समय लेने वाला है। हमें जिस एनीमेशन की आवश्यकता है उसे जल्दी से कैसे लिखें? हमने SCSS को चुना, SASS बोली - एक अधिक कार्यात्मक CSS एक्सटेंशन।

आइए हमारे ऊर्ध्वाधर स्लाइडर के उदाहरण का उपयोग करके SCSS के उपयोग का विश्लेषण करें।

हमारे निपटान में एक कंटेनर है जिसकी ऊंचाई हिंडोला के तीन तत्वों की ऊंचाई के बराबर है। इसके अंदर हिंडोला के सभी तत्वों से युक्त एक और कंटेनर होता है।

<div class="b-vertical-carousel-slider"> <div class="vertical-carousel-slider-wrapper slider-items"> <div class="vertical-carousel-slider-item"></div> <div class="vertical-carousel-slider-item"></div> <div class="vertical-carousel-slider-item"></div> <div class="vertical-carousel-slider-item"></div> <div class="vertical-carousel-slider-item"></div> </div> </div> 

हम कंटेनर तत्वों की दृश्यता को हटाते हैं जो इसके परे जाएंगे और ब्लॉकों की ऊंचाई निर्धारित करेंगे।

 .b-vertical-carousel-slider { position: relative; overflow: hidden; height: $itemHeight * 3; .vertical-carousel-slider-item { height: $itemHeight; } } 

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

 @mixin verticalSlideAnimation($itemCount) { } 

मिश्रण में, प्रत्येक तत्व के लिए एक कीफ़्रेम उत्पन्न करते हैं, इसके लिए प्रारंभिक स्थिति निर्धारित करते हैं, और उपयोग करते हैं :nth-child तत्व के लिए एनीमेशन :nth-child निर्धारण :nth-child लिए :nth-child ।

 for $i from * 1 through $itemCount { $animationName: carousel-item-#{$itemCount}-#{$i}; @keyframes #{$animationName} { 0% { transform: translate3d(0, 0, 0) scale(.95); } } .vertical-carousel-slider-item:nchild(#{$i}) { animation: $stepDuration * $itemCount $animation ease infinite; } } 

इसके अलावा, एनीमेशन के दौरान, हम केवल y अक्ष के साथ तत्वों को स्थानांतरित करेंगे और केंद्र में तत्व के लिए पैमाने को बदल देंगे।

हिंडोला तत्व राज्यों:

1. शांति
2. Y ऑफसेट
3. Y ऑफसेट
4. Y कमी के साथ ऑफसेट

प्रत्येक आइटम $itemCount बार बढ़ेगा, एक बार बढ़ेगा और आंदोलन के दौरान एक बार $itemCount । इसलिए, हम प्रत्येक अपवर्ड मूवमेंट के लिए एनीमेशन उत्पन्न और गणना करेंगे।

 @keyframes #{$animationName} { 0% { transform: translate3d(0, 0, 0) scale(.95); } @for $j from 0 through $itemCount { $isFocusedStep: $i == $j + 2; $isNotPrevStep: $i != $j + 1; $offset: 100% / $itemCount * ($animationTime / $stepDuration); @if ($isFocusedStep) { #{getPercentForStep($j, $itemCount, $offset)} { transform: getTranslate($j - 1) scale(.95); } #{getPercentForStep($j, $itemCount)} { transform: getTranslate($j) scale(1); } #{getPercentForStep($j + 1, $itemCount, $offset)} { transform: getTranslate($j) scale(1); } #{getPercentForStep($j + 1, $itemCount)} { transform: getTranslate($j + 1) scale(.95); } } @else if ($isNotPrevStep) { #{getPercentForStep($j, $itemCount, $offset)} { transform: getTranslate($j - 1) scale(.95); } #{getPercentForStep($j, $itemCount)} { transform: getTranslate($j) scale(.95); } } } } 

यह कुछ चर और कार्यों को परिभाषित करता है:

• $animationTime - गति का समय
• $stepDuration - एक एनीमेशन कदम का कुल निष्पादन समय ( $stepDuration + हिंडोला आराम का समय)
• getPercentForStep($step, $itemCount, $offset) - एक ऐसा फ़ंक्शन जो राज्यों में से एक के चरम बिंदु को प्रतिशत में लौटाता है।
• getTranslate($step) - एनीमेशन कदम के आधार पर अनुवाद का रिटर्न देता है

उदाहरण समारोह कार्यान्वयन:

 @function getPercentForStep($step, $count, $offset: 0) { @return 100% * $step / $count - $offset; } @function getTranslate($step) { @return translate3d(0, -100% * $step, 0); } 

हमारे पास बीच में बढ़ते तत्व के साथ एक कार्यशील हिंडोला है। यह बढ़ते तत्वों के तहत एक छाया बनाने के लिए बनी हुई है। प्रारंभ में, हिंडोला के प्रत्येक तत्व में एक छद्म तत्व था: बाद में, जिसमें एक छाया थी। छाया संपत्ति को चेतन करने के लिए, हमने इसके लिए अस्पष्टता संपत्ति का उपयोग किया, अर्थात। बस दिखाया और छाया को छिपा दिया।

लेकिन इस तरह के समाधान के लिए नए कार्यान्वयन में, आपको प्रत्येक छद्म तत्व के लिए कई अतिरिक्त कीफ़्रेम उत्पन्न करने की आवश्यकता है। हमने इसे आसान करने का फैसला किया: एक छाया के साथ एक ब्लॉक होगा और यह हिंडोला के मध्य तत्व के नीचे जगह पर कब्जा कर लेगा।

एक ऐसा डिव जोड़ें जो छाया के लिए जिम्मेदार हो।

 <div class="b-vertical-carousel-slider"> <div class="vertical-carousel-slider-wrapper"> <div class="vertical-carousel-slider-item"></div> <div class="vertical-carousel-slider-item"></div> <div class="vertical-carousel-slider-item"></div> <div class="vertical-carousel-slider-item"></div> <div class="vertical-carousel-slider-item"></div> </div> <div class="vertical-carousel-slider-shadow"></div> </div> 

हम इसे स्टाइल करते हैं और एनिमेशन जोड़ते हैं।

 @keyframes shadowAnimation { 0% { opacity: 1; } 80% { opacity: 1; } 90% { opacity: 0; } 100% { opacity: 1; } } .vertical-carousel-slider-shadow { top: $itemHeight; left: 0; right: 0; height: $itemHeight; animation: $stepDuration shadowAnimation ease infinite; } 

इस मामले में, आपको प्रत्येक तत्व के नीचे छाया को चेतन करने के लिए उत्पन्न करने और सोचने की ज़रूरत नहीं है, हम केवल एक ब्लॉक को चेतन करते हैं, इसमें दो राज्य हैं - यह दृश्यमान और छिपा हुआ है

नतीजतन, हमारे पास एक शुद्ध सीएसएस हिंडोला है जो केवल अच्छी तरह से अनुकूलित गुणों के साथ एनिमेट करता है। यह ब्राउज़र को प्रतिपादन के लिए हार्डवेयर त्वरण का उपयोग करने की अनुमति देता है। इसलिए जेएस एनीमेशन की तुलना में मूर्त लाभ:

1. कमजोर उपकरणों पर एनिमेशन वाले पृष्ठों को स्क्रॉल करते समय, फ़्रेम को जेएस एनिमेशन में स्पष्ट रूप से छोड़ दिया गया था, जिससे एफपीएस 15-20 हो गया। सीएसएस एनिमेशन में स्पष्ट रूप से सुधार हुआ है। इन उपकरणों पर, यह आंकड़ा कम से कम 50-55 एफपीएस था।
2. हमें तीसरे पक्ष के मॉड्यूल के काम से छुटकारा मिला, जहां इसकी आवश्यकता नहीं थी।
3. जेएस निष्क्रिय होने पर भी एनिमेशन चलेगा

जेएस एनीमेशन का उपयोग किया जाना चाहिए यदि प्रत्येक फ्रेम पर सख्त नियंत्रण की आवश्यकता है: उपयोगकर्ता कार्यों पर रोक, रिवर्स प्लेबैक, रिवाइंड, प्रतिक्रिया। अन्य मामलों में, हम शुद्ध CSS का उपयोग करने की सलाह देते हैं।

उपयोगी लिंक

• ब्लर एनिमेशन गाइड
• सीएसएस गुण और ब्राउज़र कार्य के लिए गाइड
• छाया एनीमेशन गाइड

2. इंटरसेक्शन ऑब्जर्वर एपीआई का उपयोग करना

साइट विज़िटर द्वारा नहीं देखा जाने वाला एनीमेशन दृष्टि से कहीं बाहर खेला जाता है और सीपीयू को लोड करता है। इंटरसेक्शन ऑब्जर्वर का उपयोग करके, हम यह निर्धारित करते हैं कि स्क्रीन पर अभी किस तरह का एनीमेशन दिखाई दे रहा है, और केवल इसे चलाएं।

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

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

कार्यान्वयन का उदाहरण

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

Add is-paused class handle to स्टाइल है

 .b-vertical-carousel-slider.is-paused { .vertical-carousel-slider-wrapper { .vertical-carousel-slider-item { animation-play-state: paused; } } .vertical-carousel-slider-shadow { animation-play-state: paused; } } 

यानी जब यह वर्ग दिखाई देगा, तो एनीमेशन रोक दिया जाएगा।

अब हम इस वर्ग को जोड़ने और हटाने के तर्क का वर्णन करते हैं

 if (window.IntersectionObserver) { const el = document.querySelector('.b-vertical-carousel-slider'); const observer = new IntersectionObserver(intersectionObserverCallback); observer.observe(el); } 

यहाँ हमने IntersectionObserver का एक उदाहरण बनाया है, जो intersectionObserverCallback फ़ंक्शन को निर्दिष्ट करता है, जो दृश्यता परिवर्तनों के साथ काम करेगा।

अब intersectionObserverCallback को परिभाषित करें

 function intersectionObserverCallback(entries){ if (entries[0].intersectionRatio === undefined) { return; } helperDOM.toggleClass(el, 'is-paused', entries[0].intersectionRatio <= 0); }; 

अब एनीमेशन केवल उन तत्वों पर खेला जाता है जो दिखाई देते हैं। जैसे ही तत्व दृश्य के क्षेत्र से गायब हो गया है, एनीमेशन को रोक दिया गया है। जब आगंतुक उसके पास लौटता है, तो प्लेबैक जारी रहेगा।

उपयोगी लिंक

• ब्राउज़र्स जो अंतर्निरीक्षण पर्यवेक्षक का समर्थन करते हैं
• ऐसे ब्राउज़र जो इसका समर्थन नहीं करते हैं, आपको पॉलीफ़िल का उपयोग करने की आवश्यकता है

3. एसवीजी प्रतिपादन

बड़ी संख्या में छवियां या स्प्राइट्स का उपयोग लोडिंग के बाद पहले सेकंड में फ्रिज़ और लैग्स का कारण बनता है। पेज कोड में एसवीजी एंबेड करना नेत्रहीन को लोडिंग स्मूथ बनाने में मदद करता है।

जब हमने छवियों के साथ काम करने के तरीकों का चयन किया, तो हमारे पास 2 अनुकूलन विकल्प थे: HTML में SVG एम्बेड करना या स्प्राइट्स का उपयोग करना। हम एम्बेडिंग पर बस गए। हम प्रत्येक छवि के XML कोड को सीधे पृष्ठों के HTML कोड में एम्बेड करते हैं। यह उनके आकार को थोड़ा बढ़ाता है, लेकिन एसवीजी को दस्तावेज़ के साथ तुरंत इनलाइन दिया जाता है।

कई डेवलपर्स एसवीजी स्प्राइट्स का उपयोग करना जारी रखते हैं। विधि का सार क्या है: छवियों की एक सरणी (उदाहरण के लिए, आइकन) एक बड़ी छवि-कैनवास में एकत्र की जाती है, जिसे स्प्राइट कहा जाता है। जब आपको एक विशिष्ट आइकन दिखाने की आवश्यकता होती है, तो एक स्प्राइट कहा जाता है, जिसके बाद उस विशिष्ट टुकड़े के निर्देशांक जिस पर वह स्थित है, दिया जाता है। यह लंबे समय से किया गया है, यहां तक ​​कि HTTP के पहले संस्करण पर भी। स्प्राइट्स ने फ़ाइल को आक्रामक रूप से कैश करने और सर्वर अनुरोधों की संख्या को कम करने में मदद की। यह महत्वपूर्ण था क्योंकि कई युगपत अनुरोध ब्राउज़र को धीमा कर देते थे। एसवीजी स्प्राइट्स का उपयोग करना एक विशिष्ट बैसाखी है जिसके साथ आप संसाधनों को बचाने के लिए काम करने के तर्क की उपेक्षा करते हैं। अब अनुरोधों की संख्या इतनी महत्वपूर्ण नहीं है, इसलिए हम एम्बेड करने की सलाह देते हैं।

सबसे पहले, यह आगंतुक के दृष्टिकोण से प्रदर्शन को सकारात्मक रूप से प्रभावित करता है। वह देखता है कि कैसे आइकन तुरंत लोड होते हैं और पृष्ठ लोड करने के बाद पहले सेकंड में पीड़ित नहीं होते हैं। स्प्राइट या पीएनजी चित्रों का उपयोग करते समय, पृष्ठ जो लोड हो रहा है, थोड़ा धीमा हो जाता है। यह विशेष रूप से महसूस किया जाता है यदि आगंतुक तुरंत लोड किए गए पृष्ठ को स्क्रॉल करता है - एफपीएस गैर-शीर्ष डिवाइसों पर 5-15 तक गिर जाएगा। HTML में SVG को एम्बेड करने से पेज लेटेंसी (व्यक्ति के दृष्टिकोण से व्यक्तिपरक) को कम करने में मदद मिलती है, और लोडिंग के दौरान फ्रिज़ और फ़्रेम स्किप से छुटकारा मिलता है।

4. सेवा कार्यकर्ता और HTTP कैश का उपयोग करके कैशिंग

यह एक ऐसे पृष्ठ को फिर से लोड करने के लिए कोई मतलब नहीं है जो आगंतुक ट्रैफ़िक को बदल और उपयोग नहीं करता है। कई कैचिंग रणनीति हैं, हम सबसे कुशल संयोजन पर बसे हैं।

यह न केवल सीपीयू / जीपीयू, बल्कि नेटवर्क के उपयोग के अनुकूलन के लायक है। मोबाइल उपकरण न केवल संसाधनों के मामले में, बल्कि इंटरनेट की गति और यातायात के संदर्भ में भी एक सीमा है। कैशिंग ने यहां हमारी मदद की। यह आपको HTTP अनुरोधों की प्रतिक्रियाओं को सहेजने और सर्वर से प्रतिक्रिया प्राप्त किए बिना उनका उपयोग करने की अनुमति देता है।

जब हमने कैशिंग रणनीति पर विचार किया, तो हमने उसी समय सेवा कार्यकर्ता और HTTP कैश का उपयोग करना चुना। चलो पहले और अधिक उन्नत के साथ शुरू करते हैं। सेवा कार्यकर्ता एक js फ़ाइल है जो इसके पृष्ठ या फ़ाइल को नियंत्रित कर सकती है, अनुरोधों को रोक सकती है और अनुरोधों को संशोधित कर सकती है, साथ ही प्रोग्रामेटिक रूप से कैश अनुरोध भी कर सकती है। यह साइट और सर्वर के बीच एक प्रॉक्सी के रूप में कार्य करता है और उनके ऑफ़लाइन व्यवहार को निर्धारित करता है। यह सब "बैकएंड" को जोड़ने के बिना, "फ्रंट" पर किया जाता है।

सेवा कार्यकर्ता की जबरदस्त परिवर्तनशीलता है। हम जैसा चाहें वैसा व्यवहार कर सकते हैं। उदाहरण के लिए, हम जानते हैं कि एक आगंतुक जो पेज नंबर 1 पर गया था, 90% संभावना के साथ पेज नंबर 2 पर जाएगा। हम SW को दूसरे पृष्ठ को पृष्ठभूमि के साथ लोड करने के लिए कहते हैं जब आगंतुक अभी भी पहले पर है। जब वह इसके पास जाएगा, तो पेज तुरंत लोड हो जाएगा। इसका उपयोग विभिन्न कार्यों के लिए किया जा सकता है:

• पृष्ठभूमि डेटा सिंक्रनाइज़ेशन
• ऑफ़लाइन कैलकुलेटर
• कस्टम टेम्प्लेटिंग
• एक विशिष्ट समय और तारीख पर प्रतिक्रिया।

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

सेवा कार्यकर्ता संस्करण 40.0 से पहले IE, सफारी, या क्रोम जैसे सभी ब्राउज़रों का समर्थन नहीं करते हैं। यदि डिवाइस इसके साथ काम नहीं कर सकता है, तो यह HTTP कैश कैशिंग नियमों का पालन करता है। हमने निम्नलिखित HTTP हेडर को पृष्ठों में जोड़ा:

 cache-control: no-cache last-modified: Mon, 06 May 2019 04:26:29 GMT 

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

 if-modified-since: Mon, 06 May 2019 04:26:29 GMT 

यदि कोई परिवर्तन नहीं हुआ है, तो ब्राउज़र को 304 नहीं कोड के साथ एक प्रतिक्रिया प्राप्त होती है और कैश में संग्रहीत सामग्री का उपयोग करता है। यदि दस्तावेज़ में परिवर्तन किए जाते हैं, तो प्रतिक्रिया 200 कोड के साथ वापस आ जाती है और ब्राउज़र संग्रहण में एक नई प्रतिक्रिया लिखी जाती है।

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

 Cache-control:max-age=31536000, immutable 

अधिकतम आयु अधिकतम कैशिंग समय को इंगित करता है, हमारे मामले में यह 1 वर्ष है। एक अपरिवर्तनीय मूल्य का मतलब है कि इस तरह के जवाब को परिवर्तनों के लिए जांचने की आवश्यकता नहीं है।

उपयोगी लिंक

• HTTP कैशिंग मैनुअल
• सेवा कार्यकर्ता एपीआई उपयोग गाइड

ये साइट को अनुकूलित करने के सभी तरीके नहीं हैं। यह बूटस्ट्रैप की अस्वीकृति जोड़ सकता है, DOM तत्वों और घटनाओं की संख्या को कम कर सकता है, और बहुत कुछ। लेकिन ये वो टिप्स हैं जिनकी मदद से हमने बड़ी मात्रा में एनीमेशन के बावजूद साइट को तेज़ और संवेदनशील बनाया है।

हम आपको हमारी टीम में आमंत्रित करते हैं

हम हमेशा अपने महत्वाकांक्षी कार्यों के लिए सेंट पीटर्सबर्ग में हमारे कार्यालय में शांत विशेषज्ञों की तलाश कर रहे हैं: डेवलपर्स, परीक्षक, डिजाइनर। नीचे रिक्तियां हैं - हमसे जुड़ें।

• सीमांत विकासक
• क्यूए इंजीनियर
• टेस्ट में सॉफ्टवेयर डेवलपमेंट इंजीनियर