Forums
Private: Bexlite Course Introduction - Printable Version

+- Forums (https://bb.nurfachmi.com)
+-- Forum: My Category (https://bb.nurfachmi.com/forum-1.html)
+--- Forum: My Forum (https://bb.nurfachmi.com/forum-2.html)
+--- Thread: Private: Bexlite Course Introduction (/thread-14.html)

Private: Bexlite Course Introduction - admin - 05-02-2026

Quote:Reza Nurfachmi, January 10, 2025

Bun.js

Bun.js all-in-one toolkit, untuk menjalankan aplikasi javascript dan typescript, mulai dari single script hingga fullstack application. Bagi kamu yang pernah menggunakan nodejs, pada dasarnya bun memiliki fungsi yang sama. Yaitu untuk menjalankan javascript di luar browser.

Mungkin sampai hari ini kita belum melihat company atau startup yang mengadopsi Bun untuk production di aplikasi yang memiliki scale yang besar. Hanya saja, melihat Bunjs dan komunitasnya. Sangat tidak menutup kemungkinan Bunjs akan di adopsi di masa mendatang.

Bexlite sendiri menggunakan Bunjs karena performanya yang baik, dan yang paling penting, bunjs bisa menjalankan typescript secara native. Tanpa bantuan library apapun.

Bun sendiri sebagai package manager memiliki performa yang sangat cepat. Dalam Benchmarknya menginstall react dengan vite, bun bisa 18x lebih cepat dari yarn dan pnpm dan 30x lebih cepat daripada npm.

[Image: image-6.png?resize=640%2C234&ssl=1]

Kamu bisa menggunakan bun.js dengan windows, linux, wsl ataupun mac.

Kamu bisa lihat cara menginstall bun.js di sini.

ElysiaJS

ElysiaJS, sebuah framework yang di jalankan di atas bunjs runtime. Menggunakan banyak API dari bun, memanfaatkan kecepatan bun hingga bisa menghandle request hingga lebih dari 2jt request per second.

[Image: image-8.png?resize=640%2C256&ssl=1]

Bexlite menggunakan ElysiaJS karena kemudahan dan kecepatannya, tidak hanya dibandingkan dengan Express, atau javascript framework yang lain. Tetapi juga dengan framework dan bahasa yang lain.

Terlebih bagi pengguna typescript, Elysia memiliki type-safety secara default. Dan ini akan memudahkan kamu untuk membangun aplikasi yang safe jika di-implementasikan dengan benar.

Elysia juga memiliki beberapa fitur menarik yang bisa kita gunakan untuk membangun project dengan bexlite. Seperti CRON, Auto handling format including JSON dan FormData. Ditambah lagi dengan official plugin seperti HTML, JSX, JWT, dll, akan sangat memudahkan dalam menggunakan Bexlite.

Kamu bisa baca lebih lanjut tentang elysia di sini.

HTMX

So, pasti temen-temen sudah ga asing lagi dengan yang namanya HTMX, yang tiap hari MEMEnya melintas di timeline kita.

Tapi, apa sih sebenernya HTMX ?
Is it good ? bad ? Lalu apa bedanya HTMX dengan framework umum seperti React, Vue atau yang lain ?

Okey, mari kita kenalan dengan HTMX.

HTMX, adalah sebuah javascript frontend library yang memberikan alternative yang make sense bagi developer untuk develop web app dengan metode yang berbeda dari kebanyakan framework pada umumnya.

Javascript SPA Framework, berkomunikasi dengan REST API. Yang mana client akan melakukan request kepada server, dan server merespon dengan JSON. yang kemudian client harus menjalankan logic untuk menerjemahkan JSON kedalam bentuk UI.

HTMX, menempuh jalur yang berbeda dari kebanyakan frontend framework. HTMX menggunakan hypermedia sebagai format komunikasinya dibandingkan REST API yang berbentuk Text.

Maksudnya adalah ketika klien melakukan request kepada server, server tidak lagi memberikan response dalam bentuk JSON, tetapi dalam bentuk HTML.

Hypermedia sebagai response komunikasi server kepada client, bukanlah hal baru. Ini sebagaimana kita mengakses sebuah URL, kemudian server merespon dengan HTML yang sudah di render. Yang menjadi problem dari Hypermedia sebelumnya adalah response harus diberikan dalam bentuk keseluruhan laman.

Karena memang keterbatasan dari html yang hanya bisa melakukan request hanya dengan anchor tag dan form yang kemudian harus di reload secara keseluruhan setelah mendapatkan respons.

Dengan HTMX, melakukan http request dengan HTML tidak lagi terbatas pada anchor dan juga form. Dan juga tidak harus pada level full page, tapi pada level parsialnya.

Salah satu motivasi munculnya HTMX adalah untuk mempersimple pembuatan web application. Yaitu dengan melakukan centralisasi logic pada server. Yang mana ini sangat make sense, karena server adalah tempat dimana permanent state berada.

Ini juga yang dilakukan oleh banyak SPA framework akhir-akhir ini seperti react, nextjs yang mencoba untuk menempuh approach yang sama dengan mengenalkan React Server Component dan Server Action.

But, pertanyaannya adalah aplikasi yang bagaimana yang mungkin cocok untuk kita gunakan HTMX di dalamnya.

Sebagai jawaban dari pertanyaan ini, Saya akan berikan 2 kriteria.
  •     Dimana developer mau meletakkan state aplikasinya ?
  •     Dan bagaimana developer memposisikan dirinya

Mari kita bahas kriteria ini.

Yang pertama, adalah dimana state diletakkan ?

Spektrum web app ini cukup luas, tetapi kalo tarik secara horizontal. Hanya ada 2 jenis, yang fokus pada interaktivity dan fokus kepada server logic.

Kita bisa melihat aplikasi game di web yang tentu statenya akan cepat dan seringkali berubah, dan tentu saja state aplikasi lebih baik diletakkan pada client untuk efisiensi komunikasi, yang kemudian dengan interval waktu tertentu transient state ini di kirimkan ke server.

Ini sedikit berbeda dengan High Risk Application seperti Bank atau Finance App, yang state dan logicnya diletakkan di dalam server. Kenapa ? Yes, karena high risk application can’t trust the user.

Maka sekarang kita bisa tahu, jika aplikasi kita sangat memerlukan interaktivity yang terus-terusan berubah, mungkin SPA framework seperti React lebih cocok. Adapun jika aplikasinya tidak memerlukan state yang terlalu sering berubah. HTMX akan jauh lebih simple untuk digunakan.

Yang kedua, adalah bagimana developer memposisikan dirinya.

Jika kamu seorang developer entah frontend ataupun backend yang fokus dengan server-side logic, maka HTMX bisa jadi pilihan yang paling baik. Karena HTMX tidak membatasi developer pada bahasa pemrogramannya. Apapun bahasa yang kamu gunakan selama frontend menggunakan HTML, CSS dan Javascript, kamu bisa menggunakan HTMX.

Namun jika kamu seorang developer yang fokus pada client-side logic, dan fokus pada bahasa javascript, mungkin react atau nextjs menjadi pilihan yang lebih baik.

---

Penggunaan HTMX di dalam Bexlite selaras dengan tujuan awal dibuatnya Tech Stack ini yaitu Simplicity. Dengan menggunakan HTMX library, kita bisa menggunakan HTML, bahasa yang diketahui oleh semua developer untuk membuat aplikasi dengan SPA Experience tanpa harus menggunakan bloated-features framework, tanpa harus belajar lagi framework-framework baru.

Kita cukup tambahkan HTMX attribute di dalam HTML and done.

JSX

Seperti yang kita tahu, JSX adalah format umum yang digunakan di dalam frontend-framework. JSX secara khusus bukan templating Engine. Tetapi JSX kita gunakan di dalam Bexlite untuk memanfaatkan apa yang sudah kita pahami.

JSX kita gunakan di dalam Bexlite sebagai templating model. Dan memudahkan kita dalam membuat UI components. Dengan menggunakan JSX, kita bisa dengan mudah mimic React dalam membuat reusable components.

SQLite

Sqlite, the underdog database.

Sedikit hiperbola, but yes. Sqlite sepertinya yang banyak diragukan di dalam tech stack ini. Sqlite seperti menjadi database yang tidak layak untuk production. Jika kita bicara tentang model big-scale apps dengan arsitektur yang rumit, maka iya. Mungkin sqlite tidak cocok digunakan. But untuk aplikasi small-mid sqlite lebih dari cukup untuk digunakan.

Sqlite memiliki performa yang sangat cepat, embedded, dan dengan memanfaatkan teknologi embedded kamu tidak lagi perlu untuk mengalami “network io” dalam melakukan query kepada database. Silahkan baca post saya dibawah.

https://x.com/indrazulfi/status/1790286534895415804

Jika kamu merasa cocok dengan Bexlite secara umum, namun tidak cocok dengan menggunakan Sqlite, kamu bisa dengan mudah menggantikan SQLite dengan Database yang lain semisal PostgreSQL, atau Mongo. Saya tidak menyarankan kamu menggunakan ORM yang menggunakan query engine agar tidak memperparah latency seperti Prisma ORM untuk production.

Jika kamu mau menggunakan ORM, kamu bisa menggunakan Drizzle ORM atau Query builder seperti Kisely. Dengan begitu ini akan mengurangi latency query disebabkan engine ORM seperti yang dimiliki Prisma.

TursoDB

Turso DB adalah Provider Sqlite untuk production. Turso memberikan kemudahan untuk melakukan Scale dari aplikasi yang menggunakan Sqlite.

Turso juga memiliki free-tier yang super generous dibandingkan dengan provider yang lain. Turso memberikan free-tier user untuk bisa membuat hinggal 500 Database, 9GB Storage, 3 Replication untuk edge location.

Kamu akan dengan mudah melakukan scale bexlite dengan extending Sqlite yang digunakan dengan TursoDB.

Quote:[Image: elysia_v.webp]