Media Pengembangan Web & App | by APPKEY

Pembuatan AplikasiMobile ProgrammingLibrary Javascript React VS Preact, Mana yang Lebih Baik?

Library Javascript React VS Preact, Mana yang Lebih Baik?

-

Last Updated on March 24, 2022 by

React.JS adalah Library JavaScript yang paling banyak digunakan untuk membuat aplikasi single-page. React menjadi sangat populer karena beberapa alasan beberapa diantaranya, komunitas pengguna yang kuat, performanya yang cepat, dan programingnya yang bersih.

Sama seperti library JavaScript lainnya, tidak dipungkiri, React.JS juga memiliki beberapa kekurangan. Terkadang para Developer aplikasi berbasis JavaScript membutuhkan Library JavaScript yang lebih ringan dibanding React, untuk itulah Preact hadir sebagai alternatif library bagi para developer.

Apa Itu Preact?

react-js-3

Preact adalah library JavaScript yang mengklaim dirinya sebagai alternatif dari React.JS. Dibandingkan library JavaScript lainnya, Preact memiliki ukuran yang paling kecil, yaitu hanya 3KB.

Hal inilah yang membuat Preact menjadi populer dan bahkan sudah memperoleh 26 ribu bintang pada website Github dan sudah mencapai seperempat juta download per minggu pada NPM. Beberapa kelebihan yang dimiliki oleh Preact dibanding library JavaScript lain:

  1. Performa yang cepat, dapat merender dengan cepat sehingga efisien bagi para developer.
  2. Ukuran yang kecil dan ringan, hanya 3KB.
  3. Efisien, menggunakan memori secara efektif.
  4. Codebase yang mudah dimengerti, dapat dipelajari dalam beberapa jam.
  5. Kompatibel dengan React API.
  6. Untuk membuat aplikasi sederhana, Anda tidak perlu build tools.

Anda dapat menjalankan Preact lewat CDN seperti contoh berikut:

<!DOCTYPE html>
<html>
<body>
<script type="module">
import { h, Component, render } from 'https://unpkg.com/preact?module';
// Create your app
// 'h' is equivalent to React.CreateElement
const app = h('h1', null, 'Hello Merixstudio!');
render(app, document.body);
</script>
</body>
</html>

Anda juga dapat menggunakan template html

<script type="module">
import { h, Component, render } from 'https://unpkg.com/preact?module';
import htm from 'https://unpkg.com/htm?module';
// Initialize htm to work with Preact
const html = htm.bind(h);
// Creating components with JSX like syntax
const app = html`<h1>Hello Merixstudio!</h1>`;
render(app, document.body);
</script>

Anda juga dapat menginstal Preact CLI pada perangkat Anda. Preact CLI adalah alat baris perintah yang dapat dijalankan secara lokal di terminal pada komputer Anda.

Preact CLI akan membantu Anda untuk menginisialisasi, mengembangkan, dan memelihara aplikasi Preact. Anda dapat menginstal Preact CLI menggunakan NPM:

$ npm install -g preact-cli

Anda dapat membuat project Anda dengan command sederhana berikut:

$ preact create default my-project

Keyword default di sini adalah singkatan dari template yang ingin Anda gunakan saat membuat proyek. CLI Preact memberi Anda pilihan.

Anda dapat membuat aplikasi Anda sendiri untuk produksi hanya dengan menjalankan kode berikut:

$ npm run build

Secara default Preact akan mengaktifkan pre-rendering pada situs atau aplikasi Anda. Hal ini menandakan rute beranda diubah menjadi file index.html  statis. Hal ini memastikan bahwa pengguna akan melihat kontem sebelum JavaScript dijalanankan.

Seluruh pengguna dengan koneksi internet yang lambat atau perangkat yang lambat dapat mengakses aplikasi atau situs Anda dengan lebih cepat.

Artikel Terkait  Tutorial Belajar Programming Bahasa Perl

Perbedaan React dan Preact

react-js-2

Beberapa perbedaan yang dimiliki oleh Preact dibanding React.

1. Preact tidak memiliki Synthetic Event System

Sementara React memiliki Synthetic Event System yang menawarkan banyak manfaat yang memudahkan para developer dalam membangun aplikasi maupun situs.

