खुद बनाकर सीखें कि आधुनिक JavaScript frameworks कैसे काम करते हैं

 (nolanlawson.com)
26 पॉइंट द्वारा GN⁺ 2023-12-04 | 1 टिप्पणियां | WhatsApp पर शेयर करें

समझें कि आधुनिक JavaScript frameworks कैसे काम करते हैं

  • अपना खुद का JavaScript framework बनाकर देखना सीखने में मददगार होता है।
  • "आधुनिक JavaScript frameworks" से मतलब React के बाद आए frameworks से है।
  • ये frameworks React से प्रेरित हैं, लेकिन समय के साथ काफ़ी हद तक मिलती-जुलती दिशा में विकसित हुए हैं।

आधुनिक frameworks की विशेषताएँ

  • DOM updates के लिए reactivity का उपयोग।
  • DOM rendering के लिए templates की cloning का उपयोग।
  • <template> और Proxy जैसे आधुनिक web APIs का उपयोग।

Reactivity

  • अक्सर कहा जाता है कि React reactive नहीं है।
  • आधुनिक frameworks performance को प्राथमिकता देते हुए push-based reaction model का उपयोग करते हैं।
  • Proxy का उपयोग करके state बदलते ही DOM update होने वाला सिस्टम बनाया जाता है।

DOM tree cloning

  • <template> टैग का उपयोग करके HTML को एक बार parse करने के बाद पूरे tree को तेज़ी से clone करना एक प्रभावी तकनीक है।
  • यह तरीका कई JavaScript frameworks में उपयोग किया जाता है।

आधुनिक JavaScript APIs

  • <template> और Proxy ऐसे APIs हैं जो reactivity system बनाने में मदद करते हैं।
  • tagged template literals का उपयोग करके HTML template API को सरल बनाया जाता है।

Reactivity बनाने के चरण

  • state management और state बदलने पर DOM update को परिभाषित करने वाली reactivity framework की बुनियाद होती है।
  • Proxy से state changes detect किए जाते हैं, और queueMicrotask के जरिए updates को कुशलता से manage किया जाता है।

DOM rendering चरण

  • html function का उपयोग करके DOM tree बनाया और कुशलता से update किया जाता है।
  • tagged template literals से HTML templates लिखे जाते हैं, और WeakMap से HTML parsing को optimize किया जाता है।

Reactivity और DOM rendering को जोड़ना

  • createEffect का उपयोग करके state के अनुसार DOM update किया जाता है।
  • state बदलने पर text अपने-आप update हो जाए, ऐसा implementation किया जाता है।

आगे के चरण

  • DOM rendering system को बेहतर बनाने के कई तरीके हैं।
  • लक्ष्य यह है कि template को केवल एक बार parse किया जाए, bindings केवल एक बार सेट हों, और updates न्यूनतम रहें।

GN⁺ की राय

इस लेख की सबसे महत्वपूर्ण बात यह है कि आधुनिक JavaScript frameworks के core concepts और implementation methods को समझा जाए, और वास्तव में अपना framework बनाकर सीखने की प्रक्रिया से गुज़रा जाए। यह तरीका शुरुआती software engineers को frameworks के अंदरूनी काम करने के तरीके को समझने और उसे व्यवहार में आज़माने का मौका देता है, इसलिए यह एक रोचक और उपयोगी learning experience हो सकता है।

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2023-12-04
Hacker News राय

  • रुचि रखने वाले विषय की बुनियादी समझ के लिए निम्नलिखित संसाधनों की सिफारिश की गई है:

  • React के बारे में गलतफ़हमियों और उसके वास्तविक काम करने के तरीके की व्याख्या:

    • state update होने पर React पूरे virtual DOM tree को नहीं, बल्कि सिर्फ उस component और उसके child components को फिर से बनाता है.
    • useMemo re-rendering को नहीं रोकता; यह काम React.memo करता है.
    • React "push-only" नहीं है क्योंकि वह updates को buffer करता है.
    • signals का फ़ायदा यह है कि framework को पता होता है कि DOM की कौन-सी properties को re-render किया जाना चाहिए, लेकिन इसका मतलब यह नहीं कि वह reactivity ही है.

  • Svelte के बारे में सकारात्मक मूल्यांकन और उपयोग के उदाहरण:

    • Svelte compiler बहुत extensible है, और Svelte templates को विशेष तरीक़े से प्रोसेस किया जा सकता है.
    • Svelte से Svekyll (static blog tool Jekyll का clone) बनाने का अनुभव साझा किया गया.

  • Reactive frameworks पर अलग-अलग दृष्टिकोण:

    • Solid जैसे reactive frameworks के लिए परिचयात्मक सामग्री दी गई है.
    • solid-js की reactivity समझने के लिए web renderer/framework लिखने का अनुभव साझा किया गया.
    • React को ख़ुद implement करके सीखने वाली सामग्री की सिफारिश की गई.

  • React की reactivity पर सवाल और चर्चा:

    • React को "reactive" बनाने के तरीक़ों पर सवाल.
    • अब और JS frameworks न बनाने चाहिए, ऐसी राय.

  • Frontend framework का गहरा अनुभव रखने वाले लोगों से पूछा गया सवाल:

    • rendering work के लिए effect-system को support करने वाले framework/library के बारे में प्रश्न.