Frontend Hamroun Framework

A lightweight, high-performance React-like framework with built-in TypeScript support and server-side rendering capabilities.

🚀 Features

• React-like API - Familiar hooks and component patterns
• TypeScript First - Complete type safety out of the box
• Server-Side Rendering - Built-in SSR for SEO and performance
• Lightweight - ~8KB gzipped runtime
• Fast Virtual DOM - Efficient O(n) diffing algorithm
• Modern Tooling - Vite-powered development experience
• WebAssembly Ready - Optional WASM integration for performance

📦 Installation

# Install CLI globally
npm install -g frontend-hamroun

# Create new project
frontend-hamroun create my-app
cd my-app

# Start development
npm run dev

🏗️ Quick Start

1. Create Components

frontend-hamroun add:component Button
frontend-hamroun add:component Header

2. Add Pages

frontend-hamroun add:page home
frontend-hamroun add:page about

3. Create API Endpoints

frontend-hamroun add:api users
frontend-hamroun add:api posts

4. Build Your App

import { render, useState, useEffect } from 'frontend-hamroun';

function App() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);
  
  return (
    <div>
      <h1>Frontend Hamroun App</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

render(<App />, document.getElementById('root'));

🔧 API Reference

Core Functions

// Client-side rendering
render(element: JSX.Element, container: HTMLElement): void

// Server-side rendering + hydration
renderToString(element: JSX.Element): Promise<string>
hydrate(element: JSX.Element, container: HTMLElement): void

Hooks

// State management
const [state, setState] = useState(initialValue);
const ref = useRef(initialValue);

// Side effects
useEffect(() => {
  // Effect code
  return () => {
    // Cleanup
  };
}, [dependencies]);

// Performance
const memoized = useMemo(() => computation(), [deps]);

// Error handling
const [error, resetError] = useErrorBoundary();

Context API

const Context = createContext(defaultValue);
const value = useContext(Context);

// Provider
<Context.Provider value={value}>
  {children}
</Context.Provider>

🏭 Production Build

# Build for production
npm run build

# Start production server
npm run start

# Build with SSR
npm run build:ssr

🐳 Docker Support

# Build Docker image
docker build -t my-app .

# Run container
docker run -p 3000:3000 my-app

📊 Performance

| Metric | Frontend Hamroun | React | Vue | |--------|------------------|-------|-----| | Bundle Size (gzipped) | 8.2 KB | 42.2 KB | 36.1 KB | | Initial Render | 12ms | 18ms | 15ms | | Update Performance | 3.2ms | 4.8ms | 4.1ms | | Memory Usage | 2.1 MB | 3.8 MB | 3.2 MB |

🎯 Use Cases

E-commerce Applications

• Product catalogs with SSR for SEO
• Shopping cart state management
• Real-time inventory updates

Content Management Systems

• Server-rendered pages for SEO
• Rich text editing components
• Media management interfaces

Real-time Dashboards

• Live data visualization
• WebSocket integration
• Performance monitoring

🛠️ Development Tools

• Hot Module Replacement - Instant updates during development
• Error Overlay - Detailed error reporting with stack traces
• TypeScript Integration - Full IntelliSense and type checking
• Performance Profiler - Built-in performance monitoring
• Source Maps - Easy debugging in development

🌐 Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

📚 Documentation

• API Reference
• Activity Workflows
• Contributing Guide
• Examples

🤝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/new-feature
3. Commit changes: git commit -am 'Add new feature'
4. Push to branch: git push origin feature/new-feature
5. Submit a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Inspired by React's component model
• Built with modern web standards
• Optimized for developer experience

Frontend Hamroun - Building the future of web development, one component at a time.