🧚 💕 💪🏾 पुन: "जेएस चौखटे की तुलना: प्रतिक्रिया, Vue और हाइपरप्पा" 👩🏾‍⚖️ 🔓 🤹🏽

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

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

पाठकों की सुविधा के लिए, मैंने स्पॉइलर के तहत मूल लेख से उदाहरणों की नकल की ताकि यह तुलना करने में अधिक सुविधाजनक हो सके। अच्छा, चलिए शुरू करते हैं।

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

प्रतिक्रिया

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"));

▍Svelte

 <div> <h1>{count}</h1> <button on:click="set({count: count - 1})">-</button> <button on:click="set({count: count + 1})">+</button> </div>

→ एक कार्यशील उदाहरण।

▍Analiz

एक Svelte घटक एक html फ़ाइल है जिसमें कुख्यात एकल फ़ाइल घटक (SFC) प्रारूप है, एक रूप में या दूसरे में, पहले से ही Vue , Ractive , Riot और कुछ अन्य चौखटों में उपयोग किया जाता है। Html टेम्पलेट के अलावा, एक घटक के पास जावास्क्रिप्ट में वर्णित व्यवहार और तर्क हो सकते हैं, साथ ही घटक की शैली भी हो सकती है।

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

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

प्रतिक्रिया

 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"));

▍Svelte

 <div> <button on:click="getData()">Get posts</button> {#each posts as {title, body}} <div> <h2><font color="#3AC1EF">{title}</font></h2> <p>{body}</p> </div> {/each} </div> <script> export default { methods: { getData() { fetch('https://jsonplaceholder.typicode.com/posts') .then(res => res.json()) .then(posts => this.set({ posts })); } } }; </script>

→ एक कार्यशील उदाहरण।

▍Analiz

जेएसएक्स के विपरीत, जो कार्बन कॉपी की तरह, मूल तुलना से सभी 3 रूपरेखाओं में उपयोग किया जाता है, और वास्तव में HTML जैसे सिंटैक्स के साथ जावास्क्रिप्ट कोड का विस्तार करता है, Svelte अधिक परिचित सुविधाओं का उपयोग करता है - HTML में js और css कोड का उपयोग करके < स्क्रिप्ट> और <शैली> ।

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

प्रकाशन सूची के पुनरावृत्ति के प्रत्येक चरण पर प्रकाशन वस्तु (पोस्ट) को नष्ट करने के उपयोग पर ध्यान दें:

 {#each posts as {title, body}}

यह ट्रिक {post.title} जैसे टेम्प्लेट में अतिरेक से बचा जाता है और छोटी प्रविष्टि {टाइटल} का उपयोग करके टेम्प्लेट को सरल बनाता है ।

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

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

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

प्रतिक्रिया

 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> );

▍Svelte

 <li class="{done ? 'done' : ''}" on:click="set({done: !done})">{value}</li>

→ एक कार्यशील उदाहरण।

▍Analiz

यहां सब कुछ बहुत अच्छा है। हम किए गए मूल्य के आधार पर css वर्ग को उजागर करते हैं और जब आप किसी सूची आइटम पर क्लिक करते हैं तो इस मूल्य को विपरीत में बदल देते हैं।

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

डिस्क्लेमर : अब से, मैंने हाइपरएप के साथ तुलना को छोड़ने का फैसला किया, क्योंकि अन्यथा टेबल बस अपठनीय होगी।

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

▍Analiz

जीवन चक्र हुक के संदर्भ में, Svelte अत्यंत न्यूनतर है। केवल 4 हुक हैं:

onstate - घटक बनने से पहले कहा जाता है और DOM अपडेट होने से पहले हर राज्य में परिवर्तन होता है।
oncreate - जिस क्षण घटक बनाया जाता है उसे कहा जाता है।
onupdate - DOM में बढ़ते हुए तुरंत कहा जाता है और DOM को अपडेट करने के बाद प्रत्येक राज्य बदल जाता है।
ondestroy - तब बुलाया जाता है जब घटक नष्ट हो जाता है और DOM से हटा दिया जाता है।

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

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

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

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

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

▍Analiz

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

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

परिणाम

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

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

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

यदि आप पहली बार इस अद्भुत ढांचे से मिले, तो आपको इसके बारे में अन्य लेख पढ़ने में रुचि हो सकती है:

→ जेएस फ्रेमवर्क को जादुई रूप से अस्वीकृत करना
→ 1Kb स्वतः पूर्ण
→ SvelteJS: दूसरे संस्करण की रिलीज़

यदि आपके पास अभी भी Svelte के बारे में प्रश्न हैं, तो रूसी भाषा के टेलीग्राम चैनल SvelteJS से जुड़ें । वहां आप हमेशा एक प्रश्न पूछ सकते हैं और सलाह ले सकते हैं, नवीनतम समाचारों का पता लगा सकते हैं और बस चैटिंग का आनंद ले सकते हैं। हमें आपको देखकर खुशी होगी!

पुन: "जेएस चौखटे की तुलना: प्रतिक्रिया, Vue और हाइपरप्पा"

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

▍Svelte

▍Analiz

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

▍Svelte

▍Analiz

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

▍Svelte

▍Analiz

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

▍Analiz

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

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

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

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

▍Analiz

परिणाम

More articles: