- Framework UI yang type-safe untuk membangun komponen dengan menggabungkan kelebihan React·Solid·Svelte, desain yang mengutamakan JS/TS, dan bahasa modul
.ripple miliknya sendiri
- Menargetkan performa tinggi dan efisiensi memori melalui variabel/properti reaktif dengan prefiks
$, template mirip JSX, dan rendering granular
- Menyediakan ekstensi VS Code, Prettier, dan integrasi TypeScript, serta mencakup DX modern seperti array·map·set reaktif, side effect berbasis
effect, dan decorator (@use)
- Saat ini masih alpha awal dengan keterbatasan seperti belum mendukung SSR dan type yang belum lengkap, dibuka untuk eksperimen ide dan berbagi umpan balik
- Berdasarkan filosofi yang mirip dengan runtime berbasis signal milik Svelte 5, proyek ini menunjukkan arah evolusi framework frontend melalui pendekatan JS/TS-first dan sintaks yang ramah LLM
What is Ripple?
- Ripple adalah framework UI yang mengutamakan TypeScript dan terinspirasi dari React·Solid·Svelte, dibangun di atas bahasa superset yang menggunakan ekstensi
.ripple miliknya sendiri
- Dengan sintaks yang cocok dengan JSX, Ripple menggunakan template hanya di dalam body komponen dan mengadopsi template bergaya statement alih-alih ekspresi return (return JSX)
- Penulisnya mengimplementasikan ide ini dalam bentuk eksperimental berdasarkan pengalaman di Inferno·React Hooks·Lexical·Svelte 5
- Saat ini masih berada pada tahap pengembangan awal, dengan banyak bug dan TODO, sehingga tidak direkomendasikan untuk penggunaan produksi
- Tujuannya adalah berbagi ide dan inkubasi, serta mengeksplorasi kemungkinan umpan balik balik ke framework lain
- Ini juga merupakan upaya untuk memverifikasi hipotesis bahwa desain JS/TS-first dapat memberikan DX yang baik bagi manusia maupun LLM
Features
- Reactive State Management: Menyediakan reaktivitas variabel dan properti objek dengan prefiks
$, dan nilai turunan juga dapat ditulis secara alami sebagai variabel $
- Component-Based Architecture: Deklarasi komponen eksplisit dengan keyword
component, mendukung props/children dan dipadukan dengan template mirip JSX
- Performance: Mengincar performa dan efisiensi memori kelas atas di industri melalui rendering granular (fine-grained)
- Tooling: Mendukung integrasi TypeScript, IntelliSense/diagnostik/highlighting di VS Code, serta formatting Prettier
- Penguatan DX: Filosofi JS/TS-first, sintaks ramah LLM, dan struktur dasar SPA
Missing Features
- Belum ada SSR: Saat ini khusus SPA, SSR belum dikerjakan
- Type belum lengkap: Definisi type dalam codebase masih terbatas dan direncanakan akan ditingkatkan
Getting Started / Try Ripple
- Template dasar dapat dibuka di StackBlitz atau di-clone dengan
degit lalu dijalankan lewat server pengembangan Vite
- Contoh perintah:
npx degit trueadm/ripple/templates/basic my-app → npm i → npm run dev
- Playground online akan ditambahkan, dan eksperimen lokal dapat dilakukan melalui folder
playground di repo
VSCode Extension
- Tersedia ekstensi Ripple for VS Code yang mendukung syntax highlighting, diagnostik real-time, integrasi TS, dan autocompletion (IntelliSense) untuk file
.ripple
- Tersedia tautan untuk versi Marketplace dan paket
.vsix untuk instalasi manual
Mounting your app
- Mendukung pemasangan komponen root di entry dengan bentuk
mount(App, { props, target })
- Menyediakan API yang ringkas untuk menentukan node DOM pada
target dan menyuntikkan properti awal melalui props
Key Concepts
- Components
- Mendefinisikan komponen deklaratif dengan signature mirip fungsi melalui keyword
component, dan menulis template mirip JSX langsung di dalam body
- Mendukung singkatan properti (
{onClick}), spread ({...props}), dan sintaks yang familier lainnya
- Reactive Variables
- Variabel dan properti dengan prefiks
$ memiliki reaktivitas otomatis, dan increment/assignment saja sudah memicu re-render
- State turunan dideklarasikan dengan notasi intuitif seperti
$double = $count * 2, dan turunan berantai juga dimungkinkan
- Dengan
untrack, propagasi reaktivitas dapat diblokir pada bagian tertentu seperti saat inisialisasi
- Variabel reaktif dilarang di global/modul top-level, dan harus dibuat dalam konteks komponen aktif
- Transporting Reactivity
- Reaktivitas dapat dibawa melintasi boundary melalui pembungkusan array dan objek sehingga komposisi dan koeksistensi dimungkinkan
- Disarankan pola di mana factory function menerima nilai
$, membuat turunan/effect di dalamnya, lalu mengembalikan nilai $ lagi
- Reactive Arrays / Set / Map
RippleArray/Set/Map adalah koleksi reaktif yang memperluas koleksi standar; panjang/ukuran harus diakses melalui $length/$size agar tetap reaktif- Hasil method dapat digunakan langsung atau ditugaskan ke variabel reaktif seperti
$has untuk dipakai di template
- Effects
- Mendeklarasikan side effect dengan
effect(() => { ... }) yang berjalan saat nilai $ yang menjadi dependensi berubah, dengan tracking otomatis
- Control flow
- Template hanya diizinkan di dalam body komponen, dan tidak mengembalikan JSX itu sendiri dari fungsi biasa atau ekspresi assignment variabel
- Di dalam template, dapat digunakan deklarasi variabel/pemanggilan fungsi/
debugger, dengan alur kontrol yang berpusat pada statement
- Mengadopsi aturan bahwa literal string harus ditulis sebagai
{ "…" } untuk membedakannya dari kode
- If / For / Try statements
- Menggunakan
if/else di dalam blok template untuk membentuk alur kontrol yang mudah dibaca
- Mendukung rendering koleksi dengan
for...of, dengan iterasi ringkas yang tidak memerlukan key prop
- Dengan blok
try/catch, bisa membangun error boundary (fallback UI), lalu melakukan logging/reporting di catch sebelum merender UI pengganti
- Props
- Prop reaktif menggunakan prefiks
$, dan atribut DOM juga harus diberi prefiks seperti $class, $id agar update reaktif bekerja
- Children
- Menyediakan slot komponen implisit
$children, dan komposisi dapat dibuat dengan <$children />
- Juga memungkinkan deklarasi komponen slot eksplisit untuk meningkatkan keterbacaan dan kontrol
- Events
- Mendukung API event mirip React (
onClick, onKeyDown, …Capture), dan beberapa event dioptimalkan dengan delegation
- Decorators
- Dengan sintaks decorator
{@use fn}, bisa memperoleh referensi node DOM nyata dan mengembalikan hook mount/unmount
- Mendukung pola pengiriman nilai reaktif melalui inline function/factory, serta penerusan ke komponen komposit
- Styling
- Menulis CSS bercakupan lokal ke komponen di blok top-level
<style>, menyediakan styling yang terenkapsulasi
- Context
- Dengan
createContext, dapat menetapkan nilai bersama di pohon atas-bawah, dan get/set hanya diizinkan di dalam komponen untuk menjaga prediktabilitas
Playground
- Setelah meng-clone repo, playground lokal dapat dijalankan dengan
pnpm i && cd playground && pnpm dev
- Dengan plugin Vite, eksperimen sintaks
.ripple di playground/src dapat dilakukan dengan mudah
Why it matters
- JS/TS-first, template bergaya statement, dan reaktivitas berprefiks
$ adalah eksperimen untuk sekaligus mengejar struktur kode yang ramah LLM dan kemudahan keterbacaan/analisis statis
- Kombinasi seperti rendering granular, reaktivitas koleksi, dan hooking DOM lewat decorator merupakan upaya untuk menyeimbangkan optimalisasi halus dan DX
- Meski masih tahap alpha, Ripple menawarkan referensi bagi desain framework generasi berikutnya dengan memverifikasi silang alur berbasis signal ala Svelte 5 dan pengalaman pengembang dari ekosistem React
3 komentar
Sepertinya bagus, tapi juga terasa tidak begitu.
Rasanya cukup kuat seperti Svelte.
Pada akhirnya, jangan-jangan nanti malah berujung jadi React-like wkwk
Sepertinya karena porsi materi yang dipelajari AI masih sedikit, jadi muncul kecenderungan orang-orang enggan memakai framework baru.
Saya rasa Svelte adalah kereta terakhir yang sempat terkejar. Bahkan Svelte pun, kalau prompt-nya tidak ditulis dengan baik, sering kali malah menyerang dengan sintaks
$tanpa memakai rune, jadi merepotkan.