🏑 👨🏽‍✈️ 🍛 प्रतिक्रिया और Vue बिना npm और बनाता है 🎥 👨🏻‍🎓 👆🏾

जब हर कोई रिएक्ट या वी के साथ परिचित होना शुरू हो जाता है, जैसा कि फ्रंटएंड के लिए दो सबसे लोकप्रिय फ्रेमवर्क के साथ, निश्चित रूप से, हम सभी जादू कमांड npm install, npm build उपयोग करते हैं। और उस डैडी 'पब्लिक' के बाद ही हम "जहाँ आवश्यक हो" तैनात करते हैं।

लेकिन एक और है (मैं इसे एक ~~विकृत~~ ) गैर-मानक तरीका कहूंगा, जो कई फ्रंट-एंड शुरुआती डेवलपर्स के बारे में भी नहीं जानते हैं, क्योंकि वे npm स्थापित / निर्माण पर "बड़े हुए" हैं।

लेकिन क्या होगा अगर आपको निर्माण करने की आवश्यकता नहीं है, लेकिन HTML में सिर्फ js कोड डालें?

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

तो आपको (और हमें) इसकी आवश्यकता क्यों है और यह कैसे काम करता है?

दूसरे दिन, उनके बीपीएम / ईआरपी सिस्टम में कार्यक्षमता जोड़ने के लिए एक "व्यवसाय" से एक आदेश आया, जो अनिवार्य रूप से एक उच्च संशोधित रेडलाइन है। यह सब चमत्कार एक लंबे समय के लिए किया गया है और उत्पादन डेटा, मशीनों और इतने पर पढ़ने के लिए सहायक microservices का एक गुच्छा के साथ एक VPS सर्वर पर कताई है। आप OS को नहीं छू सकते ...

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

Vue के बिना Vue npm

Vue के साथ, सब कुछ बहुत सरल निकला। घटकों को शुरू करना बेशक "अजीब" लगता है, लेकिन आम तौर पर पठनीय और "लिखने योग्य" होता है।

एक घटक के साथ Vue पर एक साधारण पृष्ठ का एक उदाहरण:

 <html> <head> <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script> <title>Stranger Vue things</title> </head> <body> <div id="vue-app"></div> <script type="text/javascript"> const titleComponent = `<h1>{{ title }}</h1>`; var app = new Vue({ el: '#vue-app', template: titleComponent, data: function () { return { title: 'Stranger Vue things' }; } }); </script> </body> </html>

ब्राउज़र द्वारा डाउनलोड की गई फ़ाइलें: 371 Kb, समय: 590 एमएस

तुम भी नियमित रूप से .vue स्वरूप में HTTP घटकों का आयात कर सकते हैं http-vue-loader का उपयोग कर और स्पेगेटी कोड उत्पन्न नहीं करते हैं। मुझे बहुत आश्चर्य हुआ कि आश्रितों से केवल एक प्रतिज्ञा की आवश्यकता है, जो अच्छी खबर है।

प्रतिक्रिया के बिना प्रतिक्रिया npm

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

एक घटक के साथ प्रतिक्रिया पर एक सरल पृष्ठ का एक उदाहरण:

 <html lang="en"> <head> <title>React Stranger Things</title> <script type="application/javascript" src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script> <script type="application/javascript" src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.production.min.js"></script> <script type="application/javascript" src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> const rootElement = document.getElementById('root') class TitleComponent extends React.Component { render() { return ( <h1> {this.props.title}</h1> ); } } function App(){ return( <div> <TitleComponent title="React Stranger Things"/> </div> ) } ReactDOM.render( <App />, rootElement ) </script> </body> </html>

ब्राउज़र द्वारा डाउनलोड की गई फ़ाइलें: 542 Kb, समय: 589 एमएस

यहां, Vue के विपरीत, आपको घटक टेम्पलेट को स्ट्रिंग के रूप में लिखने की आवश्यकता नहीं है, हम हमेशा की तरह सब कुछ लिखते हैं, जो काफी सुविधाजनक है और किसी भी असुविधा का कारण नहीं है।

और हमने किसे चुना?

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

लेकिन प्रीक्ट के बारे में क्या?

प्रीक्ट प्रतिक्रिया का "मिनी" संस्करण है, जो थोड़ा तेज है और इसका वजन केवल 3 KB है। जैसे ही मैंने अपने कार्य के बारे में सुना, सबसे पहले जो मुझे याद आया वह था प्रचार। प्रलेखन खोलना एक सुखद आश्चर्य नहीं था: प्रतिक्रिया the उपदेश।
Preact में JSX नहीं है, घटकों की वर्तनी अभिक्रिया से बहुत अलग है। हमारे मिनी-टास्क के लिए "प्रचार तरीके" में लिखना सीखना बहुत ही बेमानी और "महंगा" है।

यह एक बैसाखी है! उनके साथ मारपीट की

हम जानते हैं कि यह एक बैसाखी है। लेकिन कभी-कभी आपको कार्यों के आधार पर ऐसे समाधान का आविष्कार करना होगा। एक सामान्य सीमा विकास की स्थिति में, इस अवतार में चौखटे का उपयोग एक भयानक बैसाखी है और निश्चित रूप से बिल्कुल भी अनुशंसित नहीं है।

प्रतिक्रिया और Vue बिना npm और बनाता है