Introduction to @rhtml
@rhtml is a modern, reactive web framework that combines the power of Web Components, RxJS, and dependency injection to create scalable, maintainable applications. Built with TypeScript and designed for both frontend and backend development, @rhtml provides a unified development experience.
🚀 Quick Start
Frontend Development
# Create a new @rhtml project
git clone https://github.com/rxdi/starter-client-side-lit-html my-frontend
cd my-frontend
# Install dependencies
npm install
# Start development server
npm start
Backend Development
# Clone the fastify starter template
git clone https://github.com/r-html/fastify-starter my-backend
cd my-backend
# Install dependencies
npm install
# Create environment file
cp .env.example .env
# Start development server
npm start
✨ Core Features
- Reactive Programming: Native RxJS integration for reactive data flows
- Web Components: Build reusable components with Web Components standards
- Dependency Injection: Powerful DI container inspired by Angular
- TypeScript First: Full TypeScript support with excellent IDE integration
- Full Stack: Frontend and backend development in one framework
- Performance: Built on Web Components and LitElement for optimal performance
- Developer Experience: Excellent tooling and debugging support
📦 Core Packages
Frontend Packages
| Package | Description | Repository |
|---|---|---|
| @rhtml/component | Functional reactive components | Core Repository |
| @rxdi/lit-html | First generation Web Components | RxDI Repository |
| @rhtml/components | Pre-built UI components | Core Repository |
| @rhtml/renderer | Component rendering engine | Core Repository |
| @rhtml/hooks | React-like hooks for components | Core Repository |
| @rhtml/operators | Reactive operators (r-for, r-if, etc.) | Core Repository |
| @rhtml/decorators | Host bindings and listeners | Core Repository |
| @rhtml/custom-attributes | Custom HTML attributes | Core Repository |
| @rhtml/modifiers | Layout and animation modifiers | Core Repository |
| @rhtml/experiments | Monadic components and patterns | Core Repository |
Backend Packages
| Package | Description | Repository |
|---|---|---|
| @rhtml/di | IOC container for dependency injection | Core Repository |
| @rhtml/fastify | Fastify server integration with decorators | Core Repository |
| @rhtml/fastify-starter | Starter template for backend development | Fastify Starter |
| @rhtml/mongoose | MongoDB integration with reactive patterns | Core Repository |
| @rhtml/amqp | AMQP message queue integration | Core Repository |
| @rhtml/schematics | Angular-like schematics for component generation | Core Repository |
🏗️ Architecture Overview
@rhtml follows a modular architecture that separates concerns while maintaining tight integration:
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Frontend │ │ Backend │ │ Shared │
│ │ │ │ │ │
│ • Components │ │ • Controllers │ │ • DI Container │
│ • Reactive │ │ • Services │ │ • Types │
│ • Web Components│ │ • Fastify │ │ • Utilities │
│ • Operators │ │ • GraphQL │ │ • Schematics │
└─────────────────┘ └─────────────────┘ └─────────────────┘
🎯 Key Concepts
1. Reactive Programming
@rhtml embraces reactive programming with RxJS, allowing you to build responsive applications with declarative data flows.
2. Web Components
Build truly reusable components that work across frameworks and can be shared between projects.
3. Dependency Injection
Manage application state and services with a powerful DI container that promotes testability and maintainability.
4. Functional Reactive Components
Advanced component system that combines functional programming with reactive state management.
5. Full-Stack Development
Write both frontend and backend code using the same patterns and tools.
📚 Documentation Structure
1. Getting Started
- Installation - Setup and configuration
- Components - Building components
- State Management - Managing application state
- Controllers - Backend API development
- Modules - Organizing your application
- Providers - Service registration
- Testing - Testing strategies
2. Core Concepts
- Reactive Operators - Declarative operators
- Monadic Components - Functional components
3. Advanced Topics
- GraphQL Integration - Data fetching and mutations
- Custom Decorators - Creating custom decorators
- Host Bindings and Listeners - DOM event handling
- Mongoose Integration - MongoDB integration
- AMQP Integration - Message queue integration
- Performance Optimization - Optimization techniques
🎓 Learning Path
- Start with Installation - Set up your development environment
- Learn Components - Understand the component systems
- Explore State Management - Master reactive state patterns
- Build Backend APIs - Create controllers and services
- Advanced Patterns - Dive into GraphQL, decorators, and optimization
🤔 Why Choose @rhtml?
- Reactive by Design: Built for reactive programming from the ground up
- Component Based: True Web Components with excellent composition
- Dependency Injection: Enterprise-grade service management
- TypeScript First: Full type safety and excellent IDE support
- Performance: Minimal overhead with maximum efficiency
- Developer Experience: Excellent tooling and debugging
- Comprehensive: Frontend and backend in one framework
- Standards Based: Built on Web Components and modern standards
🚀 Next Steps
- Frontend: Start with the Component Guide
- Backend: Use the Fastify Starter Template
- Full Stack: Explore State Management
- Community: Join our Discord Community
Ready to build something amazing? Let's get started! 🚀