Uibook - मीडिया प्रश्नों के साथ प्रतिक्रिया घटकों के लिए एक दृश्य परीक्षण उपकरण

सभी को नमस्कार! मेरा नाम विटाली रिज़ो है, मैं एम्पलीफायर में फ्रंट-एंड डेवलपर हूं। हमने वास्तविक मीडिया प्रश्नों के साथ विज़ुअल परीक्षण रिएक्ट घटकों के लिए यूआईबूक को एक सरल उपकरण बनाया । मैं आपको बताता हूं कि यह कैसे काम करता है और यह आपके लिए कैसे उपयोगी हो सकता है।

क्यों किया और क्या उपयोग है

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

यूबूक आपको किसी भी राज्य और पैरामीटर संयोजन (प्रॉप्स) में घटकों को जल्दी से देखने की अनुमति देता है। मीडिया के प्रश्नों के समर्थन के लिए धन्यवाद, एक डेवलपर एक पृष्ठ पर डेस्कटॉप और घटकों के मोबाइल संस्करण प्रदर्शित कर सकता है। लेकिन Uibook न केवल डेवलपर्स के लिए उपयोगी है:

• डिजाइनर अपने डिवाइस पर, स्थानीय सर्वर को उठाए बिना, सभी प्रकार के घटक राज्यों को देख सकते हैं और संपादन सबमिट कर सकते हैं;
• प्रबंधक यह देखते हैं कि पहली नज़र में भी एक साधारण, पॉपअप में सीमा राज्यों का एक समूह हो सकता है, जिसे डेवलपर्स को ध्यान में रखने के लिए मजबूर किया जाता है - यह उन्हें अंदर से डिवाइस के डिवाइस इंटरफ़ेस को बेहतर ढंग से समझने में मदद करता है;
• संपादकों लाइव टेक्स्ट एडिटिंग का उपयोग वास्तविक घटकों में एक इंटरफेस के लिए पाठ पर प्रयास करने के लिए कर सकते हैं ताकि यह निर्दोष दिख सके।

एनालॉग्स से क्या अलग है

आप पूछ सकते हैं कि जब तैयार स्टोरीबुक, स्टाइलगाइडिस्ट और इसी तरह के समाधान होते हैं, तो पहिया को फिर से क्यों लगाया जाए? मेरी परियोजना में एक अलग दृष्टिकोण है और मैं तीन मुख्य अंतरों को उजागर करता हूं:

• यूबूक में, आप उपकरणों की सीमित चौड़ाई और ऊंचाई की स्थितियों में घटकों को तुरंत देख सकते हैं;
• इसे एक अलग कलेक्टर की आवश्यकता नहीं है और आसानी से कॉन्फ़िगरेशन फ़ाइल में कुछ पंक्तियों के साथ मौजूदा परियोजना से जुड़ता है;
• यह समझा जाता है कि घटकों के साथ पृष्ठ सार्वजनिक रूप से उपलब्ध होंगे ताकि कोई भी उपयोगकर्ता त्रुटियों का पता लगा सके और प्रतिक्रिया छोड़ सके।

Uibook की आवश्यकता मुख्य रूप से दृश्य परीक्षण के लिए है, और विकास के लिए नहीं, हालाँकि इसके साथ परियोजना का "प्रतिनिधित्व" भाग विकसित करना सुविधाजनक है। परियोजना में वैश्विक परिवर्तन करने थे? यह सुनिश्चित करने के लिए कि सभी घटक सही तरीके से प्रदर्शित किए गए हैं, सभी पृष्ठों पर जाएं।

तकनीकी कार्यान्वयन

यूबूक एक रिएक्ट एप्लिकेशन है जिसमें पेज ट्रांसफर किए जाते हैं - "मामलों" के सेट, यानी एक घटक (प्रॉप्स और कॉलबैक) के राज्य। इसके अलावा, Uibook चयनित स्क्रीन को दो नियंत्रक का उपयोग करके एक स्क्रीन पर प्रस्तुत करता है: मीडिया प्रश्नों के साथ और बिना।

