Eleva.js - A minimalist, lightweight, pure vanilla JavaScript frontend runtime framework.

Eleva.js

by tarekraafat

My Inspiration

The idea behind Eleva comes from a deep appreciation for native JavaScript. I wanted to create a tool that stays true to the language without introducing new syntax or complexity, making it easy to integrate into your projects.

Core Principles

🌱 Minimalism: Only the essentials, so you can build without clutter.
🔌 Extensibility: Plug in your own ideas—custom state management, routing, and more.
🚀 Performance: Fast, efficient, and designed with modern browsers in mind.
🍦 Pure Vanilla: No dependencies, no magic—just plain JavaScript.

Design Philosophy

Eleva.js is an unopinionated library.

Unlike many frameworks that enforce a specific project structure or coding paradigm, Eleva provides a minimal core with a flexible plugin system. This means:

🔄 Flexibility: Architect your application your way—no rigid structure required.
🎯 Native JavaScript: Built using pure vanilla JavaScript, Eleva integrates seamlessly with your existing code without unfamiliar syntax.
⚙️ Configurability: Extend Eleva's functionality with a simple API and optional plugins.
🆓 Freedom: Decide the best way to implement features without unnecessary constraints.

This unopinionated approach makes Eleva versatile and ideal for developers who want full control over their application's design.

Handcrafted & Developer-Centric Design

Eleva is built with meticulous attention to detail and a deep passion for pure vanilla JavaScript. Every aspect of its design and architecture is handcrafted with the developer in mind. This makes Eleva not only innovative but also a solid foundation for your projects.

🎨 Craftsmanship: Every line of code is written with care, keeping the library lightweight, efficient, and easy to understand.
🛠️ Developer-Centric: Its intuitive API and minimal core mean you spend less time wrestling with the framework and more time building your application.
🌟 Innovative & Fresh: Stick to pure vanilla JavaScript and avoid unnecessary abstractions.
🏗️ Solid & Reliable: Focused on performance and modularity, Eleva scales with your project’s needs.

This unique, developer-first approach makes Eleva a standout choice for building high-performance frontend applications without compromising on simplicity or control.

Features

🧩 Component-Based Architecture: Create reusable UI components effortlessly.
⚡ Signal-Based Reactivity: Fine-grained reactivity that updates only what’s needed.
🔔 Event Handling: Built-in event emitter for robust inter-component communication.
📝 Template Parsing: Secure and dynamic interpolation with a custom TemplateEngine.
🔄 DOM Diffing & Patching: High-performance updates without a virtual DOM.
📦 UMD & ES Module Builds: Supports modern build tools and browser environments.
🤝 Friendly API: A gentle learning curve for both beginners and seasoned developers.
💎 Tiny Footprint & TypeScript Support: Approximately ~4 KB minified with built-in TypeScript declarations, to keep your bundle lean and your codebase strongly typed.

Performance Benchmarks

Preliminary benchmarks illustrate Eleva’s efficiency compared to popular frameworks:

Eleva Performance Benchmarks

Detailed Benchmark Metrics Report

⚠️ Disclaimer: Benchmarks are based on internal tests and may vary by project and environment.

Getting Started

To incorporate Eleva into projects, it can be easily installed via npm or included directly through a CDN. An intuitive API allows for rapid development of features and components. Here's a brief example of usage:

<!DOCTYPE html>
  <head>
    <title>Eleva Example</title>
    <script src="https://cdn.jsdelivr.net/npm/eleva"></script>
  </head>
  <body>
    <div id="app"></div>
    <script>
      const app = new Eleva("MyApp");

      app.component("HelloWorld", {
        setup({ signal }) {
          const count = signal(0);
          return { count };
        },
        template: ({ count }) => `
          <div>
            <h1>Hello, Eleva! 👋</h1>
            <p>Count: ${count.value}</p>
            <button @click="() => count.value++">Increment</button>
          </div>
        `,
      });

      app.mount(document.getElementById("app"), "HelloWorld");
    </script>
  </body>
</html>

Explore the project’s documentation for detailed documentation and an API reference.

0 comments

No comments yet.

New comment