5 मिनट में यूआई फ्रेमवर्क

कुछ समय पहले मैंने सोचा कि वेब के लिए इतने सारे यूआई फ्रेमवर्क क्यों हैं? मैं एक लंबे समय के लिए आईटी में रहा हूं और मुझे याद नहीं है कि अन्य प्लेटफार्मों पर यूआई पुस्तकालयों का जन्म और उसी गति से हुआ था जैसा कि वेब में हुआ था। डेस्कटॉप OS के लिए लाइब्रेरी, जैसे: MFC, Qt, WPF, आदि। - वर्षों से विकसित राक्षस थे और बड़ी संख्या में विकल्प नहीं थे। वेब पर सब कुछ अलग है - फ्रेमवर्क लगभग हर हफ्ते जारी होते हैं, नेता बदलते हैं - ऐसा क्यों हो रहा है?

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

यह लेख क्यों?

हैबे पर एक समय में लेखों की एक श्रृंखला थी - जोस पर कोड की 30 पंक्तियों के लिए एक्स लिखने के लिए।

मैंने सोचा - क्या 30 लाइनों में प्रतिक्रिया लिखना संभव है? हां, 30 पंक्तियों के लिए मैं सफल नहीं हुआ, लेकिन अंतिम परिणाम इस आंकड़े के अनुरूप है।

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

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

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

प्रस्तावित शब्दांकन में - रिएक्ट काफी यूआई फ्रेमवर्क है।

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

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

शुरुआत करते हैं JSX से

यह JSX कोड का एक उदाहरण है

const Component = () => ( <div className="main"> <input /> <button onClick={() => console.log('yo')}> Submit </button> </div> ) export default Component 

Component फ़ंक्शन को कॉल करते समय हमें इस तरह के वर्चुअल डोम बनाने की आवश्यकता होती है

 const vdom = { type: 'div', props: { className: 'main' }, children: [ { type: 'input' }, { type: 'button', props: { onClick: () => console.log('yo') }, children: ['Submit'] } ] } 

बेशक, हम इस परिवर्तन को मैन्युअल रूप से नहीं लिखेंगे, हम इस प्लगइन का उपयोग करेंगे, प्लगइन पुराना है, लेकिन यह समझने में मदद करने के लिए पर्याप्त सरल है कि सब कुछ कैसे काम करता है। यह jsx- परिवर्तन का उपयोग करता है, जो JSX को इस तरह परिवर्तित करता है:

 jsx.fromString('<h1>Hello World</h1>', { factory: 'h' }); // => 'h("h1", null, ["Hello World"])' 

इसलिए, हमें बस इतना करना चाहिए कि h नोड्स के vdom कंस्ट्रक्टर को कार्यान्वित करें, एक फंक्शन जो पुनरावर्ती रूप से वर्चुअल DOM नोड बनाएगा, प्रतिक्रिया के मामले में, React.createElement फ़ंक्शन ऐसा करता है। नीचे ऐसे फ़ंक्शन का एक आदिम कार्यान्वयन है

 export function h(type, props, ...stack) { const children = (stack || []).reduce(addChild, []) props = props || {} return typeof type === "string" ? { type, props, children } : type(props, children) } function addChild(acc, node) { if (Array.isArray(node)) { acc = node.reduce(addChild, acc) } else if (null == node || true === node || false === node) { } else { acc.push(typeof node === "number" ? node + "" : node) } return acc } 

बेशक, पुनरावर्तन कोड को थोड़ा जटिल करता है, लेकिन मुझे आशा है कि यह स्पष्ट है, अब इस फ़ंक्शन के साथ हम vdom बना सकते हैं

 'h("h1", null, ["Hello World"])' => { type: 'h1', props:null, children:['Hello World']} 

और इसलिए किसी भी घोंसले के शिकार के लिए नोड्स

बहुत बढ़िया, अब हमारा घटक फ़ंक्शन vdom नोड लौटाता है।

अब हिस्सा होगा, हमें एक patch फ़ंक्शन लिखना होगा जो एप्लिकेशन के मूल DOM तत्व को ले जाता है, पुराना vdom, नया vdom, और नए DOM के अनुसार वास्तविक DOM के नोड्स को अपडेट करता है।

