Papaya.js

Framework frontend reactivo, simple y sin build tools.

1. Introducción técnica

Papaya.js es un micro-framework frontend diseñado para desarrolladores que buscan comprender y aplicar los fundamentos de la reactividad y el renderizado declarativo sin depender de herramientas de compilación o entornos complejos.

Papaya combina simplicidad estructural, flujo de datos unidireccional y composición de componentes a través de módulos ES nativos, brindando una base sólida para el desarrollo de interfaces modernas con JavaScript puro.

Su propósito no es competir con React, Vue o Svelte, sino ofrecer una alternativa educativa y funcional que demuestre cómo funcionan internamente los frameworks modernos.

2. Características clave

• Reactividad minimalista basada en Proxy y watchers.
• Renderizado declarativo mediante templates tagged (`html``...```).
• Montaje automático con etiquetas <component src="...">.
• Router nativo con soporte para rutas dinámicas (/user/:id).
• Ciclo de vida (onMount, onDestroy) integrado en el núcleo.
• Arquitectura modular (runtime, template, router, core).
• Sin dependencias, sin compiladores, sin configuraciones.
• Tamaño total: ~4KB minificado.

3. Instalación y uso rápido

Opción 1 — CDN o local

<script type="module">
  import Papaya from "./dist/papaya.min.js";
  Papaya.mount();
</script>

Opción 2 — NPM

npm install @usercr1dev/papayajs

import Papaya from "@usercr1dev/papayajs";
Papaya.mount();

Estructura base

papaya/
├─ dist/
│  └─ papaya.min.js
├─ components/
│  └─ Welcome.js
├─ index.html
└─ main.js

4. Arquitectura conceptual

Papaya.js se compone de cuatro módulos principales:

| Módulo | Descripción | |--------|--------------| | runtime.js | Implementa el sistema reactivo (basado en Proxy y watch). | | template.js | Convierte templates HTML en fragmentos reactivos con actualización automática. | | router.js | Enrutador declarativo y ligero basado en el history API. | | papaya.js (core) | Punto de entrada público; expone la API global y gestiona el montaje automático de componentes. |

5. Principios de diseño

5.1 Unidirectional Data Flow

Papaya sigue un flujo de datos de una sola dirección. Las vistas derivan de un estado reactivo, y cualquier cambio en ese estado provoca una actualización controlada del DOM.

5.2 Declarative Rendering

El renderizado se realiza con plantillas declarativas (`html``...```) que vinculan datos reactivos sin manipulación directa del DOM.

5.3 Minimal Abstraction Layers

Papaya evita capas innecesarias entre el código del desarrollador y el DOM, permitiendo comprender el flujo completo de datos y renderizado.

6. Ejemplo práctico

// components/Welcome.js
export default function Welcome() {
  const el = document.createElement("div");
  el.innerHTML = `
    <h1>Papaya.js</h1>
    <p>Framework frontend simple, reactivo y sin build tools.</p>
  `;
  return el;
}

<component src="./components/Welcome.js"></component>
<script type="module">
  import Papaya from "./dist/papaya.min.js";
  Papaya.mount();
</script>

7. Comparativa técnica (Papaya vs React)

| Concepto | Papaya.js | React | |-----------|------------|--------| | Lenguaje | JavaScript puro (ESM) | JSX + Babel | | Reactividad | Proxy nativo + watchers | Virtual DOM + diffing | | Tamaño | ~4KB | ~100KB | | Dependencias | Ninguna | Varias (React, ReactDOM) | | Build Tool | No requerido | Webpack / Vite | | Filosofía | Simplicidad y comprensión | Escalabilidad y ecosistema |

8. Filosofía Papaya.js

“Hazlo simple, hazlo entendible, hazlo Papayuca.”

Papaya.js promueve la comprensión sobre la abstracción. Cada línea de su core busca mostrar cómo un framework moderno puede construirse de forma transparente y didáctica, sin ocultar el funcionamiento interno.

9. Roadmap Técnico

| Versión | Estado | Objetivos | |----------|----------|------------| | 0.2.0 | ✅ Actual | Núcleo estable (reactividad, router, templates). | | 0.3.0 | 🚧 En desarrollo | Hooks, efectos, tipado, dev-server. | | 0.4.0 | 🧠 Planeado | SSR básico, compatibilidad TypeScript, CLI “papaya dev”. |

10. Licencia y autoría

MIT License © 2025 — Desarrollado por @userCr1dev

Repositorio oficial: github.com/userCr1dev/papaya

English Version

Papaya.js

Reactive frontend framework built with pure JavaScript — no build tools, no dependencies.

Overview

Papaya.js is a micro reactive framework for developers who want to understand modern frontend architecture without abstraction layers or build systems. It focuses on clarity, simplicity, and educational value while remaining fully functional for real projects.

Core Concepts

• Reactive state via native Proxies.
• Declarative DOM rendering via tagged templates.
• Auto-mounting with <component src="...">.
• Built-in router and lifecycle hooks.
• Lightweight core (~4KB).

Architecture

Papaya consists of:

• runtime.js: reactive core and dependency tracking.
• template.js: HTML templates with reactive bindings.
• router.js: client-side navigation with dynamic params.
• papaya.js: public API and component auto-loader.

Design Principles

• Unidirectional Data Flow
• Declarative Rendering
• Minimal Abstraction Layers

Example

<component src="./components/Welcome.js"></component>
<script type="module">
  import Papaya from "./dist/papaya.min.js";
  Papaya.mount();
</script>

Philosophy

“Keep it simple, keep it clear.”
Papaya.js demonstrates how reactivity and declarative UIs can exist without complexity — making it an ideal learning and prototyping framework.

License

MIT © 2025 — Developed by @userCr1dev