Ripple - Framework UI TypeScript thanh lịch

 (github.com/trueadm)
11 điểm bởi GN⁺ 2025-09-09 | 3 bình luận | Chia sẻ qua WhatsApp
  • Framework UI an toàn kiểu dữ liệu kết hợp ưu điểm của React·Solid·Svelte, xây dựng component với thiết kế ưu tiên JS/TS và ngôn ngữ module .ripple riêng
  • Hướng tới hiệu năng cao và hiệu quả bộ nhớ nhờ biến/thuộc tính phản ứng dùng tiền tố $, template tương tự JSX và render tinh vi
  • Cung cấp extension VS Code, tích hợp Prettier và TypeScript, đồng thời bao gồm DX hiện đại như mảng·map·set phản ứng, side effect dựa trên effect, decorator (@use)
  • Hiện đang ở giai đoạn alpha sớm với các hạn chế như chưa hỗ trợ SSR và thiếu type, được mở ra nhằm thử nghiệm ý tưởng và chia sẻ phản hồi
  • Dựa trên triết lý tương tự runtime dựa trên signal của Svelte 5, dự án cho thấy xu hướng tiến hóa của framework frontend qua việc thử nghiệm cách tiếp cận JS/TS-first và cú pháp thân thiện với LLM

What is Ripple?

  • Ripple là một framework UI ưu tiên TypeScript lấy cảm hứng từ React·Solid·Svelte, được xây dựng trên ngôn ngữ superset dùng phần mở rộng .ripple riêng
    • Với cú pháp phù hợp với JSX, nó chỉ dùng template bên trong thân component, và áp dụng template kiểu statement thay vì biểu thức trả về (JSX return)
    • Tác giả đã hiện thực các ý tưởng này dưới dạng thử nghiệm, dựa trên kinh nghiệm với Inferno·React Hooks·Lexical·Svelte 5
  • Hiện tại dự án vẫn ở giai đoạn phát triển ban đầu, còn nhiều bug và TODO, không khuyến nghị dùng production
    • Mục tiêu là chia sẻ và ươm tạo ý tưởng, đồng thời tìm khả năng phản hồi ngược sang các framework khác
    • Đây là nỗ lực kiểm chứng giả thuyết rằng thiết kế JS/TS-first có thể mang lại DX tốt cho cả con người lẫn LLM

Features

  • Reactive State Management: Cung cấp tính phản ứng cho biến·thuộc tính đối tượng với tiền tố $, và cả giá trị dẫn xuất cũng có thể được biểu diễn tự nhiên bằng biến $
  • Component-Based Architecture: Khai báo component tường minh bằng từ khóa component, hỗ trợ props/children và kết hợp với template tương tự JSX
  • Performance: Hướng tới hiệu năng và hiệu quả bộ nhớ hàng đầu ngành nhờ render tinh vi (fine-grained)
  • Tooling: Hỗ trợ tích hợp TypeScript, IntelliSense/chẩn đoán/highlighting trong VS Code, và định dạng bằng Prettier
  • DX được tăng cường: Triết lý JS/TS-first, cú pháp thân thiện với LLM, và cấu trúc SPA mặc định

Missing Features

  • Thiếu SSR: Hiện chỉ dành cho SPA, SSR vẫn chưa được thực hiện
  • Thiếu type: Định nghĩa type trong codebase còn hạn chế và sẽ được cải thiện

Getting Started / Try Ripple

  • Có thể mở template cơ bản trên StackBlitz hoặc clone bằng degit, rồi chạy với Vite development server
    • Ví dụ lệnh: npx degit trueadm/ripple/templates/basic my-app → npm i → npm run dev
  • Playground online sẽ được bổ sung sau, hiện có thể thử cục bộ qua thư mục playground trong repo

VSCode Extension

  • Có extension Ripple for VS Code, hỗ trợ highlight cú pháp, chẩn đoán thời gian thực, tích hợp TS, và tự động hoàn thành (IntelliSense) cho file .ripple
  • Cung cấp liên kết tới bản phát hành trên marketplace và gói .vsix để cài thủ công

Mounting your app

  • Ở entry point, hỗ trợ gắn component gốc theo dạng mount(App, { props, target })
    • Cung cấp API ngắn gọn cho phép chỉ định DOM node qua target và truyền thuộc tính khởi tạo qua props