शायद आप इस कोड को आसानी से लिख सकते हैं, लेकिन यह निकला इसलिए मैंने आधार के रूप में पिकोडॉम पैकेज से कोड लिया

 export function patch(parent, oldNode, newNode) { return patchElement(parent, parent.children[0], oldNode, newNode) } function patchElement(parent, element, oldNode, node, isSVG, nextSibling) { if (oldNode == null) { element = parent.insertBefore(createElement(node, isSVG), element) } else if (node.type != oldNode.type) { const oldElement = element element = parent.insertBefore(createElement(node, isSVG), oldElement) removeElement(parent, oldElement, oldNode) } else { updateElement(element, oldNode.props, node.props) isSVG = isSVG || node.type === "svg" let childNodes = [] ; (element.childNodes || []).forEach(element => childNodes.push(element)) let oldNodeIdex = 0 if (node.children && node.children.length > 0) { for (var i = 0; i < node.children.length; i++) { if (oldNode.children && oldNodeIdex <= oldNode.children.length && (node.children[i].type && node.children[i].type === oldNode.children[oldNodeIdex].type || (!node.children[i].type && node.children[i] === oldNode.children[oldNodeIdex])) ) { patchElement(element, childNodes[oldNodeIdex], oldNode.children[oldNodeIdex], node.children[i], isSVG) oldNodeIdex++ } else { let newChild = element.insertBefore( createElement(node.children[i], isSVG), childNodes[oldNodeIdex] ) patchElement(element, newChild, {}, node.children[i], isSVG) } } } for (var i = oldNodeIdex; i < childNodes.length; i++) { removeElement(element, childNodes[i], oldNode.children ? oldNode.children[i] || {} : {}) } } return element } 

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

createElement updateElement removeElement का कार्यान्वयन कार्यान्वयन createElement updateElement removeElement मैं इसे यहां नहीं लाऊंगा, यह उल्लेखनीय है, जो कोई भी इच्छुक है वह यहां स्रोत देख सकता है ।

एकमात्र कैविट है - जब input तत्वों के लिए value गुण अपडेट किए जाते हैं, तो तुलना पुराने vnode के साथ नहीं की जानी चाहिए, लेकिन वास्तविक घर में value विशेषता के साथ - यह सक्रिय तत्व को इस संपत्ति को अपडेट करने से रोकेगा (क्योंकि यह पहले से ही वहां अपडेट है और कर्सर के साथ समस्याओं को रोक देगा। और चयन।

ठीक है, अब हमें केवल इन टुकड़ों को एक साथ रखना है और UI फ्रेमवर्क लिखना है
हम 5 लाइनों के भीतर रहते हैं ।

1. जैसा कि रिएक्ट में, एप्लिकेशन को बनाने के लिए हमें 3 मापदंडों की आवश्यकता होती है
   export function app(selector, view, initProps) {
   चयनकर्ता - रूट डोम चयनकर्ता, जिसमें एप्लिकेशन माउंट किया जाएगा (डिफ़ॉल्ट रूप से 'निकाय')
   दृश्य - एक फ़ंक्शन जो रूट vnode का निर्माण करता है
   initProps - प्रारंभिक अनुप्रयोग गुण
2. DOM में रूट एलिमेंट लें
   const rootElement = document.querySelector(selector || 'body')
3. हम प्रारंभिक गुणों के साथ vdom इकट्ठा करते हैं
   let node = view(initProps)
4. हम DOM में प्राप्त vdom को पुराने vdom के रूप में माउंट करते हैं जिसे हम null लेते हैं
   patch(rootElement, null, node)
5. हम नए गुणों के साथ एप्लिकेशन अपडेट फ़ंक्शन लौटाते हैं
   return props => patch(rootElement, node, (node = view(props)))

फ्रेमवर्क तैयार है!

इस फ्रेमवर्क पर 'हैलो वर्ल्ड' कुछ इस तरह दिखेगा:

 import { h, app } from "../src/index" function view(state) { return ( <div> <h2>{`Hello ${state}`}</h2> <input value={state} oninput={e => render(e.target.value)} /> </div> ) } const render = app('body', view, 'world') 

यह लाइब्रेरी, रिएक्ट की तरह, घटक रचना का समर्थन करती है, रनटाइम पर घटकों को हटाती है, ताकि इसे एक यूआई फ्रेमवर्क माना जा सके। एक और अधिक जटिल उपयोग मामला यहां पाया जा सकता है ToDo उदाहरण ।

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

किसी भी मामले में, पुस्तकालय शैक्षिक उद्देश्यों के लिए विकसित किया गया था - उत्पादन में इसका उपयोग न करें :)

पुनश्च: मैं इस लेख के लिए शानदार हाइपरप्प लाइब्रेरी से प्रेरित था, कोड का हिस्सा वहां से लिया गया था।

अच्छा कोडिंग!