@oxog/praxis

v1.0.1

Published

7 months ago

A high-performance reactive JavaScript framework with enterprise-grade features for modern web applications

Downloads

0High
0Medium
0Low

reactive javascript framework signals dom web frontend ui lightweight performance security accessibility enterprise praxis

⚡ Praxis

A high-performance reactive JavaScript framework with enterprise-grade features for modern web applications.

Praxis delivers exceptional performance, security, and accessibility with declarative data binding and reactive components in just 8.5KB.

✨ Why Praxis?

🚀 High Performance with fine-grained reactivity and optimized updates
📦 Lightweight - Only 8.5KB minified and gzipped
🔒 Enterprise Security with XSS prevention and CSP compliance
♿ Accessibility First - WCAG 2.1 AA compliance out of the box
🛠️ Complete Toolchain with CLI, testing, and build optimization
🔄 Familiar Syntax - Easy to learn and migrate to

🚀 Quick Start

CDN (Fastest way to try)

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/@oxog/praxis@latest/dist/praxis.min.js"></script>
</head>
<body>
    <div x-data="{ count: 0 }">
        <button x-on:click="count++">Count: <span x-text="count"></span></button>
    </div>
    
    <script>
        praxis.start();
    </script>
</body>
</html>

NPM Installation

npm install @oxog/praxis

import praxis from '@oxog/praxis';
praxis.start();

Create New Project

npm install -g @oxog/praxis-cli
praxis create my-app
cd my-app
npm run dev

📖 Documentation

Usage Guide - Complete guide to using Praxis
API Reference - Detailed API documentation
Architecture - Framework internals and design
Migration Guide - Migration from other frameworks

🎯 Core Features

Reactive Directives

<!-- Data binding -->
<div x-data="{ message: 'Hello World' }">
    <p x-text="message"></p>
    <input x-model="message">
</div>

<!-- Conditional rendering -->
<div x-data="{ show: true }">
    <p x-show="show">Visible content</p>
    <p x-if="show">Conditionally rendered</p>
</div>

<!-- Event handling -->
<button x-on:click="alert('Clicked!')" x-on:keydown.enter="handleEnter()">
    Click me
</button>

<!-- List rendering -->
<ul x-data="{ items: ['Apple', 'Banana', 'Cherry'] }">
    <template x-for="item in items" :key="item">
        <li x-text="item"></li>
    </template>
</ul>

Advanced Directives

<!-- Intersection Observer -->
<div x-intersect="handleVisible()" x-intersect.threshold-50>
    Triggers when 50% visible
</div>

<!-- Resize Observer -->
<div x-resize="updateDimensions()" x-resize.debounce>
    Handles resize events
</div>

<!-- Click outside detection -->
<div x-clickaway="closeModal()" x-clickaway.escape>
    Click outside or press escape to close
</div>

<!-- Keyboard shortcuts -->
<div x-hotkey="'ctrl+k'" x-on:keydown="openSearch()">
    Global keyboard shortcuts
</div>

<!-- Focus management -->
<div x-focus-trap.auto x-show="modalOpen">
    Automatically manages focus
</div>

<!-- Screen reader announcements -->
<div x-live-region.polite x-text="announcement">
    Announces changes to screen readers
</div>

Global State Management

import { defineStore } from '@oxog/praxis-store';

const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
    history: []
  }),
  
  getters: {
    doubleCount: (state) => state.count * 2,
    lastChange: (state) => state.history[state.history.length - 1]
  },
  
  actions: {
    increment() {
      this.$state.count++;
      this.$state.history.push({ action: 'increment', timestamp: Date.now() });
    },
    
    async fetchInitialCount() {
      const response = await fetch('/api/count');
      this.$state.count = await response.json();
    }
  }
});

// Use in components
const store = useCounterStore();
store.increment();
console.log(store.doubleCount); // Reactive getter

🏗️ Architecture

Signal System

interface Signal<T> {
  value: T;
  peek(): T;              // Read without tracking
  subscribe(fn: () => void): () => void;
}

interface ComputedSignal<T> extends Signal<T> {
  readonly value: T;
}

interface Effect {
  execute(): void;
  dispose(): void;
  dependencies: Set<Signal<any>>;
}

Performance Features

Batch Updates: Updates are batched using requestIdleCallback or MessageChannel
Fine-grained Reactivity: Only updates what actually changed
Memory Management: Automatic cleanup with WeakMaps and FinalizationRegistry
Efficient Scheduling: Smart update scheduling prevents unnecessary work

🧪 Examples

Counter with Computed Values

<div x-data="{ count: 0 }">
  <button x-on:click="count++">+</button>
  <span x-text="count"></span>
  <button x-on:click="count--">-</button>
  
  <p x-show="count > 0">Positive!</p>
  <p x-show="count < 0">Negative!</p>
  <p x-show="count === 0">Zero!</p>
</div>

Form Handling

<div x-data="{ name: '', email: '' }">
  <input x-model="name" placeholder="Name">
  <input x-model="email" type="email" placeholder="Email">
  
  <div x-show="name && email">
    <p>Hello <span x-text="name"></span>!</p>
    <p>Email: <span x-text="email"></span></p>
  </div>
</div>

🚀 Development

# Install dependencies
npm install

# Run tests
npm test

# Run tests with coverage
npm run test:coverage

# Build
npm run build

# Run benchmarks
npm run benchmark

📊 Performance

Praxis is designed for performance. Run the benchmarks to see the framework capabilities:

# Core reactivity benchmarks
npm run benchmark

# DOM manipulation benchmarks (open in browser)
open benchmarks/dom-benchmark.html

Key performance advantages:

Signals: Efficient reactive system with fine-grained updates
Batch Updates: Prevents layout thrashing
Memory Efficient: WeakMap-based tracking prevents memory leaks
Smaller Bundle: Lightweight core with tree-shakeable modules

🔒 Security

XSS Prevention: Expression sandboxing and HTML sanitization
CSP Compliant: Works with strict Content Security Policy
Trusted Types: Supports browser security APIs
Input Validation: Comprehensive validation and sanitization

🧪 Testing

# Run all tests
npm test

# Test with coverage
npm run test:coverage

# Test specific features
npm run test:security
npm run test:accessibility
npm run test:performance

🚀 Performance

Benchmark Results:

📊 Fast initial render with optimized DOM updates
🔄 Efficient reactive updates with minimal overhead
📦 Small bundle size at 8.5KB minified+gzipped
💾 Memory efficient with WeakMap-based tracking

🛠️ Build Tools

Vite Plugin

import { praxis } from '@oxog/praxis-vite-plugin';

export default {
  plugins: [praxis({
    optimize: true,
    ssr: true
  })]
};

Webpack Loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/,
        use: '@oxog/praxis-webpack-loader'
      }
    ]
  }
};

🌐 Browser Support

✅ Chrome 63+
✅ Firefox 60+
✅ Safari 13+
✅ Edge 79+

📊 Bundle Analysis

# Analyze bundle size
praxis analyze

# Generate performance report
praxis report --performance

# Check for security issues
praxis audit --security

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📄 License

MIT License - see LICENSE for details.

🌐 Links

Website: praxisjs.com
GitHub: github.com/praxijs
NPM: @oxog/praxis