चूंकि सीएसएस और जावास्क्रिप्ट का उपयोग करके मीडिया के प्रश्नों का अनुकरण करना असंभव है, हम सरल तरीके से गए: घटक को <iframe> अंदर प्रस्तुत करें यदि उपयोगकर्ता ने स्क्रीन की चौड़ाई या ऊंचाई निर्दिष्ट की है।

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

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

 plugins: [ … new UibookPlugin({ controller: path.join(__dirname, '../controllers/uibook.js') }) ] 

webpack.config.js

यूबूक एक अलग हिस्सा बनाता है और मुख्य एप्लिकेशन का आकार नहीं बढ़ाता है। यह SingleEntryPlugin के SingleEntryPlugin या MultiEntryPlugin के माध्यम से काम करता है। यह कैशिंग ("कैशबस्टर") को ध्यान में रखते हुए मुख्य एप्लिकेशन से शैलियों और लिपियों को ऊपर खींचता है। यहां बताया गया है कि प्लगइन को आपकी ज़रूरत की फ़ाइलों की सूची कैसे मिलती है:

  let files = compilation.chunks.find(function (i) { return i.name === 'uibook' }).files 

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

  compilation.assets[outputPath + '/index.html'] = { … } 

लेकिन अगर आपके पास अभी भी HtmlWebpackPlugin जुड़ा हुआ है, तो आपको अपवादों में यूइबूक जोड़ना होगा, जिसे यूबूक आपको याद दिलाएगा।

यूबूक बहुत सरल है

इसकी निर्भरता में केवल रिएक्ट, वेबपैक और create-react-class है। यह ES5 में लिखा गया है, इसलिए यह तब भी काम करेगा जब आपके पास प्रोजेक्ट में बैबल नहीं होगा। और अगर है, तो प्लग-इन संघर्ष नहीं होगा। यदि कॉन्फ़िगरेशन फ़ाइल में कुछ गलत है, तो Uibook ने अंतर्निहित मदद की है।

Uibook लचीला है

आप अपने नियंत्रक में सभी घटकों को लपेट सकते हैं। यह Redux, Context या सभी के लिए एक बार में एक आवरण हो सकता है। यहाँ नया संदर्भ एपीआई के साथ एक उदाहरण है:

 export default UibookStarter({ wrapper: (children, props) => <Context.Provider value={ props }> { children } </Context.Provider>, values: { locale: ['ru', 'en'], theme: ['dark', 'light'] }, … }) 

शीर्ष नेविगेशन मेनू में उपयोगकर्ता कुंजी और उनके मूल्यों की एक सूची प्रदर्शित की जाएगी।

कैसे एक परियोजना में Uibook एम्बेड करने के लिए

उदाहरण के लिए, हम बटन घटक जोड़ना चाहते हैं, जो src/button.js में निहित है। आपको uibook पैकेज स्थापित करने, एक फ़ाइल नियंत्रक और एक फ़ाइल पृष्ठ बनाने की आवश्यकता है। फ़ाइल नियंत्रक का उपयोग आपके यूबूक परीक्षणों को आयात करने के लिए किया जाता है, और फ़ाइल पृष्ठ "मामलों" का एक सेट है, एक घटक के लिए मापदंडों का संयोजन।

यह कैसे करना है:

1) चलो शुरू हो जाओ, $ yarn add uibook ;
2) यहां आप $ npm init uibook उपयोग कर सकते हैं, जो नमूना फाइलें बनाएगा, या आप सब कुछ मैन्युअल रूप से कर सकते हैं। अनुमानित संरचना इस प्रकार है:

 your-project ├── uibook │ ├── button.uibook.js │ └── uibook-controller.js ├── src │ └── button.js ├── webpack.config.js └── package.json 

3) हम वेबपैक कॉन्फ़िगरेशन फ़ाइल में प्लगइन कनेक्ट करते हैं:

 let UibookPlugin = require('uibook/plugin') module.exports = { … plugins: [ new UibookPlugin({ controller: path.join(__dirname, '../src/uibook-controller.js'), }) ], } 

