जेएस फ्रेमवर्क की तुलना: रिएक्ट, वीयू और हाइपरप्प

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

उदाहरण # 1: काउंटर एप्लिकेशन

काउंटर एप्लिकेशन का कार्यान्वयन संभवतः प्रतिक्रियाशील प्रोग्रामिंग में सबसे अधिक उपयोग किए जाने वाले उदाहरणों में से एक है। यह बेहद सरल और समझ में आता है:

• हमें चर count की आवश्यकता है, जो काउंटर के मूल्य को संग्रहीत करेगा।
• चर count को बढ़ाने और घटाने के लिए दो विधियों की आवश्यकता count ।
• count में संग्रहीत मूल्य को प्रदर्शित करने और उपयोगकर्ता के सामने प्रस्तुत करने के लिए एक तंत्र की आवश्यकता होती है।
• दो बटन की आवश्यकता होती है जो उपयुक्त तरीकों से बंधे होते हैं, जिससे उपयोगकर्ता count चर पर कार्य कर सकता है।

यहाँ प्रश्न में चौखटे का उपयोग करके इस उदाहरण का कार्यान्वयन है।

▍React

 import React from "react"; import ReactDOM from "react-dom"; Class Counter extends React.Component {   constructor(props) {       super(props);       this.state = { count: 0};   }   down(value) {       this.setState(state => ({ count: state.count - value }));   }   up(value) {       this.setState(state => ({ count: state.count + value }));   }   render() {       return (           <div>               <h1>{this.state.count}</h1>               <button onClick = {() => this.down(1)}>-</button>               <button onClick = {() => this.up(1)}>+</button>           </div>       );   } } ReactDOM.render(<Counter />, document.querySelector("#app")); 

▍Vue

 import Vue from "vue"; new Vue({   data: { count: 0 },   methods: {       down: function(value) {           this.count -= value;       },       up: function(value) {           this.count += value;       }   },   render: function(h) {       return(           <div>               <h1>{this.count}</h1>               <button onClick={() => this.down(1)}>-</button>               <button onClick={() => this.up(1)}>+</button>           </div>       );   },   el: "#app" }); 

▍Hyperapp

 import { h, app } from "hyperapp"; const state = {   count: 0 }; const actions = {   down: value => state => ({ count: state.count - value}),   up: value => state => ({ count: state.count + value}) }; const view = (state, actions) => (   <div>       <h1>{state.count}</h1>       <button onclick={() => actions.down(1)}>-</button>       <button onclick={() => actions.up(1)}>+</button>   </div> ); app(state, actions, view, document.querySelector("#app")); 

▍Analiz

यदि आप इन रूपरेखाओं से परिचित नहीं हैं, या यहां तक ​​कि उनमें से कम से कम एक के साथ, तो यहां, शायद, आप कुछ समझ से बाहर मिलेंगे। तो चलिए इस कोड को पार्स करते हैं।