Namun, Synthetic Event System yang dimiliki React memiliki ukuran yang lebih besar serta kinerja yang lebih lambat. Preact menggunakan fitur asli addEventListener sehingga ia menggunakan API DOM untuk mendapatkan kinerja yang lebih baik dan ukuran yang lebih kecil

2. Preact tidak mendorong penggunaan JSX karena JSX adalah client-side templating tool

Sesungguhnya, pencipta asli Preact ingin menawarkan htm package sebagai alternatif. Anda dapat menggunakan htm melalui JSX. Hal ini pun menguntungkan developer karena developer dapat menggunakan atribut HTML lama seperti class, bukan className.

3. Fitur tambahan pada Preact adalah metode signature

component.render-nya yang memiliki status dan atribut sebagai parameter sehingga Anda dapat mengaksesnya dengan lebih mudah dalam JSX maupun htm. Contoh sebagai berikut:

Component.render({props}, {state})

Kelebihan React

1. Mudah dipelajari dan digunakan.

2. Mudah dalam membuat aplikasi atau situs yang dinamis.

3. Komponen yang dapat digunakan kembali atau reusable.

4. Meningkatkan kinerja developer karena DOM virtual yang dapat terhubung dengan HTML, XML, atau XHTML. 5. Memiliki seperangkat tools yang berguna bagi pengembang. Tools ini pun lebih mudah dimengerti sehingga memudahkan para developer.

Kekurangan React

1. Ukuran yang lebih besar.

2. Laju pembangunan yang cepat. Hal ini bisa menjadi keuntungan atau kerugian. Karena lingkungan dan ekosistem kerja yang terus berubah dengan cepat, bagi beberapa developer, hal ini bisa menjadi kekurangan karena tidak nyaman mempelajari kembali cara-cara baru secara berkala.

3. Perubahan yang terus menerus pada React.JS dapat membuat dokumentasi yang buruk karena terbatasnya waktu untuk membuat dokumentasi yang tepat.

4. React.JS menggunakan JSX yang merupakan ekstensi sintaks yang memungkinkan HTML dengan JavaScript dicampur bersama. Hal ini bisa menjadi kekurangan tersendiri bagi beberapa developer dan dianggap sebagai penghalang karena kompleksitasnya dalam kurva pembelajaran.

Artikel Terkait  Apa Perbedaan Antara Aplikasi Web dan Aplikasi Native?

Kelebihan Preact

1. Preact lebih cepat dan ringan dibanding react serta hal ini ditujukan agar Preact kompatibel dengan React.

2. Untuk mencapai hampir 100% kompabilitas, Preact menyediakan paket tambahan yaitu: preact-compat

3. Preact kompatibel dan bahkan mendorong penggunaan htm melalui JSX sehingga Anda dapat membuka kunci atribut HTML biasa.

4. Preact saat ini sangat populer. Hal ini berarti dapat membuat Preact memiliki support yang lebih baik, ekosistem yang lebih besar, dan penyelesaian yang lebih cepat.

5. Preact menyediakan server side rendering sendiri, routing dan add-ons lain yang lebih populer.

Kekurangan Preact

1. Sewaktu penulisan, hooks berada pada paket Preact yang berbeda seperi berikut: preact/hooks. Meski beberapa orang melihat hal ini sebagai kelebihan dari Preact.

2. Sewaktu penulisan, Preact hanya memiliki support yang eksperimental untuk komponen Lazy dan Suspense.

3. Preact dianggap meniru dan dikategorikan sebagai kloningan dari React. Banyak pengembang library akan meniru React dan tidak berinovasi dengan caranya sendiri.

4. Bila Anda membutuhkan komponen ataupun paket pada React, Anda harus menggunakan perpustakaa tambahan: preact-compat. Hal ini akan membuat proyek yang Anda buat akan menjadi lebih besar dan lambat. Sayangnya, hal ini adalah satu-satunya cara untuk menghubungkan kesenjangan antara paket npm berbasis React dan Preact.

Artikel Terkait  Mengenal Nuxt JS, Framework Berbasis JavaScript Terbaru

Mana Library JavaScript yang lebih baik, React atau Preact?

Jawaban atas pertanyaan ini  tergantung pada kebutuhan dan kondisi Anda. Preact cocok digunakan untuk Anda yang memiliki proyek-proyek dengan ukuran kecil dan tidak memakan banyak memori.