webpack.config.js

4) हम uibook/button.uibook.js में परीक्षण uibook/button.uibook.js । यदि आपने init कमांड का उपयोग किया है, तो यह उदाहरण पहले ही बनाया जा चुका है:

 import UibookCase from 'uibook/case' import Button from '../src/button.js' const PROPS = { onClick: UibookCase.event('onClick') } const ButtonUibook = { component: Button, name: 'Button', cases: [ () => <UibookCase props={{ ...PROPS, isLarge: true }}> Large Button </UibookCase>, () => <UibookCase props={{ ...PROPS, isDisabled: true }}> Disabled Button </UibookCase> ] } export default ButtonUibook 

button.uibook.js

5) हम नियंत्रक फाइल में इस यूइबूक टेस्ट को आयात और स्थानांतरित करते हैं:

 import UibookStarter from 'uibook/starter' import ButtonUibook from './button.uibook' export default UibookStarter({ pages: { Button: ButtonUibook, } }) 

uibook-controller.js

६) हो गया! हम हमेशा की तरह अपनी परियोजना शुरू करते हैं (उदाहरण के लिए, $ yarn start ) और ब्राउज़र में /uibook खोलें। हम एक बटन के साथ तीन मामलों को देखेंगे (यदि आपके पास /src/button.js घटक है, तो निश्चित रूप से):

कैसे यूबूक ने हमारी मदद की

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

एंड्री सीटनिक इस्किन , ईविल मार्टियंस में एक अग्रणी फ्रंट-एंड डेवलपर, ध्यान दें कि यूबूक एक शांत काम कर रहा है:

Uibook ने आखिरकार हमें विश्वास दिलाया कि normalize.css अपडेट के बाद, कुछ भी नहीं टूटा था। बस एक पंक्ति में सभी घटकों को खोलें और ब्राउज़ करें। यहां मुख्य विशेषता बहुत मदद करती है - @media समर्थन @media , ताकि पृष्ठ पर घटकों के सभी राज्य हों। डेवलपर्स में कम भय है, प्रबंधकों के पास कम कीड़े हैं। सभी लोग खुश हैं।

और परीक्षण प्रक्रिया को सरल बनाया गया है। अब फ्रंट-एंड एक नया कंपोनेंट (व्यू-कंपोनेंट) लिखता है, साथ में एक फाइल बना रहा है, जिसमें पैरामीटर (प्रॉप्स) हैं। आपको उसी समय एक नियंत्रक की आवश्यकता नहीं है - आप वेब एप्लिकेशन में घटक को शुरू किए बिना इसे विकास के दौरान तैनात कर सकते हैं।

अन्य फ्रंट-एंड डेवलपर्स एक स्थानीय या मानवरहित यूबूक का उपयोग करके घटक को संशोधित करते हैं: आप सभी बटन पर क्लिक कर सकते हैं और जांच सकते हैं कि कॉलबैक कहा जाता है। इसलिए हम घटक परीक्षण पर हर महीने 30 घंटे तक बचाते हैं।

एम्प्लीफर के फ्रंट-एंड डेवलपर दामिर मेलनिकोव भी डिजाइनरों, उत्पादों और संपादकों के साथ मिलकर काम करने की संभावना पर ध्यान देते हैं:

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

एम्पलीफायर के कंटेंट लीडर अलेक्जेंडर मारफिटिन ने नोट किया कि कैसे यूबूक ने फ्रंट-एंड टेक्स्ट लिखना आसान कर दिया है:

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

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

⌘⌘⌘

मुझे उम्मीद है कि यूबूक आपकी परियोजना में आवेदन पाता है। यदि आपके कोई प्रश्न हैं, तो जीथब पर रिपॉजिटरी में विस्तृत निर्देश देखें। या मुझे ट्विटर पर या मेल से ईमेल करें ।

इस लेख को तैयार करने में मदद के लिए अलेक्जेंडर मारफिटिन मारफिटिन का धन्यवाद।