Building Rynex: A 175KB TypeScript Framework Without Virtual DOM

#opensource #webdev #javascript #typescript

The Problem with Modern Framework Overhead

Most modern web frameworks ship with Virtual DOM implementations that add significant bundle size before you write a single line of application code. For small to medium-sized web applications, this overhead often feels unnecessary. After working on multiple projects and consistently running into this issue, I decided to explore an alternative approach.

Introducing Rynex

Rynex is a zero-configuration TypeScript framework for building reactive web applications without Virtual DOM. Instead of maintaining a virtual representation and performing diff operations, Rynex uses direct DOM manipulation combined with proxy-based reactivity to achieve fast, efficient updates.

The core principle is simple: when state changes, Rynex updates only the affected DOM nodes directly. No diffing algorithm, no reconciliation phase, just targeted updates where they are needed.

Key Features

Rynex comes with a comprehensive set of features designed for modern web development:

Developer Experience:

Zero-configuration TypeScript setup with full type safety
Next.js-style file-based routing system
Built-in Express development server with Hot Module Replacement
Integrated Tailwind CSS support out of the box

Performance:

Approximately 175KB gzipped bundle size for the core framework
Direct DOM updates via JavaScript Proxies
Batched updates to prevent unnecessary re-renders
Minimal runtime overhead

Built-in Utilities:

UI component helpers including grids, modals, and form utilities
Reactive state management system
Dynamic routing with parameter support
Production build optimization

Technical Architecture

The framework leverages JavaScript Proxies to create a reactive system that tracks state mutations and automatically updates the corresponding DOM elements. The routing system follows a file-based approach similar to Next.js, where the directory structure in your pages folder automatically generates application routes.

The bundling process is optimized to produce minimal output while maintaining full TypeScript type checking. The development server provides instant Hot Module Replacement for a smooth development experience.

Current Development Status

Rynex is approximately 75 percent complete. The core routing system and state management functionality are solid and production-ready. The development server, build pipeline, and TypeScript integration are fully functional.

Areas currently under active development include comprehensive documentation, expanding test coverage, handling additional edge cases, and building out the component library ecosystem.

Performance Considerations

The trade-offs of direct DOM manipulation versus Virtual DOM are context-dependent. For applications with simple to moderate reactive patterns, direct updates can be faster and more memory-efficient. For extremely complex scenarios involving thousands of list items with frequent updates, Virtual DOM diffing may still provide advantages.

Initial performance testing shows promising results for typical web application use cases, but comprehensive benchmarking against other frameworks is ongoing.

Try It Out

The best way to understand Rynex is to see it in action:

Live Demo: https://rynex-demo.vercel.app/

Source Repositories:

Framework Repository: https://github.com/razen-core/rynex
Demo Application: https://github.com/razen-core/rynex-demo

Visit the GitHub repository to explore the source code, review the architecture, and see detailed implementation. The demo application showcases routing, state management, and various UI components in a real-world context.

Looking Forward

The roadmap to version 1.0 focuses on three main areas: comprehensive documentation with real-world examples and migration guides, expanded test coverage across all core functionality, and performance benchmarking against established frameworks.

Beyond that, planned features include a plugin system for extensibility, component lifecycle hooks, and an ecosystem of reusable components.

Community Feedback Welcome

This project is open source and community feedback is invaluable. Whether you have thoughts on the architecture, suggestions for features, or questions about use cases, your input helps shape the direction of development.

If this approach to building web applications interests you, check out the repositories and try the live demo. Contributions, suggestions, and discussions are all welcome.

Built by Prathmesh Barot from Razen Core

GitHub: https://github.com/razen-core