A lightweight, high-performance React-like framework with built-in TypeScript support and server-side rendering capabilities.
- 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
# Install CLI globally
npm install -g frontend-hamroun
# Create new project
frontend-hamroun create my-app
cd my-app
# Start development
npm run devfrontend-hamroun add:component Button
frontend-hamroun add:component Headerfrontend-hamroun add:page home
frontend-hamroun add:page aboutfrontend-hamroun add:api users
frontend-hamroun add:api postsimport { 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'));// 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// 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();const Context = createContext(defaultValue);
const value = useContext(Context);
// Provider
<Context.Provider value={value}>
{children}
</Context.Provider># Build for production
npm run build
# Start production server
npm run start
# Build with SSR
npm run build:ssr# Build Docker image
docker build -t my-app .
# Run container
docker run -p 3000:3000 my-app| 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 |
- Product catalogs with SSR for SEO
- Shopping cart state management
- Real-time inventory updates
- Server-rendered pages for SEO
- Rich text editing components
- Media management interfaces
- Live data visualization
- WebSocket integration
- Performance monitoring
- 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
- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
- Fork the repository
- Create a feature branch:
git checkout -b feature/new-feature - Commit changes:
git commit -am 'Add new feature' - Push to branch:
git push origin feature/new-feature - Submit a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- 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.