• सभी तीन रूपरेखाओं का उपयोग करते समय, एप्लिकेशन कोड की शुरुआत में import कमांड होते हैं।
• रिएक्ट एक ऑब्जेक्ट-ओरिएंटेड प्रतिमान का उपयोग करता है। यह Counter घटक के लिए एक वर्ग बनाता है। वाही उसी तरह चलता है। यहां Vue वर्ग का एक नया उदाहरण बनाया गया है, इसके बारे में जानकारी दी गई है। और अंत में, हाइपरप्प एक कार्यात्मक प्रतिमान का उपयोग करता है, यह स्वतंत्र संस्थाओं के view , state और actions का उपयोग करता है।
• अगर हम वैरिएबल count बारे में बात करते हैं, तो रिएक्ट में इसे कंपोनेंट कंस्ट्रक्टर में इनिशियलाइज़ किया जाता है, और वीयू और हाइपरऐप में यह क्रमशः data और state ऑब्जेक्ट्स की प्रॉपर्टी है।
• यदि हम इन अनुप्रयोगों की खोज में आगे बढ़ते हैं, तो हम देख सकते हैं कि रिएक्ट और वीयू count वेरिएबल के साथ बातचीत करने के लिए बहुत समान तरीकों का उपयोग करते हैं। प्रतिक्रिया में, किसी अनुप्रयोग की स्थिति को बदलने के लिए, setState से विरासत में प्राप्त React.Component विधि React.Component । Vue में, इस this.count मान सीधे बदला जाता है। Hyper6 विधियाँ ES6 तीर फ़ंक्शन सिंटैक्स का उपयोग करके लिखी जाती हैं। विचाराधीन चौखटे के बीच, वह इसका उपयोग करने वाला एकमात्र व्यक्ति है, क्योंकि रिएक्ट और वीयू this कीवर्ड को अपने तरीकों के अंदर उपयोग करने के लिए मजबूर हैं। दूसरी ओर, हाइपरप्प मेथड्स की आवश्यकता होती है कि वे, एक तर्क के रूप में, एप्लिकेशन स्टेट के साथ एक ऑब्जेक्ट पास करें। इसका मतलब है कि वे विभिन्न संदर्भों में पुन: प्रयोज्य होने की संभावना रखते हैं।
• एप्लिकेशन का वह भाग जो डेटा को पृष्ठ पर आउटपुट करने के लिए ज़िम्मेदार है, तीनों उदाहरणों में लगभग समान है। Vue की ख़ासियत यह है कि इस ढांचे का उपयोग करते समय, h फ़ंक्शन को रेंडरिंग सबसिस्टम को पास करना होगा। हाइपरऐप onclick बजाय onclick का उपयोग करता है, और यहां पर count चर को React और Vue दोनों से अलग-अलग तरीके से एक्सेस किया जाता है, क्योंकि प्रत्येक फ्रेमवर्क में एप्लिकेशन स्टेट कैसे संग्रहीत किया जाता है, इसकी ख़ासियत के कारण।
• और अंत में, सभी तीन चौखटे #app तत्व के लिए बाध्यकारी का उपयोग करते हैं। उनमें से प्रत्येक में, यह ऑपरेशन अलग तरीके से किया जाता है। यह ध्यान दिया जाना चाहिए कि Vue में यह ऑपरेशन सबसे सरल और सबसे अधिक समझ में आता है और डेवलपर को अधिक लचीला डिजाइन देता है, जो तत्व चयनकर्ता के साथ काम करता है, और तत्व के साथ ही नहीं।

Ions निष्कर्ष

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

उदाहरण नंबर 2: अतुल्यकालिक कोड के साथ काम करते हैं

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

• हम एप्लिकेशन स्टेट में उसमें पोस्ट करने के लिए ऐरे को सेव करते हैं।
• हम उपयुक्त विधि का उपयोग करके कॉल करते हैं, fetch() , हमें जिस URL की आवश्यकता होती है, उसका संकेत देते हुए, डेटा के आने की प्रतीक्षा करें, प्राप्त JSON कोड को पार्स करें, जो ऑब्जेक्ट्स का एक सरणी है, और अंत में प्राप्त डेटा को लिखकर posts वेरिएबल को अपडेट करें।
• हम उस पृष्ठ पर एक बटन प्रदर्शित करते हैं जो उस विधि को कहता है जो प्रकाशनों की सूची को लोड करता है।
• कुंजियों का उपयोग करते हुए पदों से सूची बनाएँ।

एक कोड पर विचार करें जो उपरोक्त कार्य योजना को लागू करता है।

▍React

 import React from "react"; import ReactDOM from "react-dom"; class PostViewer extends React.Component {   constructor(props) {       super(props);       this.state = { posts: [] };   }   getData() {       fetch(`https://jsonplaceholder.typicode.com/posts`)       .then(response => response.json())       .then(json => {           this.setState(state => ({ posts: json}));       });   }   render() {       return (           <div>               <button onClick={() => this.getData()}>Get posts</button>               {this.state.posts.map(post => (                   <div key={post.id}>                       <h2><font color="#3AC1EF">{post.title}</font></h2>                       <p>{post.body}</p>                   </div>               ))}           </div>       );   } } ReactDOM.render(<PostViewer />, document.querySelector("#app")); 