Jika Anda ingin membuat  aplikasi fintech besar atau mungkin widget kecil yang membutuhkan waktu loading yang sangat singkat, atau mungkin Anda menargetkan aplikasi atau situs Anda untuk pengguna dengan koneksi internet yang lambat?

Maka Anda sebaiknya menggunakan Preact daripada React. Preact akan memudahkan Anda untuk membuat ukuran bundel Anda lebih kecil, sehingga aplikasi Anda akan melakukan loading lebih cepat.

Namun di sisi lain, saat memilih Preact Anda bisa kehilangan beberapa fitur React yang mungkin Anda lebih familiar dan lebih memudahkan Anda dalam membuat aplikasi dan situs.

Jika Anda ingin membuat aplikasi dan situs yang berat dan rumit, maka React jawabannya. Selama ini, React menjadi library yang sempurna bagi para developer yang memiliki proyek- proyek besar dan rumit serta membutuhkan lebih banyak fitur.

Sebaiknya Anda tidak menggunakan Preact untuk membuat aplikasi yang membutuhkan penginstalan paket 5-10 NPM tambahan untuk mendapatkan semua fungsionalitas seperti yang dimiliki.

Preact harus digunakan untuk proyek seperti widget web kecil, halaman arahan, atau PWA yang akan berfungsi di seluruh dunia, terlepas dari koneksi internet yang buruk atau perangkat yang digunakan. Jadi library mana kah yang cocok dengan Anda?

Yuk kunjungi Web App di https://appkey.id/ untuk dapatkan informasi terbaru seputar pengembangan website dan aplikasi lainnya!.


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Mau posting artikel iklan?

Yuk klik dan ikuti ketentuan layanan dari kami, dapatkan penawaran paket dengan harga terbaik!

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang Website, Aplikasi, Desain, Video dan API langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Kategori

Blog Post Ranking 10

Contoh PHP Curl : 10 Hal Luar Biasa yang dapat Anda Kembangkan dengan Curl

Meningkatnya jumlah aplikasi yang pindah ke web telah membuat "HTTP Scripting" lebih sering diminta dan diinginkan. Untuk dapat secara...

Encoding Adalah : Proses Komunikasi Encoding dan Decoding

Jika kita dapat melihat percakapan antar komputer, mungkin akan terlihat seperti ini: "010110111011101011010010110". Bahasa ini disebut dengan biner, encoding...

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Jika anda sudah mendalami atau sedang mendalami dunia pemrograman terdapat sebuah konsep yang dapat memudahkan anda dalam menyusun struktur...

Rekomendasi 7 Aplikasi Pembuat Animasi 3D Terbaik. Ayo Cek!

Apakah Anda bercita-cita untuk menjadi seorang animator profesional? Belajar membuat animasi kini sudah menjadi hal mudah yang bisa dilakukan...

Metadata Adalah? Fungsi dan Jenis-Jenis Metadata

Pernah mendengar istilah metadata? Mungkin, kita sering mendengar istilah metadata. Tetapi, banyak dari kita yang belum tahu arti dari metadata...

Ini Cara Mudah Membuat Redirect PHP | Seri Belajar PHP

Fungsi redirect PHP sangat banyak digunakan dalam kehidupan berwebsite alias mengelola website. Script redirect PHP banyak dipergunakan oleh user...

Cara Membuat Aplikasi di Playstore dengan Mudah

Membuat aplikasi di Playstore bisa Anda lakukan dengan mudah. Terdapat beberapa situs yang bisa membantu Anda untuk membuat aplikasi...

4 Cara Mengatasi Autentikasi Google Play Store dengan Cepat dan Mudah

Apakah Anda sedang mengalami masalah autentikasi Google Play Store? Permasalahan autentikasi Google Play Store adalah permasalahan umum sering dialami...

Cara Mudah Menambahkan Lokasi Alamat Bisnis Anda di Google Maps

Saat ingin hunting tempat makan atau tempat nongkrong terbaru, tak jarang beberapa dari Anda biasanya mendapatkan informasi terkini melalui...

Rekomendasi 10 Aplikasi Coding Android Terbaik

Ketersediaan aplikasi coding Android memang banyak dicari oleh orang-orang yang sedang atau akan memulai untuk membuat aplikasi android. Jika...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya