🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

frontend-hamroun

Package Overview
Dependencies
Maintainers
1
Versions
172
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

frontend-hamroun

A lightweight frontend JavaScript framework with React-like syntax

1.2.90
latest
Source
npm
Version published
Maintainers
1
Created
Source

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

MetricFrontend HamrounReactVue
Bundle Size (gzipped)8.2 KB42.2 KB36.1 KB
Initial Render12ms18ms15ms
Update Performance3.2ms4.8ms4.1ms
Memory Usage2.1 MB3.8 MB3.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

  • 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

📄 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.

Keywords

frontend

FAQs

Package last updated on 05 Jun 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts