Why Esor?

Esor Framework

Esor is a JavaScript framework for creating interactive web applications that combines the power of native Web Components with a modern reactive system based on signals. Unlike other frameworks, Esor focuses on providing a minimalistic but complete solution, with a bundle of only ~5KB and zero dependencies.

The Motivation

My journey to create Esor began with a quest for simplicity and performance in modern web development. While mainstream frameworks offer robust solutions, I noticed a gap: the need for a lightweight framework that leveraged the native power of modern browsers without sacrificing the development experience.

The Birth of Esor

The decision to create Esor arose from several common challenges in web development today:

Unnecessary Complexity.

Modern frameworks often include functionality that is rarely used, increasing bundle size and complexity. Esor was born with a minimalist philosophy: include only the essentials, allowing you to add what you need.

Performance

While many frameworks require significant hydration time and use Virtual DOM, Esor leverages native Web Components and a granular reactivity system to deliver fast and accurate DOM updates.

Web Standards

Instead of creating proprietary abstractions, Esor builds on established web standards:

• Custom Elements for components
• Shadow DOM for encapsulation
• Template literals for defining templates

Development Experience

I wanted to create an intuitive API that felt familiar to React and SolidJS developers, but took advantage of modern browser capabilities:

component("auto-complete", (props) => {
  const {
    placeholder = "Search...",
    items = ["apple", "banana", "cherry", "orange"],
  } = props;

  const search = signal("");

  const filtered = () => {
    const s = search().toLowerCase();
    return s === ""
      ? items
      : items.filter((item) => item.toLowerCase().includes(s));
  };

  const handleSearch = (e) => search(e.target.value);

  return html`
    <div class="search-container">
      <input
        type="text"
        class="search-input"
        placeholder=${placeholder}
        oninput=${handleSearch}
      />
      <ul class="search-results">
        ${() =>
          filtered().map((item) => html`<li class="result-item">${item}</li>`)}
      </ul>
    </div>
  `;
});

The component is shown below:

Key Advantages

1. Zero Config

Esor works directly in the browser without the need for compilation or complex configuration.

2. Minimal Bundle Size

With only ~3KB gzipped, Esor offers a complete solution without the weight of larger frameworks.

3. Optimal Performance

• No Virtual DOM
• Granular updates with signals
• Shadow DOM for better encapsulation
• Efficient renconcile system

Developer Experience

• Familiar and modern syntax
• Integrated development tools
• Comprehensive documentation

Micro-frontends

Its Web Components-based nature makes it perfect for creating stand-alone elements that can be integrated into any application.

High Performance Applications

Ideal for applications that require frequent and efficient DOM updates.

Reusable Components

Perfect for creating component libraries that can be used in any framework or application.

Looking to the Future

Esor is constantly evolving, but maintains its core principles:

• Keep it simple
• Prioritize performance
• Adhere to web standards
• Improve the developer experience

The vision is clear: to provide a tool that allows developers to build modern and efficient web interfaces, without the unnecessary complexity of heavier solutions.

Conclusion

Esor is not intended to replace established frameworks, but to offer a lightweight and efficient alternative for projects that value simplicity, performance and web standards. It is the result of a desire to simplify modern web development without sacrificing the capabilities developers need.