Apa Itu Preact?

Erick Christian 22 Desember 2020

Apa Itu Preact?

Dalam beberapa tahun terakhir, React tetap menjadi library yang paling sering digunakan untuk membangun single-page application. Ada banyak alasan mengapa React sangat populer, misalnya komunitas yang luas, performance yang bagus, dan code-nya yang bersih.

Tetapi terkadang kita juga perlu solusi yang lebih ringan dan itulah inti dari Preact, alternatif React yang lebih ringan.

Preact adalah library yang mengklaim sebagai "alternatif 3KB dari React dengan API yang sama". Preact juga menerapkan DOM virtual. Dibandingkan dengan library JavaScript lainnya, Preact memiliki ukuran paling kecil (3KB)

Tujuan Preact yang Tertera Dalam dokumentasi

  1. Performance: Render quickly & efficiently.
  2. Size: Small size, lightweight (approximately 3.5kb).
  3. Efficiency: Effective memory usage (avoiding GC thrash).
  4. Understandability: Understanding the codebase should take no more than a few hours.
  5. Compatibility: Preact aims to be largely compatible with the React API.

Jalanin Preact Lewat CDN

Buat aplikasi yang simple, Preact tidak perlu build tools juga lho.

<!DOCTYPE html>
<html>
  <body>
    <script type="module">
      import { h, Component, render } from 'https://unpkg.com/preact?module'

      // 'h' itu sama dengan React.CreateElement
      const app = h('h1', null, 'Hello Merixstudio!')

      render(app, document.body)
    </script>
  </body>
</html>

Atau kalo Anda ingin memakai html template:

<script type="module">
  import { h, Component, render } from 'https://unpkg.com/preact?module'
  import htm from 'https://unpkg.com/htm?module'

  // Initialize htm
  const html = htm.bind(h)

  const app = html`<h1>Hello Merixstudio!</h1>`

  render(app, document.body)
</script>

Preact CLI

Preact CLI juga bisa diinstall lokal komputer. Anda hanya tinggal install menggunakan NPM.

npm install -g preact-cli

Membuat project baru:

preact create default my-project

Preact API

Preact API 99.99% mirip kaya React API. Tidak percaya? Liat saja kode di bawah ini:

import { h } from 'preact'
import { useState } from 'preact/hooks'

const Counter = () => {
  const [count, setCount] = useState(0)
  const increment = () => setCount(count + 1)
  const decrement = () => setCount(count - 1)

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  )
}

Integrasi dengan Project React

Untuk Project/ Library yang mengggunakan React, bisa juga diarahin supaya menggunakan Preact lho. Tinggal ubah alias module-nya di konfigurasi bundler Anda.

{
  "resolve": {
    "alias": {
      "react": "preact/compat",
      "react-dom": "preact/compat"
    }
  }
}

Haruskah Anda Menggunakan Preact?

Kelebihan utama dari Preact yaitu tadi, ukurannya yang lebih kecil. Ukuran lebih kecil tadi secara langsung bakal mengefek ke performa user saat download bundle script di website Anda.

Jika Anda hanya membuat project kecil, go with it. Tapi jika Anda ingin membuat project besar yang membutuhkan banyak library yang hanya compatible sama React, I don't think you should.

Sumber: What is Preact and when should you consider using it? Preact preactjs/preact

Tags
front endInfolibraryreactpreact
Share to
FacebookTwitterLinkedIn