वेब मानकों का पीछा करते हुए

हमने पहले ही बात की कि 2018 में फ्रंट-एंड डेवलपमेंट में हमें किन समस्याओं का सामना करना पड़ेगा। आइए देखें कि जब हम अपना कोड लिखते हैं तो हम मानकों से कितने दूर जाते हैं



और हम इस समस्या को कैसे हल कर सकते हैं।


आधुनिक ब्राउज़र बहुत कुछ कर सकते हैं, वे ईएस 6 को समझते हैं, ईएस मॉड्यूल का समर्थन करते हैं, विकास और डिबगिंग के लिए सुविधाजनक उपकरण प्रदान करते हैं। लेकिन क्या यह पर्याप्त है और क्या हम इन सभी साधनों का प्रभावी ढंग से उपयोग कर रहे हैं?

आइए हमारे स्रोत कोड और हमारे ब्राउज़र में डाउनलोड होने वाले कोड के बीच मुख्य अंतर को उजागर करें:

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

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

@Component() class Toolbar {} 

सीएसएस की नई विशेषताएं - सीएसएसडीबी में आधुनिक ब्राउज़रों द्वारा समर्थित सीएसएस गुणों की एक सूची है, बाकी को संकलित किया जाना चाहिए।

 @media (480px <= width < 768px) {} 

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

 const component = require('./component'); module.exports = function() {}; 

साधारण आयात - (पैकेज के नाम से शुरू होने वाला आयात), ब्राउज़र समर्थित नहीं हैं, ड्राफ्ट मानक पर काम चल रहा है (वैकल्पिक रूप से, अब आप ES मॉड्यूल का उपयोग करके नोड और जेएस और ब्राउजर में आयात को समेकित कर सकते हैं। नोड_मॉड्यूल / लॉश / लीब / गेट.जेएस, लेकिन अधिकांश लाइब्रेरी नहीं करते हैं)।

 import get from 'lodash/get'; 

अंतर्निहित मॉड्यूल का आयात - ब्राउज़रों में भी समर्थित नहीं है, पुस्तकालयों द्वारा प्रतिस्थापन की आवश्यकता है।

 import zlib from 'zlib'; 

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

 import { Component } from 'react'; 

वास्तव में, पुस्तकालय एक एकल प्रतिक्रिया वस्तु का निर्यात करता है जिसमें घटक संपत्ति होती है, गुणों का एक सेट नहीं जैसा कि आप सोच सकते हैं।

तृतीय-पक्ष प्रारूपों (सीएसएस, json, आदि) का आयात - ब्राउज़रों द्वारा समर्थित नहीं है और जाहिरा तौर पर ( एमएम आयात को छोड़कर) नहीं होगा।

 import './style.css'; 

प्रकार की घोषणाएं - टाइपस्क्रिप्ट और प्रवाह बहुत लोकप्रिय हो गए हैं और बड़े पुस्तकालयों के विकास में मदद करते हैं, लेकिन ब्राउज़रों में समर्थन नहीं है।

 const a: number = 1; 

मेटलंगूज - एससीएस , एसएएस, कम, टाइपस्क्रिप्ट, कॉफिसस्क्रिप्ट, पग मानक नहीं हैं और संकलन की आवश्यकता है।

 <style type=”text/scss”> .logo { color: white; &.active { color: red; } } </style> 

Jsx टेम्प्लेट मानक नहीं हैं और इन्हें createElement का उपयोग करके परिवर्तित किया जाना चाहिए:

 const element = <h1>Hello, world!</h1>; 

Vue टेम्पलेट्स - वेब घटकों से प्रेरणा लेते समय, मानक भी नहीं हैं:

 <template> <div>This will be pre-compiled</div> </template> <script src="./my-component.js"></script> <style src="./my-component.css"></style> 

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

 fetch('./my-button.html'); 

यदि आप कोणीय के साथ काम कर रहे हैं:

निर्भरता इंजेक्शन - प्रतिबिंब और डेकोरेटर मेटाडेटा का उपयोग करके कार्यान्वित किया जाता है, संकलन की आवश्यकता होती है।

Http के माध्यम से लोड हो रही डायनेमिक स्टाइल - फ्रेमवर्क इस सुविधा का समर्थन नहीं करता है।

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

Hq क्या अन्य लाभ प्रदान करता है?

• विन्यास का अभाव
• बंडलों की अनुपस्थिति के कारण बेहतर डिबगिंग
• ब्राउज़र में कोड स्रोत के जितना संभव हो उतना करीब है
• ब्राउज़र में सरल प्रोजेक्ट संरचना
• सभी परियोजना निर्भरताएं दिखाई देती हैं, जो लोड करता है क्या, क्यों और कब
• ब्राउज़र टूल्स का पूर्ण उपयोग: लोडिंग / डिबगिंग / कोड कवरेज
• बहुत तेज़ सर्वर ऑपरेशन
• मानकों का उपयोग करते हुए, hq एक नियमित स्थिर सर्वर की तरह काम करता है

अभी हक की कोशिश करें:

 npm i -g @hqjs/hq 

और फिर परियोजना की जड़ में चलें:

 hq 

पुनश्च: पिछले लेख पर मूल्यवान टिप्पणियों के लिए जस्टबोरिस का धन्यवाद।