Key Concepts

  • Components
    • Định nghĩa component khai báo với chữ ký giống hàm bằng từ khóa component, và viết trực tiếp template giống JSX trong phần thân
    • Hỗ trợ cú pháp rút gọn thuộc tính ({onClick}), spread ({...props}) và các cú pháp quen thuộc khác
  • Reactive Variables
    • Biến·thuộc tính có tiền tố $ sẽ tự động phản ứng, và chỉ cần tăng/gán là sẽ kích hoạt re-render
    • Trạng thái dẫn xuất được khai báo bằng cú pháp trực quan như $double = $count * 2, và có thể dẫn xuất dây chuyền
    • Có thể dùng untrack để chặn lan truyền phản ứng ở các đoạn cụ thể như lúc khởi tạo
    • Cấm biến phản ứng ở phạm vi global/top-level module, chúng phải được tạo trong active component context
  • Transporting Reactivity
    • Có thể mang tính phản ứng vượt qua ranh giới bằng cách bọc mảng·đối tượng, hỗ trợ composition và cùng tồn tại
    • Khuyến nghị pattern để factory function nhận giá trị $, tạo derived/effect bên trong, rồi trả về lại giá trị $
  • Reactive Arrays / Set / Map
    • RippleArray/Set/Map là collection phản ứng mở rộng từ collection chuẩn; để có phản ứng với độ dài/kích thước cần truy cập qua $length/$size
    • Có thể dùng trực tiếp kết quả method hoặc gán vào biến phản ứng như $has để dùng trong template
  • Effects
    • Khai báo side effect bằng effect(() => { ... }), sẽ chạy khi các giá trị $ phụ thuộc thay đổi, với tracking tự động
  • Control flow
    • Template chỉ được phép dùng bên trong thân component, không trả về JSX bằng hàm thông thường hay biểu thức gán biến
    • Có thể dùng khai báo biến/gọi hàm/debugger trong template, cung cấp luồng điều khiển xoay quanh statement
    • Áp dụng quy tắc phân biệt chuỗi với mã nguồn bằng cách viết string literal dưới dạng { "…" }
  • If / For / Try statements
    • Dùng if/else bên trong khối template để tạo luồng điều khiển dễ đọc
    • Dùng for...of để render collection, hỗ trợ lặp ngắn gọn không cần key prop
    • Dùng khối try/catch để tạo error boundary (fallback UI); trong catch có thể ghi log·báo cáo rồi render UI thay thế
  • Props
    • Prop phản ứng dùng tiền tố $; ngay cả thuộc tính DOM cũng phải thêm tiền tố như $class, $id để cập nhật phản ứng
  • Children
    • Cung cấp slot component $children ngầm định, cho phép triển khai composition bằng <$children />
    • Cũng có thể khai báo component slot tường minh để tăng độ dễ đọc và khả năng kiểm soát
  • Events
    • Hỗ trợ API sự kiện kiểu React (onClick, onKeyDown, …Capture), với một số sự kiện được tối ưu bằng delegation
  • Decorators
    • Cú pháp decorator {@use fn} cho phép lấy tham chiếu DOM thực và có thể trả về hook mount/unmount
    • Hỗ trợ pattern truyền giá trị phản ứng qua inline function/factory, cũng như truyền vào component tổng hợp
  • Styling
    • Viết CSS cục bộ theo phạm vi component trong khối top-level <style>, cung cấp styling được đóng gói
  • Context
    • Dùng createContext để thiết lập giá trị chia sẻ giữa cây cha-con, và chỉ cho phép get/set bên trong component để tăng tính dự đoán

Playground

  • Sau khi clone repo, có thể chạy playground cục bộ bằng pnpm i && cd playground && pnpm dev
    • Dùng plugin Vite để dễ dàng thử nghiệm cú pháp .ripple trong playground/src

Why it matters

  • Các yếu tố như JS/TS-first, template kiểu statement, tính phản ứng với tiền tố $ là một thử nghiệm nhằm đồng thời theo đuổi cấu trúc mã thân thiện với LLM và khả năng đọc/phân tích tĩnh tốt
  • Sự kết hợp giữa render tinh vi, tính phản ứng của collection, và hook vào DOM bằng decorator là nỗ lực dung hòa giữa tối ưu vi mô và DX
  • Dù vẫn ở giai đoạn alpha, dự án mang lại điểm tham chiếu cho thiết kế framework thế hệ tiếp theo khi đối chiếu luồng signal-based của Svelte 5 với trải nghiệm phát triển từ hệ sinh thái React

Bài viết liên quan

3 bình luận

 
aabb2467 2025-09-09

Cũng có vẻ là ổn, mà cũng có vẻ là không
 
ng0301 2025-09-09

Cảm giác khá giống Svelte.
Rồi lòng vòng một hồi sau này có khi lại đi theo kiểu ReactLike cũng nên haha
 
click 2025-09-09

Có vẻ như đang hình thành xu hướng mọi người ngại dùng framework mới vì lượng dữ liệu mà AI được học về chúng còn ít.
Tôi nghĩ Svelte là chuyến tàu cuối. Ngay cả với Svelte, nếu không viết prompt cho chuẩn thì nó cứ lao vào dùng cú pháp $ thay vì rune, khá là khó chịu.