VanillaJSX.com web sitesi yayında

Vanilla JSX örnekleri

JSX DOM öğeleri döndürürse?

• ClickMe fonksiyonu bir düğme oluşturur ve tıklama sayısını gösterir
• Düğmeye her tıklandığında metin güncellenir

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

Yeniden kullanılabilirlik

• ClickMe bileşeni birden çok kez kullanılarak her birinin farklı durumunu koruması sağlanabilir

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

Etkileşimli DOM ağacı oluşturma

• TodoInput ve TodoList sınıfları kullanılarak yapılacaklar listesi yönetilebilir
• Öğeler eklenebilir ve tıklanarak kaldırılabilir

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}
  </>;
};

Büyük veri işleme

• FindNames fonksiyonu büyük miktarda veriyi işleyip filtreleyerek sonuçları gösterir
• Girilen değere göre eşleşen öğeler gerçek zamanlı olarak güncellenir

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'e giriş

• imlib, immaculatalibrary.com için geliştirilen bir kütüphanedir
• minigamemaker.com'u ve şu anda okumakta olduğunuz web sitesini oluşturmak için kullanılmıştır
• Mevcut durum yönetimi yeterli gelmediği için geliştirildi ve uygulama oluşturmanın en çok tercih edilen yoludur

GN⁺ özeti

• Bu yazı, JSX kullanarak DOM öğelerini doğrudan oluşturup etkileşime sokma yöntemini açıklıyor
• Geleneksel sanal DOM kullanmadan da büyük veriyi verimli şekilde işleme yaklaşımı sunuyor
• imlib kütüphanesi, uygulama geliştirmeyi basit ve sezgisel bir hale getiriyor
• Benzer işlevlere sahip diğer projeler arasında React ve Vue.js bulunuyor

[GN⁺]

Hacker News görüşleri

• Projeye ilgi gösterdiğiniz için teşekkürler

  • Son 10 yıldaki SSG durumundan memnun olmadığı için projeyi başlattı
  • Ağırlıklı olarak statik web siteleri yapıyor ve basit, sezgisel bir şey istiyordu
  • JSX uygun görünüyordu ama React gibi JSX framework'lerinin karmaşıklığından bıkmıştı
  • JSX'i string olarak render eden bir SSG yaptı ve bunu tarayıcıda DOM öğeleri olarak render edecek şekilde genişletti
  • Bazı düzenlerde paylaşılan bileşenlerle iyi çalışıyor
  • SEO için de iyi çalışıyor
  • IDE desteği kusursuz değil

• Gerçek DOM düğümleri döndürülürse JSX'in büyük avantajı ortadan kalkar

  • Yeni durumla şablonu yeniden değerlendirmek ve verimli şekilde güncellemek için DOM'un açıklamasını döndürmek gerekir
  • Örnek, güncelleme için buyurgan DOM API'sini kullanıyor
  • VDOM'un başlıca faydası, şablonda öğeleri yinelemektir
  • VDOM'un sorunu yavaş diffing'dir

• JSX'in kökeni Facebook'un XHP'sine dayanır

  • XHP, E4X'ten ilham almıştır

• Son örnek Firefox'ta çalışmıyor

  • Edge'de çalışıyor ama Firefox'ta hata veriyor

• Vanilla TSX'e çok benziyor

  • Vanilla TSX ile yazılmış uygulama örneği paylaşıldı

• Action Script 3'ü hatırlatıyor

  • XML dilin çekirdeğiydi ve eğlenceliydi ama ES4 olamadı
  • Typescript ve JSX ile benzer seviyeye ulaşmak 10 yıldan uzun sürdü

• Örnekler, zaman içinde değişebilecek props'a sahip bileşenleri göstermiyor

  • Daha karmaşık uygulamalara ölçeklemenin zor olacağı düşünülüyor

• Ben de gerçek DOM düğümleri üreten jsx şablon ifadelerine dayalı bir UI kütüphanesi yaptım

  • Model nesnelerini özelliklere bağlayarak buyurgan event handler boilerplate'ini ortadan kaldırdı
  • Bunun iyi bir fikir olduğunu düşünüyor

• JSX'in cazibesini anlamıyor

  • Döngüler, değişken ekleme vb. şeyleri otomatik sağlayan başka yollar daha kolay

• Imba öneriliyor

  • JS geliştiricileri Faang pazarlamasına kolayca kapıldığı için popüler değil gibi görünüyor