VanillaJSX.com वेबसाइट लॉन्च

Vanilla JSX के उदाहरण

अगर JSX DOM elements लौटाए तो?

• ClickMe फ़ंक्शन एक बटन बनाता है और क्लिक की संख्या दिखाने की सुविधा देता है
• हर बार बटन पर क्लिक करने पर टेक्स्ट अपडेट होता है

export default function ClickMe() {
  let i = 0;
  const el = <button>Click me</button> as HTMLButtonElement;
  el.onclick = (e) => {
    el.textContent = `Clicked ${++i} times`;
  };
  return el;
}

पुन: उपयोग की क्षमता

• ClickMe कॉम्पोनेंट को कई बार इस्तेमाल करके हर instance का अलग state रखा जा सकता है

import ClickMe from "./sample1.js";
export default () => <>
  <p><ClickMe /></p>
  <p><ClickMe /></p>
  <p><ClickMe /></p>
</>;

इंटरैक्टिव DOM tree बनाना

• TodoInput और TodoList क्लास का उपयोग करके todo list को मैनेज किया जा सकता है
• items जोड़े जा सकते हैं और क्लिक करके हटाए जा सकते हैं

function TodoInput(attrs: { add: (v: string) => void }) {
  const input = <input /> as HTMLInputElement;
  input.placeholder = 'Add todo item...';
  input.onkeydown = (e) => {
    if (e.key === 'Enter') {
      attrs.add(input.value);
      input.value = '';
    }
  };
  return input;
}

class TodoList {
  ul = <ul class='todolist' /> as HTMLUListElement;
  add(v: string) {
    const item = <li>{v}</li> as HTMLLIElement;
    item.onclick = () => item.remove();
    this.ul.append(item);
  }
}

export default () => {
  const list = new TodoList();
  list.add('foo');
  list.add('bar');
  return <>
    <TodoInput add={(v) => list.add(v)} />
    {list.ul}
  </>;
};

बड़े पैमाने के डेटा को प्रोसेस करना

• FindNames फ़ंक्शन बड़े पैमाने के डेटा को प्रोसेस और फ़िल्टर करके नतीजे दिखाता है
• input value के अनुसार real-time में matching items अपडेट होते हैं

import { data } from "../fetch-dataset.js";
export default function FindNames() {
  const status = <p style='margin:1em 0' /> as HTMLParagraphElement;
  const results = <ul /> as HTMLUListElement;
  const input = <input value='eri(c|k)a?' autocomplete='new-password' oninput={updateMatches} /> as HTMLInputElement;
  updateMatches();

  function updateMatches() {
    const matched = (data.entries().filter(([k]) => k.match(input.value)).toArray());
    const matches = (Iterator.from(matched).map(match => <Item regex={input.value} match={match} />).take(30));
    results.replaceChildren(...matches);
    status.textContent = `${matched.length} / ${data.size}`;
  }

  return <div class='sample4'>
    {input}
    {status}
    {results}
  </div>;
}

function Item(attrs: { match: [string, number], regex: string }) {
  const [name, count] = attrs.match;
  const total = <small style='color:#fff3'>({count})</small>;
  return <li>
    <span innerHTML={highlight(name, attrs.regex)} /> {total}
  </li>;
}

function highlight(str: string, regex: string) {
  if (!regex) return str;
  const r = new RegExp(`(${regex})`, 'gi');
  return str.replace(r, '<span class="match">$1</span>');
}

imlib का परिचय

• imlib एक लाइब्रेरी है जिसे immaculatalibrary.com के लिए विकसित किया गया है
• इसका उपयोग minigamemaker.com और उस वेबसाइट को बनाने में किया गया है जिसे आप अभी पढ़ रहे हैं
• इसे इसलिए विकसित किया गया क्योंकि मौजूदा state पर्याप्त नहीं थी, और apps बनाने का यह सबसे पसंदीदा तरीका है

GN⁺ का सारांश

• यह लेख बताता है कि JSX का उपयोग करके DOM elements को सीधे कैसे बनाया और इंटरैक्ट किया जा सकता है
• यह दिखाता है कि virtual DOM का उपयोग किए बिना भी बड़े पैमाने के डेटा को कुशलता से कैसे प्रोसेस किया जा सकता है
• imlib लाइब्रेरी apps को सरल और सहज तरीके से विकसित करने में मदद करती है
• मिलते-जुलते फीचर्स वाले अन्य प्रोजेक्ट्स में React, Vue.js आदि शामिल हैं

[GN⁺]

Hacker News राय

• प्रोजेक्ट में रुचि दिखाने के लिए धन्यवाद

  • पिछले 10 वर्षों में SSGs की स्थिति से असंतुष्ट महसूस करते हुए प्रोजेक्ट शुरू किया
  • मुख्य रूप से static websites बनाता था और कुछ सरल व सहज चाहता था
  • JSX उपयुक्त लगा, लेकिन React जैसे JSX frameworks की जटिलता से थक गया था
  • एक ऐसा SSG बनाया जो JSX को string के रूप में render करता है, और फिर इसे browser में DOM elements के रूप में render करने तक विस्तारित किया
  • कुछ layouts में यह shared components के साथ अच्छी तरह काम करता है
  • SEO के लिए भी अच्छा काम करता है
  • IDE support पूरी तरह परिपूर्ण नहीं है

• अगर actual DOM nodes लौटाए जाएँ तो JSX का बड़ा फायदा खत्म हो जाता है

  • DOM का विवरण लौटाना चाहिए ताकि template को नए state के साथ फिर से evaluate किया जा सके और कुशलता से update किया जा सके
  • उदाहरण updates के लिए imperative DOM API का उपयोग करता है
  • VDOM का मुख्य लाभ templates में items को iterate करना है
  • VDOM की समस्या धीमा diffing है

• JSX की उत्पत्ति Facebook के XHP से हुई है

  • XHP को E4X से प्रेरणा मिली थी

• अंतिम उदाहरण Firefox में काम नहीं करता

  • Edge में काम करता है, लेकिन Firefox में error आती है

• Vanilla TSX से बहुत मिलता-जुलता है

  • Vanilla TSX में लिखे गए app का उदाहरण दिया गया है

• Action Script 3 की याद दिलाता है

  • XML भाषा का मुख्य हिस्सा था, मज़ेदार था, लेकिन ES4 नहीं बन सका
  • Typescript और JSX के साथ इसी स्तर तक पहुँचने में 10 साल से अधिक लग गए

• उदाहरण ऐसे components नहीं दिखाते जिनके props समय के साथ बदल सकते हैं

  • लगता है कि इसे अधिक जटिल apps तक बढ़ाने में कठिनाई होगी

• मैंने भी actual DOM nodes बनाने वाले jsx template expressions पर आधारित एक UI library बनाई है

  • model objects को properties से bind करके imperative event handler boilerplate को हटाया
  • यह एक अच्छा विचार लगता है

• JSX का आकर्षण समझ नहीं आता

  • loops, variable insertion आदि अपने-आप देने वाले दूसरे तरीके अधिक आसान हैं

• Imba की सिफारिश की गई

  • लगता है JS developers Faang marketing से आसानी से प्रभावित हो जाते हैं, इसलिए शायद यह लोकप्रिय नहीं है