▍Vue

 import Vue from "vue"; new Vue({   data: { posts: [] },   methods: {       getData: function(value) {           fetch(`https://jsonplaceholder.typicode.com/posts`)           .then(response => response.json())           .then(json => {               this.posts = json;           });       }   },   render: function(h) {       return (           <div>               <button onClick={() => this.getData()}>Get posts</button>               {this.posts.map(post => (                   <div key={post.id}>                       <h2><font color="#3AC1EF">{post.title}</font></h2>                       <p>{post.body}</p>                   </div>               ))}           </div>       );   },   el: "#app" }); 

▍Hyperapp

 import { h, app } from "hyperapp"; const state = {   posts: [] }; const actions = {   getData: () => (state, actions) => {       fetch(`https://jsonplaceholder.typicode.com/posts`)       .then(response => response.json())       .then(json => {           actions.getDataComplete(json);       });   },   getDataComplete: data => state => ({ posts: data }) }; const view = (state, actions) => (   <div>       <button onclick={() => actions.getData()}>Get posts</button>       {state.posts.map(post => (           <div key={post.id}>               <h2><font color="#3AC1EF">{post.title}</font></h2>               <p>{post.body}</p>           </div>       ))}   </div> ); app(state, actions, view, document.querySelector("#app")); 

▍Analiz

आइए इस कोड का विश्लेषण करें और तीन जांच किए गए ढांचे की तुलना करें।

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

Ions निष्कर्ष

अतुल्यकालिक संचालन करना सभी रूपरेखाओं में समान रूप से सरल था। हाइपरऐप डेवलपर को अतुल्यकालिक क्रियाओं के साथ काम करते समय अधिक कार्यात्मक और मॉड्यूलर कोड लिखने के लिए प्रेरित कर सकता है, लेकिन अन्य दो ढांचे भी अपने काम का एक उत्कृष्ट काम करते हैं, और इस संबंध में, डेवलपर को चुनने का अवसर देते हैं।

उदाहरण 3: टू-डू एप्लिकेशन के लिए सूची आइटम घटक

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

अध्ययन किए गए ढांचे का उपयोग करके घटक के कार्यान्वयन पर विचार करें। इस उदाहरण में, हम, हालांकि, कार्यात्मक शैली में लिखे गए प्रतिक्रिया घटक पर विचार करके कोड विकल्पों पर विचार करेंगे।

EaReactct (कार्यात्मक शैली)

 function TodoItem(props) {   return (       <li class={props.done ? "done" : ""} onclick={() => props.toggle(props.id)}>           {props.value}       </li>   ); } 

▍React

 class TodoItem extends React.Component {   render () {       return (           <li class={this.props.done ? "done" : ""} onclick={() => this.props.toggle(this.props.id)}>               {this.props.value}           </li>       );   } } 

▍Vue

 var TodoItem = Vue.component("todoitem", {   props: ["id", "value", "done", "toggle"],   template:       '<li v-bind:class="{done : done}" v-on:click="toggle(id)">{{value}}</li>' }); 

▍Hyperapp

कृपया ध्यान दें कि हाइपरप्प एक कार्यात्मक शैली का भी उपयोग करता है।

 const TodoItem = ({ id, value, done, toggle }) = (   <li class={done ? "done" : ""} onclick={() => toggle(id)}>       {value}   </li> ); 

▍Analiz

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

Ions निष्कर्ष

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

घटक जीवन चक्र विधियों की तुलना

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

घटना	प्रतिक्रिया	Vue	Hyperapp
प्रारंभ	निर्माता	इससे पहले कि बनाया, बनाया	-
बढ़ते	comoinentDidMount	पहले, घुड़सवार	OnCreate
अद्यतन	componentDidUpdate	पहले अपडेट करें, अपडेट किया गया	onupdate
अनमाउंट	componentWillUnmount	-	onremove
विनाश	-	डस्टरट्रॉय से पहले, नष्ट	OnDestroy

