Ripple - Framework UI TypeScript yang Elegan

• 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

[aabb2467]

Sepertinya bagus, tapi juga terasa tidak begitu.

[ng0301]

Rasanya cukup kuat seperti Svelte.
Pada akhirnya, jangan-jangan nanti malah berujung jadi React-like wkwk

[click]

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.