import { jsx, jsxs, Fragment } from 'solid-jsx/jsx-runtime';

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "Perbandingan dengan Library lainnya",
  "children": [{
    "depth": 2,
    "value": "React",
    "children": [{
      "depth": 4,
      "value": "Saran untuk migrasi:",
      "children": []
    }]
  }, {
    "depth": 2,
    "value": "Vue",
    "children": [{
      "depth": 4,
      "value": "Saran untuk migrasi:",
      "children": []
    }]
  }, {
    "depth": 2,
    "value": "Svelte",
    "children": [{
      "depth": 4,
      "value": "Saran untuk migrasi:",
      "children": []
    }]
  }, {
    "depth": 2,
    "value": "Knockout.js",
    "children": [{
      "depth": 4,
      "value": "Saran untuk migrasi:",
      "children": []
    }]
  }, {
    "depth": 2,
    "value": "Lit & LighterHTML",
    "children": [{
      "depth": 4,
      "value": "Saran untuk migrasi:",
      "children": []
    }]
  }, {
    "depth": 2,
    "value": "S.js",
    "children": []
  }, {
    "depth": 2,
    "value": "RxJS",
    "children": []
  }, {
    "depth": 2,
    "value": "Lainnya",
    "children": []
  }]
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    p: "p",
    h2: "h2",
    h4: "h4",
    code: "code"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "perbandingan-dengan-library-lainnya",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#perbandingan-dengan-library-lainnya",
        children: "#"
      }), "Perbandingan dengan Library lainnya"]
    }), "\n", jsxs(_components.p, {
      children: ["Bagian ini tidak dapat lepas dari beberapa bias tetapi saya pikir penting untuk memahami di mana solusi Solid berada dibandingkan dengan library lain. Ini bukan tentang performa. Untuk melihat yang lebih definitif pada performa silahkan lihat ke ", jsx(_components.a, {
        href: "https://github.com/krausest/js-framework-benchmark",
        children: "JS Framework Benchmark"
      }), "."]
    }), "\n", jsxs(_components.h2, {
      id: "react",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#react",
        children: "#"
      }), "React"]
    }), "\n", jsx(_components.p, {
      children: "React mempunya pengaruh yang besar kepada Solid. Aliran tidak searah (unidirectional flow) react dan pemisahan yang eksplisit tentang baca dan tulis (read and write) pada Hooks API nya membentuk Solid API. Lebih dari sekedar tujuan untuk menjadi sebuah \"Render Library\" daripada sebuah framework. Solid punya opini yang kuat pada bagaimana cara mengelola data pada pembuatan aplikasi tapi tidak berusaha membatasi pelaksanaannya."
    }), "\n", jsx(_components.p, {
      children: "Tetapi, walaupun Solid selaras dengan filosofi desain React, ia bekerja berbeda secara fundamental. React menggunakan sebuah Virtual DOM dan Solid tidak. Abstraksi React adalah partisi komponen tingkat atas dimana method render dipanggil berulang kali dan dibandingkan. Sedangkan Solid, me-render tiap Template sekali secara keseluruhan, membangun grafik reaktif dan baru kemudian mengeksekusi instruksi terkait dengan perbuahan fine-grained."
    }), "\n", jsxs(_components.h4, {
      id: "saran-untuk-migrasi",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#saran-untuk-migrasi",
        children: "#"
      }), "Saran untuk migrasi:"]
    }), "\n", jsxs(_components.p, {
      children: ["Model pembaruan Solid tidaklah sama dengan React, ataupun React + MobX. Daripada memikirkan fungsi komponen sebagai fungsi ", jsx(_components.code, {
        children: "render"
      }), ", pikirkan mereka sebagai sebuah ", jsx(_components.code, {
        children: "constructor"
      }), ". Hati-hati terhadap destructuring atau mengakses properti lebih awal hilang reaktifitas. Primitif-primitif Solid tidak mempunyai batasan seperti Aturan Hook (Hook Rules), jadi kamu bebas untuk menyusun (nest) mereka sesuai keinginan kamu. Kamu tidak memerlukan key eksplisit pada list rows untuk mempunya perilaku \"keyed\". Terakhir, tidak ada VDOM sehingga API VDOM yang penting seperti ", jsx(_components.code, {
        children: "React.Children"
      }), " dan ", jsx(_components.code, {
        children: "React.cloneElement"
      }), " tidak akan masuk akal. Kami menganjurkan untuk mencari cara lain untuk menyelesaikan masalah yang menggunakan API-API itu secara deklaratif."]
    }), "\n", jsxs(_components.h2, {
      id: "vue",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#vue",
        children: "#"
      }), "Vue"]
    }), "\n", jsx(_components.p, {
      children: "Solid tidak terlalu dipengaruhi dengan desain Vue, tapi mereka sebanding pada pendeketannya. Mereka berdua menggunakan Proxies pada sistem Reaktif mereka dengan lacak-otomatis berbasis baca (read based auto-tracking). Tapi disitulah kesamaannya berhenti. Pendeteksi dependency \"fine-grained\" Vue hanya dimasukkan kedalam Virtual DOM yang kurang \"fine-grained\" dan sistem Komponen dimana Solid menjaga granularitasnya sampai ke pembaruan DOMnya langsung."
    }), "\n", jsx(_components.p, {
      children: "Vue menghargai kemudahan dimana Solid menghargai transparansi. Meskipun arah baru Vue dengan Vue 3 lebih selaras dengan pendekatan yang diambil Solid. Library-library ini mungkin akan lebih selaras dari waktu ke waktu tergantung pada bagaimana mereka terus berkembang."
    }), "\n", jsxs(_components.h4, {
      id: "saran-untuk-migrasi-1",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#saran-untuk-migrasi-1",
        children: "#"
      }), "Saran untuk migrasi:"]
    }), "\n", jsxs(_components.p, {
      children: ["Sebagai library reaktif modern lainnya, melakukan migrasi dari Vue 3 harusnya terasa familiar. Komponen-komponen Solid sangat mirip dengan menandai template di akhir fungsi ", jsx(_components.code, {
        children: "setup"
      }), " Vue. Berhati-hatilah dengan \"overwrapping state derivations\" dengan komputasi, coba fungsi. Reaktifitas itu menyebar. Proxy-proxy Solid sengaja dibuat hanya-baca (read-only). Jangan mengetuknya sebelum kamu mencobanya."]
    }), "\n", jsxs(_components.h2, {
      id: "svelte",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#svelte",
        children: "#"
      }), "Svelte"]
    }), "\n", jsx(_components.p, {
      children: "Svelte memelopori \"precompiled disappearing\" framework yang juga digunakan Solid sampai tingkat tertentu. Kedua library ini benar-benar reaktif dan dapat menghasilkan bundel kode eksekusi yang sangat kecil meskipun Svelte adalah pemenang di sini untuk demo-demo kecil. Solid membutuhkan sedikit lebih eksplisit dalam deklarasinya, kurang mengandalkan analisis implisit dari kompiler, tetapi itu adalah bagian dari apa yang memberikan Solid kinerja superior. Solid juga menyimpan kelebihan lebih banyak di runtime yang skalanya lebih baik di aplikasi yang lebih besar. Implementasi demo RealWorld Solid 25% lebih kecil dari Svelte."
    }), "\n", jsx(_components.p, {
      children: "Kedua library bertujuan untuk membantu developer-developer mereka menulis kode lebih sedikit tetapi melakukan pendekatan yang sama sekali berbeda. Svelte 3 berfokus pada optimalisasi kemudahan menangani perubahan lokal yang berfokus pada interaksi objek biasa dan pengikatan dua arah (two-way binding). Sebaliknya Solid berfokus pada aliran data dengan sengaja merangkul CORS dan antarmuka yang tidak dapat diubah. Dengan komposisi template yang fungsional, dalam banyak kasus, Solid memungkinkan developer untuk menulis kode yang lebih sedikit daripada Svelte meskipun sintaks template Svelte jelas lebih ringkas."
    }), "\n", jsxs(_components.h4, {
      id: "saran-untuk-migrasi-2",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#saran-untuk-migrasi-2",
        children: "#"
      }), "Saran untuk migrasi:"]
    }), "\n", jsx(_components.p, {
      children: "Pengalaman developer cukup berbeda sehingga walau beberapa hal mungkin serupa, keduanya adalah pengalaman yang sangat berbeda. Komponen-komponen di Solid itu murah, jadi jangan ragu untuk memilikinya lebih banyak."
    }), "\n", jsxs(_components.h2, {
      id: "knockoutjs",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#knockoutjs",
        children: "#"
      }), "Knockout.js"]
    }), "\n", jsx(_components.p, {
      children: "Library ini berutang keberadaannya kepada Knockout. Modernisasi modelnya untuk deteksi dependency yang \"fine-grained\" adalah motivasi untuk proyek ini. Knockout dirilis pada tahun 2010 dan mendukung Microsoft Explorer sampai ke IE6 sementara Solid tidak mendukung IE sama sekali."
    }), "\n", jsx(_components.p, {
      children: "Binding di Knockout hanyalah string dalam HTML yang dilewati saat runtime. Mereka bergantung pada konteks kloning ($parent dll...). Sedangkan Solid menggunakan JSX atau Tagged Template Literals untuk memilih template dalam API JavaScript."
    }), "\n", jsx(_components.p, {
      children: "Perbedaan terbesar mungkin adalah pendekatan Solid terhadap perubahan batch yang memastikan sinkronisitas, sedangkan Knockout memiliki deferUpdates yang menggunakan antrian (queue) microtask yang ditangguhkan."
    }), "\n", jsxs(_components.h4, {
      id: "saran-untuk-migrasi-3",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#saran-untuk-migrasi-3",
        children: "#"
      }), "Saran untuk migrasi:"]
    }), "\n", jsx(_components.p, {
      children: "Jika kamu terbiasa dengan Knockout, primitif Solid mungkin terlihat aneh bagi kamu. Pemisahan baca/tulis-nya disengaja dan bukan hanya untuk membuat hidup lebih sulit. Lihatlah untuk mengadopsi model mental state/action (Flux). Walau library-library ini terlihat serupa, mereka mempromosikan praktik terbaik yang berbeda."
    }), "\n", jsxs(_components.h2, {
      id: "lit--lighterhtml",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#lit--lighterhtml",
        children: "#"
      }), "Lit & LighterHTML"]
    }), "\n", jsx(_components.p, {
      children: "Library-library ini sangat mirip dan memiliki pengaruh pada Solid. Sebagian besar kode yang dikompilasi Solid menggunakan metode yang sangat mirip untuk merender DOM secara performa. Mengkloning elemen Template dan menggunakan placeholder komentar adalah sesuatu yang sama-sama dimiliki Solid dan library ini."
    }), "\n", jsx(_components.p, {
      children: "Perbedaan terbesar adalah bahwa sementara library ini tidak menggunakan DOM Virtual, mereka memperlakukan rendering dengan cara yang sama, dari atas ke bawah, membutuhkan partisi komponen untuk menjaga semuanya tetap waras. Sebaliknya, Solid menggunakan Grafik Reaktif fine-grained untuk hanya memperbarui apa yang telah berubah dan dengan demikian hanya membagikan teknik ini untuk render awalnya. Pendekatan ini memanfaatkan kecepatan awal yang hanya tersedia untuk DOM asli dan juga memiliki pendekatan pembaruan yang paling berkinerja."
    }), "\n", jsxs(_components.h4, {
      id: "saran-untuk-migrasi-4",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#saran-untuk-migrasi-4",
        children: "#"
      }), "Saran untuk migrasi:"]
    }), "\n", jsxs(_components.p, {
      children: ["Library ini cukup minim dan mudah dibangun di atasnya. Namun, perlu diingat bahwa ", jsx(_components.code, {
        children: "<MyComp/>"
      }), " bukan hanya HTMLElement (array atau fungsi). Cobalah untuk menyimpan barang-barang kamu di template JSX. Hoisting dapat bekerja untuk sebagian besar, tetapi yang terbaik adalah secara mental memikirkan ini sebagai library render dan bukan pabrik HTMLElement."]
    }), "\n", jsxs(_components.h2, {
      id: "sjs",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#sjs",
        children: "#"
      }), "S.js"]
    }), "\n", jsx(_components.p, {
      children: "Library ini memiliki pengaruh terbesar pada desain reaktif Solid. Solid menggunakan S.js secara internal selama beberapa tahun hingga set fitur menempatkannya di jalur yang berbeda. S.js adalah salah satu library reaktif paling efisien hingga saat ini. Ia memodelkan semuanya dari langkah waktu sinkron seperti sirkuit digital dan memastikan konsistensi tanpa harus melakukan banyak mekanisme yang lebih rumit yang ditemukan di perpustakaan seperti MobX. Reaktivitas Solid pada akhirnya adalah semacam campuran antara S dan MobX. Ini memberikan kinerja yang lebih besar daripada kebanyakan perpustakaan reaktif (Knockout, MobX, Vue) sambil mempertahankan kemudahan model mental untuk para developer. S.js pada akhirnya masih merupakan perpustakaan reaktif yang lebih berkinerja meskipun perbedaannya hampir tidak terlihat tetapi benchmarks sintetis yang melelahkan."
    }), "\n", jsxs(_components.h2, {
      id: "rxjs",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#rxjs",
        children: "#"
      }), "RxJS"]
    }), "\n", jsx(_components.p, {
      children: "RxJS adalah library Reaktif. Walau Solid memiliki ide serupa tentang data yang dapat diamati, ia menggunakan aplikasi pola observer yang jauh berbeda. Sementara Signals bisa dibilang versi sederhana dari Observable (hanya yang next), pola deteksi ketergantungan otomatis menggantikan ratusan operator RxJS. Solid bisa mengambil pendekatan ini, dan memang sebelumnya, versi dari library-nya menyertakan operator serupa, tetapi dalam banyak kasus lebih mudah untuk menulis logika transformasi kamu sendiri dalam perhitungan. Di mana Observables adalah cold starting, unicast dan berbasis push (push-based), banyak masalah pada klien memungkinkan hot startup dan menjadi multicast yang merupakan perilaku default Solid."
    }), "\n", jsxs(_components.h2, {
      id: "lainnya",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#lainnya",
        children: "#"
      }), "Lainnya"]
    }), "\n", jsx(_components.p, {
      children: "Angular dan beberapa library populer lainnya tidak ada dalam perbandingan ini. Kurangnya pengalaman menggunakan mereka, mencegah membuat perbandingan yang memadai. Secara umum, Solid memiliki sedikit kesamaan dengan Framework-framework yang lebih besar dan akan jauh lebih sulit untuk membandingkannya secara langsung."
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? jsx(MDXLayout, Object.assign({}, props, {
    children: jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}

export { MDXContent as default, toc };
//# sourceMappingURL=comparison-386bad67.js.map