▍Analiz

इस तालिका का विश्लेषण करके आप क्या समझ सकते हैं:

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

Ions निष्कर्ष

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

फ्रेमवर्क प्रदर्शन तुलना

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

इसलिए, React, Vue और Hyperapp के परीक्षा परिणामों पर एक नज़र डालें।

टेबल के साथ काम करना

तालिकाओं के साथ काम करने के लिए चौखटे के परीक्षा परिणाम यहां दिए गए हैं। तालिका की कोशिकाओं में संकेतक ऑपरेशन की अवधि के अनुरूप है dev मानक विचलन। सर्वश्रेष्ठ संकेतक द्वारा प्राप्त संकेतक को विभाजित करने का परिणाम कोष्ठक में दिखाया गया है।

के विश्लेषण

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

▍Lading, लॉन्चिंग, कोड आकार

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

के विश्लेषण

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

स्मृति के साथ काम करना

अब स्मृति आवंटन के परीक्षण के परिणामों पर विचार करें।

के विश्लेषण

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

Ions निष्कर्ष

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

हालांकि, यह याद रखने योग्य है कि यहां उपयोग किए जाने वाले प्रदर्शन परीक्षण वास्तविक जीवन से कुछ प्रकार के औसत परिदृश्य से दूर हैं। इसलिए, परीक्षण करने और वास्तविक परियोजना पर उनकी तुलना करने पर, आप अन्य परिणाम देख सकते हैं।

अतिरिक्त नोट्स

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

• प्रतिक्रिया उस समस्या को दरकिनार कर देती है जो पड़ोसी JSX तत्वों को मूल तत्व में लपेटी जानी चाहिए, जो टुकड़ों की अवधारणा को पेश करते हैं - ऐसे तत्व जो आपको DOM में अतिरिक्त नोड्स जोड़े बिना वंश तत्वों के एक समूह को स्थापित करने की अनुमति देते हैं।
• रिएक्टर डेवलपर को उच्च-ऑर्डर घटकों के साथ प्रदान करता है, जबकि Vue घटक कार्यक्षमता का पुन: उपयोग करने के लिए मिश्रण का उपयोग करता है।
• Vue अधिक पूरी तरह से जिम्मेदारियों के अलगाव की अवधारणा का उपयोग करता है, टेम्पलेट का उपयोग करके एप्लिकेशन की संरचना और कार्यक्षमता को अलग करता है।
• हाइपरऐप, जब रिएक्ट और वीयू की तुलना में होता है, एक सिस्टम की तरह दिखता है जो निचले स्तर का एपीआई प्रदान करता है। हाइपरएप एप्लिकेशन का कोड छोटा हो जाता है, यह अधिक लचीलापन देता है, जो उन मामलों में उपयोगी हो सकता है, जहां डेवलपर इसे ठीक-ट्यूनिंग करके और इसके आंतरिक तंत्र पर शोध करना चाहते हैं।

परिणाम

इस सामग्री के लेखक का मानना ​​है कि यदि आप इस बिंदु तक पढ़ते हैं, तो आपको पहले से ही समझ है कि यहां अध्ययन किए गए रूपरेखाओं में से कौन सा आपकी आवश्यकताओं के अनुसार सबसे अच्छा है। अंत में, हम इस बारे में बात नहीं कर रहे थे कि कौन सी रूपरेखा सबसे अच्छी है, बल्कि इसके बारे में कि उनमें से कौन सी विभिन्न स्थितियों में खुद को दिखाने में सक्षम है। परिणामस्वरूप, हम निम्नलिखित सामान्य निष्कर्ष निकाल सकते हैं:

• React — , , , - , . , , , , . , React — , .
• Vue , - JavaScript-, — . React, , , , React - . Vue , , , , React.
• , , Hyperapp — , , — . , React Vue, . , . , Hyperapp, , , , Hyperapp-, . , , Hyperapp, , , , React Vue, .

! -?


^{, - 10% :)}