Peluncuran situs web VanillaJSX.com

Contoh Vanilla JSX

Bagaimana jika JSX mengembalikan elemen DOM?

• Fungsi ClickMe membuat tombol dan menampilkan jumlah klik
• Teks diperbarui setiap kali tombol diklik

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

Dapat digunakan kembali

• Komponen ClickMe dapat digunakan beberapa kali dengan masing-masing mempertahankan state yang berbeda

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

Membuat tree DOM interaktif

• Dengan menggunakan kelas TodoInput dan TodoList, daftar tugas dapat dikelola
• Item dapat ditambahkan dan dihapus dengan mengkliknya

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

Pemrosesan data skala besar

• Fungsi FindNames memproses dan memfilter data dalam jumlah besar lalu menampilkan hasilnya
• Item yang cocok diperbarui secara real-time sesuai nilai input

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

Pengenalan imlib

• imlib adalah library yang dikembangkan untuk immaculatalibrary.com
• Digunakan untuk membangun minigamemaker.com dan situs web yang sedang Anda baca sekarang
• Library ini dikembangkan karena state yang ada sebelumnya tidak memadai, dan merupakan cara yang paling disukai untuk membuat aplikasi

Ringkasan GN⁺

• Artikel ini menjelaskan cara membuat dan berinteraksi langsung dengan elemen DOM menggunakan JSX
• Artikel ini menunjukkan cara memproses data dalam jumlah besar secara efisien tanpa menggunakan virtual DOM tradisional
• Library imlib memungkinkan pengembangan aplikasi dengan cara yang sederhana dan intuitif
• Proyek lain dengan fungsi serupa antara lain React dan Vue.js

[GN⁺]

Komentar Hacker News

• Terima kasih sudah tertarik dengan proyek ini

  • Saya memulai proyek ini karena tidak puas dengan kondisi SSG selama 10 tahun terakhir
  • Saya terutama membuat situs web statis, dan menginginkan sesuatu yang sederhana serta intuitif
  • JSX tampak cocok, tetapi saya lelah dengan kompleksitas framework JSX seperti React
  • Saya membuat SSG yang merender JSX menjadi string, lalu memperluasnya agar bisa dirender sebagai elemen DOM di browser
  • Pada beberapa layout, ini bekerja dengan baik sebagai komponen bersama
  • Ini juga bekerja baik untuk SEO
  • Dukungan IDE belum sempurna

• Jika mengembalikan node DOM nyata, keunggulan besar JSX jadi hilang

  • Yang perlu dikembalikan adalah deskripsi DOM agar template bisa dievaluasi ulang dengan state baru dan diperbarui secara efisien
  • Contohnya memperbarui dengan menggunakan API DOM imperatif
  • Keuntungan utama VDOM adalah melakukan iterasi item di dalam template
  • Masalah VDOM adalah diffing yang lambat

• Asal-usul JSX berasal dari XHP milik Facebook

  • XHP terinspirasi oleh E4X

• Contoh terakhir tidak berjalan di Firefox

  • Berjalan di Edge, tetapi menghasilkan error di Firefox

• Sangat mirip dengan Vanilla TSX

  • Ada contoh aplikasi yang ditulis dengan Vanilla TSX

• Ini mengingatkan pada Action Script 3

  • XML adalah inti dari bahasanya, dan itu menyenangkan, tetapi tidak pernah menjadi ES4
  • Butuh lebih dari 10 tahun untuk mencapai tingkat yang mirip dengan Typescript dan JSX

• Contoh-contohnya tidak menunjukkan komponen dengan props yang bisa berubah seiring waktu

  • Sepertinya akan sulit diperluas menjadi aplikasi yang lebih kompleks

• Saya juga membuat library UI berbasis ekspresi template jsx yang menghasilkan node DOM nyata

  • Saya mengikat objek model ke properti untuk menghilangkan boilerplate event handler imperatif
  • Saya rasa ini ide yang bagus

• Saya tidak mengerti daya tarik JSX

  • Cara lain yang otomatis menyediakan loop, penyisipan variabel, dan sebagainya terasa lebih mudah

• Saya merekomendasikan Imba

  • Sepertinya ini tidak populer karena para developer JS terlalu mudah terpengaruh oleh pemasaran Faang